@zentauri-ui/zentauri-components 1.2.1 → 1.3.0

package/dist/ui/divider.mjs

@@ -1,191 +1,14 @@
 "use client";
-import { cn } from '../chunk-DFEZH7TC.mjs';
-import { motion } from 'framer-motion';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { DividerBase } from '../chunk-W6PRMYUC.mjs';
+export { dividerLabelVariants, dividerLineVariants, dividerToneVariants, dividerVariants } from '../chunk-W6PRMYUC.mjs';
+import '../chunk-DFEZH7TC.mjs';
+import { jsx } from 'react/jsx-runtime';
 
-// src/ui/divider/animations.ts
-var dividerAnimationPresets = {
-  none: {},
-  expand: {
-    initial: { scaleX: 0.6, opacity: 0.4 },
-    animate: { scaleX: 1, opacity: 1 },
-    transition: { duration: 0.35, ease: "easeOut" }
-  },
-  fade: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    transition: { duration: 0.25 }
-  }
-};
-var APPEARANCES = {
-  default: "text-slate-200",
-  muted: "text-slate-500",
-  primary: "text-cyan-300",
-  destructive: "text-rose-400",
-  ghost: "text-slate-600",
-  sky: "text-sky-400",
-  rose: "text-rose-400",
-  purple: "text-purple-400",
-  pink: "text-pink-400",
-  orange: "text-orange-400",
-  yellow: "text-yellow-400",
-  teal: "text-teal-400",
-  indigo: "text-indigo-400",
-  emerald: "text-emerald-400",
-  gray: "text-gray-400",
-  amber: "text-amber-400",
-  violet: "text-violet-400",
-  "gradient-blue": "text-blue-400",
-  "gradient-green": "text-green-400",
-  "gradient-red": "text-red-400",
-  "gradient-yellow": "text-yellow-400",
-  "gradient-purple": "text-purple-400",
-  "gradient-teal": "text-teal-400",
-  "gradient-indigo": "text-indigo-400",
-  "gradient-pink": "text-pink-400",
-  "gradient-orange": "text-orange-400"
-};
-var dividerToneVariants = cva("", {
-  variants: {
-    appearance: APPEARANCES
-  },
-  defaultVariants: { appearance: "default" }
-});
-var dividerVariants = cva("flex w-full items-center gap-3", {
-  variants: {
-    appearance: APPEARANCES,
-    orientation: {
-      horizontal: "w-full flex-row",
-      vertical: "h-full min-h-[2rem] w-auto flex-col self-stretch"
-    },
-    size: {
-      sm: "",
-      md: "",
-      lg: ""
-    }
-  },
-  compoundVariants: [
-    { orientation: "horizontal", size: "sm", class: "min-h-px" },
-    { orientation: "horizontal", size: "md", class: "min-h-[2px]" },
-    { orientation: "horizontal", size: "lg", class: "min-h-[3px]" },
-    { orientation: "vertical", size: "sm", class: "min-w-px" },
-    { orientation: "vertical", size: "md", class: "min-w-[2px]" },
-    { orientation: "vertical", size: "lg", class: "min-w-[3px]" }
-  ],
-  defaultVariants: {
-    appearance: "default",
-    orientation: "horizontal",
-    size: "md"
-  }
-});
-var dividerLineVariants = cva(
-  "shrink grow rounded-full bg-current opacity-80",
-  {
-    variants: {
-      orientation: {
-        horizontal: "h-px",
-        vertical: "w-px flex-1"
-      },
-      size: {
-        sm: "",
-        md: "",
-        lg: ""
-      }
-    },
-    compoundVariants: [
-      { orientation: "horizontal", size: "sm", class: "h-px" },
-      { orientation: "horizontal", size: "md", class: "h-0.5" },
-      { orientation: "horizontal", size: "lg", class: "h-1" },
-      { orientation: "vertical", size: "sm", class: "w-px" },
-      { orientation: "vertical", size: "md", class: "w-0.5" },
-      { orientation: "vertical", size: "lg", class: "w-1" }
-    ],
-    defaultVariants: {
-      orientation: "horizontal",
-      size: "md"
-    }
-  }
-);
-var dividerLabelVariants = cva(
-  "shrink-0 text-xs font-medium uppercase tracking-wide text-current"
-);
 function Divider(props) {
-  const {
-    className,
-    appearance,
-    orientation,
-    size,
-    animation = "none",
-    label,
-    children,
-    ref,
-    ...rest
-  } = props;
-  const motionProps = dividerAnimationPresets[animation];
-  const slot = label ?? children;
-  if (!slot) {
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        ref,
-        "data-slot": "divider",
-        role: "separator",
-        "aria-orientation": orientation === "vertical" ? "vertical" : "horizontal",
-        className: cn(
-          dividerToneVariants({ appearance }),
-          orientation === "horizontal" ? "flex w-full min-h-px flex-row items-stretch" : "flex h-full min-h-8 w-auto min-w-0 flex-col items-stretch self-stretch",
-          className
-        ),
-        initial: animation === "none" ? false : void 0,
-        ...motionProps,
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(dividerLineVariants({ orientation, size })),
-            "aria-hidden": true
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      ref,
-      "data-slot": "divider",
-      role: "separator",
-      "aria-orientation": orientation === "vertical" ? "vertical" : "horizontal",
-      className: cn(
-        dividerVariants({ appearance, orientation, size }),
-        className
-      ),
-      initial: animation === "none" ? false : void 0,
-      ...motionProps,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(dividerLineVariants({ orientation, size })),
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { "data-slot": "divider-label", className: dividerLabelVariants(), children: slot }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(dividerLineVariants({ orientation, size })),
-            "aria-hidden": true
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx(DividerBase, { ...props });
 }
 Divider.displayName = "Divider";
 
-export { Divider, dividerAnimationPresets, dividerLabelVariants, dividerLineVariants, dividerToneVariants, dividerVariants };
+export { Divider };
 //# sourceMappingURL=divider.mjs.map
 //# sourceMappingURL=divider.mjs.map

package/dist/ui/divider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/divider/animations.ts","../../src/ui/divider/variants.ts","../../src/ui/divider/divider.tsx"],"names":[],"mappings":"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","file":"divider.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { DividerAnimation } from \"./types\";\n\ntype DividerPresetMotionProps = Pick<\n  HTMLMotionProps<\"div\">,\n  \"initial\" | \"animate\" | \"transition\" | \"whileHover\"\n>;\n\nexport type DividerAnimationPresets = Record<\n  DividerAnimation,\n  DividerPresetMotionProps\n>;\n\nexport const dividerAnimationPresets: DividerAnimationPresets = {\n  none: {},\n  expand: {\n    initial: { scaleX: 0.6, opacity: 0.4 },\n    animate: { scaleX: 1, opacity: 1 },\n    transition: { duration: 0.35, ease: \"easeOut\" },\n  },\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    transition: { duration: 0.25 },\n  },\n};\n","import { cva } from \"class-variance-authority\";\n\nconst APPEARANCES = {\n  default: \"text-slate-200\",\n  muted: \"text-slate-500\",\n  primary: \"text-cyan-300\",\n  destructive: \"text-rose-400\",\n  ghost: \"text-slate-600\",\n  sky: \"text-sky-400\",\n  rose: \"text-rose-400\",\n  purple: \"text-purple-400\",\n  pink: \"text-pink-400\",\n  orange: \"text-orange-400\",\n  yellow: \"text-yellow-400\",\n  teal: \"text-teal-400\",\n  indigo: \"text-indigo-400\",\n  emerald: \"text-emerald-400\",\n  gray: \"text-gray-400\",\n  amber: \"text-amber-400\",\n  violet: \"text-violet-400\",\n  \"gradient-blue\": \"text-blue-400\",\n  \"gradient-green\": \"text-green-400\",\n  \"gradient-red\": \"text-red-400\",\n  \"gradient-yellow\": \"text-yellow-400\",\n  \"gradient-purple\": \"text-purple-400\",\n  \"gradient-teal\": \"text-teal-400\",\n  \"gradient-indigo\": \"text-indigo-400\",\n  \"gradient-pink\": \"text-pink-400\",\n  \"gradient-orange\": \"text-orange-400\",\n};\n\nexport const dividerToneVariants = cva(\"\", {\n  variants: {\n    appearance: APPEARANCES,\n  },\n  defaultVariants: { appearance: \"default\" },\n});\n\nexport const dividerVariants = cva(\"flex w-full items-center gap-3\", {\n  variants: {\n    appearance: APPEARANCES,\n    orientation: {\n      horizontal: \"w-full flex-row\",\n      vertical: \"h-full min-h-[2rem] w-auto flex-col self-stretch\",\n    },\n    size: {\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n    },\n  },\n  compoundVariants: [\n    { orientation: \"horizontal\", size: \"sm\", class: \"min-h-px\" },\n    { orientation: \"horizontal\", size: \"md\", class: \"min-h-[2px]\" },\n    { orientation: \"horizontal\", size: \"lg\", class: \"min-h-[3px]\" },\n    { orientation: \"vertical\", size: \"sm\", class: \"min-w-px\" },\n    { orientation: \"vertical\", size: \"md\", class: \"min-w-[2px]\" },\n    { orientation: \"vertical\", size: \"lg\", class: \"min-w-[3px]\" },\n  ],\n  defaultVariants: {\n    appearance: \"default\",\n    orientation: \"horizontal\",\n    size: \"md\",\n  },\n});\n\nexport const dividerLineVariants = cva(\n  \"shrink grow rounded-full bg-current opacity-80\",\n  {\n    variants: {\n      orientation: {\n        horizontal: \"h-px\",\n        vertical: \"w-px flex-1\",\n      },\n      size: {\n        sm: \"\",\n        md: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      { orientation: \"horizontal\", size: \"sm\", class: \"h-px\" },\n      { orientation: \"horizontal\", size: \"md\", class: \"h-0.5\" },\n      { orientation: \"horizontal\", size: \"lg\", class: \"h-1\" },\n      { orientation: \"vertical\", size: \"sm\", class: \"w-px\" },\n      { orientation: \"vertical\", size: \"md\", class: \"w-0.5\" },\n      { orientation: \"vertical\", size: \"lg\", class: \"w-1\" },\n    ],\n    defaultVariants: {\n      orientation: \"horizontal\",\n      size: \"md\",\n    },\n  },\n);\n\nexport const dividerLabelVariants = cva(\n  \"shrink-0 text-xs font-medium uppercase tracking-wide text-current\",\n);\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { dividerAnimationPresets } from \"./animations\";\nimport type { DividerProps } from \"./types\";\nimport {\n  dividerLabelVariants,\n  dividerLineVariants,\n  dividerToneVariants,\n  dividerVariants,\n} from \"./variants\";\n\nexport function Divider(props: DividerProps) {\n  const {\n    className,\n    appearance,\n    orientation,\n    size,\n    animation = \"none\",\n    label,\n    children,\n    ref,\n    ...rest\n  } = props;\n  const motionProps = dividerAnimationPresets[animation];\n  const slot = label ?? children;\n\n  if (!slot) {\n    return (\n      <motion.div\n        ref={ref}\n        data-slot=\"divider\"\n        role=\"separator\"\n        aria-orientation={\n          orientation === \"vertical\" ? \"vertical\" : \"horizontal\"\n        }\n        className={cn(\n          dividerToneVariants({ appearance }),\n          orientation === \"horizontal\"\n            ? \"flex w-full min-h-px flex-row items-stretch\"\n            : \"flex h-full min-h-8 w-auto min-w-0 flex-col items-stretch self-stretch\",\n          className,\n        )}\n        initial={animation === \"none\" ? false : undefined}\n        {...motionProps}\n        {...rest}\n      >\n        <span\n          className={cn(dividerLineVariants({ orientation, size }))}\n          aria-hidden\n        />\n      </motion.div>\n    );\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      data-slot=\"divider\"\n      role=\"separator\"\n      aria-orientation={orientation === \"vertical\" ? \"vertical\" : \"horizontal\"}\n      className={cn(\n        dividerVariants({ appearance, orientation, size }),\n        className,\n      )}\n      initial={animation === \"none\" ? false : undefined}\n      {...motionProps}\n      {...rest}\n    >\n      <span\n        className={cn(dividerLineVariants({ orientation, size }))}\n        aria-hidden\n      />\n      <span data-slot=\"divider-label\" className={dividerLabelVariants()}>\n        {slot}\n      </span>\n      <span\n        className={cn(dividerLineVariants({ orientation, size }))}\n        aria-hidden\n      />\n    </motion.div>\n  );\n}\n\nDivider.displayName = \"Divider\";\n"]}
+{"version":3,"sources":["../../src/ui/divider/divider.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,QAAQ,KAAA,EAAqB;AAC3C,EAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"divider.mjs","sourcesContent":["// divider.tsx — default static entry (no framer-motion)\nimport { DividerBase } from \"./divider-base\";\nimport type { DividerProps } from \"./types\";\n\nexport function Divider(props: DividerProps) {\n  return <DividerBase {...props} />;\n}\n\nDivider.displayName = \"Divider\";\n"]}

package/dist/ui/drawer/animated.d.mts

@@ -0,0 +1,23 @@
+import { DrawerContentProps } from '../drawer.mjs';
+export { Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '../drawer.mjs';
+import * as react from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
+
+type DrawerContentAnimatedProps = DrawerContentProps & {
+    animation?: DrawerAnimation;
+};
+type DrawerAnimation = "none" | "fade" | "scale" | "slide";
+type DrawerPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
+type DrawerAnimationPresets = Record<DrawerAnimation, DrawerPresetMotionProps>;
+
+declare function DrawerContentAnimated({ className, side, size, appearance, animation, children, ref, id, style, }: DrawerContentAnimatedProps): react.ReactPortal | null;
+declare namespace DrawerContentAnimated {
+    var displayName: string;
+}
+
+declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") => DrawerAnimationPresets;
+
+export { type DrawerAnimation, type DrawerAnimationPresets, DrawerContentAnimated, type DrawerContentAnimatedProps, type DrawerPresetMotionProps, drawerPanelPresets };

package/dist/ui/drawer/animated.d.ts

@@ -0,0 +1,23 @@
+import { DrawerContentProps } from '../drawer.js';
+export { Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '../drawer.js';
+import * as react from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
+
+type DrawerContentAnimatedProps = DrawerContentProps & {
+    animation?: DrawerAnimation;
+};
+type DrawerAnimation = "none" | "fade" | "scale" | "slide";
+type DrawerPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
+type DrawerAnimationPresets = Record<DrawerAnimation, DrawerPresetMotionProps>;
+
+declare function DrawerContentAnimated({ className, side, size, appearance, animation, children, ref, id, style, }: DrawerContentAnimatedProps): react.ReactPortal | null;
+declare namespace DrawerContentAnimated {
+    var displayName: string;
+}
+
+declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") => DrawerAnimationPresets;
+
+export { type DrawerAnimation, type DrawerAnimationPresets, DrawerContentAnimated, type DrawerContentAnimatedProps, type DrawerPresetMotionProps, drawerPanelPresets };

package/dist/ui/drawer/animated.js

@@ -0,0 +1,143 @@
+"use client";
+'use strict';
+
+var chunkN4NO3SYL_js = require('../../chunk-N4NO3SYL.js');
+var chunkYPLVTUYL_js = require('../../chunk-YPLVTUYL.js');
+require('../../chunk-UIYFEP3I.js');
+var chunkUOZYPWDZ_js = require('../../chunk-UOZYPWDZ.js');
+var framerMotion = require('framer-motion');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/drawer/animated/animations.ts
+var drawerPanelPresets = (side) => ({
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.2 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.98 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 32 }
+  },
+  slide: {
+    initial: side === "left" ? { x: -24, opacity: 0 } : side === "right" ? { x: 24, opacity: 0 } : side === "top" ? { y: -24, opacity: 0 } : { y: 24, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: side === "left" ? { x: -16, opacity: 0 } : side === "right" ? { x: 16, opacity: 0 } : side === "top" ? { y: -16, opacity: 0 } : { y: 16, opacity: 0 },
+    transition: { type: "spring", stiffness: 380, damping: 30 }
+  }
+});
+function DrawerContentAnimated({
+  className,
+  side = "right",
+  size,
+  appearance,
+  animation = "slide",
+  children,
+  ref,
+  id,
+  style
+}) {
+  const { open, setOpen, titleId, descriptionId, contentRef } = chunkN4NO3SYL_js.useDrawerContext("DrawerContent");
+  const resolvedSide = side ?? "right";
+  const reduceMotion = framerMotion.useReducedMotion();
+  const overlayMotion = drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+  const panelMotion = drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+  chunkYPLVTUYL_js.useFocusManagement({
+    open,
+    setOpen,
+    contentRef
+  });
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", "data-slot": "drawer-portal", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.button,
+        {
+          type: "button",
+          "aria-hidden": true,
+          tabIndex: -1,
+          "data-slot": "drawer-overlay",
+          className: chunkN4NO3SYL_js.drawerOverlayVariants(),
+          onClick: () => setOpen(false),
+          initial: animation === "none" ? false : overlayMotion.initial,
+          animate: animation === "none" ? void 0 : overlayMotion.animate,
+          exit: animation === "none" ? void 0 : overlayMotion.exit,
+          transition: overlayMotion.transition
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          "data-slot": "drawer-content",
+          tabIndex: -1,
+          className: chunkUOZYPWDZ_js.cn(
+            chunkN4NO3SYL_js.drawerContentVariants({ side: resolvedSide, size, appearance }),
+            className
+          ),
+          initial: animation === "none" ? false : panelMotion.initial,
+          animate: animation === "none" ? void 0 : panelMotion.animate,
+          exit: animation === "none" ? void 0 : panelMotion.exit,
+          transition: panelMotion.transition,
+          id,
+          style,
+          children
+        }
+      )
+    ] }) : null }),
+    portalTarget
+  );
+}
+DrawerContentAnimated.displayName = "DrawerContent";
+
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.Drawer; }
+});
+Object.defineProperty(exports, "DrawerBody", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerBody; }
+});
+Object.defineProperty(exports, "DrawerClose", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerClose; }
+});
+Object.defineProperty(exports, "DrawerFooter", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerFooter; }
+});
+Object.defineProperty(exports, "DrawerHeader", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerHeader; }
+});
+Object.defineProperty(exports, "DrawerTitle", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerTitle; }
+});
+Object.defineProperty(exports, "DrawerTrigger", {
+  enumerable: true,
+  get: function () { return chunkN4NO3SYL_js.DrawerTrigger; }
+});
+exports.DrawerContentAnimated = DrawerContentAnimated;
+exports.drawerPanelPresets = drawerPanelPresets;
+//# sourceMappingURL=animated.js.map
+//# sourceMappingURL=animated.js.map

