@psnext/design-system 2.3.0 → 2.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          // Figma Menu spec (Select & Combobox page): glass-none surface, primary\n          // border, radius-12, shadow-sm, 8px padding.\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass 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=dropdown-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-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        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-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        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-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 used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-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-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-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=dropdown-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":";;;;;;AAOA,SAAS,aAAa,EAAE,GAAG,SAAkE;CAC3F,OAAO,oBAACA,eAAsB,MAAvB;EAA4B,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAC3E;;AAGA,SAAS,mBAAmB,EAC1B,GAAG,SACyD;CAC5D,OAAO,oBAACA,eAAsB,QAAvB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AACpF;;AAGA,SAAS,oBAAoB,EAC3B,GAAG,SAC0D;CAC7D,OAAO,oBAACA,eAAsB,SAAvB;EAA+B,aAAU;EAAwB,GAAI;CAAQ,CAAA;AACtF;;AAGA,SAAS,oBAAoB,EAC3B,WAEA,aAAa,GACb,GAAG,SAC0D;CAC7D,OACE,oBAACA,eAAsB,QAAvB,EAAA,UACE,oBAACA,eAAsB,SAAvB;EACE,aAAU;EACE;EACZ,WAAW,GAGT,6lBAGA,+GACA,gHACA,sHACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAmE;CACjG,OAAO,oBAACA,eAAsB,OAAvB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,OAEA,UAAU,WACV,GAAG,SAIF;CACD,OACE,oBAACA,eAAsB,MAAvB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,ofACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,yBAAyB,EAChC,WACA,UAEA,SACA,GAAG,SAC+D;CAClE,OACE,qBAACA,eAAsB,cAAvB;EACE,aAAU;EACV,WAAW,GACT,6SACA,SACF;EACS;EACT,GAAI;YAPN,CASE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAACA,eAAsB,eAAvB,EAAA,UACE,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA,EACI,CAAA;EACjC,CAAA,GACL,QACiC;;AAExC;;AAGA,SAAS,uBAAuB,EAC9B,GAAG,SAC6D;CAChE,OAAO,oBAACA,eAAsB,YAAvB;EAAkC,aAAU;EAA4B,GAAI;CAAQ,CAAA;AAC7F;;AAGA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,eAAsB,WAAvB;EACE,aAAU;EACV,WAAW,GACT,6SACA,SACF;EACA,GAAI;YANN,CAQE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAACA,eAAsB,eAAvB,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,sBAAuB,CAAA,EACV,CAAA;EACjC,CAAA,GACL,QAC8B;;AAErC;;AAGA,SAAS,kBAAkB,EACzB,WAEA,OACA,GAAG,SAGF;CACD,OACE,oBAACA,eAAsB,OAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,eAAsB,WAAvB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAiE;CAC7F,OAAO,oBAACA,eAAsB,KAAvB;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;;AAGA,SAAS,uBAAuB,EAC9B,WAEA,OACA,UACA,GAAG,SAGF;CACD,OACE,qBAACA,eAAsB,YAAvB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,mUACA,SACF;EACA,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,iBAAkB,CAAA,CACd;;AAEtC;;AAGA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,eAAsB,YAAvB;EACE,aAAU;EACV,WAAW,GACT,kgBAGA,+GACA,gHACA,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":["DropdownMenuPrimitive"],"sources":["../../../src/primitives/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root provider for a dropdown menu; holds open state and wires the trigger to its content. */\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\n/** Renders the menu into a portal so it escapes overflow/stacking contexts. */\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\n/** The control (usually a button) that toggles the menu open and closed. */\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\n/** The floating surface that holds the menu items; portalled and animated on open/close. */\nfunction DropdownMenuContent({\n  className,\n  /** Gap in pixels between the trigger and the content edge. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          // Figma Menu spec (Select & Combobox page): glass-none surface, primary\n          // border, radius-12, shadow-sm, 8px padding.\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-12 border border-primary-border bg-glass-60-bg backdrop-blur-glass 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=dropdown-menu-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\n/** Groups related menu items together for labelling and keyboard navigation. */\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\n/** A selectable menu row that fires on click/Enter. */\nfunction DropdownMenuItem({\n  className,\n  /** Indents the item to align with rows that have a leading icon/indicator. */\n  inset,\n  /** Visual tone of the item; `destructive` renders in the danger color. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-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 row with a toggleable checkmark indicator for boolean options. */\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  /** Whether the checkbox indicator is shown as checked. */\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-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        <DropdownMenuPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\n/** Wraps radio items so only one option in the group can be selected at a time. */\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\n/** A single mutually-exclusive option within a `DropdownMenuRadioGroup`. */\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-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        <DropdownMenuPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading used to title a group of menu items. */\nfunction DropdownMenuLabel({\n  className,\n  /** Indents the label to align with rows that have a leading icon/indicator. */\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-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 used to visually separate groups of menu items. */\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint for an item's keyboard shortcut (e.g. ⇧⌘P). */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Root for a nested submenu; holds the sub-trigger and its sub-content. */\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\n/** The item that opens a nested submenu, shown with a trailing chevron. */\nfunction DropdownMenuSubTrigger({\n  className,\n  /** Indents the trigger to align with rows that have a leading icon/indicator. */\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-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-hidden select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\n/** The floating surface for a nested submenu's items. */\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-dropdown-menu-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=dropdown-menu-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=dropdown-menu-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/primitives/Empty/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Empty/Empty.tsx
 const emptyVariants = (0, class_variance_authority.cva)("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12", {
 	variants: { variant: {

package/dist/primitives/Empty/index.d.cts

@@ -1,2 +1,2 @@
-import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.cjs";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index25.cjs";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Empty/index.d.ts

@@ -1,2 +1,2 @@
-import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.js";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index25.js";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Empty/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/Empty/Empty.tsx
 const emptyVariants = cva("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-8 p-6 text-center text-balance md:p-12", {
 	variants: { variant: {

package/dist/primitives/Field/index.cjs

@@ -2,9 +2,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 const require_primitives_Separator_index = require("../Separator/index.cjs");
 const require_primitives_Label_index = require("../Label/index.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let class_variance_authority = require("class-variance-authority");
 //#region src/primitives/Field/Field.tsx
 /** A `<fieldset>` wrapper that groups related fields with consistent spacing. */
 function FieldSet({ className, ...props }) {

package/dist/primitives/Field/index.d.cts

@@ -1,2 +1,2 @@
-import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.cjs";
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index27.cjs";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/Field/index.d.ts

@@ -1,2 +1,2 @@
-import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.js";
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index27.js";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/Field/index.js

@@ -1,9 +1,9 @@
 import { t as cn } from "../../cn.js";
 import { Separator } from "../Separator/index.js";
 import { Label } from "../Label/index.js";
+import { cva } from "class-variance-authority";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 //#region src/primitives/Field/Field.tsx
 /** A `<fieldset>` wrapper that groups related fields with consistent spacing. */
 function FieldSet({ className, ...props }) {

package/dist/primitives/FileUpload/index.cjs

@@ -0,0 +1,354 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../Button/index.cjs");
+const require_primitives_Progress_index = require("../Progress/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/primitives/FileUpload/FileUpload.tsx
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function formatBytes(value) {
+	if (!Number.isFinite(value) || value <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+	const size = value / 1024 ** exponent;
+	return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+}
+function getAcceptTokens(accept) {
+	return (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+}
+function matchesAccept(file, accept) {
+	const tokens = getAcceptTokens(accept);
+	if (tokens.length === 0) return true;
+	const fileName = file.name.toLowerCase();
+	const fileType = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return fileName.endsWith(token);
+		if (token.endsWith("/*")) {
+			const category = token.slice(0, token.length - 1);
+			return fileType.startsWith(category);
+		}
+		return fileType === token;
+	});
+}
+function createFileItem(file) {
+	return {
+		id: typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
+		file,
+		status: "idle",
+		progress: 0
+	};
+}
+function hasFiles(event) {
+	return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+function getStatusLabel(item) {
+	if (item.status === "idle") return "Ready to upload";
+	if (item.status === "uploading") return `Uploading… ${Math.round(item.progress)}%`;
+	if (item.status === "success") return "Upload complete";
+	return item.error ? `Upload failed: ${item.error}` : "Upload failed";
+}
+/** File upload primitive with click-to-browse and drag-and-drop interactions, validation, and per-file upload states. */
+function FileUpload({ className, multiple = false, accept, maxFiles, maxFileSize, validateFile, onUpload, onItemsChange, dropzoneAriaLabel = "File upload drop zone", disabled, ...props }) {
+	const inputRef = react.useRef(null);
+	const uploadControllersRef = react.useRef(/* @__PURE__ */ new Map());
+	const [items, setItems] = react.useState([]);
+	const [errors, setErrors] = react.useState([]);
+	const [dragState, setDragState] = react.useState("idle");
+	const dragDepthRef = react.useRef(0);
+	const baseId = react.useId();
+	const hintId = `${baseId}-hint`;
+	const errorId = `${baseId}-errors`;
+	const updateItem = react.useCallback((itemId, updater) => {
+		setItems((current) => current.map((item) => item.id === itemId ? updater(item) : item));
+	}, []);
+	const removeItem = react.useCallback((itemId) => {
+		uploadControllersRef.current.get(itemId)?.abort();
+		uploadControllersRef.current.delete(itemId);
+		setItems((current) => current.filter((item) => item.id !== itemId));
+	}, []);
+	const beginUpload = react.useCallback((item) => {
+		if (!onUpload) return;
+		const controller = new AbortController();
+		uploadControllersRef.current.set(item.id, controller);
+		updateItem(item.id, (current) => ({
+			...current,
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}));
+		onUpload({
+			file: item.file,
+			signal: controller.signal,
+			reportProgress: (value) => {
+				updateItem(item.id, (current) => {
+					if (current.status !== "uploading") return current;
+					return {
+						...current,
+						progress: clamp(value, 0, 100)
+					};
+				});
+			}
+		}).then(() => {
+			if (controller.signal.aborted) return;
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "success",
+				progress: 100,
+				error: void 0
+			}));
+		}).catch((uploadError) => {
+			if (controller.signal.aborted) return;
+			const message = uploadError instanceof Error && uploadError.message ? uploadError.message : "Upload failed.";
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "error",
+				error: message
+			}));
+		}).finally(() => {
+			uploadControllersRef.current.delete(item.id);
+		});
+	}, [onUpload, updateItem]);
+	const queueFiles = react.useCallback((queuedFiles) => {
+		const incoming = Array.isArray(queuedFiles) ? queuedFiles : Array.from(queuedFiles);
+		if (incoming.length === 0) return;
+		if (!multiple) {
+			uploadControllersRef.current.forEach((controller) => controller.abort());
+			uploadControllersRef.current.clear();
+		}
+		const nextErrors = [];
+		const acceptedItems = [];
+		const nextItems = multiple ? [...items] : [];
+		const effectiveMaxFiles = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+		let candidates = incoming;
+		if (!multiple && incoming.length > 1) {
+			nextErrors.push("Only one file can be selected at a time.");
+			candidates = [incoming[0]];
+		}
+		const availableSlots = Math.max(0, effectiveMaxFiles - nextItems.length);
+		if (availableSlots < candidates.length) {
+			nextErrors.push(`You can upload up to ${effectiveMaxFiles} file${effectiveMaxFiles === 1 ? "" : "s"}.`);
+			candidates = candidates.slice(0, availableSlots);
+		}
+		for (const file of candidates) {
+			if (!matchesAccept(file, accept)) {
+				nextErrors.push(`${file.name} has an unsupported file type.`);
+				continue;
+			}
+			if (maxFileSize != null && file.size > maxFileSize) {
+				nextErrors.push(`${file.name} exceeds the ${formatBytes(maxFileSize)} size limit.`);
+				continue;
+			}
+			const customError = validateFile?.(file);
+			if (customError) {
+				nextErrors.push(customError);
+				continue;
+			}
+			const item = createFileItem(file);
+			acceptedItems.push(item);
+			nextItems.push(item);
+		}
+		setItems(nextItems);
+		setErrors(nextErrors);
+		setDragState(nextErrors.length > 0 ? "invalid-drop" : "idle");
+		if (onUpload) acceptedItems.forEach((item) => beginUpload(item));
+	}, [
+		accept,
+		beginUpload,
+		items,
+		maxFileSize,
+		maxFiles,
+		multiple,
+		onUpload,
+		validateFile
+	]);
+	const openPicker = react.useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const handleInputChange = react.useCallback((event) => {
+		queueFiles(event.target.files ?? []);
+		event.target.value = "";
+	}, [queueFiles]);
+	const handleDragEnter = react.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setDragState("invalid-drop");
+			return;
+		}
+		dragDepthRef.current += 1;
+		setDragState("drag-over");
+	}, [disabled]);
+	const handleDragOver = react.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		if (!hasFiles(event)) setDragState("invalid-drop");
+	}, [disabled]);
+	const handleDragLeave = react.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setDragState("idle");
+	}, []);
+	const handleDrop = react.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = 0;
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setErrors(["Only files can be dropped here."]);
+			setDragState("invalid-drop");
+			return;
+		}
+		queueFiles(event.dataTransfer.files);
+	}, [disabled, queueFiles]);
+	react.useEffect(() => {
+		onItemsChange?.(items);
+	}, [items, onItemsChange]);
+	react.useEffect(() => () => {
+		uploadControllersRef.current.forEach((controller) => controller.abort());
+		uploadControllersRef.current.clear();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "file-upload",
+		className: require_cn.cn("flex flex-col gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				multiple,
+				disabled,
+				"data-slot": "file-upload-input",
+				className: "hidden",
+				onChange: handleInputChange,
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "file-upload-dropzone",
+				"data-drag-state": dragState,
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": dropzoneAriaLabel,
+				"aria-disabled": disabled || void 0,
+				"aria-describedby": errors.length > 0 ? `${hintId} ${errorId}` : hintId,
+				className: require_cn.cn("flex cursor-pointer flex-col items-center justify-center gap-2 rounded-12 border-2 border-dashed px-5 py-8 text-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", "data-[drag-state=idle]:border-primary-border data-[drag-state=idle]:bg-secondary-bg/25", "data-[drag-state=drag-over]:border-primary-invert-border data-[drag-state=drag-over]:bg-primary-bg", "data-[drag-state=invalid-drop]:border-danger-border data-[drag-state=invalid-drop]:bg-danger-bg/35", disabled && "cursor-not-allowed opacity-60"),
+				onClick: openPicker,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						openPicker();
+					}
+				},
+				onDragEnter: handleDragEnter,
+				onDragOver: handleDragOver,
+				onDragLeave: handleDragLeave,
+				onDrop: handleDrop,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UploadCloud, {
+						className: "size-8 text-muted-txt",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "font-medium text-sm text-primary-txt",
+						children: "Drag files here or click to browse"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						id: hintId,
+						className: "text-muted-txt text-xs",
+						children: [
+							multiple ? "Supports multiple files." : "Supports one file.",
+							accept ? ` Accepted: ${accept}.` : "",
+							maxFileSize ? ` Max file size: ${formatBytes(maxFileSize)}.` : ""
+						]
+					})
+				]
+			}),
+			errors.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: errorId,
+				role: "alert",
+				className: "space-y-1 text-danger-txt text-xs",
+				children: errors.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-start gap-1.5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlert, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message })]
+				}, `${message}-${index}`))
+			}) : null,
+			items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				"data-slot": "file-upload-list",
+				className: "space-y-2",
+				"aria-live": "polite",
+				children: items.map((item) => {
+					const showProgress = item.status === "uploading" || item.status === "success";
+					const progressVariant = item.status === "error" ? "destructive" : "default";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						"data-slot": "file-upload-item",
+						"data-state": item.status,
+						className: "rounded-12 border border-primary-border bg-secondary-bg/20 px-3 py-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-start gap-2.5",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "mt-0.5 shrink-0 text-muted-txt",
+									"aria-hidden": "true",
+									children: item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckCircle2, { className: "size-4 text-success-txt" }) : item.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlert, { className: "size-4 text-danger-txt" }) : item.status === "uploading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileIcon, { className: "size-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "min-w-0 flex-1",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "truncate font-medium text-sm text-primary-txt",
+												children: item.file.name
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												className: "shrink-0 text-muted-txt text-xs",
+												children: formatBytes(item.file.size)
+											})]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+											className: "mt-0.5 text-muted-txt text-xs",
+											children: getStatusLabel(item)
+										}),
+										showProgress ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Progress_index.Progress, {
+											className: "mt-2",
+											value: item.status === "success" ? 100 : item.progress,
+											variant: progressVariant,
+											"aria-label": `Upload progress for ${item.file.name}`
+										}) : null
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+									type: "button",
+									variant: item.status === "uploading" ? "destructive-ghost" : "ghost",
+									size: "icon-sm",
+									shape: "square",
+									"aria-label": item.status === "uploading" ? `Cancel upload for ${item.file.name}` : `Remove ${item.file.name}`,
+									onClick: () => removeItem(item.id),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+								})
+							]
+						})
+					}, item.id);
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+exports.FileUpload = FileUpload;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","cn","UploadCloud","CircleAlert","CheckCircle2","Loader2","FileIcon","Progress","Button","XIcon"],"sources":["../../../src/primitives/FileUpload/FileUpload.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircle2, CircleAlert, FileIcon, Loader2, UploadCloud, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Progress } from \"@/primitives/Progress\";\nimport { cn } from \"@/utils\";\n\ntype FileUploadStatus = \"idle\" | \"uploading\" | \"success\" | \"error\";\n\ntype FileUploadItem = {\n  id: string;\n  file: File;\n  status: FileUploadStatus;\n  progress: number;\n  error?: string;\n};\n\ntype FileUploadHandler = (params: {\n  file: File;\n  signal: AbortSignal;\n  reportProgress: (value: number) => void;\n}) => Promise<void>;\n\ntype FileUploadProps = Omit<React.ComponentProps<\"div\">, \"onChange\"> & {\n  /** Disable click, drag/drop, and file selection. */\n  disabled?: boolean;\n  /** Allow selecting or dropping multiple files in one interaction. */\n  multiple?: boolean;\n  /** Native file accept filter (e.g. `image/*,.pdf`). */\n  accept?: string;\n  /** Maximum number of files held by the component at once. */\n  maxFiles?: number;\n  /** Maximum file size in bytes; oversized files are rejected with an error message. */\n  maxFileSize?: number;\n  /** Optional custom validator. Return a message to reject the file, or `null` to accept it. */\n  validateFile?: (file: File) => string | null;\n  /** Called for each accepted file; receives a progress reporter and abort signal. */\n  onUpload?: FileUploadHandler;\n  /** Called whenever file entries change (added, progress updates, completed, removed). */\n  onItemsChange?: (items: FileUploadItem[]) => void;\n  /** Accessible label for the drag-and-drop region. */\n  dropzoneAriaLabel?: string;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction formatBytes(value: number) {\n  if (!Number.isFinite(value) || value <= 0) {\n    return \"0 B\";\n  }\n\n  const units = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);\n  const size = value / 1024 ** exponent;\n  return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;\n}\n\nfunction getAcceptTokens(accept?: string) {\n  return (accept ?? \"\")\n    .split(\",\")\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n}\n\nfunction matchesAccept(file: File, accept?: string) {\n  const tokens = getAcceptTokens(accept);\n  if (tokens.length === 0) {\n    return true;\n  }\n\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) {\n      return fileName.endsWith(token);\n    }\n\n    if (token.endsWith(\"/*\")) {\n      const category = token.slice(0, token.length - 1);\n      return fileType.startsWith(category);\n    }\n\n    return fileType === token;\n  });\n}\n\nfunction createFileItem(file: File): FileUploadItem {\n  const id =\n    typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\"\n      ? crypto.randomUUID()\n      : `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`;\n\n  return {\n    id,\n    file,\n    status: \"idle\",\n    progress: 0,\n  };\n}\n\nfunction hasFiles(event: React.DragEvent<HTMLElement>) {\n  return Array.from(event.dataTransfer?.types ?? []).includes(\"Files\");\n}\n\nfunction getStatusLabel(item: FileUploadItem) {\n  if (item.status === \"idle\") {\n    return \"Ready to upload\";\n  }\n\n  if (item.status === \"uploading\") {\n    return `Uploading… ${Math.round(item.progress)}%`;\n  }\n\n  if (item.status === \"success\") {\n    return \"Upload complete\";\n  }\n\n  return item.error ? `Upload failed: ${item.error}` : \"Upload failed\";\n}\n\n/** File upload primitive with click-to-browse and drag-and-drop interactions, validation, and per-file upload states. */\nfunction FileUpload({\n  className,\n  multiple = false,\n  accept,\n  maxFiles,\n  maxFileSize,\n  validateFile,\n  onUpload,\n  onItemsChange,\n  dropzoneAriaLabel = \"File upload drop zone\",\n  disabled,\n  ...props\n}: FileUploadProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const uploadControllersRef = React.useRef<Map<string, AbortController>>(new Map());\n\n  const [items, setItems] = React.useState<FileUploadItem[]>([]);\n  const [errors, setErrors] = React.useState<string[]>([]);\n  const [dragState, setDragState] = React.useState<\"idle\" | \"drag-over\" | \"invalid-drop\">(\"idle\");\n  const dragDepthRef = React.useRef(0);\n\n  const baseId = React.useId();\n  const hintId = `${baseId}-hint`;\n  const errorId = `${baseId}-errors`;\n\n  const updateItem = React.useCallback(\n    (itemId: string, updater: (item: FileUploadItem) => FileUploadItem) => {\n      setItems((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));\n    },\n    [],\n  );\n\n  const removeItem = React.useCallback((itemId: string) => {\n    const controller = uploadControllersRef.current.get(itemId);\n    controller?.abort();\n    uploadControllersRef.current.delete(itemId);\n    setItems((current) => current.filter((item) => item.id !== itemId));\n  }, []);\n\n  const beginUpload = React.useCallback(\n    (item: FileUploadItem) => {\n      if (!onUpload) {\n        return;\n      }\n\n      const controller = new AbortController();\n      uploadControllersRef.current.set(item.id, controller);\n\n      updateItem(item.id, (current) => ({\n        ...current,\n        status: \"uploading\",\n        progress: 0,\n        error: undefined,\n      }));\n\n      void onUpload({\n        file: item.file,\n        signal: controller.signal,\n        reportProgress: (value) => {\n          updateItem(item.id, (current) => {\n            if (current.status !== \"uploading\") {\n              return current;\n            }\n\n            return {\n              ...current,\n              progress: clamp(value, 0, 100),\n            };\n          });\n        },\n      })\n        .then(() => {\n          if (controller.signal.aborted) {\n            return;\n          }\n\n          updateItem(item.id, (current) => ({\n            ...current,\n            status: \"success\",\n            progress: 100,\n            error: undefined,\n          }));\n        })\n        .catch((uploadError) => {\n          if (controller.signal.aborted) {\n            return;\n          }\n\n          const message =\n            uploadError instanceof Error && uploadError.message\n              ? uploadError.message\n              : \"Upload failed.\";\n\n          updateItem(item.id, (current) => ({\n            ...current,\n            status: \"error\",\n            error: message,\n          }));\n        })\n        .finally(() => {\n          uploadControllersRef.current.delete(item.id);\n        });\n    },\n    [onUpload, updateItem],\n  );\n\n  const queueFiles = React.useCallback(\n    (queuedFiles: File[] | FileList) => {\n      const incoming = Array.isArray(queuedFiles) ? queuedFiles : Array.from(queuedFiles);\n      if (incoming.length === 0) {\n        return;\n      }\n\n      if (!multiple) {\n        uploadControllersRef.current.forEach((controller) => controller.abort());\n        uploadControllersRef.current.clear();\n      }\n\n      const nextErrors: string[] = [];\n      const acceptedItems: FileUploadItem[] = [];\n      const nextItems = multiple ? [...items] : [];\n\n      const effectiveMaxFiles = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1;\n      let candidates = incoming;\n\n      if (!multiple && incoming.length > 1) {\n        nextErrors.push(\"Only one file can be selected at a time.\");\n        candidates = [incoming[0]];\n      }\n\n      const availableSlots = Math.max(0, effectiveMaxFiles - nextItems.length);\n      if (availableSlots < candidates.length) {\n        nextErrors.push(\n          `You can upload up to ${effectiveMaxFiles} file${effectiveMaxFiles === 1 ? \"\" : \"s\"}.`,\n        );\n        candidates = candidates.slice(0, availableSlots);\n      }\n\n      for (const file of candidates) {\n        if (!matchesAccept(file, accept)) {\n          nextErrors.push(`${file.name} has an unsupported file type.`);\n          continue;\n        }\n\n        if (maxFileSize != null && file.size > maxFileSize) {\n          nextErrors.push(`${file.name} exceeds the ${formatBytes(maxFileSize)} size limit.`);\n          continue;\n        }\n\n        const customError = validateFile?.(file);\n        if (customError) {\n          nextErrors.push(customError);\n          continue;\n        }\n\n        const item = createFileItem(file);\n        acceptedItems.push(item);\n        nextItems.push(item);\n      }\n\n      setItems(nextItems);\n      setErrors(nextErrors);\n      setDragState(nextErrors.length > 0 ? \"invalid-drop\" : \"idle\");\n\n      if (onUpload) {\n        acceptedItems.forEach((item) => beginUpload(item));\n      }\n    },\n    [accept, beginUpload, items, maxFileSize, maxFiles, multiple, onUpload, validateFile],\n  );\n\n  const openPicker = React.useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  }, [disabled]);\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      queueFiles(event.target.files ?? []);\n      event.target.value = \"\";\n    },\n    [queueFiles],\n  );\n\n  const handleDragEnter = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (disabled) {\n        return;\n      }\n\n      if (!hasFiles(event)) {\n        setDragState(\"invalid-drop\");\n        return;\n      }\n\n      dragDepthRef.current += 1;\n      setDragState(\"drag-over\");\n    },\n    [disabled],\n  );\n\n  const handleDragOver = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (disabled) {\n        return;\n      }\n\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = \"copy\";\n      }\n\n      if (!hasFiles(event)) {\n        setDragState(\"invalid-drop\");\n      }\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);\n    if (dragDepthRef.current === 0) {\n      setDragState(\"idle\");\n    }\n  }, []);\n\n  const handleDrop = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      dragDepthRef.current = 0;\n\n      if (disabled) {\n        return;\n      }\n\n      if (!hasFiles(event)) {\n        setErrors([\"Only files can be dropped here.\"]);\n        setDragState(\"invalid-drop\");\n        return;\n      }\n\n      queueFiles(event.dataTransfer.files);\n    },\n    [disabled, queueFiles],\n  );\n\n  React.useEffect(() => {\n    onItemsChange?.(items);\n  }, [items, onItemsChange]);\n\n  React.useEffect(\n    () => () => {\n      uploadControllersRef.current.forEach((controller) => controller.abort());\n      uploadControllersRef.current.clear();\n    },\n    [],\n  );\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        data-slot=\"file-upload-input\"\n        className=\"hidden\"\n        onChange={handleInputChange}\n        tabIndex={-1}\n      />\n\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-drag-state={dragState}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={dropzoneAriaLabel}\n        aria-disabled={disabled || undefined}\n        aria-describedby={errors.length > 0 ? `${hintId} ${errorId}` : hintId}\n        className={cn(\n          \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-12 border-2 border-dashed px-5 py-8 text-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus\",\n          \"data-[drag-state=idle]:border-primary-border data-[drag-state=idle]:bg-secondary-bg/25\",\n          \"data-[drag-state=drag-over]:border-primary-invert-border data-[drag-state=drag-over]:bg-primary-bg\",\n          \"data-[drag-state=invalid-drop]:border-danger-border data-[drag-state=invalid-drop]:bg-danger-bg/35\",\n          disabled && \"cursor-not-allowed opacity-60\",\n        )}\n        onClick={openPicker}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            openPicker();\n          }\n        }}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <UploadCloud className=\"size-8 text-muted-txt\" aria-hidden=\"true\" />\n        <p className=\"font-medium text-sm text-primary-txt\">Drag files here or click to browse</p>\n        <p id={hintId} className=\"text-muted-txt text-xs\">\n          {multiple ? \"Supports multiple files.\" : \"Supports one file.\"}\n          {accept ? ` Accepted: ${accept}.` : \"\"}\n          {maxFileSize ? ` Max file size: ${formatBytes(maxFileSize)}.` : \"\"}\n        </p>\n      </div>\n\n      {errors.length > 0 ? (\n        <ul id={errorId} role=\"alert\" className=\"space-y-1 text-danger-txt text-xs\">\n          {errors.map((message, index) => (\n            <li key={`${message}-${index}`} className=\"flex items-start gap-1.5\">\n              <CircleAlert className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n              <span>{message}</span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n\n      {items.length > 0 ? (\n        <ul data-slot=\"file-upload-list\" className=\"space-y-2\" aria-live=\"polite\">\n          {items.map((item) => {\n            const showProgress = item.status === \"uploading\" || item.status === \"success\";\n            const progressVariant = item.status === \"error\" ? \"destructive\" : \"default\";\n\n            return (\n              <li\n                key={item.id}\n                data-slot=\"file-upload-item\"\n                data-state={item.status}\n                className=\"rounded-12 border border-primary-border bg-secondary-bg/20 px-3 py-2\"\n              >\n                <div className=\"flex items-start gap-2.5\">\n                  <div className=\"mt-0.5 shrink-0 text-muted-txt\" aria-hidden=\"true\">\n                    {item.status === \"success\" ? (\n                      <CheckCircle2 className=\"size-4 text-success-txt\" />\n                    ) : item.status === \"error\" ? (\n                      <CircleAlert className=\"size-4 text-danger-txt\" />\n                    ) : item.status === \"uploading\" ? (\n                      <Loader2 className=\"size-4 animate-spin\" />\n                    ) : (\n                      <FileIcon className=\"size-4\" />\n                    )}\n                  </div>\n\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <p className=\"truncate font-medium text-sm text-primary-txt\">\n                        {item.file.name}\n                      </p>\n                      <p className=\"shrink-0 text-muted-txt text-xs\">\n                        {formatBytes(item.file.size)}\n                      </p>\n                    </div>\n                    <p className=\"mt-0.5 text-muted-txt text-xs\">{getStatusLabel(item)}</p>\n                    {showProgress ? (\n                      <Progress\n                        className=\"mt-2\"\n                        value={item.status === \"success\" ? 100 : item.progress}\n                        variant={progressVariant}\n                        aria-label={`Upload progress for ${item.file.name}`}\n                      />\n                    ) : null}\n                  </div>\n\n                  <Button\n                    type=\"button\"\n                    variant={item.status === \"uploading\" ? \"destructive-ghost\" : \"ghost\"}\n                    size=\"icon-sm\"\n                    shape=\"square\"\n                    aria-label={\n                      item.status === \"uploading\"\n                        ? `Cancel upload for ${item.file.name}`\n                        : `Remove ${item.file.name}`\n                    }\n                    onClick={() => removeItem(item.id)}\n                  >\n                    <XIcon />\n                  </Button>\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport {\n  FileUpload,\n  type FileUploadHandler,\n  type FileUploadItem,\n  type FileUploadProps,\n  type FileUploadStatus,\n};\n"],"mappings":"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"}

package/dist/primitives/FileUpload/index.d.cts

@@ -0,0 +1,2 @@
+import { a as FileUploadStatus, i as FileUploadProps, n as FileUploadHandler, r as FileUploadItem, t as FileUpload } from "../../index28.cjs";
+export { FileUpload, FileUploadHandler, FileUploadItem, FileUploadProps, FileUploadStatus };

package/dist/primitives/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+import { a as FileUploadStatus, i as FileUploadProps, n as FileUploadHandler, r as FileUploadItem, t as FileUpload } from "../../index28.js";
+export { FileUpload, FileUploadHandler, FileUploadItem, FileUploadProps, FileUploadStatus };