@psnext/design-system 2.3.0 → 2.4.0

package/dist/primitives/Menubar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","Icon","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/Menubar/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { Menubar as Menubar$1 } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/Menubar/Menubar.tsx
 /** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */
 function Menubar({ className, ...props }) {
@@ -77,7 +78,10 @@ function MenubarCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -89,7 +93,10 @@ function MenubarRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }
@@ -132,7 +139,10 @@ function MenubarSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(Icon, {
+			as: ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The dropdown surface for a nested submenu's items. */

package/dist/primitives/Menubar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MenubarPrimitive"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MenubarPrimitive"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/NativeSelect/index.cjs

@@ -1,9 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let lucide_react = require("lucide-react");
+const require_Icon = require("../../Icon.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/NativeSelect/NativeSelect.tsx
-const nativeSelectVariants = (0, require("class-variance-authority").cva)(require_cn.cn("flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none", "focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error aria-invalid:border-danger-border", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"), {
+const nativeSelectVariants = (0, class_variance_authority.cva)(require_cn.cn("flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none", "focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error aria-invalid:border-danger-border", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"), {
 	variants: { 
 	/** Control height + horizontal padding; matches the Input size scale. */
 size: {
@@ -27,7 +29,8 @@ function NativeSelect({ className, size = "default", children, ...props }) {
 			className: require_cn.cn(nativeSelectVariants({ size })),
 			...props,
 			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.ChevronDownIcon,
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50"
 		})]

package/dist/primitives/NativeSelect/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","ChevronDownIcon"],"sources":["../../../src/primitives/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// A styled native <select> — lighter than the Radix Select, better for long\n// option lists and native mobile behavior. Visuals mirror Input (border,\n// focus ring, aria-invalid, disabled) and share its size scale.\nconst nativeSelectVariants = cva(\n  cn(\n    \"flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none\",\n    \"focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      /** Control height + horizontal padding; matches the Input size scale. */\n      size: {\n        xs: \"h-6 pl-1.5 pr-7 text-xs leading-4\",\n        sm: \"h-8 pl-2 pr-8 text-sm leading-5\",\n        default: \"h-9 pl-3 pr-8 text-sm leading-5\",\n        lg: \"h-10 pl-4 pr-9 text-sm leading-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\n/**\n * A styled native `<select>` with a chevron affordance. Mirrors Input visuals\n * and shares its size scale; pass `<option>`/`<optgroup>` as children.\n */\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & VariantProps<typeof nativeSelectVariants>) {\n  return (\n    // The wrapper carries layout/width; the chevron is anchored to its right edge.\n    <div className={cn(\"relative w-full\", className)} data-slot=\"native-select-wrapper\">\n      <select data-slot=\"native-select\" className={cn(nativeSelectVariants({ size }))} {...props}>\n        {children}\n      </select>\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50\"\n      />\n    </div>\n  );\n}\n\nexport { NativeSelect, nativeSelectVariants };\n"],"mappings":";;;;;AASA,MAAM,wBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,uJACA,4FACA,mEACA,8EACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;;;;;AAMA,SAAS,aAAa,EACpB,WACA,OAAO,WACP,UACA,GAAG,SACwF;CAC3F,OAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,mBAAmB,SAAS;EAAG,aAAU;YAA5D,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAAQ,aAAU;GAAgB,WAAWA,WAAAA,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;GAAG,GAAI;GAClF;EACK,CAAA,GACR,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,CACE;;AAET"}
+{"version":3,"file":"index.cjs","names":["cn","Icon","ChevronDownIcon"],"sources":["../../../src/primitives/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// A styled native <select> — lighter than the Radix Select, better for long\n// option lists and native mobile behavior. Visuals mirror Input (border,\n// focus ring, aria-invalid, disabled) and share its size scale.\nconst nativeSelectVariants = cva(\n  cn(\n    \"flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none\",\n    \"focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      /** Control height + horizontal padding; matches the Input size scale. */\n      size: {\n        xs: \"h-6 pl-1.5 pr-7 text-xs leading-4\",\n        sm: \"h-8 pl-2 pr-8 text-sm leading-5\",\n        default: \"h-9 pl-3 pr-8 text-sm leading-5\",\n        lg: \"h-10 pl-4 pr-9 text-sm leading-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\n/**\n * A styled native `<select>` with a chevron affordance. Mirrors Input visuals\n * and shares its size scale; pass `<option>`/`<optgroup>` as children.\n */\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & VariantProps<typeof nativeSelectVariants>) {\n  return (\n    // The wrapper carries layout/width; the chevron is anchored to its right edge.\n    <div className={cn(\"relative w-full\", className)} data-slot=\"native-select-wrapper\">\n      <select data-slot=\"native-select\" className={cn(nativeSelectVariants({ size }))} {...props}>\n        {children}\n      </select>\n      <Icon\n        as={ChevronDownIcon}\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50\"\n      />\n    </div>\n  );\n}\n\nexport { NativeSelect, nativeSelectVariants };\n"],"mappings":";;;;;;;AAUA,MAAM,wBAAA,GAAA,yBAAA,KACJA,WAAAA,GACE,uJACA,4FACA,mEACA,8EACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;;;;;AAMA,SAAS,aAAa,EACpB,WACA,OAAO,WACP,UACA,GAAG,SACwF;CAC3F,OAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,mBAAmB,SAAS;EAAG,aAAU;YAA5D,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAAQ,aAAU;GAAgB,WAAWA,WAAAA,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;GAAG,GAAI;GAClF;EACK,CAAA,GACR,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GACE,IAAIC,aAAAA;GACJ,eAAY;GACZ,WAAU;EACX,CAAA,CACE;;AAET"}

package/dist/primitives/NativeSelect/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
-import { ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Icon } from "../../Icon.js";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
 //#region src/primitives/NativeSelect/NativeSelect.tsx
 const nativeSelectVariants = cva(cn("flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none", "focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error aria-invalid:border-danger-border", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"), {
 	variants: { 
@@ -27,7 +28,8 @@ function NativeSelect({ className, size = "default", children, ...props }) {
 			className: cn(nativeSelectVariants({ size })),
 			...props,
 			children
-		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+		}), /* @__PURE__ */ jsx(Icon, {
+			as: ChevronDownIcon,
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50"
 		})]

package/dist/primitives/NativeSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// A styled native <select> — lighter than the Radix Select, better for long\n// option lists and native mobile behavior. Visuals mirror Input (border,\n// focus ring, aria-invalid, disabled) and share its size scale.\nconst nativeSelectVariants = cva(\n  cn(\n    \"flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none\",\n    \"focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      /** Control height + horizontal padding; matches the Input size scale. */\n      size: {\n        xs: \"h-6 pl-1.5 pr-7 text-xs leading-4\",\n        sm: \"h-8 pl-2 pr-8 text-sm leading-5\",\n        default: \"h-9 pl-3 pr-8 text-sm leading-5\",\n        lg: \"h-10 pl-4 pr-9 text-sm leading-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\n/**\n * A styled native `<select>` with a chevron affordance. Mirrors Input visuals\n * and shares its size scale; pass `<option>`/`<optgroup>` as children.\n */\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & VariantProps<typeof nativeSelectVariants>) {\n  return (\n    // The wrapper carries layout/width; the chevron is anchored to its right edge.\n    <div className={cn(\"relative w-full\", className)} data-slot=\"native-select-wrapper\">\n      <select data-slot=\"native-select\" className={cn(nativeSelectVariants({ size }))} {...props}>\n        {children}\n      </select>\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50\"\n      />\n    </div>\n  );\n}\n\nexport { NativeSelect, nativeSelectVariants };\n"],"mappings":";;;;;AASA,MAAM,uBAAuB,IAC3B,GACE,uJACA,4FACA,mEACA,8EACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;;;;;AAMA,SAAS,aAAa,EACpB,WACA,OAAO,WACP,UACA,GAAG,SACwF;CAC3F,OAEE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAAG,aAAU;YAA5D,CACE,oBAAC,UAAD;GAAQ,aAAU;GAAgB,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;GAAG,GAAI;GAClF;EACK,CAAA,GACR,oBAAC,iBAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,CACE;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// A styled native <select> — lighter than the Radix Select, better for long\n// option lists and native mobile behavior. Visuals mirror Input (border,\n// focus ring, aria-invalid, disabled) and share its size scale.\nconst nativeSelectVariants = cva(\n  cn(\n    \"flex w-full min-w-0 appearance-none rounded-12 border border-primary-border bg-input-bg text-primary-txt transition-[color,box-shadow] outline-none\",\n    \"focus-visible:border-primary-invert-border focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error aria-invalid:border-danger-border\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      /** Control height + horizontal padding; matches the Input size scale. */\n      size: {\n        xs: \"h-6 pl-1.5 pr-7 text-xs leading-4\",\n        sm: \"h-8 pl-2 pr-8 text-sm leading-5\",\n        default: \"h-9 pl-3 pr-8 text-sm leading-5\",\n        lg: \"h-10 pl-4 pr-9 text-sm leading-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n\n/**\n * A styled native `<select>` with a chevron affordance. Mirrors Input visuals\n * and shares its size scale; pass `<option>`/`<optgroup>` as children.\n */\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & VariantProps<typeof nativeSelectVariants>) {\n  return (\n    // The wrapper carries layout/width; the chevron is anchored to its right edge.\n    <div className={cn(\"relative w-full\", className)} data-slot=\"native-select-wrapper\">\n      <select data-slot=\"native-select\" className={cn(nativeSelectVariants({ size }))} {...props}>\n        {children}\n      </select>\n      <Icon\n        as={ChevronDownIcon}\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50\"\n      />\n    </div>\n  );\n}\n\nexport { NativeSelect, nativeSelectVariants };\n"],"mappings":";;;;;;AAUA,MAAM,uBAAuB,IAC3B,GACE,uJACA,4FACA,mEACA,8EACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CACF;;;;;AAMA,SAAS,aAAa,EACpB,WACA,OAAO,WACP,UACA,GAAG,SACwF;CAC3F,OAEE,qBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAAG,aAAU;YAA5D,CACE,oBAAC,UAAD;GAAQ,aAAU;GAAgB,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC;GAAG,GAAI;GAClF;EACK,CAAA,GACR,oBAAC,MAAD;GACE,IAAI;GACJ,eAAY;GACZ,WAAU;EACX,CAAA,CACE;;AAET"}

package/dist/primitives/NavigationMenu/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
+let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
-let class_variance_authority = require("class-variance-authority");
 //#region src/primitives/NavigationMenu/NavigationMenu.tsx
 /** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */
 function NavigationMenu({ className, children, viewport = true, ...props }) {
@@ -41,7 +42,8 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 		children: [
 			children,
 			" ",
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDownIcon, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.ChevronDownIcon,
 				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
 				"aria-hidden": "true"
 			})

package/dist/primitives/NavigationMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["NavigationMenuPrimitive","cn","ChevronDownIcon"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAWC,WAAAA,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,8BAAA,GAAA,yBAAA,KACJ,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACF,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,2DAA2D;YAC5E,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,UAAzB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,WAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gMACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}
+{"version":3,"file":"index.cjs","names":["NavigationMenuPrimitive","cn","Icon","ChevronDownIcon"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <Icon\n        as={ChevronDownIcon}\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;;;AASA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAWC,WAAAA,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,iBAAA,GAAA,kBAAA,KAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,8BAAA,GAAA,yBAAA,KACJ,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;IACE,IAAIC,aAAAA;IACJ,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACH,SAAAA,eAAwB,SAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAWA,WAAAA,GAAG,2DAA2D;YAC5E,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,UAAzB;GACE,aAAU;GACV,WAAWC,WAAAA,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,MAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,eAAwB,WAAzB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,gMACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}

package/dist/primitives/NavigationMenu/index.js

@@ -1,8 +1,9 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 //#region src/primitives/NavigationMenu/NavigationMenu.tsx
 /** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */
 function NavigationMenu({ className, children, viewport = true, ...props }) {
@@ -40,7 +41,8 @@ function NavigationMenuTrigger({ className, children, ...props }) {
 		children: [
 			children,
 			" ",
-			/* @__PURE__ */ jsx(ChevronDownIcon, {
+			/* @__PURE__ */ jsx(Icon, {
+				as: ChevronDownIcon,
 				className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
 				"aria-hidden": "true"
 			})

package/dist/primitives/NavigationMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["NavigationMenuPrimitive"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,qBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,6BAA6B,IACjC,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,oBAAC,iBAAD;IACE,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2DAA2D;YAC5E,oBAACA,iBAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,iBAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,gMACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}
+{"version":3,"file":"index.js","names":["NavigationMenuPrimitive"],"sources":["../../../src/primitives/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root of a horizontal navigation bar; renders a `<nav>` and optionally an animated viewport. */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  /** When true (default), renders a shared animated viewport that hosts the active item's content. Set false to render content inline beneath each item. */\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/** Horizontal list wrapper for the top-level navigation items. */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single top-level entry; holds either a link or a trigger plus its content. */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\n/* Figma (288:184487): triggers are the Ghost Button recipe — heading-6 type,\n   36px box, px-4, rounded-8, ghost hover/open tints. */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center gap-2 rounded-8 bg-ghost-bg px-4 py-2 font-heading text-sm leading-6 font-medium text-primary-txt transition-[color,box-shadow] outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-toggle-active-bg\",\n);\n\n/** Button that toggles an item's content panel; renders a rotating chevron. */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <Icon\n        as={ChevronDownIcon}\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/** The panel revealed when an item's trigger is open; holds links or rich content. */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-12 group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-primary-border group-data-[viewport=false]/navigation-menu:bg-glass-none-bg group-data-[viewport=false]/navigation-menu:text-primary-txt group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Shared animated container that the active item's content is portaled into when `viewport` is enabled. */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div className={cn(\"absolute top-full left-0 isolate z-50 flex justify-center\")}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg text-primary-txt shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\n/** A navigable link styled for use as a top-level item or inside content; set `active` to mark the current page. */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        // Link tiles: semibold-14 title + muted description on menu-item metrics.\n        \"flex flex-col gap-1 rounded-10 px-2 py-1.5 text-sm leading-5 transition-all outline-none hover:bg-ghost-hover-bg focus:bg-ghost-hover-bg focus-visible:ring-3 focus-visible:ring-focus focus-visible:outline-1 data-[active=true]:bg-toggle-active-bg [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Optional arrow that points from the active trigger to its content panel. */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] size-2 rotate-45 rounded-tl-2 bg-primary-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"],"mappings":";;;;;;;;AASA,SAAS,eAAe,EACtB,WACA,UACA,WAAW,MACX,GAAG,SAIF;CACD,OACE,qBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GACT,oFACA,SACF;EACA,GAAI;YAPN,CASG,UACA,YAAY,oBAAC,wBAAD,CAAyB,CAAA,CACV;;AAElC;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,SAAS;EACnC,GAAI;CACL,CAAA;AAEL;AAIA,MAAM,6BAA6B,IACjC,mZACF;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;EAC9D,GAAI;YAHN;GAKG;GAAU;GACX,oBAAC,MAAD;IACE,IAAI;IACJ,WAAU;IACV,eAAY;GACb,CAAA;EAC8B;;AAErC;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,iBAAwB,SAAzB;EACE,aAAU;EACV,WAAW,GACT,oWACA,imCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2DAA2D;YAC5E,oBAACA,iBAAwB,UAAzB;GACE,aAAU;GACV,WAAW,GACT,8WACA,SACF;GACA,GAAI;EACL,CAAA;CACE,CAAA;AAET;;AAGA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyD;CAC5D,OACE,oBAACA,iBAAwB,MAAzB;EACE,aAAU;EACV,WAAW,GAET,2UACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,iBAAwB,WAAzB;EACE,aAAU;EACV,WAAW,GACT,gMACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAK,WAAU,+EAAgF,CAAA;CAC9D,CAAA;AAEvC"}

package/dist/primitives/Pagination/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/Pagination/Pagination.tsx
 /** Accessible pagination navigation landmark that wraps the list of page links. */
 function Pagination({ className, ...props }) {
@@ -69,7 +70,10 @@ function PaginationEllipsis({ className, ...props }) {
 		"data-slot": "pagination-ellipsis",
 		className: require_cn.cn("flex size-9 items-center justify-center", className),
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.MoreHorizontalIcon,
+			className: "size-4"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "More pages"
 		})]

package/dist/primitives/Pagination/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn","buttonVariants","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWA,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWA,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.cjs","names":["cn","buttonVariants","Icon","MoreHorizontalIcon"],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <Icon as={MoreHorizontalIcon} className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAWA,WAAAA,GACTC,gCAAAA,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWD,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAWA,WAAAA,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAWA,WAAAA,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;GAAM,IAAIC,aAAAA;GAAoB,WAAU;EAAU,CAAA,GAClD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/primitives/Pagination/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { buttonVariants } from "../Button/index.js";
-import { MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { MoreHorizontalIcon } from "lucide-react";
 //#region src/primitives/Pagination/Pagination.tsx
 /** Accessible pagination navigation landmark that wraps the list of page links. */
 function Pagination({ className, ...props }) {
@@ -68,7 +69,10 @@ function PaginationEllipsis({ className, ...props }) {
 		"data-slot": "pagination-ellipsis",
 		className: cn("flex size-9 items-center justify-center", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(Icon, {
+			as: MoreHorizontalIcon,
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "More pages"
 		})]

package/dist/primitives/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,oBAAD,EAAoB,WAAU,SAAU,CAAA,GACxC,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { type Button, buttonVariants } from \"@/primitives/Button\";\nimport { cn } from \"@/utils\";\n\n/** Accessible pagination navigation landmark that wraps the list of page links. */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Horizontal list container holding the individual pagination items. */\nfunction PaginationContent({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Single list item wrapper for a pagination link, ellipsis, or control. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** Marks this link as the current page; renders the outline (selected) style and sets `aria-current`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Clickable page link styled with the Button variants; pass `isActive` for the current page. */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        // Pagination buttons are 8px-rounded squares (Figma 294:233630), not pills.\n        \"rounded-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" control: a pagination link with a leading chevron and accessible label. */\nfunction PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Previous\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" control: a pagination link with a trailing chevron and accessible label. */\nfunction PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"px-2.5\", className)}\n      {...props}\n    >\n      Next\n    </PaginationLink>\n  );\n}\n\n/** Non-interactive ellipsis indicating skipped page ranges. */\nfunction PaginationEllipsis({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <Icon as={MoreHorizontalIcon} className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAqC;CAC9E,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,GAAG,SAAqC;CAChE,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA8B;CAC7F,OACE,oBAAC,KAAD;EACE,gBAAc,WAAW,SAAS,KAAA;EAClC,aAAU;EACV,eAAa;EACb,WAAW,GACT,eAAe;GACb,SAAS,WAAW,YAAY;GAChC;EACF,CAAC,GAED,aACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAsD;CAChG,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsD;CAC5F,OACE,oBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;YACL;CAEe,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAJN,CAME,oBAAC,MAAD;GAAM,IAAI;GAAoB,WAAU;EAAU,CAAA,GAClD,oBAAC,QAAD;GAAM,WAAU;aAAU;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/primitives/Popover/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Popover/Popover.tsx
 /** Root of the popover: holds open state and coordinates the trigger and content. */
 function Popover({ ...props }) {

package/dist/primitives/Popover/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Popover as Popover$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "radix-ui";
 //#region src/primitives/Popover/Popover.tsx
 /** Root of the popover: holds open state and coordinates the trigger and content. */
 function Popover({ ...props }) {

package/dist/primitives/Progress/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Progress/Progress.tsx
 const progressIndicatorVariants = {
 	default: "bg-primary-invert-bg",

package/dist/primitives/Progress/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Progress as Progress$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "radix-ui";
 //#region src/primitives/Progress/Progress.tsx
 const progressIndicatorVariants = {
 	default: "bg-primary-invert-bg",

package/dist/primitives/RadioGroup/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/RadioGroup/RadioGroup.tsx
 /** Root of a set of mutually-exclusive radio options; lays them out vertically or horizontally. */
 function RadioGroup({ className, orientation = "vertical", ...props }) {
@@ -24,7 +25,10 @@ function RadioGroupItem({ className, ...props }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.RadioGroup.Indicator, {
 			"data-slot": "radio-group-indicator",
 			className: "relative flex items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current" })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleIcon,
+				className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current stroke-current"
+			})
 		})
 	});
 }