chore: 🤖 remove leaked radix ui types

.changeset/sweet-camels-itch.md

@@ -0,0 +1,32 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+Introduces click-ui's own `DialogProps` and `DialogTriggerProps` types, replacing direct Radix UI type re-exports. This decouples the public API from internal implementation details.
+
+**What's new:**
+- `DialogProps`, `DialogTriggerProps` - click-ui's own types with the same API you're used to
+- `FlyoutContentProps`, `FlyoutTriggerProps` - for advanced use cases (e.g., creating typed wrapper components)
+
+**Example**
+
+```tsx
+import { Flyout, FlyoutContentProps, FlyoutTriggerProps } from '@clickhouse/click-ui';
+
+const MyTrigger = (props: FlyoutTriggerProps) => <Flyout.Trigger {...props} />;
+const MyContent = (props: FlyoutContentProps) => <Flyout.Content {...props} />;
+```
+
+**How to migrate?**
+
+For most users, no changes needed! `DialogProps` works exactly as before.
+
+If you were importing Radix types directly from click-ui (`HoverCardProps`, `PopoverProps`, `ContextMenuProps`), import from Radix instead:
+
+```tsx
+// Before
+import { HoverCardProps } from '@clickhouse/click-ui';
+
+// After
+import { HoverCardProps } from '@radix-ui/react-hover-card';
+```

src/components/Dialog/Dialog.tsx

@@ -4,9 +4,9 @@ import { Button, ButtonProps } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Spacer } from '@/components/Spacer';
 import { CrossButton } from '@/components/Common';
