@ai-matrx/design-system 0.9.0 → 0.10.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 +149 -0
- package/README.md +15 -1
- package/dist/index.cjs +174 -82
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +133 -8
- package/dist/index.d.ts +133 -8
- package/dist/index.js +174 -82
- package/dist/index.js.map +1 -1
- package/dist/styles.css +434 -0
- package/dist/tokens.css +25 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -205,6 +205,12 @@ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<Alert
|
|
|
205
205
|
interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
|
|
206
206
|
/** Explicit portal target; wins over the injected container. */
|
|
207
207
|
container?: HTMLElement | null;
|
|
208
|
+
/**
|
|
209
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
210
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
211
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
212
|
+
*/
|
|
213
|
+
animated?: boolean;
|
|
208
214
|
}
|
|
209
215
|
declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
216
|
declare const AlertDialogHeader: {
|
|
@@ -710,6 +716,12 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
|
|
|
710
716
|
showCloseButton?: boolean;
|
|
711
717
|
/** Explicit portal target; wins over the injected container. */
|
|
712
718
|
container?: HTMLElement | null;
|
|
719
|
+
/**
|
|
720
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
721
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
722
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
723
|
+
*/
|
|
724
|
+
animated?: boolean;
|
|
713
725
|
}
|
|
714
726
|
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
715
727
|
declare const DialogHeader: {
|
|
@@ -949,9 +961,18 @@ declare function OverflowToolbar({ actions, leading, overflowAriaLabel, classNam
|
|
|
949
961
|
declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
|
|
950
962
|
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
951
963
|
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
952
|
-
|
|
964
|
+
interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
965
|
+
/** Explicit portal target; wins over the injected container. */
|
|
953
966
|
container?: HTMLElement | null;
|
|
954
|
-
|
|
967
|
+
/**
|
|
968
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
969
|
+
* surface that must appear instantly — a picker re-anchoring while the user
|
|
970
|
+
* types, a measurement pass. It is NOT the reduced-motion switch;
|
|
971
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
972
|
+
*/
|
|
973
|
+
animated?: boolean;
|
|
974
|
+
}
|
|
975
|
+
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
955
976
|
|
|
956
977
|
/**
|
|
957
978
|
* Progress — a determinate bar.
|
|
@@ -1116,9 +1137,17 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
|
|
|
1116
1137
|
declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1117
1138
|
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1118
1139
|
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1119
|
-
|
|
1140
|
+
interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
|
|
1141
|
+
/** Explicit portal target; wins over the injected container. */
|
|
1120
1142
|
container?: HTMLElement | null;
|
|
1121
|
-
|
|
1143
|
+
/**
|
|
1144
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1145
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
1146
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1147
|
+
*/
|
|
1148
|
+
animated?: boolean;
|
|
1149
|
+
}
|
|
1150
|
+
declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1122
1151
|
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1123
1152
|
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1124
1153
|
/**
|
|
@@ -1148,6 +1177,13 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof Dialog
|
|
|
1148
1177
|
hideOverlay?: boolean;
|
|
1149
1178
|
/** Optional className for the overlay when shown. */
|
|
1150
1179
|
overlayClassName?: string;
|
|
1180
|
+
/**
|
|
1181
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a panel
|
|
1182
|
+
* that must appear instantly — a persistent side rail toggled by a keyboard
|
|
1183
|
+
* shortcut, say. It is NOT the reduced-motion switch; `styles.css` already
|
|
1184
|
+
* honours `prefers-reduced-motion`.
|
|
1185
|
+
*/
|
|
1186
|
+
animated?: boolean;
|
|
1151
1187
|
}
|
|
1152
1188
|
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
1153
1189
|
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1162,11 +1198,28 @@ declare const SheetFooter: {
|
|
|
1162
1198
|
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
1163
1199
|
|
|
1164
1200
|
/**
|
|
1165
|
-
* Skeleton —
|
|
1166
|
-
*
|
|
1201
|
+
* Skeleton — the "content is coming" placeholder.
|
|
1202
|
+
*
|
|
1203
|
+
* Ported from matrx-frontend `components/ui/skeleton.tsx`; no seams, pure
|
|
1204
|
+
* markup over semantic tokens. ONE change from the original (0.10.0): the
|
|
1205
|
+
* breathing loop is `.matrx-pulse`, a package-owned keyframe, not Tailwind's
|
|
1206
|
+
* `animate-pulse`. A Skeleton that does not pulse is indistinguishable from an
|
|
1207
|
+
* empty grey box — it stops saying "loading" and starts saying "nothing here"
|
|
1208
|
+
* — so the motion is part of the component's meaning and ships with it (see
|
|
1209
|
+
* `styles.css` § THE MOTION LAYER).
|
|
1167
1210
|
*/
|
|
1168
1211
|
|
|
1169
|
-
|
|
1212
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1213
|
+
/**
|
|
1214
|
+
* Package-owned pulse. Default `true`. Pass `false` for a static
|
|
1215
|
+
* placeholder — a print/PDF render, or a screenshot fixture where the
|
|
1216
|
+
* animation makes the output non-deterministic. `prefers-reduced-motion`
|
|
1217
|
+
* already SLOWS the pulse rather than stopping it (a still skeleton would
|
|
1218
|
+
* lose the information), so this is not the accessibility switch.
|
|
1219
|
+
*/
|
|
1220
|
+
animated?: boolean;
|
|
1221
|
+
}
|
|
1222
|
+
declare function Skeleton({ className, animated, ...props }: SkeletonProps): React.JSX.Element;
|
|
1170
1223
|
|
|
1171
1224
|
/**
|
|
1172
1225
|
* Switch — Radix switch, one implementation, two sizes.
|
|
@@ -1477,6 +1530,13 @@ declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimiti
|
|
|
1477
1530
|
interface HoverCardContentProps extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
|
|
1478
1531
|
/** Explicit portal target; wins over the injected container. */
|
|
1479
1532
|
container?: HTMLElement | null;
|
|
1533
|
+
/**
|
|
1534
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1535
|
+
* surface that must appear instantly — a picker re-anchoring while the user
|
|
1536
|
+
* types, a measurement pass. It is NOT the reduced-motion switch;
|
|
1537
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1538
|
+
*/
|
|
1539
|
+
animated?: boolean;
|
|
1480
1540
|
}
|
|
1481
1541
|
declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1482
1542
|
|
|
@@ -1660,7 +1720,72 @@ interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof Tool
|
|
|
1660
1720
|
* value. Pass `null` to force `document.body`.
|
|
1661
1721
|
*/
|
|
1662
1722
|
container?: HTMLElement | null;
|
|
1723
|
+
/**
|
|
1724
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1725
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
1726
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1727
|
+
*/
|
|
1728
|
+
animated?: boolean;
|
|
1663
1729
|
}
|
|
1664
1730
|
declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1665
1731
|
|
|
1666
|
-
|
|
1732
|
+
/**
|
|
1733
|
+
* THE MOTION CONTRACT (0.10.0) — the class names every animated surface in
|
|
1734
|
+
* this package puts on the DOM, in ONE place.
|
|
1735
|
+
*
|
|
1736
|
+
* Why a module and not ten inline strings: the sweep that produced this file
|
|
1737
|
+
* found the same defect ten times over, and it was invisible each time
|
|
1738
|
+
* because each primitive spelled its animation out by hand. Ten hand-written
|
|
1739
|
+
* copies of `data-[state=open]:animate-in data-[state=closed]:animate-out
|
|
1740
|
+
* data-[state=closed]:fade-out-0 …` meant ten chances to reach for a utility
|
|
1741
|
+
* nothing in the package defines — which is exactly what happened. A single
|
|
1742
|
+
* exported constant per motion SHAPE means the next primitive cannot invent
|
|
1743
|
+
* an eleventh spelling, and `styles.test.ts` can prove every one of them
|
|
1744
|
+
* resolves to a rule in the shipped stylesheet.
|
|
1745
|
+
*
|
|
1746
|
+
* Every rule these name lives in `styles.css` under the package's own
|
|
1747
|
+
* keyframes. NONE of them is a Tailwind utility, and none requires a host
|
|
1748
|
+
* plugin — see that file's header for the measurement that made this
|
|
1749
|
+
* necessary.
|
|
1750
|
+
*/
|
|
1751
|
+
/** Modal scrims: Dialog, AlertDialog, Sheet, CommandDialog. Fade only. */
|
|
1752
|
+
declare const MOTION_OVERLAY = "matrx-motion-overlay";
|
|
1753
|
+
/** The centred dialog card. Fades and scales, ending on the `-50%` centring. */
|
|
1754
|
+
declare const MOTION_DIALOG = "matrx-motion-dialog";
|
|
1755
|
+
/** The mobile Dialog / CommandDialog bottom sheet. Slides up and fades. */
|
|
1756
|
+
declare const MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
|
|
1757
|
+
/**
|
|
1758
|
+
* Radix-popper surfaces: Popover, DropdownMenu, ContextMenu, HoverCard,
|
|
1759
|
+
* Select, Tooltip. Reads `--radix-popper-transform-origin` so the surface
|
|
1760
|
+
* grows out of its trigger, and `data-side` so it travels from it.
|
|
1761
|
+
*/
|
|
1762
|
+
declare const MOTION_POPPER = "matrx-motion-popper";
|
|
1763
|
+
/** Edge sheets, one class per `sheetVariants` side. */
|
|
1764
|
+
declare const MOTION_SHEET: {
|
|
1765
|
+
readonly top: "matrx-motion-sheet-top";
|
|
1766
|
+
readonly bottom: "matrx-motion-sheet-bottom";
|
|
1767
|
+
readonly left: "matrx-motion-sheet-left";
|
|
1768
|
+
readonly right: "matrx-motion-sheet-right";
|
|
1769
|
+
readonly center: "matrx-motion-sheet-center";
|
|
1770
|
+
};
|
|
1771
|
+
/** Skeleton's breathing loop. */
|
|
1772
|
+
declare const MOTION_PULSE = "matrx-pulse";
|
|
1773
|
+
/** The spinner loop, for every inline busy indicator in the package. */
|
|
1774
|
+
declare const MOTION_SPIN = "matrx-spin";
|
|
1775
|
+
/**
|
|
1776
|
+
* Every motion class the package ships, for the guards. If a rule for one of
|
|
1777
|
+
* these is missing from `styles.css`, a component animates in no consumer and
|
|
1778
|
+
* says nothing about it — the C26 failure this list exists to make loud.
|
|
1779
|
+
*/
|
|
1780
|
+
declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motion-dialog", "matrx-motion-bottom-sheet", "matrx-motion-popper", ...("matrx-motion-sheet-top" | "matrx-motion-sheet-bottom" | "matrx-motion-sheet-left" | "matrx-motion-sheet-right" | "matrx-motion-sheet-center")[], "matrx-pulse", "matrx-spin"];
|
|
1781
|
+
/**
|
|
1782
|
+
* The host-plugin utilities this package is forbidden to emit. They are
|
|
1783
|
+
* supplied by `tailwindcss-animate` / `tw-animate-css`, which is a HOST CSS
|
|
1784
|
+
* entry concern a package cannot declare a dependency on: three of the four
|
|
1785
|
+
* AI Matrx consumers never loaded it, so every surface wearing these appeared
|
|
1786
|
+
* with no animation and no error. `styles.test.ts` fails the build if one
|
|
1787
|
+
* comes back.
|
|
1788
|
+
*/
|
|
1789
|
+
declare const FORBIDDEN_HOST_MOTION_UTILITIES: readonly ["animate-in", "animate-out", "fade-in", "fade-out", "zoom-in", "zoom-out", "slide-in-from", "slide-out-to", "animate-accordion", "animate-slide-down", "animate-slide-up", "animate-pulse", "animate-spin"];
|
|
1790
|
+
|
|
1791
|
+
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, 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, type CollapsibleContentProps, 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, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, 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, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, 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, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -205,6 +205,12 @@ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<Alert
|
|
|
205
205
|
interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
|
|
206
206
|
/** Explicit portal target; wins over the injected container. */
|
|
207
207
|
container?: HTMLElement | null;
|
|
208
|
+
/**
|
|
209
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
210
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
211
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
212
|
+
*/
|
|
213
|
+
animated?: boolean;
|
|
208
214
|
}
|
|
209
215
|
declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
216
|
declare const AlertDialogHeader: {
|
|
@@ -710,6 +716,12 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
|
|
|
710
716
|
showCloseButton?: boolean;
|
|
711
717
|
/** Explicit portal target; wins over the injected container. */
|
|
712
718
|
container?: HTMLElement | null;
|
|
719
|
+
/**
|
|
720
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
721
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
722
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
723
|
+
*/
|
|
724
|
+
animated?: boolean;
|
|
713
725
|
}
|
|
714
726
|
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
715
727
|
declare const DialogHeader: {
|
|
@@ -949,9 +961,18 @@ declare function OverflowToolbar({ actions, leading, overflowAriaLabel, classNam
|
|
|
949
961
|
declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
|
|
950
962
|
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
951
963
|
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
952
|
-
|
|
964
|
+
interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
965
|
+
/** Explicit portal target; wins over the injected container. */
|
|
953
966
|
container?: HTMLElement | null;
|
|
954
|
-
|
|
967
|
+
/**
|
|
968
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
969
|
+
* surface that must appear instantly — a picker re-anchoring while the user
|
|
970
|
+
* types, a measurement pass. It is NOT the reduced-motion switch;
|
|
971
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
972
|
+
*/
|
|
973
|
+
animated?: boolean;
|
|
974
|
+
}
|
|
975
|
+
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
955
976
|
|
|
956
977
|
/**
|
|
957
978
|
* Progress — a determinate bar.
|
|
@@ -1116,9 +1137,17 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
|
|
|
1116
1137
|
declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1117
1138
|
declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1118
1139
|
declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1119
|
-
|
|
1140
|
+
interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
|
|
1141
|
+
/** Explicit portal target; wins over the injected container. */
|
|
1120
1142
|
container?: HTMLElement | null;
|
|
1121
|
-
|
|
1143
|
+
/**
|
|
1144
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1145
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
1146
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1147
|
+
*/
|
|
1148
|
+
animated?: boolean;
|
|
1149
|
+
}
|
|
1150
|
+
declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1122
1151
|
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1123
1152
|
declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1124
1153
|
/**
|
|
@@ -1148,6 +1177,13 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof Dialog
|
|
|
1148
1177
|
hideOverlay?: boolean;
|
|
1149
1178
|
/** Optional className for the overlay when shown. */
|
|
1150
1179
|
overlayClassName?: string;
|
|
1180
|
+
/**
|
|
1181
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a panel
|
|
1182
|
+
* that must appear instantly — a persistent side rail toggled by a keyboard
|
|
1183
|
+
* shortcut, say. It is NOT the reduced-motion switch; `styles.css` already
|
|
1184
|
+
* honours `prefers-reduced-motion`.
|
|
1185
|
+
*/
|
|
1186
|
+
animated?: boolean;
|
|
1151
1187
|
}
|
|
1152
1188
|
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
1153
1189
|
declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1162,11 +1198,28 @@ declare const SheetFooter: {
|
|
|
1162
1198
|
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
1163
1199
|
|
|
1164
1200
|
/**
|
|
1165
|
-
* Skeleton —
|
|
1166
|
-
*
|
|
1201
|
+
* Skeleton — the "content is coming" placeholder.
|
|
1202
|
+
*
|
|
1203
|
+
* Ported from matrx-frontend `components/ui/skeleton.tsx`; no seams, pure
|
|
1204
|
+
* markup over semantic tokens. ONE change from the original (0.10.0): the
|
|
1205
|
+
* breathing loop is `.matrx-pulse`, a package-owned keyframe, not Tailwind's
|
|
1206
|
+
* `animate-pulse`. A Skeleton that does not pulse is indistinguishable from an
|
|
1207
|
+
* empty grey box — it stops saying "loading" and starts saying "nothing here"
|
|
1208
|
+
* — so the motion is part of the component's meaning and ships with it (see
|
|
1209
|
+
* `styles.css` § THE MOTION LAYER).
|
|
1167
1210
|
*/
|
|
1168
1211
|
|
|
1169
|
-
|
|
1212
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1213
|
+
/**
|
|
1214
|
+
* Package-owned pulse. Default `true`. Pass `false` for a static
|
|
1215
|
+
* placeholder — a print/PDF render, or a screenshot fixture where the
|
|
1216
|
+
* animation makes the output non-deterministic. `prefers-reduced-motion`
|
|
1217
|
+
* already SLOWS the pulse rather than stopping it (a still skeleton would
|
|
1218
|
+
* lose the information), so this is not the accessibility switch.
|
|
1219
|
+
*/
|
|
1220
|
+
animated?: boolean;
|
|
1221
|
+
}
|
|
1222
|
+
declare function Skeleton({ className, animated, ...props }: SkeletonProps): React.JSX.Element;
|
|
1170
1223
|
|
|
1171
1224
|
/**
|
|
1172
1225
|
* Switch — Radix switch, one implementation, two sizes.
|
|
@@ -1477,6 +1530,13 @@ declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimiti
|
|
|
1477
1530
|
interface HoverCardContentProps extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
|
|
1478
1531
|
/** Explicit portal target; wins over the injected container. */
|
|
1479
1532
|
container?: HTMLElement | null;
|
|
1533
|
+
/**
|
|
1534
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1535
|
+
* surface that must appear instantly — a picker re-anchoring while the user
|
|
1536
|
+
* types, a measurement pass. It is NOT the reduced-motion switch;
|
|
1537
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1538
|
+
*/
|
|
1539
|
+
animated?: boolean;
|
|
1480
1540
|
}
|
|
1481
1541
|
declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1482
1542
|
|
|
@@ -1660,7 +1720,72 @@ interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof Tool
|
|
|
1660
1720
|
* value. Pass `null` to force `document.body`.
|
|
1661
1721
|
*/
|
|
1662
1722
|
container?: HTMLElement | null;
|
|
1723
|
+
/**
|
|
1724
|
+
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1725
|
+
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
1726
|
+
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1727
|
+
*/
|
|
1728
|
+
animated?: boolean;
|
|
1663
1729
|
}
|
|
1664
1730
|
declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1665
1731
|
|
|
1666
|
-
|
|
1732
|
+
/**
|
|
1733
|
+
* THE MOTION CONTRACT (0.10.0) — the class names every animated surface in
|
|
1734
|
+
* this package puts on the DOM, in ONE place.
|
|
1735
|
+
*
|
|
1736
|
+
* Why a module and not ten inline strings: the sweep that produced this file
|
|
1737
|
+
* found the same defect ten times over, and it was invisible each time
|
|
1738
|
+
* because each primitive spelled its animation out by hand. Ten hand-written
|
|
1739
|
+
* copies of `data-[state=open]:animate-in data-[state=closed]:animate-out
|
|
1740
|
+
* data-[state=closed]:fade-out-0 …` meant ten chances to reach for a utility
|
|
1741
|
+
* nothing in the package defines — which is exactly what happened. A single
|
|
1742
|
+
* exported constant per motion SHAPE means the next primitive cannot invent
|
|
1743
|
+
* an eleventh spelling, and `styles.test.ts` can prove every one of them
|
|
1744
|
+
* resolves to a rule in the shipped stylesheet.
|
|
1745
|
+
*
|
|
1746
|
+
* Every rule these name lives in `styles.css` under the package's own
|
|
1747
|
+
* keyframes. NONE of them is a Tailwind utility, and none requires a host
|
|
1748
|
+
* plugin — see that file's header for the measurement that made this
|
|
1749
|
+
* necessary.
|
|
1750
|
+
*/
|
|
1751
|
+
/** Modal scrims: Dialog, AlertDialog, Sheet, CommandDialog. Fade only. */
|
|
1752
|
+
declare const MOTION_OVERLAY = "matrx-motion-overlay";
|
|
1753
|
+
/** The centred dialog card. Fades and scales, ending on the `-50%` centring. */
|
|
1754
|
+
declare const MOTION_DIALOG = "matrx-motion-dialog";
|
|
1755
|
+
/** The mobile Dialog / CommandDialog bottom sheet. Slides up and fades. */
|
|
1756
|
+
declare const MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
|
|
1757
|
+
/**
|
|
1758
|
+
* Radix-popper surfaces: Popover, DropdownMenu, ContextMenu, HoverCard,
|
|
1759
|
+
* Select, Tooltip. Reads `--radix-popper-transform-origin` so the surface
|
|
1760
|
+
* grows out of its trigger, and `data-side` so it travels from it.
|
|
1761
|
+
*/
|
|
1762
|
+
declare const MOTION_POPPER = "matrx-motion-popper";
|
|
1763
|
+
/** Edge sheets, one class per `sheetVariants` side. */
|
|
1764
|
+
declare const MOTION_SHEET: {
|
|
1765
|
+
readonly top: "matrx-motion-sheet-top";
|
|
1766
|
+
readonly bottom: "matrx-motion-sheet-bottom";
|
|
1767
|
+
readonly left: "matrx-motion-sheet-left";
|
|
1768
|
+
readonly right: "matrx-motion-sheet-right";
|
|
1769
|
+
readonly center: "matrx-motion-sheet-center";
|
|
1770
|
+
};
|
|
1771
|
+
/** Skeleton's breathing loop. */
|
|
1772
|
+
declare const MOTION_PULSE = "matrx-pulse";
|
|
1773
|
+
/** The spinner loop, for every inline busy indicator in the package. */
|
|
1774
|
+
declare const MOTION_SPIN = "matrx-spin";
|
|
1775
|
+
/**
|
|
1776
|
+
* Every motion class the package ships, for the guards. If a rule for one of
|
|
1777
|
+
* these is missing from `styles.css`, a component animates in no consumer and
|
|
1778
|
+
* says nothing about it — the C26 failure this list exists to make loud.
|
|
1779
|
+
*/
|
|
1780
|
+
declare const ALL_MOTION_CLASSES: readonly ["matrx-motion-overlay", "matrx-motion-dialog", "matrx-motion-bottom-sheet", "matrx-motion-popper", ...("matrx-motion-sheet-top" | "matrx-motion-sheet-bottom" | "matrx-motion-sheet-left" | "matrx-motion-sheet-right" | "matrx-motion-sheet-center")[], "matrx-pulse", "matrx-spin"];
|
|
1781
|
+
/**
|
|
1782
|
+
* The host-plugin utilities this package is forbidden to emit. They are
|
|
1783
|
+
* supplied by `tailwindcss-animate` / `tw-animate-css`, which is a HOST CSS
|
|
1784
|
+
* entry concern a package cannot declare a dependency on: three of the four
|
|
1785
|
+
* AI Matrx consumers never loaded it, so every surface wearing these appeared
|
|
1786
|
+
* with no animation and no error. `styles.test.ts` fails the build if one
|
|
1787
|
+
* comes back.
|
|
1788
|
+
*/
|
|
1789
|
+
declare const FORBIDDEN_HOST_MOTION_UTILITIES: readonly ["animate-in", "animate-out", "fade-in", "fade-out", "zoom-in", "zoom-out", "slide-in-from", "slide-out-to", "animate-accordion", "animate-slide-down", "animate-slide-up", "animate-pulse", "animate-spin"];
|
|
1790
|
+
|
|
1791
|
+
export { ALL_MOTION_CLASSES, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, 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, type CollapsibleContentProps, 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, FORBIDDEN_HOST_MOTION_UTILITIES, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, Label, MOBILE_BREAKPOINT, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, OverflowToolbar, type OverflowToolbarProps, type PickerIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, 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, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, 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, useAccordionSize, useCardSize, useDialogContainer, useDrawerDirection, useIsMobile, usePortalContainer, useRadixDialogModal, useScrollFade, useTableSize };
|