@ai-matrx/design-system 0.9.0 → 0.10.1

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ALL_MOTION_CLASSES: () => ALL_MOTION_CLASSES,
   Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
@@ -61,6 +62,7 @@ __export(src_exports, {
   BottomSheetFooter: () => BottomSheetFooter,
   BottomSheetHeader: () => BottomSheetHeader,
   Button: () => Button,
+  CENTERED_DIALOG: () => CENTERED_DIALOG,
   Card: () => Card,
   CardAction: () => CardAction,
   CardContent: () => CardContent,
@@ -138,6 +140,7 @@ __export(src_exports, {
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   EditableLabel: () => EditableLabel,
   EnterInput: () => EnterInput,
+  FORBIDDEN_HOST_MOTION_UTILITIES: () => FORBIDDEN_HOST_MOTION_UTILITIES,
   HoverCard: () => HoverCard,
   HoverCardContent: () => HoverCardContent,
   HoverCardTrigger: () => HoverCardTrigger,
@@ -145,7 +148,15 @@ __export(src_exports, {
   InputWithPrefix: () => InputWithPrefix,
   Label: () => Label3,
   MOBILE_BREAKPOINT: () => MOBILE_BREAKPOINT,
+  MOTION_BOTTOM_SHEET: () => MOTION_BOTTOM_SHEET,
+  MOTION_DIALOG: () => MOTION_DIALOG,
+  MOTION_OVERLAY: () => MOTION_OVERLAY,
+  MOTION_POPPER: () => MOTION_POPPER,
+  MOTION_PULSE: () => MOTION_PULSE,
+  MOTION_SHEET: () => MOTION_SHEET,
+  MOTION_SPIN: () => MOTION_SPIN,
   OverflowToolbar: () => OverflowToolbar,
+  POPPER_OFFSET: () => POPPER_OFFSET,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
@@ -938,6 +949,47 @@ var Button = React5.forwardRef(
 );
 Button.displayName = "Button";
 
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var CENTERED_DIALOG = "matrx-dialog-centered";
+var POPPER_OFFSET = "matrx-popper-offset";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+var FORBIDDEN_HOST_MOTION_UTILITIES = [
+  "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"
+];
+
 // src/portal-container.tsx
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -976,7 +1028,8 @@ var AlertDialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /*
     ref,
     "data-slot": "alert-dialog-overlay",
     className: cn(
-      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props
@@ -995,7 +1048,7 @@ var AlertDialogDescription = React7.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React7.forwardRef(({ className, children, container, ...props }, ref) => {
+var AlertDialogContent = React7.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = (0, import_react_tree2.treeContainsComponent)(children, AlertDialogDescription) || (0, import_react_tree2.treeContainsComponent)(children, AlertDialogPrimitive.Description);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(AlertDialogPortal, { container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AlertDialogOverlay, {}),
@@ -1005,11 +1058,12 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, ..
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+          `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
           // Ruling 3 — never taller than the viewport, always scrollable, and
           // the footer stays reachable via --dialog-pad like Dialog's.
           "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          "sm:rounded-lg",
+          animated && MOTION_DIALOG,
           className
         ),
         ...props,
@@ -1345,8 +1399,8 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-var DIALOG_DESKTOP_CLASSES = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
-var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
+var DIALOG_DESKTOP_CLASSES = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
+var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var CommandDialogContent = React13.forwardRef(({ className, children, container, ...props }, ref) => {
   const isMobile = useIsMobile();
@@ -1356,7 +1410,10 @@ var CommandDialogContent = React13.forwardRef(({ className, children, container,
     isModal ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       DialogPrimitive.Overlay,
       {
-        className: "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        className: cn(
+          "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+          MOTION_OVERLAY
+        )
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -1367,6 +1424,7 @@ var CommandDialogContent = React13.forwardRef(({ className, children, container,
         "aria-describedby": void 0,
         className: cn(
           isMobile ? DIALOG_MOBILE_SHEET_CLASSES : DIALOG_DESKTOP_CLASSES,
+          isMobile ? MOTION_BOTTOM_SHEET : MOTION_DIALOG,
           className,
           isMobile && DIALOG_MOBILE_SHEET_OVERRIDE,
           !isModal && "z-[900]"
@@ -1496,7 +1554,6 @@ var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 var SURFACE_CLASS = "z-50 min-w-[8rem] max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var ContextMenuSubTrigger = React14.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -1522,7 +1579,7 @@ var ContextMenuSubContent = React14.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     "data-slot": "context-menu-sub-content",
-    className: cn(SURFACE_CLASS, "shadow-lg", MOTION_CLASS, className),
+    className: cn(SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
     ...props
   }
 ));
@@ -1534,7 +1591,7 @@ var ContextMenuContent = React14.forwardRef(({ className, container, ...props },
     {
       ref,
       "data-slot": "context-menu-content",
-      className: cn(SURFACE_CLASS, "shadow-md", MOTION_CLASS, className),
+      className: cn(SURFACE_CLASS, "shadow-md", MOTION_POPPER, className),
       ...props
     }
   ) });
@@ -1631,7 +1688,14 @@ var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverContent = React15.forwardRef(
-  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
     const portalContainer = usePortalContainer(container);
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       PopoverPrimitive.Content,
@@ -1646,7 +1710,8 @@ var PopoverContent = React15.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
           className
         ),
         ...props
@@ -1818,7 +1883,7 @@ function CreatablePicker({
                 onClick: () => void create(typed),
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50",
                 children: [
-                  busy ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  busy ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader2Icon, { className: "size-3.5 shrink-0 matrx-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
@@ -1927,7 +1992,8 @@ var DialogOverlay = React16.forwardRef(({ className, ...props }, ref) => /* @__P
     className: cn(
       // Page context behind the modal stays readable; separation comes from a
       // light token scrim, not a blur.
-      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props
@@ -1946,14 +2012,15 @@ var DialogContentPrimitive = React16.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-var DIALOG_DESKTOP_CLASSES2 = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg";
-var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full duration-200 rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom";
+var DIALOG_DESKTOP_CLASSES2 = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
+var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var DialogContent = React16.forwardRef(
   ({
     className,
     children,
     mobileSheet = true,
+    animated = true,
     showCloseButton = true,
     container,
     ...props
@@ -1985,6 +2052,7 @@ var DialogContent = React16.forwardRef(
           "data-slot": "dialog-content",
           className: cn(
             asSheet ? DIALOG_MOBILE_SHEET_CLASSES2 : DIALOG_DESKTOP_CLASSES2,
+            animated && (asSheet ? MOTION_BOTTOM_SHEET : MOTION_DIALOG),
             className,
             asSheet && DIALOG_MOBILE_SHEET_OVERRIDE2,
             // A non-modal dialog is the coexistence contract for content that
@@ -2089,7 +2157,6 @@ var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
-var MENU_MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -2115,7 +2182,7 @@ var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     "data-slot": "dropdown-menu-sub-content",
-    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MENU_MOTION_CLASS, className),
+    className: cn(MENU_SURFACE_CLASS, "shadow-lg", MOTION_POPPER, className),
     ...props
   }
 ));
@@ -2131,7 +2198,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, conta
       className: cn(
         MENU_SURFACE_CLASS,
         "shadow-md",
-        MENU_MOTION_CLASS,
+        MOTION_POPPER,
         className
       ),
       ...props
@@ -2360,7 +2427,7 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      busy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 matrx-spin text-muted-foreground" }),
       error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
@@ -2545,7 +2612,7 @@ function ToolbarButton({
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Icon2,
       {
-        className: cn("w-3.5 h-3.5 shrink-0", action.running && "animate-spin")
+        className: cn("w-3.5 h-3.5 shrink-0", action.running && "matrx-spin")
       }
     ),
     showLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: text })
@@ -2989,36 +3056,51 @@ var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React23.forwardRef(({ className, children, position = "popper", container, ...props }, ref) => {
-  const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-    SelectPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position,
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          SelectPrimitive.Viewport,
-          {
-            className: cn(
-              "p-0.5 overflow-y-auto",
-              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
-            ),
-            children
-          }
+var SelectContent = React23.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          animated && MOTION_POPPER,
+          // The resting gap from the trigger. It is the `translate` property
+          // (POPPER_OFFSET), never Tailwind translate utilities: those compose
+          // with `transform` on a v4 host and are REPLACED by it on a v3 one,
+          // so on v3 the animation ate the gap and the surface snapped 4px at
+          // the end. Same law as the centred dialog card — see motion.ts.
+          position === "popper" && POPPER_OFFSET,
+          className
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-});
+        position,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollUpButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "p-0.5 overflow-y-auto",
+                position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   SelectPrimitive.Label,
@@ -3107,7 +3189,8 @@ var SheetOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PU
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)]",
+      MOTION_OVERLAY,
       className
     ),
     ...props,
@@ -3116,15 +3199,22 @@ var SheetOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = (0, import_class_variance_authority5.cva)(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  // Motion is NOT stated here (0.10.0). The `data-[state=*]:animate-in/out`
+  // + `slide-in-from-*` pairs this base and its side variants used to carry
+  // came from the `tailwindcss-animate` HOST plugin, which three of four
+  // consumers never loaded — every sheet in them slammed open with no
+  // animation and no error. `SheetContent` now applies the package-owned
+  // `MOTION_SHEET[side]` class alongside these variants; the keyframes,
+  // durations and reduced-motion handling all live in `styles.css`.
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg data-[state=closed]:fade-out data-[state=open]:fade-in"
+        top: "inset-x-0 top-0 border-b",
+        bottom: "inset-x-0 bottom-0 border-t",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+        center: "inset-0 m-auto max-h-full max-w-full border rounded-lg"
       }
     },
     defaultVariants: {
@@ -3149,6 +3239,7 @@ var SheetContent = React25.forwardRef(
     hideCloseButton = false,
     hideOverlay = false,
     overlayClassName,
+    animated = true,
     ...props
   }, ref) => {
     const hasDescription = (0, import_react_tree4.treeContainsComponent)(children, SheetDescription) || (0, import_react_tree4.treeContainsComponent)(children, SheetPrimitive.Description);
@@ -3158,7 +3249,11 @@ var SheetContent = React25.forwardRef(
         SheetContentBase,
         {
           ref,
-          className: cn(sheetVariants({ side }), className),
+          className: cn(
+            sheetVariants({ side }),
+            animated && MOTION_SHEET[side ?? "right"],
+            className
+          ),
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
@@ -3214,14 +3309,16 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function Skeleton({
-  className,
-  ...props
-}) {
+function Skeleton({ className, animated = true, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      "data-slot": "skeleton",
+      className: cn(
+        "rounded-md bg-primary/10",
+        animated && MOTION_PULSE,
+        className
+      ),
       ...props
     }
   );
@@ -3705,23 +3802,26 @@ var React30 = __toESM(require("react"), 1);
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React30.forwardRef(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
-  const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    HoverCardPrimitive.Content,
-    {
-      ref,
-      "data-slot": "hover-card-content",
-      align,
-      sideOffset,
-      className: cn(
-        "z-[10001] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      ...props
-    }
-  ) });
-});
+var HoverCardContent = React30.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, animated = true, ...props }, ref) => {
+    const resolved = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      HoverCardPrimitive.Content,
+      {
+        ref,
+        "data-slot": "hover-card-content",
+        align,
+        sideOffset,
+        className: cn(
+          "z-[10001] w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/radio-group.tsx
@@ -3984,7 +4084,7 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
   const resolved = usePortalContainer(container);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TooltipPrimitive.Content,
@@ -3993,7 +4093,8 @@ var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, container,
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+        animated && MOTION_POPPER,
         className
       ),
       ...props