-import { DialogContentProps } from './Dialog.types';
+import { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';
 
-export const Dialog = ({ children, ...props }: RadixDialog.DialogProps) => {
+export const Dialog = ({ children, ...props }: DialogProps) => {
   return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;
 };
 
@@ -18,11 +18,7 @@ const Trigger = styled(RadixDialog.Trigger)`
   cursor: pointer;
 `;
 
-const DialogTrigger = ({
-  children,
-  asChild,
-  ...props
-}: RadixDialog.DialogTriggerProps) => {
+const DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {
   if (asChild) {
     // Pass all props to RadixDialog.Trigger, no styled wrapper
     return (

src/components/Dialog/Dialog.types.ts

@@ -1,6 +1,19 @@
 import { ReactNode } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 
+export interface DialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  children: ReactNode;
+}
+
+export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
+  children: ReactNode;
+  asChild?: boolean;
+}
+
 export interface DialogContentProps extends RadixDialog.DialogContentProps {
   children: ReactNode;
   showClose?: boolean;

src/components/Dialog/index.ts

@@ -1,2 +1,2 @@
 export { Dialog } from './Dialog';
-export type { DialogContentProps } from './Dialog.types';
+export type { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';

src/components/Flyout/Flyout.tsx

@@ -8,7 +8,6 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  DialogTriggerProps,
 } from '@radix-ui/react-dialog';
 import { Button } from '@/components/Button';
 import type { ButtonProps } from '@/components/Button';
@@ -23,13 +22,14 @@ import { CrossButton } from '@/components/Common';
 import { keyframes } from 'styled-components';
 import type {
   FlyoutProps,
-  FlyoutSizeType,
-  Strategy,
-  FlyoutType,
-  DialogContentAlignmentType,
-  DialogContentProps,
+  FlyoutTriggerProps,
+  FlyoutContentProps,
   FlyoutHeaderProps,
   FlyoutFooterProps,
+  FlyoutSizeType,
+  FlyoutStrategy,
+  FlyoutType,
+  FlyoutAlignmentType,
 } from './Flyout.types';
 
 export const Flyout = ({ modal = false, ...props }: FlyoutProps) => {
@@ -41,13 +41,10 @@ export const Flyout = ({ modal = false, ...props }: FlyoutProps) => {
   );
 };
 
-const Trigger = ({ children, ...props }: DialogTriggerProps) => {
+const Trigger = ({ children, ...props }: FlyoutTriggerProps) => {
   return (
-    <DialogTrigger
-      asChild
-      {...props}
-    >
-      <div>{children}</div>
+    <DialogTrigger asChild>
+      <div {...props}>{children}</div>
     </DialogTrigger>
   );
 };
@@ -63,9 +60,9 @@ const animationWidth = () =>
 const FlyoutContent = styled(DialogContent)<{
   $size?: FlyoutSizeType;
   $type?: FlyoutType;
-  $strategy: Strategy;
+  $strategy: FlyoutStrategy;
   $width?: string;
-  $align: DialogContentAlignmentType;
+  $align: FlyoutAlignmentType;
 }>`
   display: flex;
   flex-direction: column;
@@ -138,7 +135,7 @@ const Content = ({
   align = 'end',
   onInteractOutside,
   ...props
-}: DialogContentProps) => {
+}: FlyoutContentProps) => {
   return (
     <DialogPortal container={container}>
       {showOverlay && <DialogOverlay className="DialogOverlay" />}

src/components/Flyout/Flyout.types.ts

@@ -1,33 +1,33 @@
-import {
-  DialogProps,
-  DialogContentProps as RadixDialogContentProps,
-} from '@radix-ui/react-dialog';
+import { HTMLAttributes, ReactNode } from 'react';
 import type { ContainerProps } from '@/components/Container';
+import type { DialogProps } from '@/components/Dialog';
 
 export type FlyoutProps = DialogProps;
 
+export interface FlyoutTriggerProps extends HTMLAttributes<HTMLDivElement> {
+  /** The content of the trigger */
+  children: ReactNode;
+}
+
 export type FlyoutSizeType = 'default' | 'narrow' | 'wide' | 'widest';
-export type Strategy = 'relative' | 'absolute' | 'fixed';
+export type FlyoutStrategy = 'relative' | 'absolute' | 'fixed';
 export type FlyoutType = 'default' | 'inline';
-export type DialogContentAlignmentType = 'start' | 'end';
+export type FlyoutAlignmentType = 'start' | 'end';
 
-export interface DialogContentProps extends RadixDialogContentProps {
-  /** Container element to portal the flyout into */
+export interface FlyoutContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
   container?: HTMLElement | null;
-  /** Whether to show the overlay backdrop */
   showOverlay?: boolean;
-  /** The size variant of the flyout */
   size?: FlyoutSizeType;
-  /** The type of flyout styling */
   type?: FlyoutType;
-  /** CSS position strategy */
-  strategy?: Strategy;
-  /** Whether clicking outside closes the flyout */
+  strategy?: FlyoutStrategy;
   closeOnInteractOutside?: boolean;
-  /** Custom width for the flyout */
   width?: string;
-  /** Alignment of the flyout (start = left, end = right) */
-  align?: DialogContentAlignmentType;
+  align?: FlyoutAlignmentType;
+  onInteractOutside?: (event: CustomEvent) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onPointerDownOutside?: (event: CustomEvent) => void;
+  onFocusOutside?: (event: CustomEvent) => void;
 }
 
 interface TitleHeaderProps extends Omit<

src/components/Flyout/index.ts

@@ -1,7 +1,12 @@
 export { Flyout } from './Flyout';
 export type {
   FlyoutProps,
-  DialogContentProps,
+  FlyoutTriggerProps,
+  FlyoutContentProps,
   FlyoutHeaderProps,
   FlyoutFooterProps,
+  FlyoutSizeType,
+  FlyoutStrategy,
+  FlyoutType,
+  FlyoutAlignmentType,
 } from './Flyout.types';

src/index.ts

@@ -112,7 +112,11 @@
 
 // Dialog
 export { Dialog } from './components/Dialog';
-export type { DialogContentProps } from './components/Dialog';
+export type {
+  DialogContentProps,
+  DialogProps,
+  DialogTriggerProps,
+} from './components/Dialog';
 
 // Dropdown
 export { Dropdown } from './components/Dropdown';
@@ -128,9 +132,15 @@
 // Flyout
 export { Flyout } from './components/Flyout';
 export type {
+  FlyoutAlignmentType,
+  FlyoutContentProps,
   FlyoutFooterProps,
   FlyoutHeaderProps,
   FlyoutProps,
+  FlyoutSizeType,
+  FlyoutStrategy,
+  FlyoutTriggerProps,
+  FlyoutType,
 } from './components/Flyout';
 
 // Form Container
@@ -215,7 +225,7 @@
 export { Table } from './components/Table';
 export type {
   TableColumnConfigProps,
   TableHeaderType,
   TableProps,
   TableRowType,
 } from './components/Table';
@@ -286,16 +296,39 @@
 
 export type { HorizontalDirection, Orientation, States, AssetSize } from './types';
 
-// TODO: These should NOT be exposed
-// prefer click ui props instead
-
 // ================================================
-// Radix UI Types
+// Deprecated Radix UI Types
+// These re-export third-party types directly. Use click-ui's own types instead.
 // ================================================
 
+/**
+ * @deprecated Import from '@radix-ui/react-context-menu' directly if needed.
+ * Consider using click-ui's ContextMenu component API instead.
+ */
 export type { ContextMenuProps } from '@radix-ui/react-context-menu';
-export type { DialogProps, DialogTriggerProps } from '@radix-ui/react-dialog';
+
+/**
+ * @deprecated Use click-ui's DialogProps from './components/Dialog' instead.
+ * This re-export will be removed in a future version.
+ */
+export type { DialogProps as RadixDialogProps } from '@radix-ui/react-dialog';
+
+/**
+ * @deprecated Use click-ui's DialogTriggerProps from './components/Dialog' instead.
+ * This re-export will be removed in a future version.
+ */
+export type { DialogTriggerProps as RadixDialogTriggerProps } from '@radix-ui/react-dialog';
+
+/**
+ * @deprecated Import from '@radix-ui/react-hover-card' directly if needed.
+ * Consider using click-ui's HoverCard component API instead.
+ */
 export type { HoverCardProps } from '@radix-ui/react-hover-card';
+
+/**
+ * @deprecated Import from '@radix-ui/react-popover' directly if needed.
+ * Consider using click-ui's Popover component API instead.
+ */
 export type { PopoverProps } from '@radix-ui/react-popover';
 
 // ================================================