@music-vine/cadence 2.4.0 → 2.5.0

package/dist/components/context-menu.js

@@ -8,7 +8,13 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = ({ className, inset, children, ref, ...props }) => /* @__PURE__ */ jsxs(
+const ContextMenuSubTrigger = ({
+  className,
+  inset,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     className: cn(
@@ -24,7 +30,11 @@ const ContextMenuSubTrigger = ({ className, inset, children, ref, ...props }) =>
     ]
   }
 );
-const ContextMenuSubContent = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+const ContextMenuSubContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.SubContent,
   {
     className: cn(
@@ -35,7 +45,11 @@ const ContextMenuSubContent = ({ className, ref, ...props }) => /* @__PURE__ */
     ...props
   }
 );
-const ContextMenuContent = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const ContextMenuContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     className: cn(
@@ -47,7 +61,12 @@ const ContextMenuContent = ({ className, ref, ...props }) => /* @__PURE__ */ jsx
     ...props
   }
 ) });
-const ContextMenuItem = ({ className, inset, ref, ...props }) => /* @__PURE__ */ jsx(
+const ContextMenuItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     className: cn(
@@ -60,7 +79,13 @@ const ContextMenuItem = ({ className, inset, ref, ...props }) => /* @__PURE__ */
     ...props
   }
 );
-const ContextMenuCheckboxItem = ({ className, children, checked, ref, ...props }) => /* @__PURE__ */ jsxs(
+const ContextMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     checked,
@@ -76,7 +101,12 @@ const ContextMenuCheckboxItem = ({ className, children, checked, ref, ...props }
     ]
   }
 );