package/dist/ui/drawer/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/drawer/animated/animations.ts","../../../src/ui/drawer/animated/drawer-content-animated.tsx"],"names":["useDrawerContext","useReducedMotion","useFocusManagement","createPortal","jsx","AnimatePresence","jsxs","motion","drawerOverlayVariants","cn","drawerContentVariants"],"mappings":"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","file":"animated.js","sourcesContent":["import { DrawerAnimationPresets } from \"./types\";\n\nexport const drawerPanelPresets = (\n  side: \"left\" | \"right\" | \"top\" | \"bottom\",\n): DrawerAnimationPresets => ({\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.98 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.98 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  slide: {\n    initial:\n      side === \"left\"\n        ? { x: -24, opacity: 0 }\n        : side === \"right\"\n          ? { x: 24, opacity: 0 }\n          : side === \"top\"\n            ? { y: -24, opacity: 0 }\n            : { y: 24, opacity: 0 },\n    animate: { x: 0, y: 0, opacity: 1 },\n    exit:\n      side === \"left\"\n        ? { x: -16, opacity: 0 }\n        : side === \"right\"\n          ? { x: 16, opacity: 0 }\n          : side === \"top\"\n            ? { y: -16, opacity: 0 }\n            : { y: 16, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n});\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport type { MutableRefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { drawerPanelPresets } from \"./animations\";\nimport { useDrawerContext } from \"../drawer-base\";\nimport {\n  drawerContentVariants,\n  drawerOverlayVariants,\n} from \"../variants\";\nimport type { DrawerContentAnimatedProps } from \"./types\";\n\nexport function DrawerContentAnimated({\n  className,\n  side = \"right\",\n  size,\n  appearance,\n  animation = \"slide\",\n  children,\n  ref,\n  id,\n  style,\n}: DrawerContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef } =\n    useDrawerContext(\"DrawerContent\");\n  const resolvedSide = side ?? \"right\";\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    drawerPanelPresets(resolvedSide)[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    drawerPanelPresets(resolvedSide)[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"drawer-portal\">\n          <motion.button\n            type=\"button\"\n            aria-hidden\n            tabIndex={-1}\n            data-slot=\"drawer-overlay\"\n            className={drawerOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as MutableRefObject<HTMLDivElement | null>).current =\n                  node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"drawer-content\"\n            tabIndex={-1}\n            className={cn(\n              drawerContentVariants({ side: resolvedSide, size, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nDrawerContentAnimated.displayName = \"DrawerContent\";\n"]}

