@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/CHANGELOG.md +148 -1
- package/README.md +8 -4
- package/dist/index.cjs +1136 -415
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +381 -5
- package/dist/index.d.ts +381 -5
- package/dist/index.js +1136 -415
- package/dist/index.js.map +1 -1
- package/dist/styles.css +20 -0
- package/package.json +9 -1
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" | "
|
|
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" | "
|
|
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
|
-
|
|
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 };
|