-const ContextMenuRadioItem = ({ className, children, ref, ...props }) => /* @__PURE__ */ jsxs(
+const ContextMenuRadioItem = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     className: cn(
@@ -91,7 +121,12 @@ const ContextMenuRadioItem = ({ className, children, ref, ...props }) => /* @__P
     ]
   }
 );
-const ContextMenuLabel = ({ className, inset, ref, ...props }) => /* @__PURE__ */ jsx(
+const ContextMenuLabel = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     className: cn(
@@ -103,7 +138,11 @@ const ContextMenuLabel = ({ className, inset, ref, ...props }) => /* @__PURE__ *
     ...props
   }
 );
-const ContextMenuSeparator = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+const ContextMenuSeparator = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     className: cn("-mx-1 my-1 h-px bg-gray-150 dark:bg-gray-800", className),

package/dist/components/context-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/context-menu.tsx"],
-  "sourcesContent": ["/**\n * @module ContextMenu\n *\n * Right-click context menu with full keyboard navigation and accessibility.\n * Built on Radix UI Context Menu primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/context-menu Shadcn Context Menu}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/context-menu Radix Context Menu}\n *\n * @example\n * // Basic context menu\n * <ContextMenu>\n *   <ContextMenuTrigger>Right click here</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem>Edit</ContextMenuItem>\n *     <ContextMenuItem>Duplicate</ContextMenuItem>\n *     <ContextMenuSeparator />\n *     <ContextMenuItem>Delete</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n *\n * @example\n * // With submenus and keyboard shortcuts\n * <ContextMenu>\n *   <ContextMenuTrigger>Right click</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem>\n *       Copy <ContextMenuShortcut>\u2318C</ContextMenuShortcut>\n *     </ContextMenuItem>\n *     <ContextMenuSub>\n *       <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>\n *       <ContextMenuSubContent>\n *         <ContextMenuItem>Email</ContextMenuItem>\n *         <ContextMenuItem>Messages</ContextMenuItem>\n *       </ContextMenuSubContent>\n *     </ContextMenuSub>\n *   </ContextMenuContent>\n * </ContextMenu>\n *\n * @example\n * // With checkbox and radio items\n * <ContextMenuContent>\n *   <ContextMenuCheckboxItem checked={showToolbar}>\n *     Show Toolbar\n *   </ContextMenuCheckboxItem>\n *   <ContextMenuRadioGroup value={view}>\n *     <ContextMenuLabel>View</ContextMenuLabel>\n *     <ContextMenuRadioItem value=\"grid\">Grid</ContextMenuRadioItem>\n *     <ContextMenuRadioItem value=\"list\">List</ContextMenuRadioItem>\n *   </ContextMenuRadioGroup>\n * </ContextMenuContent>\n */\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages context menu state. */\nconst ContextMenu = ContextMenuPrimitive.Root;\n\n/** Element that triggers the context menu on right-click. */\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\n/** Groups related menu items together. */\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\n\n/** Portal for rendering menu content outside the DOM hierarchy. */\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\n\n/** Container for nested submenu structure. */\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\n\n/** Container for radio item selection group. */\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\n/**\n * Trigger for opening a submenu. Shows chevron indicator.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuSubTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>, \"ref\"> {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>>;\n}\n\nconst ContextMenuSubTrigger = ({ className, inset, children, ref, ...props }: ContextMenuSubTriggerProps) => (\n  <ContextMenuPrimitive.SubTrigger\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[state=open]:bg-gray-50 data-[state=open]:text-gray-950 dark:data-[state=open]:bg-gray-900 dark:data-[state=open]:text-white dark:focus:bg-gray-900 dark:focus:text-white\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n);\n\n/** Content container for submenu items. Animated on open/close. */\ninterface ContextMenuSubContentProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>, \"ref\"> {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;\n}\n\nconst ContextMenuSubContent = ({ className, ref, ...props }: ContextMenuSubContentProps) => (\n  <ContextMenuPrimitive.SubContent\n    className={cn(\n      \"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-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-md border border-gray-150 bg-white p-1 text-gray-950 shadow-md data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Main content container for the context menu. Renders in a portal with overlay. */\ninterface ContextMenuContentProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>, \"ref\"> {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Content>>;\n}\n\nconst ContextMenuContent = ({ className, ref, ...props }: ContextMenuContentProps) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      className={cn(\n        // Browser-style context menu styling - slim and clean\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-lg border border-gray-150 border-solid bg-white p-2 text-gray-950 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n);\n\n/**\n * Clickable menu item. Closes menu on selection.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>, \"ref\"> {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Item>>;\n}\n\nconst ContextMenuItem = ({ className, inset, ref, ...props }: ContextMenuItemProps) => (\n  <ContextMenuPrimitive.Item\n    className={cn(\n      // Browser-style menu item - slim padding, subtle hover\n      \"relative flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none transition-colors hover:bg-gray-50 focus:bg-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-800 dark:hover:bg-gray-800\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Toggleable checkbox menu item with check indicator when selected. */\ninterface ContextMenuCheckboxItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>, \"ref\"> {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;\n}\n\nconst ContextMenuCheckboxItem = ({ className, children, checked, ref, ...props }: ContextMenuCheckboxItemProps) => (\n  <ContextMenuPrimitive.CheckboxItem\n    checked={checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n);\n\n/** Radio option within a ContextMenuRadioGroup. Shows dot indicator when selected. */\ninterface ContextMenuRadioItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>, \"ref\"> {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;\n}\n\nconst ContextMenuRadioItem = ({ className, children, ref, ...props }: ContextMenuRadioItemProps) => (\n  <ContextMenuPrimitive.RadioItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n);\n\n/**\n * Non-interactive label for grouping menu items.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuLabelProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>, \"ref\"> {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Label>>;\n}\n\nconst ContextMenuLabel = ({ className, inset, ref, ...props }: ContextMenuLabelProps) => (\n  <ContextMenuPrimitive.Label\n    className={cn(\n      \"px-2 py-1.5 font-semibold text-gray-950 text-sm dark:text-gray-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Visual divider between menu item groups. */\ninterface ContextMenuSeparatorProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>, \"ref\"> {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;\n}\n\nconst ContextMenuSeparator = ({ className, ref, ...props }: ContextMenuSeparatorProps) => (\n  <ContextMenuPrimitive.Separator\n    className={cn(\"-mx-1 my-1 h-px bg-gray-150 dark:bg-gray-800\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Displays keyboard shortcut hint aligned to the right of a menu item. */\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn(\n      \"ml-auto text-gray-600 text-xs tracking-widest dark:text-gray-500\",\n      className\n    )}\n    {...props}\n  />\n);\nContextMenuShortcut.displayName = \"ContextMenuShortcut\";\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module ContextMenu\n *\n * Right-click context menu with full keyboard navigation and accessibility.\n * Built on Radix UI Context Menu primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/context-menu Shadcn Context Menu}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/context-menu Radix Context Menu}\n *\n * @example\n * // Basic context menu\n * <ContextMenu>\n *   <ContextMenuTrigger>Right click here</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem>Edit</ContextMenuItem>\n *     <ContextMenuItem>Duplicate</ContextMenuItem>\n *     <ContextMenuSeparator />\n *     <ContextMenuItem>Delete</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n *\n * @example\n * // With submenus and keyboard shortcuts\n * <ContextMenu>\n *   <ContextMenuTrigger>Right click</ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem>\n *       Copy <ContextMenuShortcut>\u2318C</ContextMenuShortcut>\n *     </ContextMenuItem>\n *     <ContextMenuSub>\n *       <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>\n *       <ContextMenuSubContent>\n *         <ContextMenuItem>Email</ContextMenuItem>\n *         <ContextMenuItem>Messages</ContextMenuItem>\n *       </ContextMenuSubContent>\n *     </ContextMenuSub>\n *   </ContextMenuContent>\n * </ContextMenu>\n *\n * @example\n * // With checkbox and radio items\n * <ContextMenuContent>\n *   <ContextMenuCheckboxItem checked={showToolbar}>\n *     Show Toolbar\n *   </ContextMenuCheckboxItem>\n *   <ContextMenuRadioGroup value={view}>\n *     <ContextMenuLabel>View</ContextMenuLabel>\n *     <ContextMenuRadioItem value=\"grid\">Grid</ContextMenuRadioItem>\n *     <ContextMenuRadioItem value=\"list\">List</ContextMenuRadioItem>\n *   </ContextMenuRadioGroup>\n * </ContextMenuContent>\n */\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages context menu state. */\nconst ContextMenu = ContextMenuPrimitive.Root;\n\n/** Element that triggers the context menu on right-click. */\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\n/** Groups related menu items together. */\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\n\n/** Portal for rendering menu content outside the DOM hierarchy. */\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\n\n/** Container for nested submenu structure. */\nconst ContextMenuSub = ContextMenuPrimitive.Sub;\n\n/** Container for radio item selection group. */\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\n/**\n * Trigger for opening a submenu. Shows chevron indicator.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuSubTriggerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>,\n    \"ref\"\n  > {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>>;\n}\n\nconst ContextMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ref,\n  ...props\n}: ContextMenuSubTriggerProps) => (\n  <ContextMenuPrimitive.SubTrigger\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[state=open]:bg-gray-50 data-[state=open]:text-gray-950 dark:data-[state=open]:bg-gray-900 dark:data-[state=open]:text-white dark:focus:bg-gray-900 dark:focus:text-white\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n);\n\n/** Content container for submenu items. Animated on open/close. */\ninterface ContextMenuSubContentProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>,\n    \"ref\"\n  > {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;\n}\n\nconst ContextMenuSubContent = ({\n  className,\n  ref,\n  ...props\n}: ContextMenuSubContentProps) => (\n  <ContextMenuPrimitive.SubContent\n    className={cn(\n      \"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-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-md border border-gray-150 bg-white p-1 text-gray-950 shadow-md data-[state=open]:animate-in dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Main content container for the context menu. Renders in a portal with overlay. */\ninterface ContextMenuContentProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>,\n    \"ref\"\n  > {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Content>>;\n}\n\nconst ContextMenuContent = ({\n  className,\n  ref,\n  ...props\n}: ContextMenuContentProps) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      className={cn(\n        // Browser-style context menu styling - slim and clean\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 min-w-[8rem] origin-[--radix-context-menu-content-transform-origin] overflow-hidden rounded-lg border border-gray-150 border-solid bg-white p-2 text-gray-950 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n);\n\n/**\n * Clickable menu item. Closes menu on selection.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuItemProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,\n    \"ref\"\n  > {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Item>>;\n}\n\nconst ContextMenuItem = ({\n  className,\n  inset,\n  ref,\n  ...props\n}: ContextMenuItemProps) => (\n  <ContextMenuPrimitive.Item\n    className={cn(\n      // Browser-style menu item - slim padding, subtle hover\n      \"relative flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none transition-colors hover:bg-gray-50 focus:bg-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-800 dark:hover:bg-gray-800\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Toggleable checkbox menu item with check indicator when selected. */\ninterface ContextMenuCheckboxItemProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>,\n    \"ref\"\n  > {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;\n}\n\nconst ContextMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  ref,\n  ...props\n}: ContextMenuCheckboxItemProps) => (\n  <ContextMenuPrimitive.CheckboxItem\n    checked={checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n);\n\n/** Radio option within a ContextMenuRadioGroup. Shows dot indicator when selected. */\ninterface ContextMenuRadioItemProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>,\n    \"ref\"\n  > {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;\n}\n\nconst ContextMenuRadioItem = ({\n  className,\n  children,\n  ref,\n  ...props\n}: ContextMenuRadioItemProps) => (\n  <ContextMenuPrimitive.RadioItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-gray-50 focus:text-gray-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-gray-900 dark:focus:text-white\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n);\n\n/**\n * Non-interactive label for grouping menu items.\n * @param inset - Add left padding to align with items that have icons\n */\ninterface ContextMenuLabelProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>,\n    \"ref\"\n  > {\n  inset?: boolean;\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Label>>;\n}\n\nconst ContextMenuLabel = ({\n  className,\n  inset,\n  ref,\n  ...props\n}: ContextMenuLabelProps) => (\n  <ContextMenuPrimitive.Label\n    className={cn(\n      \"px-2 py-1.5 font-semibold text-gray-950 text-sm dark:text-gray-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Visual divider between menu item groups. */\ninterface ContextMenuSeparatorProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>,\n    \"ref\"\n  > {\n  ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;\n}\n\nconst ContextMenuSeparator = ({\n  className,\n  ref,\n  ...props\n}: ContextMenuSeparatorProps) => (\n  <ContextMenuPrimitive.Separator\n    className={cn(\"-mx-1 my-1 h-px bg-gray-150 dark:bg-gray-800\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Displays keyboard shortcut hint aligned to the right of a menu item. */\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn(\n      \"ml-auto text-gray-600 text-xs tracking-widest dark:text-gray-500\",\n      className\n    )}\n    {...props}\n  />\n);\nContextMenuShortcut.displayName = \"ContextMenuShortcut\";\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],
+  "mappings": "AAiGE,SAUE,KAVF;AA7CF,YAAY,0BAA0B;AACtC,SAAS,OAAO,cAAc,cAAc;AAI5C,SAAS,UAAU;AAGnB,MAAM,cAAc,qBAAqB;AAGzC,MAAM,qBAAqB,qBAAqB;AAGhD,MAAM,mBAAmB,qBAAqB;AAG9C,MAAM,oBAAoB,qBAAqB;AAG/C,MAAM,iBAAiB,qBAAqB;AAG5C,MAAM,wBAAwB,qBAAqB;AAenD,MAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEH;AAAA;AAAA,MACD,oBAAC,gBAAa,WAAU,mBAAkB;AAAA;AAAA;AAC5C;AAYF,MAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAYF,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,oBAAC,qBAAqB,QAArB,EACC;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA;AAAA,MAET;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,GACF;AAgBF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA;AAAA,MAET;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAYF,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,0BAAC,UAAK,WAAU,gEACd,8BAAC,qBAAqB,eAArB,EACC,8BAAC,SAAM,WAAU,WAAU,GAC7B,GACF;AAAA,MACC;AAAA;AAAA;AACH;AAYF,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,0BAAC,UAAK,WAAU,gEACd,8BAAC,qBAAqB,eAArB,EACC,8BAAC,UAAO,WAAU,wBAAuB,GAC3C,GACF;AAAA,MACC;AAAA;AAAA;AACH;AAgBF,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAYF,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC,WAAW,GAAG,gDAAgD,SAAS;AAAA,IACvE;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,oBAAoB,cAAc;",
   "names": []
 }

package/dist/components/dialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/dialog.tsx"],
-  "sourcesContent": ["/**\n * @module Dialog\n *\n * Modal dialog overlay for focused user interaction. Built on Radix UI Dialog primitive.\n * Includes backdrop overlay, close button, and focus trapping.\n *\n * @see {@link https://ui.shadcn.com/docs/components/dialog Shadcn Dialog}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog Radix Dialog}\n *\n * @example\n * // Basic dialog\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open Dialog</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <Button>Confirm</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled dialog\n * const [open, setOpen] = useState(false);\n *\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Edit Profile</DialogTitle>\n *     </DialogHeader>\n *     <form onSubmit={() => setOpen(false)}>\n *       ...\n *     </form>\n *   </DialogContent>\n * </Dialog>\n */\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Echo } from \"./typography/heading\";\nimport { Text } from \"./typography/text\";\n\n/** Root component that manages dialog open/closed state. */\nconst Dialog = DialogPrimitive.Root;\n\n/** Element that opens the dialog when clicked. Use `asChild` to wrap custom buttons. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portal for rendering dialog outside the DOM hierarchy. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when clicked. Use `asChild` to wrap custom close buttons. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Semi-transparent backdrop behind the dialog. Animated fade on open/close. */\nconst DialogOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;\n}) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main dialog container. Centered on screen with close button.\n * Includes overlay, focus trap, and Escape key handling.\n */\nconst DialogContent = ({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Content>>;\n}) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        \"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%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-150 border-solid bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg dark:border-gray-800 dark:bg-gray-950\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        asChild\n        className=\"absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300\"\n      >\n        <Button aria-label=\"Close\" size=\"icon\" variant=\"transparent\">\n          <X className=\"h-5 w-5\" />\n          <span className=\"sr-only\">Close</span>\n        </Button>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n);\n\n/** Header section for dialog title and description. Centered on mobile, left-aligned on desktop. */\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Footer section for action buttons. Stacks on mobile, horizontal on desktop. */\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/** Dialog title with Echo typography. Required for accessibility. */\nconst DialogTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Title>>;\n}) => (\n  <Echo asChild>\n    <DialogPrimitive.Title className={className} ref={ref} {...props} />\n  </Echo>\n);\n\n/** Accessible description text below the title. */\nconst DialogDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Description>>;\n}) => (\n  <Text asChild className=\"text-sm\">\n    <DialogPrimitive.Description className={className} ref={ref} {...props} />\n  </Text>\n);\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],
+  "sourcesContent": ["/**\n * @module Dialog\n *\n * Modal dialog overlay for focused user interaction. Built on Radix UI Dialog primitive.\n * Includes backdrop overlay, close button, and focus trapping.\n *\n * @see {@link https://ui.shadcn.com/docs/components/dialog Shadcn Dialog}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog Radix Dialog}\n *\n * @example\n * // Basic dialog\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open Dialog</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Are you sure?</DialogTitle>\n *       <DialogDescription>\n *         This action cannot be undone.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <Button>Confirm</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @example\n * // Controlled dialog\n * const [open, setOpen] = useState(false);\n *\n * <Dialog open={open} onOpenChange={setOpen}>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Edit Profile</DialogTitle>\n *     </DialogHeader>\n *     <form onSubmit={() => setOpen(false)}>\n *       ...\n *     </form>\n *   </DialogContent>\n * </Dialog>\n */\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Echo } from \"./typography/heading\";\nimport { Text } from \"./typography/text\";\n\n/** Root component that manages dialog open/closed state. */\nconst Dialog = DialogPrimitive.Root;\n\n/** Element that opens the dialog when clicked. Use `asChild` to wrap custom buttons. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portal for rendering dialog outside the DOM hierarchy. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when clicked. Use `asChild` to wrap custom close buttons. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Semi-transparent backdrop behind the dialog. Animated fade on open/close. */\nconst DialogOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;\n}) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main dialog container. Centered on screen with close button.\n * Includes overlay, focus trap, and Escape key handling.\n */\nconst DialogContent = ({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Content>>;\n}) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      className={cn(\n        \"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%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-150 border-solid bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg dark:border-gray-800 dark:bg-gray-950\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        asChild\n        className=\"absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300\"\n      >\n        <Button aria-label=\"Close\" size=\"icon\" variant=\"transparent\">\n          <X className=\"h-5 w-5\" />\n          <span className=\"sr-only\">Close</span>\n        </Button>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n);\n\n/** Header section for dialog title and description. Centered on mobile, left-aligned on desktop. */\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** Footer section for action buttons. Stacks on mobile, horizontal on desktop. */\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/** Dialog title with Echo typography. Required for accessibility. */\nconst DialogTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Title>>;\n}) => (\n  <Echo asChild>\n    <DialogPrimitive.Title className={className} ref={ref} {...props} />\n  </Echo>\n);\n\n/** Accessible description text below the title. */\nconst DialogDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DialogPrimitive.Description>>;\n}) => (\n  <Text asChild className=\"text-sm\">\n    <DialogPrimitive.Description className={className} ref={ref} {...props} />\n  </Text>\n);\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],
   "mappings": "AAyEE,cAqCM,YArCN;AA9BF,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAIlB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,YAAY;AAGrB,MAAM,SAAS,gBAAgB;AAG/B,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAOF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,qBAAC,gBACC;AAAA,sBAAC,iBAAc;AAAA,EACf;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,SAAO;AAAA,YACP,WAAU;AAAA,YAEV,+BAAC,UAAO,cAAW,SAAQ,MAAK,QAAO,SAAQ,eAC7C;AAAA,kCAAC,KAAE,WAAU,WAAU;AAAA,cACvB,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA,eACjC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAAA,GACF;AAIF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,QAAK,SAAO,MACX,8BAAC,gBAAgB,OAAhB,EAAsB,WAAsB,KAAW,GAAG,OAAO,GACpE;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,QAAK,SAAO,MAAC,WAAU,WACtB,8BAAC,gBAAgB,aAAhB,EAA4B,WAAsB,KAAW,GAAG,OAAO,GAC1E;",
   "names": []
 }

package/dist/components/drawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/drawer.tsx"],
-  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-gray-500 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],
-  "mappings": "AAqDE,cAkEI,YAlEJ;AAZF,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAMnB,MAAM,SAAS,CAAC;AAAA,EACd,wBAAwB;AAAA,EACxB,GAAG;AACL,MACE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACC,GAAG;AAAA;AACN;AAGF,OAAO,cAAc;AAGrB,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACzD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,sBAAsB,MAAM;AAChC,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,qBAAqB;AAAA,MAC9B,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB;AAAA,cACtB;AAAA;AAAA,UACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAGA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN;",
+  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\n\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-gray-500 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],
+  "mappings": "AAsDE,cAkEI,YAlEJ;AAZF,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAMnB,MAAM,SAAS,CAAC;AAAA,EACd,wBAAwB;AAAA,EACxB,GAAG;AACL,MACE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACC,GAAG;AAAA;AACN;AAGF,OAAO,cAAc;AAGrB,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACzD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,sBAAsB,MAAM;AAChC,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,qBAAqB;AAAA,MAC9B,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB;AAAA,cACtB;AAAA;AAAA,UACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAGA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/index.js

@@ -110,10 +110,6 @@ import {
 import { Separator } from "./separator";
 import { Skeleton, SkeletonFragment } from "./skeleton";
 import { Slider, sliderVariants } from "./slider";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
-import { Textarea, textareaVariants } from "./textarea";
-import { Toaster, toast } from "./toast";
-import { ToggleButton } from "./toggle-button";
 import {
   StackingCard,
   StackingCardCheck,
@@ -125,6 +121,13 @@ import {
   StackingCardListItem,
   StackingCardTitle
 } from "./stacking-card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { Textarea, textareaVariants } from "./textarea";
+import {
+  Toaster,
+  toast
+} from "./toast";
+import { ToggleButton } from "./toggle-button";
 import {
   Alpha,
   Bravo,

package/dist/components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/index.ts"],
-  "sourcesContent": ["/**\n * Cadence UI Components\n *\n * Import components from this module:\n * @example\n * import { Button, Input } from '@music-vine/cadence/ui';\n */\n\n// Accordion\nexport {\n  Accordion,\n  AccordionContent,\n  type AccordionContentProps,\n  AccordionItem,\n  type AccordionItemProps,\n  type AccordionProps,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n  type AccordionVariant,\n} from \"./accordion\";\n\n// Badge\nexport { Badge, type BadgeProps, badgeVariants } from \"./badge\";\n\n// Breadcrumb\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"./breadcrumb\";\n\n// Button\nexport {\n  Button,\n  type ButtonFontSize,\n  type ButtonProps,\n  type ButtonSize,\n  buttonVariants,\n  Loading,\n  loadingVariants,\n  type ResponsiveButtonFontSize,\n  type ResponsiveButtonSize,\n} from \"./button\";\n\n// Card\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"./card\";\n\n// Carousel\nexport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  useCarousel,\n} from \"./carousel\";\nexport { CarouselDots } from \"./carousel-dots\";\n\n// Checkbox\nexport { Checkbox, DummyCheckbox } from \"./checkbox\";\n\n// Context Menu\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"./context-menu\";\n\n// Dialog\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from \"./dialog\";\n\n// Drawer\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"./drawer\";\n\n// Input\nexport {\n  ClearInputButton,\n  Input,\n  type InputProps,\n  inputVariants,\n} from \"./input\";\n\n// Label\nexport { Label } from \"./label\";\n\n// Popover\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from \"./popover\";\n\n// Price Tag\nexport { PriceTag, type PriceTagProps } from \"./price-tag\";\n\n// Radio Group\nexport { RadioGroup, RadioGroupItem } from \"./radio-group\";\n\n// Scroll Area\nexport { FadeAway, ScrollArea, ScrollBar } from \"./scroll-area\";\n\n// Select\nexport {\n  Select,\n  SelectContent,\n  SelectContentPopper,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\";\n\n// Separator\nexport { Separator } from \"./separator\";\n\n// Skeleton\nexport { Skeleton, SkeletonFragment } from \"./skeleton\";\n\n// Slider\nexport { Slider, type SliderProps, sliderVariants } from \"./slider\";\n\n// Tabs\nexport { Tabs, TabsContent, TabsList, TabsTrigger } from \"./tabs\";\n// Textarea\nexport { Textarea, type TextareaProps, textareaVariants } from \"./textarea\";\n// Toast\nexport { Toaster, type ToasterProps, type GlobalToastOptions, toast } from \"./toast\";\n// Toggle Button\nexport { ToggleButton, type ToggleButtonProps } from \"./toggle-button\";\n\n// Stacking Card\nexport {\n  StackingCard,\n  StackingCardCheck,\n  StackingCardContent,\n  StackingCardDescription,\n  StackingCardGroup,\n  StackingCardHeader,\n  StackingCardList,\n  StackingCardListItem,\n  StackingCardTitle,\n} from \"./stacking-card\";\n\n// Typography\nexport {\n  Alpha,\n  Bravo,\n  Charlie,\n  Delta,\n  Echo,\n  Foxtrot,\n  Heading,\n  type HeadingProps,\n  headingVariants,\n  List,\n  ListItem,\n  type ListItemProps,\n  ListItemTick,\n  type ListProps,\n  listVariants,\n  Prose,\n  Text,\n  type TextProps,\n  textVariants,\n} from \"./typography\";\n"],
-  "mappings": "AASA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OAGK;AAGP,SAAS,OAAwB,qBAAqB;AAGtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,UAAU,qBAAqB;AAGxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAGP,SAAS,aAAa;AAGtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,gBAAoC;AAG7C,SAAS,YAAY,sBAAsB;AAG3C,SAAS,UAAU,YAAY,iBAAiB;AAGhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAG1B,SAAS,UAAU,wBAAwB;AAG3C,SAAS,QAA0B,sBAAsB;AAGzD,SAAS,MAAM,aAAa,UAAU,mBAAmB;AAEzD,SAAS,UAA8B,wBAAwB;AAE/D,SAAS,SAAqD,aAAa;AAE3E,SAAS,oBAA4C;AAGrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;",
+  "sourcesContent": ["/**\n * Cadence UI Components\n *\n * Import components from this module:\n * @example\n * import { Button, Input } from '@music-vine/cadence/ui';\n */\n\n// Accordion\nexport {\n  Accordion,\n  AccordionContent,\n  type AccordionContentProps,\n  AccordionItem,\n  type AccordionItemProps,\n  type AccordionProps,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n  type AccordionVariant,\n} from \"./accordion\";\n\n// Badge\nexport { Badge, type BadgeProps, badgeVariants } from \"./badge\";\n\n// Breadcrumb\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"./breadcrumb\";\n\n// Button\nexport {\n  Button,\n  type ButtonFontSize,\n  type ButtonProps,\n  type ButtonSize,\n  buttonVariants,\n  Loading,\n  loadingVariants,\n  type ResponsiveButtonFontSize,\n  type ResponsiveButtonSize,\n} from \"./button\";\n\n// Card\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"./card\";\n\n// Carousel\nexport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  useCarousel,\n} from \"./carousel\";\nexport { CarouselDots } from \"./carousel-dots\";\n\n// Checkbox\nexport { Checkbox, DummyCheckbox } from \"./checkbox\";\n\n// Context Menu\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"./context-menu\";\n\n// Dialog\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from \"./dialog\";\n\n// Drawer\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"./drawer\";\n\n// Input\nexport {\n  ClearInputButton,\n  Input,\n  type InputProps,\n  inputVariants,\n} from \"./input\";\n\n// Label\nexport { Label } from \"./label\";\n\n// Popover\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from \"./popover\";\n\n// Price Tag\nexport { PriceTag, type PriceTagProps } from \"./price-tag\";\n\n// Radio Group\nexport { RadioGroup, RadioGroupItem } from \"./radio-group\";\n\n// Scroll Area\nexport { FadeAway, ScrollArea, ScrollBar } from \"./scroll-area\";\n\n// Select\nexport {\n  Select,\n  SelectContent,\n  SelectContentPopper,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"./select\";\n\n// Separator\nexport { Separator } from \"./separator\";\n\n// Skeleton\nexport { Skeleton, SkeletonFragment } from \"./skeleton\";\n\n// Slider\nexport { Slider, type SliderProps, sliderVariants } from \"./slider\";\n// Stacking Card\nexport {\n  StackingCard,\n  StackingCardCheck,\n  StackingCardContent,\n  StackingCardDescription,\n  StackingCardGroup,\n  StackingCardHeader,\n  StackingCardList,\n  StackingCardListItem,\n  StackingCardTitle,\n} from \"./stacking-card\";\n// Tabs\nexport { Tabs, TabsContent, TabsList, TabsTrigger } from \"./tabs\";\n// Textarea\nexport { Textarea, type TextareaProps, textareaVariants } from \"./textarea\";\n// Toast\nexport {\n  type GlobalToastOptions,\n  Toaster,\n  type ToasterProps,\n  toast,\n} from \"./toast\";\n// Toggle Button\nexport { ToggleButton, type ToggleButtonProps } from \"./toggle-button\";\n\n// Typography\nexport {\n  Alpha,\n  Bravo,\n  Charlie,\n  Delta,\n  Echo,\n  Foxtrot,\n  Heading,\n  type HeadingProps,\n  headingVariants,\n  List,\n  ListItem,\n  type ListItemProps,\n  ListItemTick,\n  type ListProps,\n  listVariants,\n  Prose,\n  Text,\n  type TextProps,\n  textVariants,\n} from \"./typography\";\n"],
+  "mappings": "AASA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OAGK;AAGP,SAAS,OAAwB,qBAAqB;AAGtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,UAAU,qBAAqB;AAGxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAGP,SAAS,aAAa;AAGtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,gBAAoC;AAG7C,SAAS,YAAY,sBAAsB;AAG3C,SAAS,UAAU,YAAY,iBAAiB;AAGhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAG1B,SAAS,UAAU,wBAAwB;AAG3C,SAAS,QAA0B,sBAAsB;AAEzD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,MAAM,aAAa,UAAU,mBAAmB;AAEzD,SAAS,UAA8B,wBAAwB;AAE/D;AAAA,EAEE;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,oBAA4C;AAGrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;",
   "names": []
 }

package/dist/components/input.js

@@ -147,7 +147,11 @@ const Input = ({
     }
   );
 };
-const ClearInputButton = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(
+const ClearInputButton = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "button",
   {
     className: cn(

package/dist/components/input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/input.tsx"],
-  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n    // default clear button\n    \"dark:[&::-webkit-search-cancel-button]:hidden\",\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit hasLeftIcon and hasRightIcon from the public API\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({ className, ref, ...props }: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n    // default clear button\n    \"dark:[&::-webkit-search-cancel-button]:hidden\",\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit hasLeftIcon and hasRightIcon from the public API\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({\n  className,\n  ref,\n  ...props\n}: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/popover.js

@@ -11,21 +11,19 @@ const PopoverContent = ({
   sideOffset = 4,
   ref,
   ...props
-}) => {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
-    {
-      align,
-      className: cn(
-        "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
-        className
-      ),
-      ref,
-      sideOffset,
-      ...props
-    }
-  ) });
-};
+}) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    align,
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) });
 export {
   Popover,
   PopoverAnchor,

package/dist/components/popover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/popover.tsx"],
-  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => {\n  return (\n    <PopoverPrimitive.Portal forceMount={forceMount}>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(\n          \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n          className\n        )}\n        ref={ref}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
-  "mappings": "AA0EM;AAjCN,SAAS,WAAW,wBAAwB;AAI5C,SAAS,UAAU;AAGnB,MAAM,UAAU,iBAAiB;AAGjC,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAQvC,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAEM;AACJ,SACE,oBAAC,iBAAiB,QAAjB,EAAwB,YACvB;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;",
+  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => (\n  <PopoverPrimitive.Portal forceMount={forceMount}>\n    <PopoverPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n);\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
+  "mappings": "AAyEI;AAhCJ,SAAS,WAAW,wBAAwB;AAI5C,SAAS,UAAU;AAGnB,MAAM,UAAU,iBAAiB;AAGjC,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAQvC,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,iBAAiB,QAAjB,EAAwB,YACvB;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,GACF;",
   "names": []
 }