package/dist/ui/drawer/animated.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { useDrawerContext, drawerOverlayVariants, drawerContentVariants } from '../../chunk-PGH27VTL.mjs';
+export { Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '../../chunk-PGH27VTL.mjs';
+import { useFocusManagement } from '../../chunk-WL5I7RVS.mjs';
+import '../../chunk-PMAF6FBF.mjs';
+import { cn } from '../../chunk-DFEZH7TC.mjs';
+import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/ui/drawer/animated/animations.ts
+var drawerPanelPresets = (side) => ({
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.2 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.98 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.98 },
+    transition: { type: "spring", stiffness: 420, damping: 32 }
+  },
+  slide: {
+    initial: side === "left" ? { x: -24, opacity: 0 } : side === "right" ? { x: 24, opacity: 0 } : side === "top" ? { y: -24, opacity: 0 } : { y: 24, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: side === "left" ? { x: -16, opacity: 0 } : side === "right" ? { x: 16, opacity: 0 } : side === "top" ? { y: -16, opacity: 0 } : { y: 16, opacity: 0 },
+    transition: { type: "spring", stiffness: 380, damping: 30 }
+  }
+});
+function DrawerContentAnimated({
+  className,
+  side = "right",
+  size,
+  appearance,
+  animation = "slide",
+  children,
+  ref,
+  id,
+  style
+}) {
+  const { open, setOpen, titleId, descriptionId, contentRef } = useDrawerContext("DrawerContent");
+  const resolvedSide = side ?? "right";
+  const reduceMotion = useReducedMotion();
+  const overlayMotion = drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+  const panelMotion = drawerPanelPresets(resolvedSide)[reduceMotion ? "fade" : animation];
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef
+  });
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", "data-slot": "drawer-portal", children: [
+      /* @__PURE__ */ jsx(
+        motion.button,
+        {
+          type: "button",
+          "aria-hidden": true,
+          tabIndex: -1,
+          "data-slot": "drawer-overlay",
+          className: drawerOverlayVariants(),
+          onClick: () => setOpen(false),
+          initial: animation === "none" ? false : overlayMotion.initial,
+          animate: animation === "none" ? void 0 : overlayMotion.animate,
+          exit: animation === "none" ? void 0 : overlayMotion.exit,
+          transition: overlayMotion.transition
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          "data-slot": "drawer-content",
+          tabIndex: -1,
+          className: cn(
+            drawerContentVariants({ side: resolvedSide, size, appearance }),
+            className
+          ),
+          initial: animation === "none" ? false : panelMotion.initial,
+          animate: animation === "none" ? void 0 : panelMotion.animate,
+          exit: animation === "none" ? void 0 : panelMotion.exit,
+          transition: panelMotion.transition,
+          id,
+          style,
+          children
+        }
+      )
+    ] }) : null }),
+    portalTarget
+  );
+}
+DrawerContentAnimated.displayName = "DrawerContent";
+
+export { DrawerContentAnimated, drawerPanelPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map

package/dist/ui/drawer/animated.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/drawer/animated/animations.ts","../../../src/ui/drawer/animated/drawer-content-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import { DrawerAnimationPresets } from \"./types\";\n\nexport const drawerPanelPresets = (\n  side: \"left\" | \"right\" | \"top\" | \"bottom\",\n): DrawerAnimationPresets => ({\n  none: {},\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n    transition: { duration: 0.2 },\n  },\n  scale: {\n    initial: { opacity: 0, scale: 0.98 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.98 },\n    transition: { type: \"spring\", stiffness: 420, damping: 32 },\n  },\n  slide: {\n    initial:\n      side === \"left\"\n        ? { x: -24, opacity: 0 }\n        : side === \"right\"\n          ? { x: 24, opacity: 0 }\n          : side === \"top\"\n            ? { y: -24, opacity: 0 }\n            : { y: 24, opacity: 0 },\n    animate: { x: 0, y: 0, opacity: 1 },\n    exit:\n      side === \"left\"\n        ? { x: -16, opacity: 0 }\n        : side === \"right\"\n          ? { x: 16, opacity: 0 }\n          : side === \"top\"\n            ? { y: -16, opacity: 0 }\n            : { y: 16, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 380, damping: 30 },\n  },\n});\n","\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport type { MutableRefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { useFocusManagement } from \"../../../hooks/useFocusManagement\";\n\nimport { drawerPanelPresets } from \"./animations\";\nimport { useDrawerContext } from \"../drawer-base\";\nimport {\n  drawerContentVariants,\n  drawerOverlayVariants,\n} from \"../variants\";\nimport type { DrawerContentAnimatedProps } from \"./types\";\n\nexport function DrawerContentAnimated({\n  className,\n  side = \"right\",\n  size,\n  appearance,\n  animation = \"slide\",\n  children,\n  ref,\n  id,\n  style,\n}: DrawerContentAnimatedProps) {\n  const { open, setOpen, titleId, descriptionId, contentRef } =\n    useDrawerContext(\"DrawerContent\");\n  const resolvedSide = side ?? \"right\";\n  const reduceMotion = useReducedMotion();\n  const overlayMotion =\n    drawerPanelPresets(resolvedSide)[reduceMotion ? \"fade\" : animation];\n  const panelMotion =\n    drawerPanelPresets(resolvedSide)[reduceMotion ? \"fade\" : animation];\n\n  useFocusManagement({\n    open,\n    setOpen,\n    contentRef,\n  });\n\n  const portalTarget = typeof document !== \"undefined\" ? document.body : null;\n  if (!portalTarget) {\n    return null;\n  }\n\n  return createPortal(\n    <AnimatePresence>\n      {open ? (\n        <div className=\"fixed inset-0 z-50\" data-slot=\"drawer-portal\">\n          <motion.button\n            type=\"button\"\n            aria-hidden\n            tabIndex={-1}\n            data-slot=\"drawer-overlay\"\n            className={drawerOverlayVariants()}\n            onClick={() => setOpen(false)}\n            initial={animation === \"none\" ? false : overlayMotion.initial}\n            animate={animation === \"none\" ? undefined : overlayMotion.animate}\n            exit={animation === \"none\" ? undefined : overlayMotion.exit}\n            transition={overlayMotion.transition}\n          />\n          <motion.div\n            ref={(node) => {\n              contentRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (ref as MutableRefObject<HTMLDivElement | null>).current =\n                  node;\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            data-slot=\"drawer-content\"\n            tabIndex={-1}\n            className={cn(\n              drawerContentVariants({ side: resolvedSide, size, appearance }),\n              className,\n            )}\n            initial={animation === \"none\" ? false : panelMotion.initial}\n            animate={animation === \"none\" ? undefined : panelMotion.animate}\n            exit={animation === \"none\" ? undefined : panelMotion.exit}\n            transition={panelMotion.transition}\n            id={id}\n            style={style}\n          >\n            {children}\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    portalTarget,\n  );\n}\n\nDrawerContentAnimated.displayName = \"DrawerContent\";\n"]}

