@ai-matrx/design-system 0.9.0 → 0.10.1

package/dist/index.js

@@ -708,6 +708,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
 import * as React6 from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -746,7 +787,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
@@ -765,7 +807,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 = treeContainsComponent2(children, AlertDialogDescription) || treeContainsComponent2(children, AlertDialogPrimitive.Description);
   return /* @__PURE__ */ jsxs5(AlertDialogPortal, { container, children: [
     /* @__PURE__ */ jsx10(AlertDialogOverlay, {}),
@@ -775,11 +817,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,
@@ -1115,8 +1158,8 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = CommandPrimitive.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();
@@ -1126,7 +1169,10 @@ var CommandDialogContent = React13.forwardRef(({ className, children, container,
     isModal ? /* @__PURE__ */ jsx15(
       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__ */ jsxs6(
@@ -1137,6 +1183,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]"
@@ -1266,7 +1313,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__ */ jsxs7(
@@ -1292,7 +1338,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
   }
 ));
@@ -1304,7 +1350,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
     }
   ) });
@@ -1404,7 +1450,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__ */ jsx17(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx17(
       PopoverPrimitive.Content,
@@ -1419,7 +1472,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
@@ -1591,7 +1645,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__ */ jsx18(Loader2Icon, { className: "size-3.5 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx18(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  busy ? /* @__PURE__ */ jsx18(Loader2Icon, { className: "size-3.5 shrink-0 matrx-spin" }) : /* @__PURE__ */ jsx18(PlusIcon, { className: "size-3.5 shrink-0" }),
                   /* @__PURE__ */ jsx18("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
@@ -1700,7 +1754,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
@@ -1719,14 +1774,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
@@ -1758,6 +1814,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
@@ -1862,7 +1919,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__ */ jsxs10(
@@ -1888,7 +1944,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
   }
 ));
@@ -1904,7 +1960,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, conta
       className: cn(
         MENU_SURFACE_CLASS,
         "shadow-md",
-        MENU_MOTION_CLASS,
+        MOTION_POPPER,
         className
       ),
       ...props
@@ -2133,7 +2189,7 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ jsx21(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 animate-spin text-muted-foreground" }),
+      busy && /* @__PURE__ */ jsx21(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 matrx-spin text-muted-foreground" }),
       error && /* @__PURE__ */ jsx21("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
@@ -2318,7 +2374,7 @@ function ToolbarButton({
     /* @__PURE__ */ jsx24(
       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__ */ jsx24("span", { children: text })
@@ -2762,36 +2818,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__ */ jsx29(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs16(
-    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__ */ jsx29(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx29(
-          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__ */ jsx29(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs16(
+      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__ */ jsx29(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-});
+        position,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx29(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx29(
+            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__ */ jsx29(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   SelectPrimitive.Label,
@@ -2880,7 +2951,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,
@@ -2889,15 +2961,22 @@ var SheetOverlay = React25.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva5(
-  "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: {
@@ -2922,6 +3001,7 @@ var SheetContent = React25.forwardRef(
     hideCloseButton = false,
     hideOverlay = false,
     overlayClassName,
+    animated = true,
     ...props
   }, ref) => {
     const hasDescription = treeContainsComponent4(children, SheetDescription) || treeContainsComponent4(children, SheetPrimitive.Description);
@@ -2931,7 +3011,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: [
@@ -2987,14 +3071,16 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/skeleton.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
-function Skeleton({
-  className,
-  ...props
-}) {
+function Skeleton({ className, animated = true, ...props }) {
   return /* @__PURE__ */ jsx32(
     "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
     }
   );
@@ -3478,23 +3564,26 @@ import * as React30 from "react";
 import { jsx as jsx38 } from "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__ */ jsx38(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx38(
-    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__ */ jsx38(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx38(
+      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
@@ -3757,7 +3846,7 @@ import { jsx as jsx43 } from "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__ */ jsx43(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx43(
     TooltipPrimitive.Content,
@@ -3766,7 +3855,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
@@ -3775,6 +3865,7 @@ var TooltipContent = React34.forwardRef(({ className, sideOffset = 4, container,
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
+  ALL_MOTION_CLASSES,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -3805,6 +3896,7 @@ export {
   BottomSheetFooter,
   BottomSheetHeader,
   Button,
+  CENTERED_DIALOG,
   Card,
   CardAction,
   CardContent,
@@ -3882,6 +3974,7 @@ export {
   DropdownMenuTrigger,
   EditableLabel,
   EnterInput,
+  FORBIDDEN_HOST_MOTION_UTILITIES,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -3889,7 +3982,15 @@ export {
   InputWithPrefix,
   Label3 as Label,
   MOBILE_BREAKPOINT,
+  MOTION_BOTTOM_SHEET,
+  MOTION_DIALOG,
+  MOTION_OVERLAY,
+  MOTION_POPPER,
+  MOTION_PULSE,
+  MOTION_SHEET,
+  MOTION_SPIN,
   OverflowToolbar,
+  POPPER_OFFSET,
   Popover,
   PopoverAnchor,
   PopoverContent,