@music-vine/cadence 2.6.2 → 3.0.0

package/dist/components/context-menu.d.ts

@@ -0,0 +1,126 @@
+/**
+ * @module ContextMenu
+ *
+ * Right-click context menu with full keyboard navigation and accessibility.
+ * Built on Radix UI Context Menu primitive.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/context-menu Shadcn Context Menu}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/context-menu Radix Context Menu}
+ *
+ * @example
+ * // Basic context menu
+ * <ContextMenu>
+ *   <ContextMenuTrigger>Right click here</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem>Edit</ContextMenuItem>
+ *     <ContextMenuItem>Duplicate</ContextMenuItem>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem>Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ *
+ * @example
+ * // With submenus and keyboard shortcuts
+ * <ContextMenu>
+ *   <ContextMenuTrigger>Right click</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem>
+ *       Copy <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+ *     </ContextMenuItem>
+ *     <ContextMenuSub>
+ *       <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+ *       <ContextMenuSubContent>
+ *         <ContextMenuItem>Email</ContextMenuItem>
+ *         <ContextMenuItem>Messages</ContextMenuItem>
+ *       </ContextMenuSubContent>
+ *     </ContextMenuSub>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ *
+ * @example
+ * // With checkbox and radio items
+ * <ContextMenuContent>
+ *   <ContextMenuCheckboxItem checked={showToolbar}>
+ *     Show Toolbar
+ *   </ContextMenuCheckboxItem>
+ *   <ContextMenuRadioGroup value={view}>
+ *     <ContextMenuLabel>View</ContextMenuLabel>
+ *     <ContextMenuRadioItem value="grid">Grid</ContextMenuRadioItem>
+ *     <ContextMenuRadioItem value="list">List</ContextMenuRadioItem>
+ *   </ContextMenuRadioGroup>
+ * </ContextMenuContent>
+ */
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import type * as React from "react";
+import type { Ref } from "react";
+/** Root component that manages context menu state. */
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+/** Element that triggers the context menu on right-click. */
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+/** Groups related menu items together. */
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Portal for rendering menu content outside the DOM hierarchy. */
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+/** Container for nested submenu structure. */
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+/** Container for radio item selection group. */
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Trigger for opening a submenu. Shows chevron indicator.
+ * @param inset - Add left padding to align with items that have icons
+ */
+interface ContextMenuSubTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>, "ref"> {
+    inset?: boolean;
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>>;
+}
+declare const ContextMenuSubTrigger: ({ className, inset, children, ref, ...props }: ContextMenuSubTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/** Content container for submenu items. Animated on open/close. */
+interface ContextMenuSubContentProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>, "ref"> {
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.SubContent>>;
+}
+declare const ContextMenuSubContent: ({ className, ref, ...props }: ContextMenuSubContentProps) => import("react/jsx-runtime").JSX.Element;
+/** Main content container for the context menu. Renders in a portal with overlay. */
+interface ContextMenuContentProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>, "ref"> {
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Content>>;
+}
+declare const ContextMenuContent: ({ className, ref, ...props }: ContextMenuContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Clickable menu item. Closes menu on selection.
+ * @param inset - Add left padding to align with items that have icons
+ */
+interface ContextMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>, "ref"> {
+    inset?: boolean;
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Item>>;
+}
+declare const ContextMenuItem: ({ className, inset, ref, ...props }: ContextMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+/** Toggleable checkbox menu item with check indicator when selected. */
+interface ContextMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>, "ref"> {
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>>;
+}
+declare const ContextMenuCheckboxItem: ({ className, children, checked, ref, ...props }: ContextMenuCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
+/** Radio option within a ContextMenuRadioGroup. Shows dot indicator when selected. */
+interface ContextMenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>, "ref"> {
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.RadioItem>>;
+}
+declare const ContextMenuRadioItem: ({ className, children, ref, ...props }: ContextMenuRadioItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Non-interactive label for grouping menu items.
+ * @param inset - Add left padding to align with items that have icons
+ */
+interface ContextMenuLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>, "ref"> {
+    inset?: boolean;
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Label>>;
+}
+declare const ContextMenuLabel: ({ className, inset, ref, ...props }: ContextMenuLabelProps) => import("react/jsx-runtime").JSX.Element;
+/** Visual divider between menu item groups. */
+interface ContextMenuSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>, "ref"> {
+    ref?: Ref<React.ElementRef<typeof ContextMenuPrimitive.Separator>>;
+}
+declare const ContextMenuSeparator: ({ className, ref, ...props }: ContextMenuSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+/** Displays keyboard shortcut hint aligned to the right of a menu item. */
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/components/context-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/context-menu.js

@@ -18,7 +18,7 @@ const ContextMenuSubTrigger = ({
   ContextMenuPrimitive.SubTrigger,
   {
     className: cn(
-      "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",
+      "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden 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",
       inset && "pl-8",
       className
     ),
@@ -38,7 +38,7 @@ const ContextMenuSubContent = ({
   ContextMenuPrimitive.SubContent,
   {
     className: cn(
-      "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",
+      "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",
       className
     ),
     ref,
@@ -54,7 +54,7 @@ const ContextMenuContent = ({
   {
     className: cn(
       // Browser-style context menu styling - slim and clean
-      "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",
+      "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-hidden 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",
       className
     ),
     ref,
@@ -71,7 +71,7 @@ const ContextMenuItem = ({
   {
     className: cn(
       // Browser-style menu item - slim padding, subtle hover
-      "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",
+      "relative flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-hidden 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",
       inset && "pl-8",
       className
     ),
@@ -90,7 +90,7 @@ const ContextMenuCheckboxItem = ({
   {
     checked,
     className: cn(
-      "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",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden 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",
       className
     ),
     ref,
@@ -110,7 +110,7 @@ const ContextMenuRadioItem = ({
   ContextMenuPrimitive.RadioItem,
   {
     className: cn(
-      "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",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden 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",
       className
     ),
     ref,

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 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"],
+  "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-xs px-2 py-1.5 text-sm outline-hidden 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-hidden 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-hidden 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-xs py-1.5 pr-2 pl-8 text-sm outline-hidden 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-xs py-1.5 pr-2 pl-8 text-sm outline-hidden 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": "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",
   "names": []
 }

package/dist/components/dialog.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @module Dialog
+ *
+ * Modal dialog overlay for focused user interaction. Built on Radix UI Dialog primitive.
+ * Includes backdrop overlay, close button, and focus trapping.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/dialog Shadcn Dialog}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog Radix Dialog}
+ *
+ * @example
+ * // Basic dialog
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button>Open Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Are you sure?</DialogTitle>
+ *       <DialogDescription>
+ *         This action cannot be undone.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button>Confirm</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * @example
+ * // Controlled dialog
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Edit Profile</DialogTitle>
+ *     </DialogHeader>
+ *     <form onSubmit={() => setOpen(false)}>
+ *       ...
+ *     </form>
+ *   </DialogContent>
+ * </Dialog>
+ */
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type * as React from "react";
+import type { Ref } from "react";
+/** Root component that manages dialog open/closed state. */
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+/** Element that opens the dialog when clicked. Use `asChild` to wrap custom buttons. */
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Portal for rendering dialog outside the DOM hierarchy. */
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+/** Closes the dialog when clicked. Use `asChild` to wrap custom close buttons. */
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** Semi-transparent backdrop behind the dialog. Animated fade on open/close. */
+declare const DialogOverlay: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    ref?: Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Main dialog container. Centered on screen with close button.
+ * Includes overlay, focus trap, and Escape key handling.
+ */
+declare const DialogContent: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    ref?: Ref<React.ElementRef<typeof DialogPrimitive.Content>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Header section for dialog title and description. Centered on mobile, left-aligned on desktop. */
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Footer section for action buttons. Stacks on mobile, horizontal on desktop. */
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Dialog title with Echo typography. Required for accessibility. */
+declare const DialogTitle: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    ref?: Ref<React.ElementRef<typeof DialogPrimitive.Title>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Accessible description text below the title. */
+declare const DialogDescription: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    ref?: Ref<React.ElementRef<typeof DialogPrimitive.Description>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,4DAA4D;AAC5D,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,wFAAwF;AACxF,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,6DAA6D;AAC7D,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,kFAAkF;AAClF,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,gFAAgF;AAChF,QAAA,MAAM,aAAa,GAAI,8BAIpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CASA,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,wCAKpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CAuBA,CAAC;AAEF,oGAAoG;AACpG,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,kFAAkF;AAClF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,qEAAqE;AACrE,QAAA,MAAM,WAAW,GAAI,8BAIlB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;CAC3D,4CASA,CAAC;AAEF,mDAAmD;AACnD,QAAA,MAAM,iBAAiB,GAAI,8BAIxB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,GAAG;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC;CACjE,4CAMA,CAAC;AAEF,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}

package/dist/components/dialog.js

@@ -46,7 +46,7 @@ const DialogContent = ({
           DialogPrimitive.Close,
           {
             asChild: true,
-            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",
+            className: "absolute top-4 right-4 opacity-100 ring-offset-white transition-opacity hover:opacity-100 focus:outline-hidden 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",
             children: /* @__PURE__ */ jsxs(Button, { "aria-label": "Close", size: "icon", variant: "transparent", children: [
               /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

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 * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { headingVariants } from \"./typography/heading\";\nimport { textVariants } 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  <DialogPrimitive.Title\n    className={cn(\n      headingVariants({ variant: \"h5\", fontFamily: \"brand\" }),\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\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  <DialogPrimitive.Description\n    className={cn(textVariants(), \"text-sm\", className)}\n    ref={ref}\n    {...props}\n  />\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 { headingVariants } from \"./typography/heading\";\nimport { textVariants } 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-hidden 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  <DialogPrimitive.Title\n    className={cn(\n      headingVariants({ variant: \"h5\", fontFamily: \"brand\" }),\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\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  <DialogPrimitive.Description\n    className={cn(textVariants(), \"text-sm\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],
   "mappings": "AAyEE,cAqCM,YArCN;AA9BF,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAIlB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,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;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT,gBAAgB,EAAE,SAAS,MAAM,YAAY,QAAQ,CAAC;AAAA,MACtD;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,aAAa,GAAG,WAAW,SAAS;AAAA,IAClD;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/drawer.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @module Drawer
+ *
+ * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.
+ * Supports drag-to-dismiss, snap points, and background scaling.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}
+ * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}
+ *
+ * @example
+ * // Basic drawer
+ * <Drawer>
+ *   <DrawerTrigger asChild>
+ *     <Button>Open Drawer</Button>
+ *   </DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Settings</DrawerTitle>
+ *       <DrawerDescription>Adjust your preferences</DrawerDescription>
+ *     </DrawerHeader>
+ *     <div className="p-4">Content here</div>
+ *     <DrawerFooter>
+ *       <DrawerClose asChild>
+ *         <Button variant="outline">Close</Button>
+ *       </DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ *
+ * @example
+ * // Controlled drawer with custom handle
+ * const [open, setOpen] = useState(false);
+ *
+ * <Drawer open={open} onOpenChange={setOpen}>
+ *   <DrawerContent handleColor="dark">
+ *     <DrawerTitle>Menu</DrawerTitle>
+ *   </DrawerContent>
+ * </Drawer>
+ */
+import type * as React from "react";
+import type { Ref } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+/**
+ * Root drawer component. Scales background by default.
+ * @param shouldScaleBackground - Scale page content when drawer opens (default: true)
+ */
+declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */
+declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Portal for rendering drawer outside the DOM hierarchy. */
+declare const DrawerPortal: typeof import("vaul").Portal;
+/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */
+declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** Semi-transparent backdrop behind the drawer. */
+declare const DrawerOverlay: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Main drawer content container. Slides up from bottom with drag handle.
+ * @param handleColor - Handle bar color: `"default"`, `"dark"`, `"light"`, or `"custom"`
+ * @param customHandleColor - Tailwind class for custom handle color (when handleColor="custom")
+ */
+declare const DrawerContent: ({ className, children, handleColor, customHandleColor, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    handleColor?: "default" | "dark" | "light" | "custom";
+    customHandleColor?: string;
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */
+declare const DrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Footer section for action buttons, pushed to bottom of drawer. */
+declare const DrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Drawer title with semibold weight. Required for accessibility. */
+declare const DrawerTitle: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Muted description text below the title. */
+declare const DrawerDescription: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD;;;GAGG;AACH,QAAA,MAAM,MAAM;0CAGT,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;;CAKnD,CAAC;AAIF,yFAAyF;AACzF,QAAA,MAAM,aAAa,+HAA0B,CAAC;AAE9C,6DAA6D;AAC7D,QAAA,MAAM,YAAY,8BAAyB,CAAC;AAE5C,kFAAkF;AAClF,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,mDAAmD;AACnD,QAAA,MAAM,aAAa,GAAI,8BAIpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CAMA,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,wEAOpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CAoCA,CAAC;AAEF,oGAAoG;AACpG,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAC;AAIF,qEAAqE;AACrE,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAC;AAIF,qEAAqE;AACrE,QAAA,MAAM,WAAW,GAAI,8BAIlB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;CAC3D,4CASA,CAAC;AAEF,8CAA8C;AAC9C,QAAA,MAAM,iBAAiB,GAAI,8BAIxB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,GAAG;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC;CACjE,4CAMA,CAAC;AAEF,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}

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 */\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"],
+  "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  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\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.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Cadence UI Components
+ *
+ * Import components from this module:
+ * @example
+ * import { Button, Input } from '@music-vine/cadence/ui';
+ */
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, } from "./accordion";
+export { Badge, type BadgeProps, badgeVariants } from "./badge";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb";
+export { Button, type ButtonFontSize, type ButtonProps, type ButtonSize, buttonVariants, Loading, loadingVariants, type ResponsiveButtonFontSize, type ResponsiveButtonSize, } from "./button";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card";
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, } from "./carousel";
+export { CarouselDots } from "./carousel-dots";
+export { Checkbox, DummyCheckbox } from "./checkbox";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./dialog";
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from "./drawer";
+export { ClearInputButton, Input, type InputProps, inputVariants, } from "./input";
+export { Label } from "./label";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "./popover";
+export { PriceTag, type PriceTagProps } from "./price-tag";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export { FadeAway, ScrollArea, ScrollBar } from "./scroll-area";
+export { ScrollDrum, ScrollDrumColumn, type ScrollDrumColumnProps, ScrollDrumGroup, type ScrollDrumGroupProps, type ScrollDrumProps, } from "./scroll-drum";
+export { Select, SelectContent, SelectContentPopper, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export { Separator } from "./separator";
+export { Skeleton, SkeletonFragment } from "./skeleton";
+export { Slider, type SliderProps, sliderVariants } from "./slider";
+export { StackingCard, StackingCardCheck, StackingCardContent, StackingCardDescription, StackingCardGroup, StackingCardHeader, StackingCardList, StackingCardListItem, StackingCardTitle, } from "./stacking-card";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+export { Textarea, type TextareaProps, textareaVariants } from "./textarea";
+export { type GlobalToastOptions, Toaster, type ToasterProps, toast, } from "./toast";
+export { ToggleButton, type ToggleButtonProps } from "./toggle-button";
+export { Alpha, Bravo, Charlie, Delta, Echo, Foxtrot, Heading, type HeadingProps, headingVariants, List, ListItem, type ListItemProps, ListItemTick, type ListProps, listVariants, Prose, Text, type TextProps, textVariants, } from "./typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}