@ai-matrx/design-system 0.4.2 → 0.5.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 +137 -1
- package/README.md +9 -1
- package/dist/index.cjs +1424 -191
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +545 -11
- package/dist/index.d.ts +545 -11
- package/dist/index.js +1442 -209
- package/dist/index.js.map +1 -1
- package/dist/styles.css +43 -0
- package/dist/tokens.css +10 -0
- package/package.json +18 -9
package/dist/index.d.cts
CHANGED
|
@@ -2,13 +2,22 @@ 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 AvatarPrimitive from '@radix-ui/react-avatar';
|
|
6
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
5
7
|
import { ClassValue } from 'clsx';
|
|
6
|
-
import * as
|
|
8
|
+
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
9
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
7
10
|
import { DialogProps } from '@radix-ui/react-dialog';
|
|
11
|
+
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
12
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
8
13
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
9
14
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
15
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
16
|
+
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
10
17
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
11
18
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
19
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
20
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
12
21
|
|
|
13
22
|
declare const badgeVariants: (props?: ({
|
|
14
23
|
variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | "error" | "neutral" | null | undefined;
|
|
@@ -65,8 +74,94 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
|
|
|
65
74
|
}
|
|
66
75
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
67
76
|
|
|
77
|
+
/**
|
|
78
|
+
* Avatar — Radix avatar with the package's token vocabulary.
|
|
79
|
+
*
|
|
80
|
+
* The forks differed only in the root's fixed size (matrx-frontend `h-10 w-10`,
|
|
81
|
+
* dashboard `h-9 w-9`) and in whether the fallback carried type styling. Both
|
|
82
|
+
* are settled here as props rather than copies: `size` picks the box, and the
|
|
83
|
+
* fallback always carries the muted type treatment (dashboard's version — a
|
|
84
|
+
* fallback renders initials, and unstyled initials inherit whatever the row
|
|
85
|
+
* was using, which is how the two hosts' avatars stopped matching).
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
type AvatarSize = "sm" | "md" | "lg";
|
|
89
|
+
interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
|
|
90
|
+
/** Box size. Default `lg` (the h-10 box matrx-frontend has always shipped). */
|
|
91
|
+
size?: AvatarSize;
|
|
92
|
+
}
|
|
93
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
94
|
+
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
95
|
+
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Card — the surface every host had already forked, four different ways.
|
|
99
|
+
*
|
|
100
|
+
* The census that motivated this file (2026-09-07): matrx-frontend padded its
|
|
101
|
+
* sections `p-2`, matrx-extend `p-4`, aidream/apps/dashboard `p-6`, and
|
|
102
|
+
* matrx-games ran a Base-UI-generation card of its own. The STRUCTURE was
|
|
103
|
+
* identical in all of them — a bordered, tokenised surface with header /
|
|
104
|
+
* title / description / content / footer slots. Only the density differed.
|
|
105
|
+
*
|
|
106
|
+
* So density is a PROP, not a fork. `size` is declared once on `<Card>` and
|
|
107
|
+
* every section reads it from context, which means a host cannot end up with a
|
|
108
|
+
* `p-6` header above a `p-2` body — the failure mode that made the forks drift
|
|
109
|
+
* in the first place. A host that wants its historical density binds the size
|
|
110
|
+
* once at its import site; nothing else moves.
|
|
111
|
+
*
|
|
112
|
+
* sm → p-2, rounded-xl, `shadow` (matrx-frontend's density)
|
|
113
|
+
* md → p-4, rounded-lg, `shadow-sm` (matrx-extend's density; the default)
|
|
114
|
+
* lg → p-6, rounded-lg, `shadow-sm` (dashboard's density)
|
|
115
|
+
*
|
|
116
|
+
* Colour is tokens only (`bg-card` / `text-card-foreground` / `border`), so a
|
|
117
|
+
* host re-themes cards by redefining tokens, never by editing this file.
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
type CardSize = "sm" | "md" | "lg";
|
|
121
|
+
/** The size the nearest enclosing `<Card>` declared. `md` outside one. */
|
|
122
|
+
declare function useCardSize(): CardSize;
|
|
123
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
124
|
+
/** Density for this card and every section inside it. Default `md`. */
|
|
125
|
+
size?: CardSize;
|
|
126
|
+
}
|
|
127
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
128
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
129
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
130
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
131
|
+
/**
|
|
132
|
+
* Trailing control slot for a header (a menu button, a status pill). Absent
|
|
133
|
+
* from every fork except matrx-games', which is why headers elsewhere grew
|
|
134
|
+
* one-off absolute wrappers. Positions itself against the header's row.
|
|
135
|
+
*/
|
|
136
|
+
declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
137
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
138
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* Checkbox — Radix checkbox, and the indeterminate ruling that came with it.
|
|
142
|
+
*
|
|
143
|
+
* RADIX RENDERS THE INDICATOR FOR BOTH `checked` AND `"indeterminate"`. The
|
|
144
|
+
* stock shadcn body puts a full check inside it either way, so a half-selected
|
|
145
|
+
* "select all" tells the user every row is selected — a screen stating
|
|
146
|
+
* something false. The two states get different glyphs here, always.
|
|
147
|
+
*
|
|
148
|
+
* `size` carries the two boxes the hosts had forked into: matrx-frontend's
|
|
149
|
+
* dense 14px control and the stock 16px one.
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
type CheckboxSize = "sm" | "md";
|
|
153
|
+
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
|
|
154
|
+
/** Box size. Default `sm` (the dense 14px control). */
|
|
155
|
+
size?: CheckboxSize;
|
|
156
|
+
}
|
|
157
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
158
|
+
|
|
68
159
|
declare function cn(...inputs: ClassValue[]): string;
|
|
69
160
|
|
|
161
|
+
declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
|
162
|
+
declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
163
|
+
declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
164
|
+
|
|
70
165
|
/**
|
|
71
166
|
* Command — ported verbatim from matrx-frontend `components/ui/command.tsx`.
|
|
72
167
|
*
|
|
@@ -86,7 +181,9 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
86
181
|
* `DialogPortal` becomes the package's `PortalContainerProvider` seam
|
|
87
182
|
* (plus an explicit `container` prop, which keeps top priority).
|
|
88
183
|
* - The host's `useIsMobile` (a plain matchMedia breakpoint hook, not
|
|
89
|
-
* host-shaped)
|
|
184
|
+
* host-shaped) became the package's own `./use-is-mobile`, with the same
|
|
185
|
+
* 768px breakpoint. It started life inlined here; `Dialog` needed the same
|
|
186
|
+
* answer, so it moved to a module both read rather than being copied.
|
|
90
187
|
*/
|
|
91
188
|
|
|
92
189
|
declare const Command: React.ForwardRefExoticComponent<Omit<{
|
|
@@ -171,6 +268,61 @@ declare const CommandShortcut: {
|
|
|
171
268
|
displayName: string;
|
|
172
269
|
};
|
|
173
270
|
|
|
271
|
+
/**
|
|
272
|
+
* ContextMenu — the right-click menu primitive.
|
|
273
|
+
*
|
|
274
|
+
* THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
|
|
275
|
+
* matrx-frontend wrapper once carried ("Radix generates dynamic aria-controls
|
|
276
|
+
* ids that differ between SSR and client") was false twice over: a CLOSED
|
|
277
|
+
* `ContextMenuTrigger` renders only `data-state` / `data-disabled` and emits
|
|
278
|
+
* no id at all, so there was never a mismatch to defend against. And the gate
|
|
279
|
+
* was actively harmful: the Trigger wraps ALWAYS-VISIBLE content, so `return
|
|
280
|
+
* null` deleted the wrapped subtree from the server render and the first
|
|
281
|
+
* client render — around a list row, that means the list paints EMPTY and
|
|
282
|
+
* fills in after hydration. Gating the Root would additionally orphan any
|
|
283
|
+
* Trigger rendered beneath it.
|
|
284
|
+
*
|
|
285
|
+
* That history is exactly why this belongs in the package: the same repo had
|
|
286
|
+
* already accumulated two copies of this wrapper, one gated and one not, with
|
|
287
|
+
* the CORRECT one sitting unused beside the defective one.
|
|
288
|
+
*
|
|
289
|
+
* This is the PRIMITIVE only. A host's actual right-click menu SYSTEM — the
|
|
290
|
+
* sections, the copy/export/convert actions, the surface registry — composes
|
|
291
|
+
* these parts and stays host-owned; nothing here knows what an action is.
|
|
292
|
+
*
|
|
293
|
+
* Portalling goes through the package's `usePortalContainer` seam so a menu
|
|
294
|
+
* raised inside a Dialog mounts inside it; an explicit `container` wins.
|
|
295
|
+
*/
|
|
296
|
+
|
|
297
|
+
declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
298
|
+
declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
299
|
+
declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
300
|
+
declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
|
301
|
+
declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
302
|
+
declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
303
|
+
declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
304
|
+
inset?: boolean;
|
|
305
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
306
|
+
declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
307
|
+
interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
|
|
308
|
+
/** Explicit portal target; wins over the injected container. */
|
|
309
|
+
container?: HTMLElement | null;
|
|
310
|
+
}
|
|
311
|
+
declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
313
|
+
inset?: boolean;
|
|
314
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
315
|
+
declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
316
|
+
declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
317
|
+
declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
318
|
+
inset?: boolean;
|
|
319
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
320
|
+
declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
321
|
+
declare const ContextMenuShortcut: {
|
|
322
|
+
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
323
|
+
displayName: string;
|
|
324
|
+
};
|
|
325
|
+
|
|
174
326
|
/** Structural stand-in for the host's `LucideIcon` in `footerActions`. */
|
|
175
327
|
type PickerIcon = ComponentType<{
|
|
176
328
|
className?: string;
|
|
@@ -274,6 +426,152 @@ interface CreatablePickerProps {
|
|
|
274
426
|
}
|
|
275
427
|
declare function CreatablePicker({ value, options, onSelect, placeholder, searchPlaceholder, noun, onCreate, onCreateRequiresMore, disabled, loading, className, triggerClassName, emptyLabel, ariaLabel, lockedNote, lockedAction, createExtra, manageAction, footerActions, renderSelected, size, }: CreatablePickerProps): React.JSX.Element;
|
|
276
428
|
|
|
429
|
+
/**
|
|
430
|
+
* Dialog — the modal surface, carrying every ruling the host forks paid for.
|
|
431
|
+
*
|
|
432
|
+
* Four hosts shipped four dialogs. Three were the stock shadcn body: a
|
|
433
|
+
* fixed-size centered card with `overflow: visible`. matrx-frontend's had been
|
|
434
|
+
* hardened, incident by incident, and those hardenings are the reason this
|
|
435
|
+
* component belongs in the package rather than being copied a fifth time:
|
|
436
|
+
*
|
|
437
|
+
* 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
|
|
438
|
+
* wrapper once carried ("Radix ids differ between SSR and client") was
|
|
439
|
+
* false — Radix ids come from React's SSR-stable `useId` — and it deleted
|
|
440
|
+
* the always-visible Trigger from SSR and the first client paint.
|
|
441
|
+
*
|
|
442
|
+
* 2. THE DIALOG IS CLAMPED TO THE VIEWPORT AND SCROLLS INSIDE ITSELF. Proven
|
|
443
|
+
* live: an admin "Create Category" dialog rendered 851px tall in a 657px
|
|
444
|
+
* viewport with `overflow-y: visible`, so its Create button sat below the
|
|
445
|
+
* fold, unreachable. The only way out was a backdrop click — which
|
|
446
|
+
* dismisses WITHOUT writing, and is indistinguishable from a silent save
|
|
447
|
+
* failure. `max-h-[85dvh] overflow-y-auto` is the cap.
|
|
448
|
+
*
|
|
449
|
+
* 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE. `DialogFooter` is sticky and
|
|
450
|
+
* bleeds to the card's edges using `--dialog-pad`, so scrolled content
|
|
451
|
+
* never shows through beneath it. Outside a DialogContent the variable is
|
|
452
|
+
* unset, the padding falls back to `0px`, and the footer is the plain row
|
|
453
|
+
* it always was.
|
|
454
|
+
*
|
|
455
|
+
* 4. ON MOBILE THE SAME DIALOG IS A BOTTOM SHEET — full width, bottom
|
|
456
|
+
* anchored, height-capped, internally scrollable, safe-area padded. Opt out
|
|
457
|
+
* with `mobileSheet={false}` only for the rare surface that must stay
|
|
458
|
+
* centered (a tiny spinner). The sheet geometry is re-asserted AFTER the
|
|
459
|
+
* caller's className so a desktop `max-w-2xl` cannot un-fullscreen it.
|
|
460
|
+
*
|
|
461
|
+
* 5. AN UNTITLED DIALOG IS STILL ACCESSIBLE. Radix warns (correctly) that
|
|
462
|
+
* every dialog needs a title; rather than let hosts ship the warning, a
|
|
463
|
+
* visually-hidden title is injected when the tree has none, and
|
|
464
|
+
* `aria-describedby` is dropped when there is no description rather than
|
|
465
|
+
* pointing at nothing.
|
|
466
|
+
*
|
|
467
|
+
* SEAM INVERSIONS. The host original resolved its portal target through
|
|
468
|
+
* app-shaped hooks (a popped-out window-panel body). Here that is the
|
|
469
|
+
* package's `PortalContainerProvider` seam, with an explicit `container` prop
|
|
470
|
+
* keeping top priority. And DialogContent PROVIDES that seam to its own
|
|
471
|
+
* children, so a Popover or menu opened inside a dialog portals INTO the
|
|
472
|
+
* dialog — staying inside the scroll shard, where its wheel events work.
|
|
473
|
+
* `useDialogContainer` exposes the same element for host code that needs it.
|
|
474
|
+
*/
|
|
475
|
+
|
|
476
|
+
declare const Dialog: {
|
|
477
|
+
({ children, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
|
|
478
|
+
displayName: string;
|
|
479
|
+
};
|
|
480
|
+
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
481
|
+
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
482
|
+
/**
|
|
483
|
+
* Portal-seam-aware DialogPortal. An explicit `container` always wins; with
|
|
484
|
+
* none, the injected `PortalContainerProvider` value decides; with neither,
|
|
485
|
+
* Radix's `document.body`.
|
|
486
|
+
*/
|
|
487
|
+
declare const DialogPortal: {
|
|
488
|
+
({ container, ...props }: Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>, "container"> & {
|
|
489
|
+
/** `undefined` → use the injected container; `null` → force document.body. */
|
|
490
|
+
container?: HTMLElement | null | undefined;
|
|
491
|
+
}): React.JSX.Element;
|
|
492
|
+
displayName: string;
|
|
493
|
+
};
|
|
494
|
+
/** The DialogContent element, for host code that portals into the dialog. */
|
|
495
|
+
declare const useDialogContainer: () => HTMLElement | null;
|
|
496
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
497
|
+
/**
|
|
498
|
+
* Unstyled, non-portalling Content for custom dialog layouts. Preserves Radix
|
|
499
|
+
* focus/background behavior and derives `aria-modal` from the Root.
|
|
500
|
+
*/
|
|
501
|
+
declare const DialogContentPrimitive: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
502
|
+
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
503
|
+
/** Render as a bottom sheet below the mobile breakpoint. Default `true`. */
|
|
504
|
+
mobileSheet?: boolean;
|
|
505
|
+
/** Render the built-in close control. Default `true`. */
|
|
506
|
+
showCloseButton?: boolean;
|
|
507
|
+
/** Explicit portal target; wins over the injected container. */
|
|
508
|
+
container?: HTMLElement | null;
|
|
509
|
+
}
|
|
510
|
+
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
511
|
+
declare const DialogHeader: {
|
|
512
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
513
|
+
displayName: string;
|
|
514
|
+
};
|
|
515
|
+
declare const DialogFooter: {
|
|
516
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
517
|
+
displayName: string;
|
|
518
|
+
};
|
|
519
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
520
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
521
|
+
|
|
522
|
+
/**
|
|
523
|
+
* DropdownMenu — Radix dropdown with two behaviours the stock body lacks.
|
|
524
|
+
*
|
|
525
|
+
* 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. A wrapper in
|
|
526
|
+
* matrx-frontend once deferred rendering until after hydration on a false
|
|
527
|
+
* premise (Radix ids come from React's SSR-stable `useId`), which deleted
|
|
528
|
+
* the always-visible trigger — buttons, `…` menus — from SSR and the first
|
|
529
|
+
* client paint.
|
|
530
|
+
*
|
|
531
|
+
* 2. A LONG MENU SCROLLS INSTEAD OF GROWING OFF-SCREEN. Content and SubContent
|
|
532
|
+
* cap at `--radix-dropdown-menu-content-available-height` — the space Radix
|
|
533
|
+
* actually measured between the trigger and the viewport edge — and scroll
|
|
534
|
+
* past it. Without the cap a menu longer than the viewport puts its last
|
|
535
|
+
* items where no pointer can reach them, and on a short window that can be
|
|
536
|
+
* the only exit from the surface.
|
|
537
|
+
*
|
|
538
|
+
* Portalling goes through the package's `usePortalContainer` seam, so a menu
|
|
539
|
+
* opened inside a Dialog mounts INSIDE the dialog (staying in the scroll
|
|
540
|
+
* shard, where its wheel events work) instead of at `document.body`. An
|
|
541
|
+
* explicit `container` prop still wins.
|
|
542
|
+
*
|
|
543
|
+
* Icons are the package's inlined SVGs (C19) — no icon-library dependency.
|
|
544
|
+
*/
|
|
545
|
+
|
|
546
|
+
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
547
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
548
|
+
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
549
|
+
declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
550
|
+
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
551
|
+
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
552
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
553
|
+
inset?: boolean;
|
|
554
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
555
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
556
|
+
interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
|
|
557
|
+
/** Explicit portal target; wins over the injected container. */
|
|
558
|
+
container?: HTMLElement | null;
|
|
559
|
+
}
|
|
560
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
561
|
+
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
562
|
+
inset?: boolean;
|
|
563
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
564
|
+
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
565
|
+
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
566
|
+
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
567
|
+
inset?: boolean;
|
|
568
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
569
|
+
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
570
|
+
declare const DropdownMenuShortcut: {
|
|
571
|
+
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
572
|
+
displayName: string;
|
|
573
|
+
};
|
|
574
|
+
|
|
277
575
|
type EditableLabelCommitMode = "optimistic" | "await";
|
|
278
576
|
type EditableLabelActivation = "click" | "doubleClick" | "controlled";
|
|
279
577
|
interface EditableLabelProps {
|
|
@@ -451,6 +749,30 @@ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimit
|
|
|
451
749
|
container?: HTMLElement | null;
|
|
452
750
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
453
751
|
|
|
752
|
+
/**
|
|
753
|
+
* Progress — a determinate bar.
|
|
754
|
+
*
|
|
755
|
+
* THE INDETERMINATE CASE IS NOT SILENT. Radix treats `value={null}` (or an
|
|
756
|
+
* omitted value) as indeterminate, and the shadcn fork every host copied
|
|
757
|
+
* computed `translateX(-${100 - (value || 0)}%)`, which turns an unknown value
|
|
758
|
+
* into a confident, wrong "0%" — a bar that says the work has not started when
|
|
759
|
+
* the truth is that nobody knows. Here an indeterminate bar renders a moving
|
|
760
|
+
* sweep and carries `data-state="indeterminate"`, so it LOOKS different from
|
|
761
|
+
* stalled-at-zero.
|
|
762
|
+
*
|
|
763
|
+
* `tone` maps the fill onto the semantic status tokens, rather than leaving a
|
|
764
|
+
* host to reach for a raw palette utility on a failing bar.
|
|
765
|
+
*/
|
|
766
|
+
|
|
767
|
+
type ProgressTone = "default" | "success" | "warning" | "destructive";
|
|
768
|
+
interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
|
|
769
|
+
/** Fill colour, from the semantic status tokens. Default `default`. */
|
|
770
|
+
tone?: ProgressTone;
|
|
771
|
+
/** Classes for the moving fill. */
|
|
772
|
+
indicatorClassName?: string;
|
|
773
|
+
}
|
|
774
|
+
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
|
775
|
+
|
|
454
776
|
/**
|
|
455
777
|
* Injected portal-container seam.
|
|
456
778
|
*
|
|
@@ -494,6 +816,39 @@ declare function RadixDialogModalProvider({ children, modal, }: RadixDialogModal
|
|
|
494
816
|
/** Returns whether the nearest Radix Dialog-derived root is modal. */
|
|
495
817
|
declare function useRadixDialogModal(): boolean;
|
|
496
818
|
|
|
819
|
+
/**
|
|
820
|
+
* ScrollArea — Radix scroll area with a custom, token-coloured scrollbar.
|
|
821
|
+
*
|
|
822
|
+
* Every fork was the same component; what they could not share was the
|
|
823
|
+
* VIEWPORT. Radix renders an internal `display: table` div inside the
|
|
824
|
+
* viewport, and workflow-studio's fork had to reach through it
|
|
825
|
+
* (`[&>div]:!block [&>div]:min-w-0`) so long content wraps instead of forcing
|
|
826
|
+
* the table cell wider than its container. That is the exact reason a host
|
|
827
|
+
* forks: a class it cannot pass. So the viewport is addressable here —
|
|
828
|
+
* `viewportClassName` and `viewportRef` — and nobody needs a copy to style it.
|
|
829
|
+
*
|
|
830
|
+
* `viewportRef` also unlocks the thing hosts hand-rolled around this
|
|
831
|
+
* component: programmatic scrolling (scroll-to-bottom on a new message,
|
|
832
|
+
* restoring a position) needs the scrolling element, and the Root's ref is not
|
|
833
|
+
* it.
|
|
834
|
+
*
|
|
835
|
+
* The thumb reads `bg-border`; a host that wants workflow-studio's dimmer
|
|
836
|
+
* thumb passes `scrollBarClassName`.
|
|
837
|
+
*/
|
|
838
|
+
|
|
839
|
+
interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
|
|
840
|
+
/** Classes for the scrolling viewport (not the Root). */
|
|
841
|
+
viewportClassName?: string;
|
|
842
|
+
/** Ref to the scrolling element — the one `scrollTop` lives on. */
|
|
843
|
+
viewportRef?: React.Ref<HTMLDivElement>;
|
|
844
|
+
/** Classes for the vertical scrollbar this component renders. */
|
|
845
|
+
scrollBarClassName?: string;
|
|
846
|
+
/** Scrollbar orientation to render. Default `vertical`. */
|
|
847
|
+
orientation?: "vertical" | "horizontal";
|
|
848
|
+
}
|
|
849
|
+
declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
850
|
+
declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
851
|
+
|
|
497
852
|
interface ScoreThresholds {
|
|
498
853
|
/** Scores at or above this value are green. */
|
|
499
854
|
good: number;
|
|
@@ -575,22 +930,22 @@ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimit
|
|
|
575
930
|
|
|
576
931
|
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
577
932
|
|
|
578
|
-
declare const Sheet: React.ForwardRefExoticComponent<
|
|
579
|
-
declare const SheetTrigger: React.ForwardRefExoticComponent<
|
|
580
|
-
declare const SheetClose: React.ForwardRefExoticComponent<
|
|
581
|
-
declare const SheetPortal: React.FC<
|
|
582
|
-
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<
|
|
933
|
+
declare const Sheet: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & React.RefAttributes<never>>;
|
|
934
|
+
declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
935
|
+
declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
936
|
+
declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
937
|
+
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
583
938
|
declare const sheetVariants: (props?: ({
|
|
584
939
|
side?: "center" | "bottom" | "left" | "right" | "top" | null | undefined;
|
|
585
940
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
586
|
-
interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof
|
|
941
|
+
interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
587
942
|
hideCloseButton?: boolean;
|
|
588
943
|
/** Skip the dimming overlay — for non-modal side panels (e.g. chat canvas). */
|
|
589
944
|
hideOverlay?: boolean;
|
|
590
945
|
/** Optional className for the overlay when shown. */
|
|
591
946
|
overlayClassName?: string;
|
|
592
947
|
}
|
|
593
|
-
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<
|
|
948
|
+
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
594
949
|
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
595
950
|
declare const SheetHeader: {
|
|
596
951
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
@@ -600,7 +955,7 @@ declare const SheetFooter: {
|
|
|
600
955
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
601
956
|
displayName: string;
|
|
602
957
|
};
|
|
603
|
-
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<
|
|
958
|
+
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
604
959
|
|
|
605
960
|
/**
|
|
606
961
|
* Skeleton — ported verbatim from matrx-frontend `components/ui/skeleton.tsx`.
|
|
@@ -609,6 +964,30 @@ declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.Di
|
|
|
609
964
|
|
|
610
965
|
declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
611
966
|
|
|
967
|
+
/**
|
|
968
|
+
* Switch — Radix switch, one implementation, two sizes.
|
|
969
|
+
*
|
|
970
|
+
* The four forks were the same control with two different tracks: a 16px track
|
|
971
|
+
* with a visible border and an overhanging thumb (matrx-frontend) and a 20px
|
|
972
|
+
* track with a transparent border and an inset thumb (matrx-extend, dashboard,
|
|
973
|
+
* workflow-studio). Both stay reachable through `size`, so no host has to keep
|
|
974
|
+
* a copy to keep its look:
|
|
975
|
+
*
|
|
976
|
+
* sm → h-4 track, bordered, thumb sits proud of the rail
|
|
977
|
+
* md → h-5 track, transparent border, thumb sits inside (the default)
|
|
978
|
+
*
|
|
979
|
+
* The unchecked track reads `bg-input`, the token that exists for exactly this
|
|
980
|
+
* — workflow-studio's fork used `bg-muted`, which is the surface token and
|
|
981
|
+
* makes an off switch disappear into a muted panel.
|
|
982
|
+
*/
|
|
983
|
+
|
|
984
|
+
type SwitchSize = "sm" | "md";
|
|
985
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
|
|
986
|
+
/** Track size. Default `md`. */
|
|
987
|
+
size?: SwitchSize;
|
|
988
|
+
}
|
|
989
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
990
|
+
|
|
612
991
|
interface TabbedBottomSheetTab {
|
|
613
992
|
id: string;
|
|
614
993
|
label: string;
|
|
@@ -627,6 +1006,161 @@ interface TabbedBottomSheetProps {
|
|
|
627
1006
|
}
|
|
628
1007
|
declare function TabbedBottomSheet({ open, onOpenChange, title, tabs, }: TabbedBottomSheetProps): React.JSX.Element;
|
|
629
1008
|
|
|
1009
|
+
/**
|
|
1010
|
+
* Table — the semantic table shell. No data logic, no sorting, no virtualiser:
|
|
1011
|
+
* those belong to the host's data-table layer, which composes these elements.
|
|
1012
|
+
*
|
|
1013
|
+
* The two forks disagreed on exactly three things, all of them now props:
|
|
1014
|
+
*
|
|
1015
|
+
* 1. matrx-frontend wrapped `<table>` in `relative w-full overflow-auto` so a
|
|
1016
|
+
* wide table scrolls inside itself instead of pushing the page sideways;
|
|
1017
|
+
* dashboard emitted a bare `<table>`. The wrapper is the correct default —
|
|
1018
|
+
* a table that widens its page is a layout bug on every narrow viewport —
|
|
1019
|
+
* so it stays on, with `wrap={false}` for a host that already owns a
|
|
1020
|
+
* scroll container (double scrollers are their own defect).
|
|
1021
|
+
* 2. dashboard's header was `sticky top-0 z-10 bg-background`. That is a real
|
|
1022
|
+
* capability, not a style opinion, so it is `sticky` on `TableHeader` —
|
|
1023
|
+
* opt-in, because a sticky header inside an unbounded page sticks to
|
|
1024
|
+
* nothing and only costs a stacking context.
|
|
1025
|
+
* 3. Cell density: `p-2` vs `p-3`. Declared once on `<Table size>` and read
|
|
1026
|
+
* from context by every cell, so a table cannot mix densities.
|
|
1027
|
+
*
|
|
1028
|
+
* Colour is tokens only.
|
|
1029
|
+
*/
|
|
1030
|
+
|
|
1031
|
+
type TableSize = "sm" | "md";
|
|
1032
|
+
/** The density the nearest enclosing `<Table>` declared. `sm` outside one. */
|
|
1033
|
+
declare function useTableSize(): TableSize;
|
|
1034
|
+
interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
|
|
1035
|
+
/** Cell density for this table. Default `sm` (`p-2`). */
|
|
1036
|
+
size?: TableSize;
|
|
1037
|
+
/**
|
|
1038
|
+
* Wrap the table in its own horizontal scroll container. Default `true`.
|
|
1039
|
+
* Pass `false` only when an ancestor already scrolls this table.
|
|
1040
|
+
*/
|
|
1041
|
+
wrap?: boolean;
|
|
1042
|
+
/** Classes for the scroll wrapper (ignored when `wrap` is false). */
|
|
1043
|
+
wrapperClassName?: string;
|
|
1044
|
+
}
|
|
1045
|
+
declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
1046
|
+
interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
1047
|
+
/**
|
|
1048
|
+
* Pin the header to the top of the nearest scroll container. Opt-in: it
|
|
1049
|
+
* needs a bounded scroll ancestor to stick to, and it opens a stacking
|
|
1050
|
+
* context whether or not it sticks.
|
|
1051
|
+
*/
|
|
1052
|
+
sticky?: boolean;
|
|
1053
|
+
}
|
|
1054
|
+
declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
|
|
1055
|
+
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
1056
|
+
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
1057
|
+
declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
1058
|
+
declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
1059
|
+
declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
1060
|
+
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|
|
1061
|
+
|
|
1062
|
+
/**
|
|
1063
|
+
* Tabs — Radix tabs, carrying two rulings the forks had already paid for.
|
|
1064
|
+
*
|
|
1065
|
+
* 1. THE ROOT RENDERS UNCONDITIONALLY — no mount gate. A wrapper in
|
|
1066
|
+
* matrx-frontend used to defer rendering until after hydration ("Radix
|
|
1067
|
+
* generates dynamic aria-controls ids that differ between SSR and client").
|
|
1068
|
+
* That was false — Radix ids come from React's SSR-stable `useId` — and the
|
|
1069
|
+
* gate deleted the ENTIRE tab bar and active panel from SSR and the first
|
|
1070
|
+
* client paint.
|
|
1071
|
+
*
|
|
1072
|
+
* 2. INACTIVE PANELS UNMOUNT — Radix's default, restored in matrx-frontend on
|
|
1073
|
+
* 2026-08-15 after a wrapper hardcoded `forceMount`. Every tab panel in that
|
|
1074
|
+
* app was live at all times: effects running, fetches firing, subscriptions
|
|
1075
|
+
* open, registrations registered — while invisible. Not theoretical: on the
|
|
1076
|
+
* agent-apps executions page both tabs' tables registered a runtime provider
|
|
1077
|
+
* for the same surface at the same depth, the HIDDEN tab won the tie-break,
|
|
1078
|
+
* and agents on the VISIBLE tab were handed the other tab's rows.
|
|
1079
|
+
*
|
|
1080
|
+
* `forceMount` is OPT-IN. Pass it on the panels that genuinely must survive
|
|
1081
|
+
* a switch — an in-flight editor, a scroll position, a live stream that
|
|
1082
|
+
* must not be torn down. `data-[state=inactive]:hidden` is applied
|
|
1083
|
+
* unconditionally (inert when the panel unmounts), so passing the prop is
|
|
1084
|
+
* the whole opt-in.
|
|
1085
|
+
*
|
|
1086
|
+
* Do NOT reach for `forceMount` to preserve a form draft. Lift that state to
|
|
1087
|
+
* the component that owns the `<Tabs>`; the panel is then free to unmount
|
|
1088
|
+
* and the draft survives a close/reopen too, which force-mounting never gave
|
|
1089
|
+
* you.
|
|
1090
|
+
*
|
|
1091
|
+
* `TabsTriggerCore` is the trigger WITHOUT the resting muted-foreground
|
|
1092
|
+
* treatment, for hosts that colour their own inactive tabs. Both triggers
|
|
1093
|
+
* otherwise share one class string.
|
|
1094
|
+
*/
|
|
1095
|
+
|
|
1096
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
1097
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1098
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1099
|
+
/** The trigger without the resting muted/hover treatment. */
|
|
1100
|
+
declare const TabsTriggerCore: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1101
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1102
|
+
|
|
1103
|
+
/**
|
|
1104
|
+
* Textarea — the multi-line twin of the Input family, same three shapes:
|
|
1105
|
+
* `Textarea` (elevated), `BasicTextarea` (plain control), and
|
|
1106
|
+
* `TextareaWithPrefix`.
|
|
1107
|
+
*
|
|
1108
|
+
* WHAT THE FORKS PROVED. Three hosts shipped a bare `<textarea>` with a
|
|
1109
|
+
* min-height and nothing else; matrx-frontend shipped auto-grow, min/max
|
|
1110
|
+
* height clamping, and a stretch-detection pass. That last one is the reason
|
|
1111
|
+
* this file is worth having: a `<textarea>` is a REPLACED element, so
|
|
1112
|
+
* `className="h-full"` on it does nothing useful unless its parent is also
|
|
1113
|
+
* told to stretch — which is why every host that wanted a filling textarea
|
|
1114
|
+
* ended up wrapping it by hand at the call site, differently each time.
|
|
1115
|
+
* `getStretchClasses` reads the caller's own fill intent out of the className
|
|
1116
|
+
* and builds the wrapper for them.
|
|
1117
|
+
*
|
|
1118
|
+
* COLOUR IS TOKENS (C26). The ported original pinned its body text to literal
|
|
1119
|
+
* black/white, its placeholder and focus ring to raw palette steps, and its
|
|
1120
|
+
* dark elevation to a custom property no host defined — so that shadow
|
|
1121
|
+
* computed to nothing. All four now resolve from the semantic vocabulary.
|
|
1122
|
+
*
|
|
1123
|
+
* AND `shadow-textarea` NOW EXISTS. The original's resting elevation class was
|
|
1124
|
+
* `shadow-textarea`, and NO host defined `--shadow-textarea` or generated that
|
|
1125
|
+
* utility — 125 call sites asked for an elevation they never got. The package
|
|
1126
|
+
* ships the token (defaulting to the Input family's `--shadow-input`, which is
|
|
1127
|
+
* plainly what the twin class meant) and the rule, so the class finally does
|
|
1128
|
+
* what it says. A host that wants the flat look sets `--shadow-textarea: none`.
|
|
1129
|
+
*
|
|
1130
|
+
* The clipboard/motion variants matrx-frontend layers on top (CopyTextarea,
|
|
1131
|
+
* FancyTextarea) stay host-owned under the C8 split-out law: they drag in
|
|
1132
|
+
* `motion/react`, and plain-textarea consumers must not pay for it.
|
|
1133
|
+
*/
|
|
1134
|
+
|
|
1135
|
+
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
1136
|
+
/** Grow to fit content as the user types (and stop growing at `maxHeight`). */
|
|
1137
|
+
autoGrow?: boolean;
|
|
1138
|
+
/** Minimum height in px. */
|
|
1139
|
+
minHeight?: number;
|
|
1140
|
+
/** Maximum height in px; past it the field scrolls instead of growing. */
|
|
1141
|
+
maxHeight?: number;
|
|
1142
|
+
/** Classes for the wrapper this component adds when one is needed. */
|
|
1143
|
+
wrapperClassName?: string;
|
|
1144
|
+
}
|
|
1145
|
+
/** The elevated textarea — the Input family's `Input`, in multi-line form. */
|
|
1146
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
1147
|
+
/**
|
|
1148
|
+
* The plain control — a bordered, transparent field with a 60px floor. This is
|
|
1149
|
+
* what matrx-extend, aidream/apps/dashboard and workflow-studio each called
|
|
1150
|
+
* `Textarea`; the floor is theirs and it is the sensible default (a one-line
|
|
1151
|
+
* box for multi-line content invites a scrollbar on the first Enter).
|
|
1152
|
+
*/
|
|
1153
|
+
declare const BasicTextarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
1154
|
+
interface TextareaWithPrefixProps extends Omit<TextareaProps, "prefix"> {
|
|
1155
|
+
/** Leading adornment, absolutely placed at the field's top-left. */
|
|
1156
|
+
prefix?: React.ReactNode;
|
|
1157
|
+
}
|
|
1158
|
+
declare const TextareaWithPrefix: React.ForwardRefExoticComponent<TextareaWithPrefixProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
1159
|
+
|
|
1160
|
+
/** Viewport width (px) below which the package treats a surface as mobile. */
|
|
1161
|
+
declare const MOBILE_BREAKPOINT = 768;
|
|
1162
|
+
declare function useIsMobile(): boolean;
|
|
1163
|
+
|
|
630
1164
|
interface ScrollFadeState {
|
|
631
1165
|
top: boolean;
|
|
632
1166
|
bottom: boolean;
|
|
@@ -642,4 +1176,4 @@ interface UseScrollFadeResult {
|
|
|
642
1176
|
}
|
|
643
1177
|
declare function useScrollFade(): UseScrollFadeResult;
|
|
644
1178
|
|
|
645
|
-
export { Badge, type BadgeProps, BasicInput, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_SCORE_THRESHOLDS, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, type PortalContainerProviderProps, RadixDialogModalProvider, type RadixDialogModalProviderProps, ScoreRing, type ScoreRingProps, type ScoreThresholds, 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, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, type UseScrollFadeResult, badgeVariants, buttonVariants, cn, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, usePortalContainer, useRadixDialogModal, useScrollFade };
|
|
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 };
|