package/dist/ui/drawer.d.mts

@@ -1,15 +1,9 @@
 import * as react from 'react';
-import { ReactNode, Ref, CSSProperties, HTMLAttributes } from 'react';
+import { ReactNode, Ref, CSSProperties, RefObject, HTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { VariantProps } from 'class-variance-authority';
-import { HTMLMotionProps } from 'framer-motion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
-type DrawerAnimation = "none" | "fade" | "scale" | "slide";
-type DrawerPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
-type DrawerAnimationPresets = Record<DrawerAnimation, DrawerPresetMotionProps>;
-declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") => DrawerAnimationPresets;
-
 declare const drawerOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const drawerTriggerVariants: (props?: ({
     appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
@@ -21,7 +15,6 @@ declare const drawerContentVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type DrawerContentVariantProps = VariantProps<typeof drawerContentVariants>;
-
 type DrawerProps = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -33,7 +26,6 @@ type DrawerTriggerProps = HTMLAttributes<HTMLButtonElement> & {
     appearance?: VariantProps<typeof drawerTriggerVariants>["appearance"];
 };
 type DrawerContentProps = DrawerContentVariantProps & {
-    animation?: DrawerAnimation;
     className?: string;
     children?: ReactNode;
     ref?: Ref<HTMLDivElement>;
@@ -44,6 +36,13 @@ type DrawerSectionProps = {
     className?: string;
     children?: ReactNode;
 };
+type DrawerCtx = {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    titleId: string;
+    descriptionId: string;
+    contentRef: RefObject<HTMLDivElement | null>;
+};
 
 declare function Drawer({ open, defaultOpen, onOpenChange, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
 declare namespace Drawer {
@@ -53,7 +52,7 @@ declare function DrawerTrigger({ className, children, appearance, onClick, ref,
 declare namespace DrawerTrigger {
     var displayName: string;
 }
-declare function DrawerContent({ className, side, size, appearance, animation, children, ref, id, style, }: DrawerContentProps): react.ReactPortal | null;
+declare function DrawerContent({ className, side, size, appearance, children, ref, id, style, }: DrawerContentProps): react.ReactPortal | null;
 declare namespace DrawerContent {
     var displayName: string;
 }
@@ -78,4 +77,4 @@ declare namespace DrawerClose {
     var displayName: string;
 }
 
-export { Drawer, type DrawerAnimation, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSectionProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerOverlayVariants, drawerPanelPresets };
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, type DrawerContentVariantProps, type DrawerCtx, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSectionProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerOverlayVariants };