@ai-matrx/design-system 0.5.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  import * as React from 'react';
4
4
  import React__default, { ReactNode, ComponentType } from 'react';
5
+ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
5
6
  import * as AvatarPrimitive from '@radix-ui/react-avatar';
6
7
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
7
8
  import { ClassValue } from 'clsx';
@@ -18,6 +19,15 @@ import * as SelectPrimitive from '@radix-ui/react-select';
18
19
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
19
20
  import * as SwitchPrimitives from '@radix-ui/react-switch';
20
21
  import * as TabsPrimitive from '@radix-ui/react-tabs';
22
+ import * as vaul from 'vaul';
23
+ import { Drawer as Drawer$1 } from 'vaul';
24
+ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
25
+ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
26
+ import { Separator as Separator$1, Panel, Group } from 'react-resizable-panels';
27
+ import * as SliderPrimitive from '@radix-ui/react-slider';
28
+ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
29
+ import * as TogglePrimitive from '@radix-ui/react-toggle';
30
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
21
31
 
22
32
  declare const badgeVariants: (props?: ({
23
33
  variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "error" | "neutral" | null | undefined;
@@ -65,9 +75,92 @@ interface BottomSheetFooterProps {
65
75
  }
66
76
  declare function BottomSheetFooter({ children, className, }: BottomSheetFooterProps): React.JSX.Element;
67
77
 
78
+ declare const alertVariants: (props?: ({
79
+ variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
80
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
81
+ interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
82
+ }
83
+ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
84
+ declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
85
+ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
86
+
87
+ /**
88
+ * AlertDialog — the confirm/destroy surface (78 host import sites).
89
+ *
90
+ * Ported from matrx-frontend `components/ui/alert-dialog.tsx`, which was the
91
+ * only variant in the fleet that had been hardened. Its rulings, kept verbatim:
92
+ *
93
+ * 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
94
+ * wrapper once carried ("Radix ids differ between SSR and client") was
95
+ * false, and it deleted always-visible Triggers (delete buttons, mostly)
96
+ * from SSR and the first client paint.
97
+ *
98
+ * 2. AN UNDESCRIBED ALERT DIALOG STILL DESCRIBES ITSELF. A confirm dialog with
99
+ * no `AlertDialogDescription` gets a screen-reader-only one rather than a
100
+ * console warning — the surface where a blind user is about to destroy
101
+ * something is the wrong place to ship an accessibility gap.
102
+ *
103
+ * ADDED HERE, from the same doctrine `Dialog` already carries and this
104
+ * component demonstrably needed:
105
+ *
106
+ * 3. IT IS CLAMPED TO THE VIEWPORT AND SCROLLS INSIDE ITSELF
107
+ * (`max-h-[85dvh] overflow-y-auto`). The host copy was NOT — an alert
108
+ * dialog whose body listed what is about to be deleted pushed Cancel and
109
+ * Continue below the fold on a short viewport, and the only way out was a
110
+ * backdrop click. On an ALERT dialog Radix does not dismiss on backdrop
111
+ * click, so the surface was a genuine dead end. Recorded in CHANGELOG as a
112
+ * real defect fixed in the port, not "preserved".
113
+ *
114
+ * 4. THE ACTIONS ARE 44px TALL ON COARSE POINTERS. `AlertDialogAction` and
115
+ * `AlertDialogCancel` inherit the package Button's own target rules through
116
+ * `buttonVariants`; the footer keeps them safe-area padded on mobile.
117
+ *
118
+ * SEAM INVERSION. The host resolved its portal target through
119
+ * `usePopoutContainer` (its window-panel popout body); here that is the
120
+ * package's `PortalContainerProvider`, with an explicit `container` prop still
121
+ * winning.
122
+ */
123
+
124
+ declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
125
+ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
126
+ /**
127
+ * Portal-seam-aware AlertDialogPortal. Explicit `container` wins; with none,
128
+ * the injected container; with neither, Radix's `document.body`.
129
+ */
130
+ declare const AlertDialogPortal: {
131
+ ({ container, ...props }: Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>, "container"> & {
132
+ /** `undefined` → use the injected container; `null` → force document.body. */
133
+ container?: HTMLElement | null | undefined;
134
+ }): React.JSX.Element;
135
+ displayName: string;
136
+ };
137
+ declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
138
+ /**
139
+ * Unstyled, non-portalling Content for custom layouts. AlertDialog is always
140
+ * modal, so `aria-modal` is stated rather than derived.
141
+ */
142
+ declare const AlertDialogContentPrimitive: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
143
+ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
144
+ interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
145
+ /** Explicit portal target; wins over the injected container. */
146
+ container?: HTMLElement | null;
147
+ }
148
+ declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
149
+ declare const AlertDialogHeader: {
150
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
151
+ displayName: string;
152
+ };
153
+ declare const AlertDialogFooter: {
154
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
155
+ displayName: string;
156
+ };
157
+ declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
158
+ declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
159
+ declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
160
+
68
161
  declare const buttonVariants: (props?: ({
69
- variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
70
- size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
162
+ variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "link" | "primary" | "ghost" | "subtle" | null | undefined;
163
+ size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "icon" | "icon-sm" | "roundIcon" | null | undefined;
71
164
  } & class_variance_authority_types.ClassProp) | undefined) => string;
72
165
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
73
166
  asChild?: boolean;
@@ -212,7 +305,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
212
305
  ref?: React.Ref<HTMLInputElement>;
213
306
  } & {
214
307
  asChild?: boolean;
215
- }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
308
+ }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
216
309
  value?: string;
217
310
  onValueChange?: (search: string) => void;
218
311
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -936,7 +1029,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialog
936
1029
  declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
937
1030
  declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
938
1031
  declare const sheetVariants: (props?: ({
939
- side?: "center" | "bottom" | "left" | "right" | "top" | null | undefined;
1032
+ side?: "center" | "top" | "bottom" | "left" | "right" | null | undefined;
940
1033
  } & class_variance_authority_types.ClassProp) | undefined) => string;
941
1034
  interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
942
1035
  hideCloseButton?: boolean;
@@ -1176,4 +1269,287 @@ interface UseScrollFadeResult {
1176
1269
  }
1177
1270
  declare function useScrollFade(): UseScrollFadeResult;
1178
1271
 
1179
- export { Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadixDialogModalProvider, type RadixDialogModalProviderProps, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, type UseScrollFadeResult, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, useCardSize, useDialogContainer, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
1272
+ type DrawerDirection = "top" | "bottom" | "left" | "right";
1273
+ /** The direction of the nearest Drawer root. */
1274
+ declare const useDrawerDirection: () => DrawerDirection;
1275
+ /**
1276
+ * `vaul`'s Root props are a DISCRIMINATED UNION (the snap-point branch adds
1277
+ * `fadeFromIndex`), so this type intersects the union rather than `Omit`-ing
1278
+ * from it — flattening the union collapses the discriminant and makes every
1279
+ * snap-point drawer a type error.
1280
+ *
1281
+ * Vaul does not forward `modal={false}` to its underlying Radix root, so a
1282
+ * "non-modal" drawer would claim ARIA semantics it does not have; the type
1283
+ * refuses the value rather than shipping the lie.
1284
+ */
1285
+ type DrawerProps = React.ComponentProps<typeof Drawer$1.Root> & {
1286
+ modal?: true;
1287
+ direction?: DrawerDirection;
1288
+ };
1289
+ declare const Drawer: {
1290
+ ({ children, shouldScaleBackground, ...props }: DrawerProps): React.JSX.Element;
1291
+ displayName: string;
1292
+ };
1293
+ declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
1294
+ declare const DrawerPortal: typeof vaul.Portal;
1295
+ declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
1296
+ declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
1297
+ declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
1298
+ /**
1299
+ * Unstyled, non-portalling Content for custom Drawer layouts. It derives
1300
+ * explicit modal semantics while vaul retains focus/background behavior.
1301
+ */
1302
+ declare const DrawerContentPrimitive: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
1303
+ /**
1304
+ * `adaptive` (default) sizes to content up to 90dvh — right for one short
1305
+ * list. `full` is ONE fixed height that never changes as content changes: use
1306
+ * it for any drawer whose body varies (tabs, search results, multi-level
1307
+ * navigation), because an adaptive drawer there resizes under the user's thumb
1308
+ * on every keystroke, which reads as the panel jumping.
1309
+ */
1310
+ type DrawerSize = "adaptive" | "full";
1311
+ interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof Drawer$1.Content> {
1312
+ /** Height/width posture. Default `adaptive`. */
1313
+ size?: DrawerSize;
1314
+ /** Render the drag-handle pill. Default: only for `top`/`bottom` drawers. */
1315
+ showHandle?: boolean;
1316
+ }
1317
+ declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
1318
+ declare const DrawerHeader: {
1319
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
1320
+ displayName: string;
1321
+ };
1322
+ /**
1323
+ * The scroll shard. `flex-1 min-h-0` is the pair that actually bounds a scroll
1324
+ * area inside a flex column — `flex-1` alone leaves `min-height: auto`, and the
1325
+ * body grows past the drawer instead of scrolling inside it.
1326
+ */
1327
+ declare const DrawerBody: {
1328
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
1329
+ displayName: string;
1330
+ };
1331
+ declare const DrawerFooter: {
1332
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
1333
+ displayName: string;
1334
+ };
1335
+ declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
1336
+
1337
+ /**
1338
+ * HoverCard — the rich hover surface (16 host import sites).
1339
+ *
1340
+ * Ported from matrx-frontend `components/ui/hover-card.tsx`, including its
1341
+ * recorded ruling:
1342
+ *
1343
+ * THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate the
1344
+ * host wrapper once carried ("Radix generates dynamic aria-controls ids that
1345
+ * differ between SSR and client") was doubly false here:
1346
+ * `@radix-ui/react-hover-card` generates no ids of its own at all, and Radix
1347
+ * ids generally come from React's SSR-stable `useId`. The gate was actively
1348
+ * harmful — a Trigger wraps ALWAYS-VISIBLE content, so `return null` deleted
1349
+ * that subtree from SSR and the first client paint.
1350
+ *
1351
+ * SEAM INVERSION (new here). The host copy portalled nowhere — it rendered
1352
+ * `Content` inline, so a hover card inside an overflow-hidden ancestor was
1353
+ * clipped, and one inside a popped-out window-panel could not exist. It now
1354
+ * portals through the package's `PortalContainerProvider` seam like every
1355
+ * other floating surface in this package, with an explicit `container` prop
1356
+ * winning and `document.body` as the fallback. Behaviour for a card that was
1357
+ * never clipped is unchanged.
1358
+ *
1359
+ * A HOVER CARD IS NOT A TOOLTIP AND NOT A MENU: it is hover-only and not
1360
+ * focusable, so nothing inside it may be the ONLY way to reach an action —
1361
+ * touch and keyboard users never open it. Put the action somewhere else too.
1362
+ */
1363
+
1364
+ declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
1365
+ declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
1366
+ interface HoverCardContentProps extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
1367
+ /** Explicit portal target; wins over the injected container. */
1368
+ container?: HTMLElement | null;
1369
+ }
1370
+ declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
1371
+
1372
+ /**
1373
+ * RadioGroup — single-choice selection (30 host import sites).
1374
+ *
1375
+ * Ported from matrx-frontend `components/ui/radio-group.tsx`, with the same
1376
+ * two corrections the rest of this wave carries:
1377
+ *
1378
+ * 1. DENSITY IS A PROP (C18) — `size="sm|md|lg"` on the ROOT, read from
1379
+ * context by every item, so a group cannot mix control sizes. Matches the
1380
+ * `Checkbox` / `Switch` / `Card` shape already shipped in 0.5.0.
1381
+ *
1382
+ * 2. THE TARGET IS 44px ON COARSE POINTERS. A 16px radio is a mouse control;
1383
+ * an invisible pseudo-target expands the hit area without changing layout,
1384
+ * so a settings list works with a thumb. (A label wired via `htmlFor` also
1385
+ * extends the target — that stays the host's composition choice; this makes
1386
+ * the control itself usable on its own.)
1387
+ *
1388
+ * The indicator is a filled dot rather than Radix's default icon slot, which
1389
+ * is what every host variant drew.
1390
+ */
1391
+
1392
+ type RadioGroupSize = "sm" | "md" | "lg";
1393
+ interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
1394
+ /** Control scale for every item in the group. Default `md`. */
1395
+ size?: RadioGroupSize;
1396
+ }
1397
+ declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
1398
+ interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
1399
+ /** Override the group's scale for one item. */
1400
+ size?: RadioGroupSize;
1401
+ }
1402
+ declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
1403
+
1404
+ /**
1405
+ * Resizable — the split-pane family, on react-resizable-panels **v4**.
1406
+ *
1407
+ * TWO FORKS COLLAPSE INTO ONE COMPONENT. matrx-frontend shipped
1408
+ * `components/ui/resizable.tsx` (38 import sites, one fixed handle width) AND
1409
+ * `components/ui/matrx/resizable.tsx` (6 sites, an eight-step `size` scale).
1410
+ * They disagreed about exactly one thing — how thick the handle is — which is
1411
+ * the C18 density-as-a-fork pattern this package exists to end. `size` is a
1412
+ * prop here; both forks die.
1413
+ *
1414
+ * v4 IS NOT v1/v2, and the differences are the reason a wrapper exists at all:
1415
+ * - the group prop is `orientation`, not `direction`;
1416
+ * - `data-panel-group-direction` is gone — the separator states
1417
+ * `aria-orientation`, and it is `vertical` in a HORIZONTAL group (it is the
1418
+ * separator's own axis, not the group's), which is why every orientation
1419
+ * selector below reads the way it does;
1420
+ * - `Group` sets `height:100%/width:100%/overflow:hidden` internally;
1421
+ * - `Panel` renders an outer flex-sizing div wrapping an inner
1422
+ * `overflow:auto` div that receives `className`/`style` — to make a panel
1423
+ * clip instead of scroll, pass `style={{ overflow: "hidden", height: "100%" }}`;
1424
+ * - numeric size props are PIXELS; percentages are strings (`"30%"`).
1425
+ *
1426
+ * THE DRAG OUTLINE BUG, kept fixed. The library sets `tabIndex=0` on the
1427
+ * separator, so a mouse drag FOCUSES it and the browser's default outline
1428
+ * flashes — which rendered as a near-white bar in dark mode. `focus-visible:`
1429
+ * does not suppress it (that is keyboard-only); `focus:outline-none` does, and
1430
+ * the keyboard ring is restored explicitly on `focus-visible`.
1431
+ *
1432
+ * MOUSE TOLERANCE IS AN INVISIBLE TARGET. A 2px line is not grabbable; an
1433
+ * `::after` overlay widens the hit area without widening the rule, and goes to
1434
+ * 44px on coarse pointers.
1435
+ *
1436
+ * `react-resizable-panels` is an ordinary dependency, not a peer (C23): the
1437
+ * panel geometry IS this component's product.
1438
+ */
1439
+
1440
+ type ResizableHandleSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
1441
+ declare const ResizablePanelGroup: {
1442
+ ({ className, ...props }: React.ComponentProps<typeof Group>): React.JSX.Element;
1443
+ displayName: string;
1444
+ };
1445
+ declare const ResizablePanel: typeof Panel;
1446
+ interface ResizableHandleProps extends React.ComponentProps<typeof Separator$1> {
1447
+ /** Render the centered grip. */
1448
+ withHandle?: boolean;
1449
+ /** Separator thickness. Default `sm` — the frontend's original 2px line. */
1450
+ size?: ResizableHandleSize;
1451
+ }
1452
+ declare const ResizableHandle: {
1453
+ ({ withHandle, size, className, ...props }: ResizableHandleProps): React.JSX.Element;
1454
+ displayName: string;
1455
+ };
1456
+
1457
+ /**
1458
+ * Slider — the range control (46 host import sites).
1459
+ *
1460
+ * Ported from matrx-frontend `components/ui/slider.tsx`. Two things the host
1461
+ * copy could not do, both fixed here rather than in a fork:
1462
+ *
1463
+ * 1. A 16px THUMB IS NOT A TOUCH TARGET. The stock thumb is `h-4 w-4`, well
1464
+ * under the 44px Apple HIG minimum, so a slider that worked with a mouse
1465
+ * was a coin-flip with a thumb. The visible thumb keeps its size (`size`
1466
+ * controls it), and an invisible `::after` pseudo-target expands the hit
1467
+ * area to 44px on coarse pointers without changing the layout — the same
1468
+ * trick `ResizableHandle` uses for mouse tolerance.
1469
+ *
1470
+ * 2. DENSITY IS A PROP, NOT A FORK (C18). `size="sm|md|lg"` picks the track
1471
+ * height and thumb diameter together, so a dense admin panel and a
1472
+ * touch-first settings screen use ONE component.
1473
+ *
1474
+ * Multi-thumb ranges work: a `Thumb` is rendered per value, which is what
1475
+ * Radix requires and what the host copy (a single hardcoded Thumb) got wrong
1476
+ * for any `value` array longer than one.
1477
+ */
1478
+
1479
+ type SliderSize = "sm" | "md" | "lg";
1480
+ interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
1481
+ /** Track + thumb scale. Default `md`. */
1482
+ size?: SliderSize;
1483
+ }
1484
+ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
1485
+
1486
+ declare const toggleVariants: (props?: ({
1487
+ variant?: "default" | "outline" | null | undefined;
1488
+ size?: "default" | "sm" | "lg" | null | undefined;
1489
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1490
+ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
1491
+ }
1492
+ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
1493
+ type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>;
1494
+ declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
1495
+ interface ToggleGroupItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, VariantProps<typeof toggleVariants> {
1496
+ }
1497
+ declare const ToggleGroupItem: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
1498
+
1499
+ /**
1500
+ * Tooltip — the ONE tooltip in the fleet.
1501
+ *
1502
+ * THE COLLAPSE (0.6.0). Two implementations existed: matrx-frontend's
1503
+ * `components/ui/tooltip.tsx` (182 import sites) and `@ai-matrx/tap-target`'s
1504
+ * `src/tooltip.tsx` — the latter an explicit inlined PORT of the former,
1505
+ * carrying a header that said so. tap-target shipped it only because its ~60
1506
+ * tap buttons need a tooltip and no shared package owned one; four repos then
1507
+ * adopted `TooltipProvider` from tap-target. That made tap-target — a
1508
+ * button-geometry package — the accidental owner of a design-system primitive,
1509
+ * with a second copy living in the biggest host.
1510
+ *
1511
+ * A tooltip is a design-system surface, so it lives here. tap-target now takes
1512
+ * `@ai-matrx/design-system` as an ordinary sibling dependency and imports this
1513
+ * file; its own copy is deleted, and its re-export removed. The DAG already
1514
+ * ordered design-system before tap-target, so no cycle is introduced.
1515
+ *
1516
+ * BEHAVIOUR is matrx-frontend's, verbatim, including the ruling both copies
1517
+ * carried in prose:
1518
+ *
1519
+ * 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate the
1520
+ * host wrapper once carried ("Radix generates dynamic aria-controls ids that
1521
+ * differ between SSR and client") was false: Radix ids come from React's
1522
+ * SSR-stable `useId`. It was actively harmful — a Trigger wraps
1523
+ * ALWAYS-VISIBLE content, so `return null` deleted that subtree from SSR and
1524
+ * the first client paint.
1525
+ *
1526
+ * 2. THE SURFACE IS NEUTRAL, NOT BRANDED. Popover tokens, not `bg-primary`:
1527
+ * rich tooltip content using `text-muted-foreground` was illegible on a
1528
+ * brand-coloured background in one theme or the other.
1529
+ *
1530
+ * SEAM INVERSION. The host resolved nested portal targets through
1531
+ * `useNestedPortalContainer` (an app hook wired to its dialog + window-panel
1532
+ * systems); tap-target's port dropped that seam entirely and always portalled
1533
+ * to `document.body` — which is why a tooltip inside a popped-out panel landed
1534
+ * in the wrong window. Here it is the package's `PortalContainerProvider`
1535
+ * seam: an explicit `container` prop wins, then the injected container, then
1536
+ * `document.body`. Both prior behaviours are reachable; neither is forked.
1537
+ */
1538
+
1539
+ /**
1540
+ * Mount once near the app root. Every tooltip in the tree shares its
1541
+ * `delayDuration` / `skipDelayDuration` timing.
1542
+ */
1543
+ declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
1544
+ declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
1545
+ declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
1546
+ interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
1547
+ /**
1548
+ * Explicit portal target; wins over the injected `PortalContainerProvider`
1549
+ * value. Pass `null` to force `document.body`.
1550
+ */
1551
+ container?: HTMLElement | null;
1552
+ }
1553
+ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
1554
+
1555
+ export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Checkbox, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, Dialog, DialogClose, DialogContent, DialogContentPrimitive, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, type SliderProps, type SliderSize, Switch, type SwitchProps, type SwitchSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseScrollFadeResult, alertVariants, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, toggleVariants, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };