@karakuri-ui/react 0.2.3 → 0.3.0

package/dist/components/ui/divider.mjs

@@ -0,0 +1,112 @@
+"use client";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const dividerVariants = cva("shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full self-stretch"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    },
+    color: {
+      default: "border-border-subtle",
+      muted: "border-border-subtle",
+      strong: "border-border-strong"
+    },
+    spacing: {
+      sm: "",
+      md: "",
+      default: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    // Horizontal spacing
+    { orientation: "horizontal", spacing: "sm", className: "my-2" },
+    { orientation: "horizontal", spacing: "md", className: "my-3" },
+    { orientation: "horizontal", spacing: "default", className: "my-4" },
+    { orientation: "horizontal", spacing: "lg", className: "my-8" },
+    // Vertical spacing
+    { orientation: "vertical", spacing: "sm", className: "mx-2" },
+    { orientation: "vertical", spacing: "md", className: "mx-3" },
+    { orientation: "vertical", spacing: "default", className: "mx-4" },
+    { orientation: "vertical", spacing: "lg", className: "mx-8" },
+    // Horizontal line style (border-top)
+    { orientation: "horizontal", className: "border-t border-l-0" },
+    // Vertical line style (border-left)
+    { orientation: "vertical", className: "border-l border-t-0" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    color: "default",
+    spacing: "default"
+  }
+});
+const Divider = React.forwardRef(({
+  className,
+  orientation = "horizontal",
+  variant = "solid",
+  color = "default",
+  spacing = "default",
+  label,
+  labelPosition = "center",
+  decorative = true,
+  ...props
+}, ref) => {
+  const lineClass = cn(
+    "flex-1",
+    variant === "dashed" ? "border-dashed" : variant === "dotted" ? "border-dotted" : "border-solid",
+    color === "muted" ? "border-border-subtle" : color === "strong" ? "border-border-strong" : "border-border-subtle",
+    "border-t"
+  );
+  const spacingClass = spacing === "sm" ? "my-2" : spacing === "md" ? "my-3" : spacing === "lg" ? "my-8" : "my-4";
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: decorative ? "none" : "separator",
+        "aria-orientation": "horizontal",
+        className: cn(
+          "flex items-center w-full",
+          spacingClass,
+          className
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        lineClass,
+        labelPosition === "left" ? "max-w-[10%]" : ""
+      ) }),
+      /* @__PURE__ */ React.createElement("span", { className: "px-3 text-sm text-text-muted shrink-0 select-none" }, label),
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        lineClass,
+        labelPosition === "right" ? "max-w-[10%]" : ""
+      ) })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        dividerVariants({ orientation, variant, color, spacing }),
+        className
+      ),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider,
+  dividerVariants
+};
+//# sourceMappingURL=divider.mjs.map

package/dist/components/ui/divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'h-full self-stretch',\n    },\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n    },\n    color: {\n      default: 'border-border-subtle',\n      muted: 'border-border-subtle',\n      strong: 'border-border-strong',\n    },\n    spacing: {\n      sm: '',\n      md: '',\n      default: '',\n      lg: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal spacing\n    { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n    { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n    { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n    { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n    // Vertical spacing\n    { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n    { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n    { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n    { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n    // Horizontal line style (border-top)\n    { orientation: 'horizontal', className: 'border-t border-l-0' },\n    // Vertical line style (border-left)\n    { orientation: 'vertical', className: 'border-l border-t-0' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    color: 'default',\n    spacing: 'default',\n  },\n})\n\nexport interface DividerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n  /** Direction of the divider */\n  orientation?: 'horizontal' | 'vertical'\n  /** Line style */\n  variant?: 'solid' | 'dashed' | 'dotted'\n  /** Line color intensity */\n  color?: 'default' | 'muted' | 'strong'\n  /** Spacing around the divider */\n  spacing?: 'sm' | 'md' | 'default' | 'lg'\n  /** Content to display on the divider line (horizontal only) */\n  label?: React.ReactNode\n  /** Label position along the line */\n  labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({\n  className,\n  orientation = 'horizontal',\n  variant = 'solid',\n  color = 'default',\n  spacing = 'default',\n  label,\n  labelPosition = 'center',\n  decorative = true,\n  ...props\n}, ref) => {\n  // Line style class for label mode\n  const lineClass = cn(\n    'flex-1',\n    variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n    color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n    'border-t'\n  )\n\n  // Spacing class for label wrapper\n  const spacingClass =\n    spacing === 'sm' ? 'my-2'\n    : spacing === 'md' ? 'my-3'\n    : spacing === 'lg' ? 'my-8'\n    : 'my-4'\n\n  // Horizontal with label: render as flex container with two lines\n  if (label && orientation === 'horizontal') {\n    return (\n      <div\n        role={decorative ? 'none' : 'separator'}\n        aria-orientation=\"horizontal\"\n        className={cn(\n          'flex items-center w-full',\n          spacingClass,\n          className\n        )}\n      >\n        <div className={cn(\n          lineClass,\n          labelPosition === 'left' ? 'max-w-[10%]' : ''\n        )} />\n        <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n        <div className={cn(\n          lineClass,\n          labelPosition === 'right' ? 'max-w-[10%]' : ''\n        )} />\n      </div>\n    )\n  }\n\n  // Default: Radix Separator\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        dividerVariants({ orientation, variant, color, spacing }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,MAAM,kBAAkB,IAAI,YAAY;AAAA,EACtC,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA;AAAA,IAEhB,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,WAAW,WAAW,OAAO;AAAA,IACnE,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,WAAW,WAAW,OAAO;AAAA,IACjE,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE5D,EAAE,aAAa,cAAc,WAAW,sBAAsB;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,WAAW,sBAAsB;AAAA,EAC9D;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AAkBD,MAAM,UAAU,MAAM,WAGpB,CAAC;AAAA,EACD;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,GAAG,QAAQ;AAET,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,YAAY,WAAW,kBAAkB,YAAY,WAAW,kBAAkB;AAAA,IAClF,UAAU,UAAU,yBAAyB,UAAU,WAAW,yBAAyB;AAAA,IAC3F;AAAA,EACF;AAGA,QAAM,eACJ,YAAY,OAAO,SACjB,YAAY,OAAO,SACnB,YAAY,OAAO,SACnB;AAGJ,MAAI,SAAS,gBAAgB,cAAc;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,aAAa,SAAS;AAAA,QAC5B,oBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEA,oCAAC,SAAI,WAAW;AAAA,QACd;AAAA,QACA,kBAAkB,SAAS,gBAAgB;AAAA,MAC7C,GAAG;AAAA,MACH,oCAAC,UAAK,WAAU,uDAAqD,KAAM;AAAA,MAC3E,oCAAC,SAAI,WAAW;AAAA,QACd;AAAA,QACA,kBAAkB,UAAU,gBAAgB;AAAA,MAC9C,GAAG;AAAA,IACL;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,gBAAgB,EAAE,aAAa,SAAS,OAAO,QAAQ,CAAC;AAAA,QACxD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,QAAQ,cAAc;","names":[]}

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

@@ -0,0 +1,36 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare const drawerSizeHorizontal: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const drawerSizeVertical: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {
+    /** Side from which the drawer slides in */
+    side?: DrawerSide;
+    /** Panel size (width for left/right, height for top/bottom) */
+    size?: DrawerSize;
+    /** Show built-in close button */
+    showCloseButton?: boolean;
+    /** Custom close icon (replaces default X) */
+    closeIcon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical };

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

@@ -0,0 +1,36 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare const drawerSizeHorizontal: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const drawerSizeVertical: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {
+    /** Side from which the drawer slides in */
+    side?: DrawerSide;
+    /** Panel size (width for left/right, height for top/bottom) */
+    size?: DrawerSize;
+    /** Show built-in close button */
+    showCloseButton?: boolean;
+    /** Custom close icon (replaces default X) */
+    closeIcon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical };

package/dist/components/ui/drawer.js

@@ -0,0 +1,211 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drawer_exports = {};
+__export(drawer_exports, {
+  Drawer: () => Drawer,
+  DrawerBody: () => DrawerBody,
+  DrawerClose: () => DrawerClose,
+  DrawerContent: () => DrawerContent,
+  DrawerDescription: () => DrawerDescription,
+  DrawerFooter: () => DrawerFooter,
+  DrawerHeader: () => DrawerHeader,
+  DrawerOverlay: () => DrawerOverlay,
+  DrawerPortal: () => DrawerPortal,
+  DrawerTitle: () => DrawerTitle,
+  DrawerTrigger: () => DrawerTrigger,
+  drawerSizeHorizontal: () => drawerSizeHorizontal,
+  drawerSizeVertical: () => drawerSizeVertical
+});
+module.exports = __toCommonJS(drawer_exports);
+var React = __toESM(require("react"));
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+);
+const ANIMATION_CLASSES = {
+  right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
+  left: "data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit",
+  top: "data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit",
+  bottom: "data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit"
+};
+const drawerSizeHorizontal = (0, import_class_variance_authority.cva)("", {
+  variants: {
+    size: {
+      sm: "w-[320px]",
+      md: "w-[400px]",
+      lg: "w-[480px]",
+      xl: "w-[640px]",
+      full: "w-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const drawerSizeVertical = (0, import_class_variance_authority.cva)("", {
+  variants: {
+    size: {
+      sm: "h-[320px]",
+      md: "h-[400px]",
+      lg: "h-[480px]",
+      xl: "h-[640px]",
+      full: "h-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function Drawer(props) {
+  return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { ...props });
+}
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerPortal = DialogPrimitive.Portal;
+const DrawerClose = DialogPrimitive.Close;
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: (0, import_utils.cn)(
+      "fixed inset-0 z-overlay bg-black/50",
+      "data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+const SIDE_POSITION = {
+  right: "inset-y-0 right-0",
+  left: "inset-y-0 left-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
+  const isHorizontal = side === "left" || side === "right";
+  const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
+  return /* @__PURE__ */ React.createElement(DrawerPortal, null, /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: (0, import_utils.cn)(
+        "fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
+        "focus:outline-none",
+        SIDE_POSITION[side],
+        isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
+        sizeClass,
+        ANIMATION_CLASSES[side],
+        className
+      ),
+      ...props
+    },
+    children,
+    showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { className: (0, import_utils.cn)(
+      "absolute right-4 top-4 rounded-md p-1",
+      "text-text-muted hover:text-foreground",
+      "transition-colors duration-fast",
+      "focus-visible:focus-ring focus-visible:outline-none",
+      "disabled:pointer-events-none"
+    ) }, closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
+  ));
+});
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: (0, import_utils.cn)("flex flex-col gap-1.5 p-6 pb-0", className),
+    ...props
+  }
+));
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: (0, import_utils.cn)("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: (0, import_utils.cn)("text-md text-text-muted", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: (0, import_utils.cn)("flex-1 overflow-y-auto p-6", className),
+    ...props
+  }
+));
+DrawerBody.displayName = "DrawerBody";
+const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: (0, import_utils.cn)(
+      "flex items-center justify-end gap-3 p-6 pt-0",
+      className
+    ),
+    ...props
+  }
+));
+DrawerFooter.displayName = "DrawerFooter";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  drawerSizeHorizontal,
+  drawerSizeVertical
+});
+//# sourceMappingURL=drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n  right:  'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n  left:   'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n  top:    'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n  bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n  variants: {\n    size: {\n      sm:   'w-[320px]',\n      md:   'w-[400px]',\n      lg:   'w-[480px]',\n      xl:   'w-[640px]',\n      full: 'w-full',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n  variants: {\n    size: {\n      sm:   'h-[320px]',\n      md:   'h-[400px]',\n      lg:   'h-[480px]',\n      xl:   'h-[640px]',\n      full: 'h-full',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n  /** Side from which the drawer slides in */\n  side?: DrawerSide\n  /** Panel size (width for left/right, height for top/bottom) */\n  size?: DrawerSize\n  /** Show built-in close button */\n  showCloseButton?: boolean\n  /** Custom close icon (replaces default X) */\n  closeIcon?: React.ReactNode\n  children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n  right:  'inset-y-0 right-0',\n  left:   'inset-y-0 left-0',\n  top:    'inset-x-0 top-0',\n  bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n  const isHorizontal = side === 'left' || side === 'right'\n  const sizeClass = isHorizontal\n    ? drawerSizeHorizontal({ size })\n    : drawerSizeVertical({ size })\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n          'focus:outline-none',\n          SIDE_POSITION[side],\n          isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n          sizeClass,\n          ANIMATION_CLASSES[side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close className={cn(\n            'absolute right-4 top-4 rounded-md p-1',\n            'text-text-muted hover:text-foreground',\n            'transition-colors duration-fast',\n            'focus-visible:focus-ring focus-visible:outline-none',\n            'disabled:pointer-events-none'\n          )}>\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DrawerPortal>\n  )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 overflow-y-auto p-6', className)}\n    {...props}\n  />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n  drawerSizeHorizontal,\n  drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/drawer.mjs

@@ -0,0 +1,165 @@
+"use client";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+);
+const ANIMATION_CLASSES = {
+  right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
+  left: "data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit",
+  top: "data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit",
+  bottom: "data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit"
+};
+const drawerSizeHorizontal = cva("", {
+  variants: {
+    size: {
+      sm: "w-[320px]",
+      md: "w-[400px]",
+      lg: "w-[480px]",
+      xl: "w-[640px]",
+      full: "w-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const drawerSizeVertical = cva("", {
+  variants: {
+    size: {
+      sm: "h-[320px]",
+      md: "h-[400px]",
+      lg: "h-[480px]",
+      xl: "h-[640px]",
+      full: "h-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function Drawer(props) {
+  return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { ...props });
+}
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerPortal = DialogPrimitive.Portal;
+const DrawerClose = DialogPrimitive.Close;
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-overlay bg-black/50",
+      "data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+const SIDE_POSITION = {
+  right: "inset-y-0 right-0",
+  left: "inset-y-0 left-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
+  const isHorizontal = side === "left" || side === "right";
+  const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
+  return /* @__PURE__ */ React.createElement(DrawerPortal, null, /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
+        "focus:outline-none",
+        SIDE_POSITION[side],
+        isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
+        sizeClass,
+        ANIMATION_CLASSES[side],
+        className
+      ),
+      ...props
+    },
+    children,
+    showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { className: cn(
+      "absolute right-4 top-4 rounded-md p-1",
+      "text-text-muted hover:text-foreground",
+      "transition-colors duration-fast",
+      "focus-visible:focus-ring focus-visible:outline-none",
+      "disabled:pointer-events-none"
+    ) }, closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
+  ));
+});
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 p-6 pb-0", className),
+    ...props
+  }
+));
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-md text-text-muted", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex-1 overflow-y-auto p-6", className),
+    ...props
+  }
+));
+DrawerBody.displayName = "DrawerBody";
+const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-3 p-6 pt-0",
+      className
+    ),
+    ...props
+  }
+));
+DrawerFooter.displayName = "DrawerFooter";
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  drawerSizeHorizontal,
+  drawerSizeVertical
+};
+//# sourceMappingURL=drawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n  right:  'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n  left:   'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n  top:    'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n  bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n  variants: {\n    size: {\n      sm:   'w-[320px]',\n      md:   'w-[400px]',\n      lg:   'w-[480px]',\n      xl:   'w-[640px]',\n      full: 'w-full',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n  variants: {\n    size: {\n      sm:   'h-[320px]',\n      md:   'h-[400px]',\n      lg:   'h-[480px]',\n      xl:   'h-[640px]',\n      full: 'h-full',\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n  /** Side from which the drawer slides in */\n  side?: DrawerSide\n  /** Panel size (width for left/right, height for top/bottom) */\n  size?: DrawerSize\n  /** Show built-in close button */\n  showCloseButton?: boolean\n  /** Custom close icon (replaces default X) */\n  closeIcon?: React.ReactNode\n  children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n  right:  'inset-y-0 right-0',\n  left:   'inset-y-0 left-0',\n  top:    'inset-x-0 top-0',\n  bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n  const isHorizontal = side === 'left' || side === 'right'\n  const sizeClass = isHorizontal\n    ? drawerSizeHorizontal({ size })\n    : drawerSizeVertical({ size })\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n          'focus:outline-none',\n          SIDE_POSITION[side],\n          isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n          sizeClass,\n          ANIMATION_CLASSES[side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close className={cn(\n            'absolute right-4 top-4 rounded-md p-1',\n            'text-text-muted hover:text-foreground',\n            'transition-colors duration-fast',\n            'focus-visible:focus-ring focus-visible:outline-none',\n            'disabled:pointer-events-none'\n          )}>\n            {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DrawerPortal>\n  )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 overflow-y-auto p-6', className)}\n    {...props}\n  />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n  drawerSizeHorizontal,\n  drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}