@devalok/shilp-sutra 0.49.3 → 0.49.5

package/dist/ui/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/ui/dropdown-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@primitives/react-dropdown-menu'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst DropdownMenuOpenContext = React.createContext(false)\nconst DropdownMenuSubOpenContext = React.createContext(false)\n\n/**\n * DropdownMenu compound component — accessible floating menu triggered by a button, with full\n * keyboard navigation and focus management.\n *\n * **Parts (in composition order):**\n * - `DropdownMenu` — manages open/closed state (this root)\n * - `DropdownMenuTrigger` — element that opens the menu (use `asChild` to render your own button)\n * - `DropdownMenuContent` — the floating menu panel (renders in a portal automatically)\n * - `DropdownMenuItem` — clickable menu item (use `onSelect` for actions)\n * - `DropdownMenuCheckboxItem` — item with a checkbox indicator\n * - `DropdownMenuRadioGroup` — wraps radio items for exclusive selection\n * - `DropdownMenuRadioItem` — item with a radio indicator (must be inside `DropdownMenuRadioGroup`)\n * - `DropdownMenuSub` — root for a nested submenu\n * - `DropdownMenuSubTrigger` — item that reveals a submenu on hover/focus\n * - `DropdownMenuSubContent` — the nested submenu panel\n * - `DropdownMenuLabel` — non-interactive group label (not selectable)\n * - `DropdownMenuSeparator` — horizontal divider between sections\n * - `DropdownMenuShortcut` — right-aligned keyboard shortcut hint text (display only)\n * - `DropdownMenuGroup` — semantic grouping wrapper (no visual output)\n * - `DropdownMenuPortal` — low-level portal wrapper (exported for custom positioning; used internally by DropdownMenuContent)\n *\n * @compound\n * @example\n * // Standard action menu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button variant=\"ghost\" size=\"icon\"><IconDotsVertical /></Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent align=\"end\">\n *     <DropdownMenuLabel>My account</DropdownMenuLabel>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem>\n *       <IconUser className=\"mr-ds-03\" />Profile\n *       <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>\n *     </DropdownMenuItem>\n *     <DropdownMenuItem>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem className=\"text-error-11\">Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n *\n * @example\n * // Menu with checkbox items and a nested submenu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button>View options</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n *       Show side panel\n *     </DropdownMenuCheckboxItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuSub>\n *       <DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>\n *       <DropdownMenuSubContent>\n *         <DropdownMenuItem>Export CSV</DropdownMenuItem>\n *         <DropdownMenuItem>Export PDF</DropdownMenuItem>\n *       </DropdownMenuSubContent>\n *     </DropdownMenuSub>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nconst DropdownMenu: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  return (\n    <DropdownMenuOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props} />\n    </DropdownMenuOpenContext.Provider>\n  )\n}\nDropdownMenu.displayName = 'DropdownMenu'\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  return (\n    <DropdownMenuSubOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Sub open={open} onOpenChange={setOpen} {...props} />\n    </DropdownMenuSubOpenContext.Provider>\n  )\n}\nDropdownMenuSub.displayName = 'DropdownMenuSub'\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </DropdownMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.Portal forceMount>\n          <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover min-w-[8rem] rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-ds-sm text-surface-fg-subtle', className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\nexport type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/ui/dropdown-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@primitives/react-dropdown-menu'\nimport { IconCheck, IconChevronRight, IconCircle } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal contexts to thread open state ──\n\nconst DropdownMenuOpenContext = React.createContext(false)\nconst DropdownMenuSubOpenContext = React.createContext(false)\n\n/**\n * DropdownMenu compound component — accessible floating menu triggered by a button, with full\n * keyboard navigation and focus management.\n *\n * **Parts (in composition order):**\n * - `DropdownMenu` — manages open/closed state (this root)\n * - `DropdownMenuTrigger` — element that opens the menu (use `asChild` to render your own button)\n * - `DropdownMenuContent` — the floating menu panel (renders in a portal automatically)\n * - `DropdownMenuItem` — clickable menu item (use `onSelect` for actions)\n * - `DropdownMenuCheckboxItem` — item with a checkbox indicator\n * - `DropdownMenuRadioGroup` — wraps radio items for exclusive selection\n * - `DropdownMenuRadioItem` — item with a radio indicator (must be inside `DropdownMenuRadioGroup`)\n * - `DropdownMenuSub` — root for a nested submenu\n * - `DropdownMenuSubTrigger` — item that reveals a submenu on hover/focus\n * - `DropdownMenuSubContent` — the nested submenu panel\n * - `DropdownMenuLabel` — non-interactive group label (not selectable)\n * - `DropdownMenuSeparator` — horizontal divider between sections\n * - `DropdownMenuShortcut` — right-aligned keyboard shortcut hint text (display only)\n * - `DropdownMenuGroup` — semantic grouping wrapper (no visual output)\n * - `DropdownMenuPortal` — low-level portal wrapper (exported for custom positioning; used internally by DropdownMenuContent)\n *\n * @compound\n * @example\n * // Standard action menu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button variant=\"ghost\" size=\"icon\"><IconDotsVertical /></Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent align=\"end\">\n *     <DropdownMenuLabel>My account</DropdownMenuLabel>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem>\n *       <IconUser className=\"mr-ds-03\" />Profile\n *       <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>\n *     </DropdownMenuItem>\n *     <DropdownMenuItem>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem className=\"text-error-11\">Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n *\n * @example\n * // Menu with checkbox items and a nested submenu:\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button>View options</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n *       Show side panel\n *     </DropdownMenuCheckboxItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuSub>\n *       <DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>\n *       <DropdownMenuSubContent>\n *         <DropdownMenuItem>Export CSV</DropdownMenuItem>\n *         <DropdownMenuItem>Export PDF</DropdownMenuItem>\n *       </DropdownMenuSubContent>\n *     </DropdownMenuSub>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nconst DropdownMenu: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  return (\n    <DropdownMenuOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Root open={open} onOpenChange={setOpen} {...props} />\n    </DropdownMenuOpenContext.Provider>\n  )\n}\nDropdownMenu.displayName = 'DropdownMenu'\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub: React.FC<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  return (\n    <DropdownMenuSubOpenContext.Provider value={open}>\n      <DropdownMenuPrimitive.Sub open={open} onOpenChange={setOpen} {...props} />\n    </DropdownMenuSubOpenContext.Provider>\n  )\n}\nDropdownMenuSub.displayName = 'DropdownMenuSub'\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      'flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised data-[state=open]:bg-surface-raised [&_svg]:pointer-events-none [&_svg]:h-ico-sm [&_svg]:w-ico-sm [&_svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n    <Icon icon={IconChevronRight} size=\"sm\" className=\"ml-auto shrink-0\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuSubOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.SubContent\n          ref={ref}\n          forceMount\n          asChild\n          {...props}\n        >\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ ...springs.snappy, opacity: tweens.fade }}\n            className={cn(\n              'z-popover min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        </DropdownMenuPrimitive.SubContent>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(DropdownMenuOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DropdownMenuPrimitive.Portal forceMount>\n          <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover min-w-[8rem] rounded-overlay bg-surface-overlay p-ds-02 text-surface-fg shadow-floating',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center gap-ds-03 rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Icon icon={IconCheck} size=\"sm\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg active:bg-surface-raised-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <IconCircle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      'px-ds-03 py-ds-02b text-ds-md font-semibold',\n      inset && 'pl-ds-07',\n      className,\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-ds-sm text-surface-fg-subtle', className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\nexport type DropdownMenuItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-surface',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-pill bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-control px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-surface',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-pill bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-pill bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}

package/dist/ui/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-ds-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAmB,EAAM,cAAqC,EAAE,CAAC,EAmCjE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,OAAO,EACtB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;EAAU,GACpF;EAAC;EAAO;EAAkB;EAAiB;EAAS,CACrD;AAED,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,EAAU;GACnD,GAAI;GAEH;GACG,CAAA;EACoB,CAAA;EAGjC;AACD,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;CACV,EAEK,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,EAAiB,EAC5C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;AAE7B,QACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,cAAc,EAAmB,IAAQ,EAAU;EACjE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAI;EAC9B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC3B,YAAY,EAAO;EACnB,GAAI,EAAY,EAAM;EACtB,CAAA;EAGP;AACD,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;AACpD,QAAO,EAAM,WAAW,EAAiB"}
+{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-ds-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAmB,EAAM,cAAqC,CAAC,CAAC,GAmChE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,MAAM,GACrB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;CAAS,IACnF;EAAC;EAAO;EAAkB;EAAiB;CAAQ,CACrD;CAEA,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,CAAS;GAClD,GAAI;GAEH;EACE,CAAA;CACoB,CAAA;AAE/B,CACF;AACA,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;AACX,GAEM,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,CAAgB,GAC3C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;CAE7B,OACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,cAAc,EAAmB,IAAQ,CAAS;EAChE,SAAS;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,MAAM;GAAE,SAAS;GAAG,GAAG;EAAG;EAC1B,YAAY,EAAO;EACnB,GAAI,EAAY,CAAK;CACtB,CAAA;AAEL,CACF;AACA,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;CACpD,OAAO,EAAM,WAAW,CAAgB;AAC1C"}

package/dist/ui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-overlay bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardContent,HoverCardTrigger }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,GAAM,EASjD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAY,EACrE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;AAElB,EADK,KAAc,EAAoB,EAAM,EAC7C,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAa,CAC7B;AAED,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACpD,CAAA;;AAGpC,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,EAAqB,IAK7C,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;IAAM;GACvD,WAAW,EACT,4FACA,EACD;GAEA;GACU,CAAA;EACc,CAAA;CACH,CAAA,EAEd,CAAA,CAEpB;AACF,EAAiB,cAAA,EAAyC"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-overlay bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardContent,HoverCardTrigger }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,EAAK,GAShD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,CAAW,GACpE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;EAElB,AADK,KAAc,EAAoB,CAAK,GAC5C,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAY,CAC7B;CAEA,OACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;EAAQ,CAAA;CACpD,CAAA;AAEnC;AACA,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,CAIzB,KACC,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;GAAK;GACnC,SAAS;IAAE,SAAS;IAAG,OAAO;GAAE;GAChC,MAAM;IAAE,SAAS;IAAG,OAAO;GAAK;GAChC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;GAAK;GACtD,WAAW,EACT,4FACA,CACF;GAEC;EACS,CAAA;CACc,CAAA;AACH,CAAA,EAEd,CAAA,CAEpB;AACD,EAAiB,cAAA,EAAyC"}

package/dist/ui/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from './button'\nimport type { IconInput } from './lib/icon-input'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /**\n   * The icon to render. Accepts any `IconInput`:\n   * - `<Icon icon={IconPlus} />` (canonical — size flows from context)\n   * - `<IconPlus />` (raw Tabler element — passes through)\n   * - `IconPlus` (Tabler component ref — auto-wrapped in `<Icon>`)\n   * - Custom `<span>$</span>` or any ReactElement.\n   */\n  icon: IconInput\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-pill', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {normalizeIcon(icon)}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;;AAUA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAoDK,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,gBAAgB,EAAU;CACrD;CACT,iBAAgB;CAChB,GAAI;WAEH,EAAc,EAAK;CACb,CAAA,CAGd;AACD,EAAW,cAAc"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from './button'\nimport type { IconInput } from './lib/icon-input'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /**\n   * The icon to render. Accepts any `IconInput`:\n   * - `<Icon icon={IconPlus} />` (canonical — size flows from context)\n   * - `<IconPlus />` (raw Tabler element — passes through)\n   * - `IconPlus` (Tabler component ref — auto-wrapped in `<Icon>`)\n   * - Custom `<span>$</span>` or any ReactElement.\n   */\n  icon: IconInput\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-pill', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {normalizeIcon(icon)}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;;AAUA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAoDM,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,gBAAgB,CAAS;CACpD;CACT,iBAAgB;CAChB,GAAI;WAEH,EAAc,CAAI;AACb,CAAA,CAGd;AACA,EAAW,cAAc"}

package/dist/ui/icon-context.d.ts

@@ -9,7 +9,7 @@ export interface IconContextValue {
 declare const IconContext: React.Context<IconContextValue>;
 export declare function IconProvider({ size, stroke, children, }: IconContextValue & {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function useIconContext(): IconContextValue;
 export { IconContext };
 //# sourceMappingURL=icon-context.d.ts.map

package/dist/ui/icon-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-context.d.ts","sourceRoot":"","sources":["../../src/ui/icon-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAC/D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB;AAED,QAAA,MAAM,WAAW,iCAA4C,CAAA;AAE7D,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAGlD;AAED,wBAAgB,cAAc,IAAI,gBAAgB,CAEjD;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"icon-context.d.ts","sourceRoot":"","sources":["../../src/ui/icon-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAC/D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAErD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB;AAED,QAAA,MAAM,WAAW,iCAA4C,CAAA;AAE7D,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAGlD;AAED,wBAAgB,cAAc,IAAI,gBAAgB,CAEjD;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/icon-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-context.js","names":[],"sources":["../../src/ui/icon-context.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\nexport type IconStroke = 'light' | 'regular' | 'bold'\n\nexport interface IconContextValue {\n  size?: IconSize\n  stroke?: IconStroke\n}\n\nconst IconContext = React.createContext<IconContextValue>({})\n\nexport function IconProvider({\n  size,\n  stroke,\n  children,\n}: IconContextValue & { children: React.ReactNode }) {\n  const value = React.useMemo(() => ({ size, stroke }), [size, stroke])\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>\n}\n\nexport function useIconContext(): IconContextValue {\n  return React.useContext(IconContext)\n}\n\nexport { IconContext }\n"],"mappings":";;;;AAYA,IAAM,IAAc,EAAM,cAAgC,EAAE,CAAC;AAE7D,SAAgB,EAAa,EAC3B,SACA,WACA,eACmD;CACnD,IAAM,IAAQ,EAAM,eAAe;EAAE;EAAM;EAAQ,GAAG,CAAC,GAAM,EAAO,CAAC;AACrE,QAAO,kBAAC,EAAY,UAAb;EAA6B;EAAQ;EAAgC,CAAA;;AAG9E,SAAgB,IAAmC;AACjD,QAAO,EAAM,WAAW,EAAY"}
+{"version":3,"file":"icon-context.js","names":[],"sources":["../../src/ui/icon-context.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\nexport type IconStroke = 'light' | 'regular' | 'bold'\n\nexport interface IconContextValue {\n  size?: IconSize\n  stroke?: IconStroke\n}\n\nconst IconContext = React.createContext<IconContextValue>({})\n\nexport function IconProvider({\n  size,\n  stroke,\n  children,\n}: IconContextValue & { children: React.ReactNode }) {\n  const value = React.useMemo(() => ({ size, stroke }), [size, stroke])\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>\n}\n\nexport function useIconContext(): IconContextValue {\n  return React.useContext(IconContext)\n}\n\nexport { IconContext }\n"],"mappings":";;;;AAYA,IAAM,IAAc,EAAM,cAAgC,CAAC,CAAC;AAE5D,SAAgB,EAAa,EAC3B,SACA,WACA,eACmD;CACnD,IAAM,IAAQ,EAAM,eAAe;EAAE;EAAM;CAAO,IAAI,CAAC,GAAM,CAAM,CAAC;CACpE,OAAO,kBAAC,EAAY,UAAb;EAA6B;EAAQ;CAA+B,CAAA;AAC7E;AAEA,SAAgB,IAAmC;CACjD,OAAO,EAAM,WAAW,CAAW;AACrC"}

package/dist/ui/icon-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-group.js","names":[],"sources":["../../src/ui/icon-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { IconProvider, type IconSize, type IconStroke } from './icon-context'\nimport { cn } from './lib/utils'\n\nconst gapClasses = {\n  tight: 'gap-0.5',\n  default: 'gap-1',\n  loose: 'gap-2',\n} as const\n\nexport interface IconGroupProps {\n  /** Icon size for all children */\n  size?: IconSize\n  /** Stroke weight for all children */\n  stroke?: IconStroke\n  /** Gap between icons. Default: 'default' (4px) */\n  gap?: 'tight' | 'default' | 'loose'\n  /** Accessible label — required when role is \"toolbar\" */\n  label?: string\n  /** Set to \"toolbar\" for formatting toolbars. Default: no role. */\n  role?: 'toolbar'\n  className?: string\n  children: React.ReactNode\n}\n\nconst IconGroup = React.forwardRef<HTMLDivElement, IconGroupProps>(({\n  size,\n  stroke,\n  gap = 'default',\n  label,\n  role: ariaRole,\n  className,\n  children,\n}, ref) => {\n  return (\n    <IconProvider size={size} stroke={stroke}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-label={ariaRole ? label : undefined}\n        className={cn('inline-flex items-center', gapClasses[gap], className)}\n      >\n        {children}\n      </div>\n    </IconProvider>\n  )\n})\nIconGroup.displayName = 'IconGroup'\n\nexport { IconGroup }\n"],"mappings":";;;;;;AAOA,IAAM,IAAa;CACjB,OAAO;CACP,SAAS;CACT,OAAO;CACR,EAiBK,IAAY,EAAM,YAA4C,EAClE,SACA,WACA,SAAM,WACN,UACA,MAAM,GACN,cACA,eACC,MAEC,kBAAC,GAAD;CAAoB;CAAc;WAChC,kBAAC,OAAD;EACO;EACL,MAAM;EACN,cAAY,IAAW,IAAQ,KAAA;EAC/B,WAAW,EAAG,4BAA4B,EAAW,IAAM,EAAU;EAEpE;EACG,CAAA;CACO,CAAA,CAEjB;AACF,EAAU,cAAc"}
+{"version":3,"file":"icon-group.js","names":[],"sources":["../../src/ui/icon-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { IconProvider, type IconSize, type IconStroke } from './icon-context'\nimport { cn } from './lib/utils'\n\nconst gapClasses = {\n  tight: 'gap-0.5',\n  default: 'gap-1',\n  loose: 'gap-2',\n} as const\n\nexport interface IconGroupProps {\n  /** Icon size for all children */\n  size?: IconSize\n  /** Stroke weight for all children */\n  stroke?: IconStroke\n  /** Gap between icons. Default: 'default' (4px) */\n  gap?: 'tight' | 'default' | 'loose'\n  /** Accessible label — required when role is \"toolbar\" */\n  label?: string\n  /** Set to \"toolbar\" for formatting toolbars. Default: no role. */\n  role?: 'toolbar'\n  className?: string\n  children: React.ReactNode\n}\n\nconst IconGroup = React.forwardRef<HTMLDivElement, IconGroupProps>(({\n  size,\n  stroke,\n  gap = 'default',\n  label,\n  role: ariaRole,\n  className,\n  children,\n}, ref) => {\n  return (\n    <IconProvider size={size} stroke={stroke}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-label={ariaRole ? label : undefined}\n        className={cn('inline-flex items-center', gapClasses[gap], className)}\n      >\n        {children}\n      </div>\n    </IconProvider>\n  )\n})\nIconGroup.displayName = 'IconGroup'\n\nexport { IconGroup }\n"],"mappings":";;;;;;AAOA,IAAM,IAAa;CACjB,OAAO;CACP,SAAS;CACT,OAAO;AACT,GAiBM,IAAY,EAAM,YAA4C,EAClE,SACA,WACA,SAAM,WACN,UACA,MAAM,GACN,cACA,eACC,MAEC,kBAAC,GAAD;CAAoB;CAAc;WAChC,kBAAC,OAAD;EACO;EACL,MAAM;EACN,cAAY,IAAW,IAAQ,KAAA;EAC/B,WAAW,EAAG,4BAA4B,EAAW,IAAM,CAAS;EAEnE;CACE,CAAA;AACO,CAAA,CAEjB;AACD,EAAU,cAAc"}

package/dist/ui/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../src/ui/icon.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { type IconSize, type IconStroke,useIconContext } from './icon-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/** Icon size tier → pixel dimensions */\nconst SIZE_PX: Record<IconSize, number> = {\n  xs: 14, sm: 16, md: 18, lg: 20, xl: 24, '2xl': 32,\n}\n\n/** Stroke weight → strokeWidth per size tier (lighter strokes on smaller icons) */\nconst STROKE_MAP: Record<IconStroke, Record<IconSize, number>> = {\n  light:   { xs: 1.25, sm: 1.5, md: 1.5, lg: 1.75, xl: 2,    '2xl': 2 },\n  regular: { xs: 1.5,  sm: 2,   md: 2,   lg: 2,    xl: 2,    '2xl': 2.25 },\n  bold:    { xs: 2,    sm: 2.5, md: 2.5, lg: 2.5,  xl: 2.5,  '2xl': 2.5 },\n}\n\n/** Props accepted by Tabler icon components (and most SVG icon libraries) */\ntype IconComponentProps = Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> & {\n  size?: string | number\n  stroke?: string | number\n  title?: string\n}\n\nconst ANIMATION_PRESETS = {\n  spin: {\n    animate: { rotate: 360 },\n    transition: { duration: 1, repeat: Infinity, ease: 'linear' as const },\n  },\n  pulse: {\n    animate: { scale: [1, 1.15, 1] },\n    transition: { duration: 2, repeat: Infinity, ease: 'easeInOut' as const },\n  },\n  bounce: {\n    animate: { y: [0, -4, 0] },\n    transition: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' as const },\n  },\n}\n\nconst ICON_TO_SPINNER_SIZE: Record<IconSize, 'sm' | 'md' | 'lg'> = {\n  xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'lg', '2xl': 'lg',\n}\n\nexport interface IconProps {\n  /** The Tabler icon component (or any ForwardRef SVG icon component) */\n  icon: React.ForwardRefExoticComponent<IconComponentProps & React.RefAttributes<SVGSVGElement>>\n  /** Size tier — reads from IconContext if not set */\n  size?: IconSize\n  /** Stroke weight — reads from IconContext if not set */\n  stroke?: IconStroke\n  /** Accessible label — renders <title> + sets aria-label. Without this, icon is aria-hidden. */\n  label?: string\n  /**\n   * Preset animation or controlled motion. 'none' disables inherited animation.\n   * 'draw' renders the icon as an SVG path that draws in like a pen stroke\n   * (works with IconCheck and IconX — others fall back to fade-in).\n   */\n  animate?: 'spin' | 'pulse' | 'bounce' | 'draw' | 'none' | { rotate?: number; scale?: number }\n  /**\n   * State machine for loading→success/error transitions. Delegates to Spinner (bare variant).\n   *\n   * **Priority rule:** If both `state` and `animate` are set, `state` wins —\n   * the state machine check runs first and short-circuits rendering.\n   */\n  state?: 'idle' | 'loading' | 'success' | 'error'\n  className?: string\n}\n\n/**\n * Icon — context-aware wrapper for Tabler icons with standardized sizing,\n * stroke weights, accessibility, animation presets, and loading state machine.\n *\n * Reads size and stroke from IconContext (provided by Button, IconGroup, etc.).\n * Explicit props always override context.\n *\n * **Priority rule:** If both `state` and `animate` are set, `state` wins.\n *\n * @example\n * <Icon icon={IconPlus} />                           // md size, regular stroke\n * <Icon icon={IconPlus} size=\"xs\" stroke=\"light\" />  // 14px, stroke 1.25\n * <Icon icon={IconPlus} label=\"Add item\" />           // accessible, not decorative\n * <Icon icon={IconPlus} animate=\"spin\" />             // continuous rotation\n * <Icon icon={IconPlus} animate=\"pulse\" />            // scale pulse\n * <Icon icon={IconPlus} state=\"loading\" />            // bare spinner\n * <Icon icon={IconPlus} state=\"success\" />            // animated checkmark\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ icon: TablerIcon, size, stroke, label, animate, state, className }, ref) => {\n    const ctx = useIconContext()\n    const resolvedSize = size ?? ctx.size ?? 'md'\n    const resolvedStroke = stroke ?? ctx.stroke ?? 'regular'\n    const px = SIZE_PX[resolvedSize]\n    const sw = STROKE_MAP[resolvedStroke][resolvedSize]\n    const prefersReduced = useReducedMotion()\n\n    // ── State machine (priority: state > animate) ──────────────────────\n    if (state && state !== 'idle') {\n      const spinnerSize = ICON_TO_SPINNER_SIZE[resolvedSize]\n      const spinnerState = state === 'loading' ? 'spinning' : state\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.span\n            key=\"spinner\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={tweens.fade}\n            className=\"inline-flex\"\n          >\n            <Spinner size={spinnerSize} state={spinnerState} variant=\"bare\" />\n          </motion.span>\n        </AnimatePresence>\n      )\n    }\n\n    // ── Draw animation (SVG pathLength) ─────────────────────────────────\n    if (animate === 'draw' && !prefersReduced) {\n      const drawProps = {\n        initial: { pathLength: 0, opacity: 0 },\n        animate: { pathLength: 1, opacity: 1 },\n        transition: { pathLength: { duration: 0.35, ease: 'easeOut' as const }, opacity: { duration: 0.1 } },\n      }\n      // Check which icon this is to render the appropriate SVG path.\n      // Tabler displayNames: IconCheck → \"Check\", IconX → \"X\"\n      const name = TablerIcon.displayName ?? ''\n      const isCheck = name === 'Check' || name === 'IconCheck' || name === 'CircleCheck'\n      const isX = name === 'X' || name === 'IconX'\n\n      if (isCheck || isX) {\n        return (\n          <svg\n            ref={ref}\n            width={px}\n            height={px}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={sw}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={className}\n            aria-hidden={label ? undefined : 'true'}\n            aria-label={label}\n            role={label ? 'img' : undefined}\n          >\n            {isCheck ? (\n              <motion.polyline points=\"4 12 10 18 20 6\" {...drawProps} />\n            ) : (\n              <>\n                <motion.line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" {...drawProps} />\n                <motion.line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\n                  {...drawProps}\n                  transition={{\n                    pathLength: { duration: 0.25, ease: 'easeOut', delay: 0.1 },\n                    opacity: { duration: 0.1, delay: 0.1 },\n                  }}\n                />\n              </>\n            )}\n          </svg>\n        )\n      }\n      // Unknown icon: fall through to fade-in via static render\n    }\n\n    // ── Determine animation ────────────────────────────────────────────\n    const animatePreset =\n      typeof animate === 'string' && animate !== 'none' && animate !== 'draw'\n        ? ANIMATION_PRESETS[animate as keyof typeof ANIMATION_PRESETS]\n        : null\n    const animateObject =\n      typeof animate === 'object' && animate !== null && (animate.rotate !== undefined || animate.scale !== undefined)\n        ? animate\n        : null\n\n    if (prefersReduced || (!animatePreset && !animateObject)) {\n      // Static render (no animation or reduced motion)\n      return label ? (\n        <TablerIcon ref={ref as any} size={px} stroke={sw} className={className} title={label} aria-label={label} role=\"img\" />\n      ) : (\n        <TablerIcon ref={ref as any} size={px} stroke={sw} className={className} aria-hidden=\"true\" />\n      )\n    }\n\n    // ── Animated render ────────────────────────────────────────────────\n    const motionProps = animatePreset ?? {\n      animate: animateObject!,\n      transition: springs.snappy,\n    }\n\n    const iconEl = label ? (\n      <TablerIcon size={px} stroke={sw} title={label} aria-label={label} role=\"img\" />\n    ) : (\n      <TablerIcon size={px} stroke={sw} aria-hidden=\"true\" />\n    )\n\n    return (\n      <motion.span\n        ref={ref as any}\n        className={cn('inline-flex', className)}\n        {...motionProps}\n      >\n        {iconEl}\n      </motion.span>\n    )\n  },\n)\nIcon.displayName = 'Icon'\n"],"mappings":"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"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/ui/icon.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { type IconSize, type IconStroke,useIconContext } from './icon-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/** Icon size tier → pixel dimensions */\nconst SIZE_PX: Record<IconSize, number> = {\n  xs: 14, sm: 16, md: 18, lg: 20, xl: 24, '2xl': 32,\n}\n\n/** Stroke weight → strokeWidth per size tier (lighter strokes on smaller icons) */\nconst STROKE_MAP: Record<IconStroke, Record<IconSize, number>> = {\n  light:   { xs: 1.25, sm: 1.5, md: 1.5, lg: 1.75, xl: 2,    '2xl': 2 },\n  regular: { xs: 1.5,  sm: 2,   md: 2,   lg: 2,    xl: 2,    '2xl': 2.25 },\n  bold:    { xs: 2,    sm: 2.5, md: 2.5, lg: 2.5,  xl: 2.5,  '2xl': 2.5 },\n}\n\n/** Props accepted by Tabler icon components (and most SVG icon libraries) */\ntype IconComponentProps = Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> & {\n  size?: string | number\n  stroke?: string | number\n  title?: string\n}\n\nconst ANIMATION_PRESETS = {\n  spin: {\n    animate: { rotate: 360 },\n    transition: { duration: 1, repeat: Infinity, ease: 'linear' as const },\n  },\n  pulse: {\n    animate: { scale: [1, 1.15, 1] },\n    transition: { duration: 2, repeat: Infinity, ease: 'easeInOut' as const },\n  },\n  bounce: {\n    animate: { y: [0, -4, 0] },\n    transition: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' as const },\n  },\n}\n\nconst ICON_TO_SPINNER_SIZE: Record<IconSize, 'sm' | 'md' | 'lg'> = {\n  xs: 'sm', sm: 'sm', md: 'md', lg: 'md', xl: 'lg', '2xl': 'lg',\n}\n\nexport interface IconProps {\n  /** The Tabler icon component (or any ForwardRef SVG icon component) */\n  icon: React.ForwardRefExoticComponent<IconComponentProps & React.RefAttributes<SVGSVGElement>>\n  /** Size tier — reads from IconContext if not set */\n  size?: IconSize\n  /** Stroke weight — reads from IconContext if not set */\n  stroke?: IconStroke\n  /** Accessible label — renders <title> + sets aria-label. Without this, icon is aria-hidden. */\n  label?: string\n  /**\n   * Preset animation or controlled motion. 'none' disables inherited animation.\n   * 'draw' renders the icon as an SVG path that draws in like a pen stroke\n   * (works with IconCheck and IconX — others fall back to fade-in).\n   */\n  animate?: 'spin' | 'pulse' | 'bounce' | 'draw' | 'none' | { rotate?: number; scale?: number }\n  /**\n   * State machine for loading→success/error transitions. Delegates to Spinner (bare variant).\n   *\n   * **Priority rule:** If both `state` and `animate` are set, `state` wins —\n   * the state machine check runs first and short-circuits rendering.\n   */\n  state?: 'idle' | 'loading' | 'success' | 'error'\n  className?: string\n}\n\n/**\n * Icon — context-aware wrapper for Tabler icons with standardized sizing,\n * stroke weights, accessibility, animation presets, and loading state machine.\n *\n * Reads size and stroke from IconContext (provided by Button, IconGroup, etc.).\n * Explicit props always override context.\n *\n * **Priority rule:** If both `state` and `animate` are set, `state` wins.\n *\n * @example\n * <Icon icon={IconPlus} />                           // md size, regular stroke\n * <Icon icon={IconPlus} size=\"xs\" stroke=\"light\" />  // 14px, stroke 1.25\n * <Icon icon={IconPlus} label=\"Add item\" />           // accessible, not decorative\n * <Icon icon={IconPlus} animate=\"spin\" />             // continuous rotation\n * <Icon icon={IconPlus} animate=\"pulse\" />            // scale pulse\n * <Icon icon={IconPlus} state=\"loading\" />            // bare spinner\n * <Icon icon={IconPlus} state=\"success\" />            // animated checkmark\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ icon: TablerIcon, size, stroke, label, animate, state, className }, ref) => {\n    const ctx = useIconContext()\n    const resolvedSize = size ?? ctx.size ?? 'md'\n    const resolvedStroke = stroke ?? ctx.stroke ?? 'regular'\n    const px = SIZE_PX[resolvedSize]\n    const sw = STROKE_MAP[resolvedStroke][resolvedSize]\n    const prefersReduced = useReducedMotion()\n\n    // ── State machine (priority: state > animate) ──────────────────────\n    if (state && state !== 'idle') {\n      const spinnerSize = ICON_TO_SPINNER_SIZE[resolvedSize]\n      const spinnerState = state === 'loading' ? 'spinning' : state\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.span\n            key=\"spinner\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={tweens.fade}\n            className=\"inline-flex\"\n          >\n            <Spinner size={spinnerSize} state={spinnerState} variant=\"bare\" />\n          </motion.span>\n        </AnimatePresence>\n      )\n    }\n\n    // ── Draw animation (SVG pathLength) ─────────────────────────────────\n    if (animate === 'draw' && !prefersReduced) {\n      const drawProps = {\n        initial: { pathLength: 0, opacity: 0 },\n        animate: { pathLength: 1, opacity: 1 },\n        transition: { pathLength: { duration: 0.35, ease: 'easeOut' as const }, opacity: { duration: 0.1 } },\n      }\n      // Check which icon this is to render the appropriate SVG path.\n      // Tabler displayNames: IconCheck → \"Check\", IconX → \"X\"\n      const name = TablerIcon.displayName ?? ''\n      const isCheck = name === 'Check' || name === 'IconCheck' || name === 'CircleCheck'\n      const isX = name === 'X' || name === 'IconX'\n\n      if (isCheck || isX) {\n        return (\n          <svg\n            ref={ref}\n            width={px}\n            height={px}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={sw}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={className}\n            aria-hidden={label ? undefined : 'true'}\n            aria-label={label}\n            role={label ? 'img' : undefined}\n          >\n            {isCheck ? (\n              <motion.polyline points=\"4 12 10 18 20 6\" {...drawProps} />\n            ) : (\n              <>\n                <motion.line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" {...drawProps} />\n                <motion.line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\n                  {...drawProps}\n                  transition={{\n                    pathLength: { duration: 0.25, ease: 'easeOut', delay: 0.1 },\n                    opacity: { duration: 0.1, delay: 0.1 },\n                  }}\n                />\n              </>\n            )}\n          </svg>\n        )\n      }\n      // Unknown icon: fall through to fade-in via static render\n    }\n\n    // ── Determine animation ────────────────────────────────────────────\n    const animatePreset =\n      typeof animate === 'string' && animate !== 'none' && animate !== 'draw'\n        ? ANIMATION_PRESETS[animate as keyof typeof ANIMATION_PRESETS]\n        : null\n    const animateObject =\n      typeof animate === 'object' && animate !== null && (animate.rotate !== undefined || animate.scale !== undefined)\n        ? animate\n        : null\n\n    if (prefersReduced || (!animatePreset && !animateObject)) {\n      // Static render (no animation or reduced motion)\n      return label ? (\n        <TablerIcon ref={ref as any} size={px} stroke={sw} className={className} title={label} aria-label={label} role=\"img\" />\n      ) : (\n        <TablerIcon ref={ref as any} size={px} stroke={sw} className={className} aria-hidden=\"true\" />\n      )\n    }\n\n    // ── Animated render ────────────────────────────────────────────────\n    const motionProps = animatePreset ?? {\n      animate: animateObject!,\n      transition: springs.snappy,\n    }\n\n    const iconEl = label ? (\n      <TablerIcon size={px} stroke={sw} title={label} aria-label={label} role=\"img\" />\n    ) : (\n      <TablerIcon size={px} stroke={sw} aria-hidden=\"true\" />\n    )\n\n    return (\n      <motion.span\n        ref={ref as any}\n        className={cn('inline-flex', className)}\n        {...motionProps}\n      >\n        {iconEl}\n      </motion.span>\n    )\n  },\n)\nIcon.displayName = 'Icon'\n"],"mappings":"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"}

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ui/lib/check-tokens.ts","../../src/ui/index.ts"],"sourcesContent":["/**\n * Dev-mode check for missing token CSS.\n *\n * If the consumer forgets `import '@devalok/shilp-sutra/tokens'`, all CSS\n * custom properties resolve to empty strings and components render with\n * transparent/broken backgrounds. This check detects that condition and\n * warns in the console.\n *\n * Only runs once, only in development, only in the browser.\n */\nlet checked = false\n\nexport function checkTokensLoaded(): void {\n  if (checked) return\n  if (typeof window === 'undefined') return\n\n  // Skip in production — bundlers (Vite, Next.js, webpack) define import.meta.env or process.env\n  try {\n    // @ts-expect-error -- import.meta.env is Vite-specific, not in base TS lib\n    if (import.meta.env?.PROD) return\n  } catch { /* not in Vite */ }\n\n  checked = true\n\n  // Wait for stylesheets to load\n  requestAnimationFrame(() => {\n    const value = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-9').trim()\n    if (!value) {\n      console.warn(\n        '[shilp-sutra] Design system tokens CSS not loaded. ' +\n        'Add `import \\'@devalok/shilp-sutra/tokens\\'` to your root layout. ' +\n        'Without it, components will render with missing colors, spacing, and typography.'\n      )\n    }\n  })\n}\n","/**\n * @module @devalok/shilp-sutra/ui\n *\n * Core UI primitives: buttons, inputs, dialogs, cards, tables, badges, navigation, and more.\n * Most components require client-side React (\"use client\").\n *\n * **Server-safe components** (import individually for Server Components):\n * `Text`, `Skeleton`, `Stack`, `Container`, `Table`, `Code`, `VisuallyHidden`\n *\n * @example\n * // Server Component — import individually:\n * import { Text } from '@devalok/shilp-sutra/ui/text'\n * import { Stack } from '@devalok/shilp-sutra/ui/stack'\n *\n * // Client Component — barrel import:\n * import { Button, Dialog } from '@devalok/shilp-sutra/ui'\n */\n\n// Dev-mode token presence check — runs once on first import\nimport { checkTokensLoaded } from './lib/check-tokens'\ncheckTokensLoaded()\n\n// Core\nexport { Button, type ButtonProps,buttonVariants } from './button'\nexport { ButtonGroup, type ButtonGroupProps,useButtonGroup } from './button-group'\nexport { ColorInput, type ColorInputProps } from './color-input'\nexport { Icon, type IconProps } from './icon'\nexport { IconButton, type IconButtonProps } from './icon-button'\nexport { IconContext, type IconContextValue, IconProvider, type IconSize, type IconStroke,useIconContext } from './icon-context'\nexport { IconGroup, type IconGroupProps } from './icon-group'\nexport { Input, type InputProps, type InputState, inputWrapperVariants } from './input'\nexport { Label, type LabelProps } from './label'\nexport { type FieldState } from './lib/field-state'\nexport { Separator, type SeparatorProps } from './separator'\nexport { SplitButton, type SplitButtonProps } from './split-button'\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden'\n\n// Autocomplete\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps } from './autocomplete'\n\n// Combobox\nexport { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize,comboboxTriggerVariants } from './combobox'\n\n// FileUpload\nexport { FileUpload, type FileUploadProps } from './file-upload'\n\n// Form Controls\nexport { Checkbox, type CheckboxProps } from './checkbox'\nexport { FormField, type FormFieldProps, type FormHelperState, FormHelperText, type FormHelperTextProps,useFormField } from './form'\n// InputOTP removed from barrel in 0.40.0 — hard peer `input-otp` was breaking\n// fresh-consumer builds. Import per-component instead:\n//   import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@devalok/shilp-sutra/ui/input-otp'\nexport { NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputState,numberInputWrapperVariants } from './number-input'\nexport { RadioGroup, RadioGroupItem, type RadioGroupItemProps,type RadioGroupProps } from './radio'\nexport { SearchInput, type SearchInputProps } from './search-input'\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  type SelectTriggerProps,\n  selectTriggerVariants,\n  SelectValue,\n} from './select'\nexport { Slider, type SliderColor,type SliderProps, type SliderSize, sliderThumbVariants, sliderTrackVariants } from './slider'\nexport { Switch, type SwitchProps } from './switch'\nexport { Textarea, type TextareaProps,textareaVariants } from './textarea'\nexport { Toggle, type ToggleProps,toggleVariants } from './toggle'\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps,type ToggleGroupProps } from './toggle-group'\nexport { TruncatedText, type TruncatedTextProps } from './truncated-text'\n\n// Feedback & Overlays\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  type AlertDialogActionProps,\n  AlertDialogCancel,\n  type AlertDialogCancelProps,\n  AlertDialogContent,\n  type AlertDialogContentProps,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from './alert-dialog'\nexport { Collapsible, CollapsibleContent, type CollapsibleProps,CollapsibleTrigger } from './collapsible'\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  type DialogContentProps,\n  DialogContentRaw,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  type DialogTitleProps,\n  DialogTrigger,\n} from './dialog'\nexport { HoverCard, HoverCardContent, type HoverCardContentProps,HoverCardTrigger } from './hover-card'\nexport { Popover, PopoverAnchor, PopoverContent, type PopoverContentProps,PopoverTrigger } from './popover'\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  type SheetContentProps,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet'\n// toast + Toaster removed from barrel in 0.40.0 — hard peer `sonner` was\n// breaking fresh-consumer builds when consumers imported other UI symbols\n// from the barrel without sonner installed. Import per-component instead:\n//   import { toast, formatFileSize, type ToastOptions } from '@devalok/shilp-sutra/ui/toast'\n//   import { Toaster } from '@devalok/shilp-sutra/ui/toaster'\nexport { Tooltip, TooltipContent, type TooltipContentProps,TooltipProvider, TooltipTrigger } from './tooltip'\n// ---------------------------------------------------------------------------\n// Notifications — pick the right one:\n//   Alert   — inline, static feedback within a form or page section (no user action needed to show)\n//   Banner  — persistent, page-level notice shown above main content (survives navigation)\n//   Toast   — imperative, transient, action-triggered (fires on user action, auto-dismisses)\n//             Requires <Toaster /> mounted once at layout root. Use toast.success() etc. from anywhere.\n// ---------------------------------------------------------------------------\nexport { Alert, type AlertProps,alertVariants } from './alert'\nexport { Banner, type BannerProps,bannerVariants } from './banner'\nexport { Spinner, type SpinnerProps } from './spinner'\n\n// Data Display\nexport { AspectRatio } from './aspect-ratio'\nexport { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarProps, type AvatarRing,type AvatarStatus, avatarVariants } from './avatar'\nexport { Badge, type BadgeProps,badgeVariants } from './badge'\nexport { BadgeGroup, type BadgeGroupProps } from './badge-group'\nexport { BadgeIndicator, type BadgeIndicatorProps } from './badge-indicator'\nexport { Card, CardAction, type CardActionPlacement, type CardActionProps, CardBleed, type CardBleedProps, type CardBleedSide, CardContent, CardDescription, CardFooter, CardHeader, type CardProps,CardSection, CardTitle, cardVariants } from './card'\nexport { Code, type CodeProps } from './code'\nexport { ColorSwatch, type ColorSwatchProps } from './color-swatch'\nexport { Dot, type DotColor, type DotProps, type DotSize, type DotVariant, dotVariants } from './dot'\nexport {\n  Progress,\n  type ProgressColor,\n  ProgressIndicator,\n  type ProgressIndicatorProps,\n  progressIndicatorVariants,\n  ProgressLabel,\n  type ProgressLabelProps,\n  type ProgressProps,\n  ProgressRoot,\n  type ProgressRootProps,\n  ProgressSegment,\n  type ProgressSegmentProps,\n  type ProgressSize,\n  ProgressTrack,\n  type ProgressTrackProps,\n  progressTrackVariants,\n  ProgressValue,\n  type ProgressValueProps,\n} from './progress'\nexport { MultiProgressRing, type MultiProgressRingProps,ProgressRing, type ProgressRingProps } from './progress-ring'\nexport {\n  Skeleton,\n  SkeletonAvatar,\n  type SkeletonAvatarProps,\n  SkeletonButton,\n  type SkeletonButtonProps,\n  SkeletonChart,\n  type SkeletonChartProps,\n  SkeletonGroup,\n  type SkeletonGroupProps,\n  SkeletonImage,\n  type SkeletonImageProps,\n  SkeletonInput,\n  type SkeletonInputProps,\n  type SkeletonProps,\n  SkeletonText,\n  type SkeletonTextProps,\n  skeletonVariants,\n} from './skeleton'\nexport { StatCard, type StatCardProps } from './stat-card'\nexport {\n  type FlashPreset,\n  type FlashSpec,\n  type FlashSpeed,\n  type FlashTone,\n  StatFlash,\n  type StatFlashProps,\n} from './stat-flash'\nexport { Surface, type SurfaceProps, surfaceVariants } from './surface'\nexport { Table, TableBody, TableCaption, TableCell, type TableCellBaseProps,type TableCellProps,type TableDensity, TableFooter, TableHead, TableHeader, type TableProps, TableRow, TableRowActions, type TableRowActionsProps,type TableRowProps } from './table'\nexport { TableRowLink, type TableRowLinkProps } from './table-row-link'\n\n// Navigation\nexport { Accordion, AccordionContent, type AccordionContentProps,AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps } from './accordion'\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  type BreadcrumbLinkProps,\n  BreadcrumbList,\n  BreadcrumbPage,\n  type BreadcrumbProps,\n  BreadcrumbSeparator,\n} from './breadcrumb'\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  type ContextMenuContentProps,\n  ContextMenuGroup,\n  ContextMenuItem,\n  type ContextMenuItemProps,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from './context-menu'\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  type DropdownMenuItemProps,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu'\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarGroup,\n  MenubarItem,\n  type MenubarItemProps,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from './menubar'\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  type NavigationMenuContentProps,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  type NavigationMenuProps,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n} from './navigation-menu'\nexport {\n  generatePagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  type PaginationLinkProps,\n  PaginationNav,\n  type PaginationNavProps,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationRoot,\n} from './pagination'\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from './sidebar'\nexport { Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation,type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps } from './tabs'\n\n// Workflow\nexport { Step, Stepper, type StepperProps, type StepProps } from './stepper'\n\n\n// Typography\nexport { Text, type TextProps, type TextVariant,textVariants } from './text'\n\n// Layout\nexport { Container, type ContainerProps } from './container'\nexport { type SpacingToken,Stack, type StackProps } from './stack'\n\n// Tree View\nexport { TreeItem, type TreeItemProps, type TreeNode,TreeView, type TreeViewProps, useTree } from './tree-view'\n\n// Segmented Control\nexport {\n  SegmentedControl,\n  type SegmentedControlOption,\n  type SegmentedControlProps,\n  type SegmentedControlSize,\n  type SegmentedControlVariant,\n} from './segmented-control'\n\n// Brand Texture\nexport { DevalokGrain, type DevalokGrainProps, type GrainIntensity } from './devalok-grain'\n\n// Chat primitives\nexport {\n  DateSeparator,\n  type DateSeparatorProps,\n  Message,\n  type MessageActionProps,\n  type MessageActionsProps,\n  type MessageAuthorProps,\n  type MessageAvatarProps,\n  type MessageBodyProps,\n  type MessageContentProps,\n  type MessageContextValue,\n  type MessageEditableBodyProps,\n  MessageInput,\n  type MessageInputProps,\n  MessageList,\n  type MessageListProps,\n  type MessageProps,\n  type MessageReactionsProps,\n  SystemMessage,\n  type SystemMessageProps,\n  TypingIndicator,\n  type TypingIndicatorProps,\n  UnreadSeparator,\n  type UnreadSeparatorProps,\n  useMessageContext,\n} from './chat'\n\n// Other\nexport { Link, type LinkProps } from './link'\n\n// OAuth / Social sign-in\nexport {\n  getOAuthLabel,\n  getOAuthName,\n  OAuth,\n  type OAuthAppearance,\n  OAuthButton,\n  type OAuthButtonProps,\n  OAuthConnectionRow,\n  type OAuthConnectionRowProps,\n  OAuthDivider,\n  type OAuthDividerProps,\n  OAuthGlyph,\n  type OAuthGlyphProps,\n  OAuthGroup,\n  type OAuthGroupProps,\n  type OAuthIntent,\n  type OAuthProvider,\n  type OAuthVariant,\n} from './oauth-button'\n\n// Utilities\nexport { formatRelativeTime } from './lib/date-utils'\nexport type { SpringPreset, TweenPreset } from './lib/motion'\nexport { springs, stagger, tweens, withReducedMotion } from './lib/motion'\nexport { cn } from './lib/utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAI,IAAU;AAEd,SAAgB,KAA0B;AACpC,WACA,SAAO,SAAW,MAGtB;MAAI;AAEyB;UACrB;AAKR,EAHA,IAAU,IAGV,4BAA4B;AAE1B,GADc,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,mBAAmB,CAAC,MAAM,IAElG,QAAQ,KACN,sMAGD;IAEH;;;;;ACdJ,IAAmB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ui/lib/check-tokens.ts","../../src/ui/index.ts"],"sourcesContent":["/**\n * Dev-mode check for missing token CSS.\n *\n * If the consumer forgets `import '@devalok/shilp-sutra/tokens'`, all CSS\n * custom properties resolve to empty strings and components render with\n * transparent/broken backgrounds. This check detects that condition and\n * warns in the console.\n *\n * Only runs once, only in development, only in the browser.\n */\nlet checked = false\n\nexport function checkTokensLoaded(): void {\n  if (checked) return\n  if (typeof window === 'undefined') return\n\n  // Skip in production — bundlers (Vite, Next.js, webpack) define import.meta.env or process.env\n  try {\n    // @ts-expect-error -- import.meta.env is Vite-specific, not in base TS lib\n    if (import.meta.env?.PROD) return\n  } catch { /* not in Vite */ }\n\n  checked = true\n\n  // Wait for stylesheets to load\n  requestAnimationFrame(() => {\n    const value = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-9').trim()\n    if (!value) {\n      console.warn(\n        '[shilp-sutra] Design system tokens CSS not loaded. ' +\n        'Add `import \\'@devalok/shilp-sutra/tokens\\'` to your root layout. ' +\n        'Without it, components will render with missing colors, spacing, and typography.'\n      )\n    }\n  })\n}\n","/**\n * @module @devalok/shilp-sutra/ui\n *\n * Core UI primitives: buttons, inputs, dialogs, cards, tables, badges, navigation, and more.\n * Most components require client-side React (\"use client\").\n *\n * **Server-safe components** (import individually for Server Components):\n * `Text`, `Skeleton`, `Stack`, `Container`, `Table`, `Code`, `VisuallyHidden`\n *\n * @example\n * // Server Component — import individually:\n * import { Text } from '@devalok/shilp-sutra/ui/text'\n * import { Stack } from '@devalok/shilp-sutra/ui/stack'\n *\n * // Client Component — barrel import:\n * import { Button, Dialog } from '@devalok/shilp-sutra/ui'\n */\n\n// Dev-mode token presence check — runs once on first import\nimport { checkTokensLoaded } from './lib/check-tokens'\ncheckTokensLoaded()\n\n// Core\nexport { Button, type ButtonProps,buttonVariants } from './button'\nexport { ButtonGroup, type ButtonGroupProps,useButtonGroup } from './button-group'\nexport { ColorInput, type ColorInputProps } from './color-input'\nexport { Icon, type IconProps } from './icon'\nexport { IconButton, type IconButtonProps } from './icon-button'\nexport { IconContext, type IconContextValue, IconProvider, type IconSize, type IconStroke,useIconContext } from './icon-context'\nexport { IconGroup, type IconGroupProps } from './icon-group'\nexport { Input, type InputProps, type InputState, inputWrapperVariants } from './input'\nexport { Label, type LabelProps } from './label'\nexport { type FieldState } from './lib/field-state'\nexport { Separator, type SeparatorProps } from './separator'\nexport { SplitButton, type SplitButtonProps } from './split-button'\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden'\n\n// Autocomplete\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps } from './autocomplete'\n\n// Combobox\nexport { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize,comboboxTriggerVariants } from './combobox'\n\n// FileUpload\nexport { FileUpload, type FileUploadProps } from './file-upload'\n\n// Form Controls\nexport { Checkbox, type CheckboxProps } from './checkbox'\nexport { FormField, type FormFieldProps, type FormHelperState, FormHelperText, type FormHelperTextProps,useFormField } from './form'\n// InputOTP removed from barrel in 0.40.0 — hard peer `input-otp` was breaking\n// fresh-consumer builds. Import per-component instead:\n//   import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@devalok/shilp-sutra/ui/input-otp'\nexport { NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputState,numberInputWrapperVariants } from './number-input'\nexport { RadioGroup, RadioGroupItem, type RadioGroupItemProps,type RadioGroupProps } from './radio'\nexport { SearchInput, type SearchInputProps } from './search-input'\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  type SelectTriggerProps,\n  selectTriggerVariants,\n  SelectValue,\n} from './select'\nexport { Slider, type SliderColor,type SliderProps, type SliderSize, sliderThumbVariants, sliderTrackVariants } from './slider'\nexport { Switch, type SwitchProps } from './switch'\nexport { Textarea, type TextareaProps,textareaVariants } from './textarea'\nexport { Toggle, type ToggleProps,toggleVariants } from './toggle'\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps,type ToggleGroupProps } from './toggle-group'\nexport { TruncatedText, type TruncatedTextProps } from './truncated-text'\n\n// Feedback & Overlays\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  type AlertDialogActionProps,\n  AlertDialogCancel,\n  type AlertDialogCancelProps,\n  AlertDialogContent,\n  type AlertDialogContentProps,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from './alert-dialog'\nexport { Collapsible, CollapsibleContent, type CollapsibleProps,CollapsibleTrigger } from './collapsible'\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  type DialogContentProps,\n  DialogContentRaw,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  type DialogTitleProps,\n  DialogTrigger,\n} from './dialog'\nexport { HoverCard, HoverCardContent, type HoverCardContentProps,HoverCardTrigger } from './hover-card'\nexport { Popover, PopoverAnchor, PopoverContent, type PopoverContentProps,PopoverTrigger } from './popover'\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  type SheetContentProps,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet'\n// toast + Toaster removed from barrel in 0.40.0 — hard peer `sonner` was\n// breaking fresh-consumer builds when consumers imported other UI symbols\n// from the barrel without sonner installed. Import per-component instead:\n//   import { toast, formatFileSize, type ToastOptions } from '@devalok/shilp-sutra/ui/toast'\n//   import { Toaster } from '@devalok/shilp-sutra/ui/toaster'\nexport { Tooltip, TooltipContent, type TooltipContentProps,TooltipProvider, TooltipTrigger } from './tooltip'\n// ---------------------------------------------------------------------------\n// Notifications — pick the right one:\n//   Alert   — inline, static feedback within a form or page section (no user action needed to show)\n//   Banner  — persistent, page-level notice shown above main content (survives navigation)\n//   Toast   — imperative, transient, action-triggered (fires on user action, auto-dismisses)\n//             Requires <Toaster /> mounted once at layout root. Use toast.success() etc. from anywhere.\n// ---------------------------------------------------------------------------\nexport { Alert, type AlertProps,alertVariants } from './alert'\nexport { Banner, type BannerProps,bannerVariants } from './banner'\nexport { Spinner, type SpinnerProps } from './spinner'\n\n// Data Display\nexport { AspectRatio } from './aspect-ratio'\nexport { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarProps, type AvatarRing,type AvatarStatus, avatarVariants } from './avatar'\nexport { Badge, type BadgeProps,badgeVariants } from './badge'\nexport { BadgeGroup, type BadgeGroupProps } from './badge-group'\nexport { BadgeIndicator, type BadgeIndicatorProps } from './badge-indicator'\nexport { Card, CardAction, type CardActionPlacement, type CardActionProps, CardBleed, type CardBleedProps, type CardBleedSide, CardContent, CardDescription, CardFooter, CardHeader, type CardProps,CardSection, CardTitle, cardVariants } from './card'\nexport { Code, type CodeProps } from './code'\nexport { ColorSwatch, type ColorSwatchProps } from './color-swatch'\nexport { Dot, type DotColor, type DotProps, type DotSize, type DotVariant, dotVariants } from './dot'\nexport {\n  Progress,\n  type ProgressColor,\n  ProgressIndicator,\n  type ProgressIndicatorProps,\n  progressIndicatorVariants,\n  ProgressLabel,\n  type ProgressLabelProps,\n  type ProgressProps,\n  ProgressRoot,\n  type ProgressRootProps,\n  ProgressSegment,\n  type ProgressSegmentProps,\n  type ProgressSize,\n  ProgressTrack,\n  type ProgressTrackProps,\n  progressTrackVariants,\n  ProgressValue,\n  type ProgressValueProps,\n} from './progress'\nexport { MultiProgressRing, type MultiProgressRingProps,ProgressRing, type ProgressRingProps } from './progress-ring'\nexport {\n  Skeleton,\n  SkeletonAvatar,\n  type SkeletonAvatarProps,\n  SkeletonButton,\n  type SkeletonButtonProps,\n  SkeletonChart,\n  type SkeletonChartProps,\n  SkeletonGroup,\n  type SkeletonGroupProps,\n  SkeletonImage,\n  type SkeletonImageProps,\n  SkeletonInput,\n  type SkeletonInputProps,\n  type SkeletonProps,\n  SkeletonText,\n  type SkeletonTextProps,\n  skeletonVariants,\n} from './skeleton'\nexport { StatCard, type StatCardProps } from './stat-card'\nexport {\n  type FlashPreset,\n  type FlashSpec,\n  type FlashSpeed,\n  type FlashTone,\n  StatFlash,\n  type StatFlashProps,\n} from './stat-flash'\nexport { Surface, type SurfaceProps, surfaceVariants } from './surface'\nexport { Table, TableBody, TableCaption, TableCell, type TableCellBaseProps,type TableCellProps,type TableDensity, TableFooter, TableHead, TableHeader, type TableProps, TableRow, TableRowActions, type TableRowActionsProps,type TableRowProps } from './table'\nexport { TableRowLink, type TableRowLinkProps } from './table-row-link'\n\n// Navigation\nexport { Accordion, AccordionContent, type AccordionContentProps,AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps } from './accordion'\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  type BreadcrumbLinkProps,\n  BreadcrumbList,\n  BreadcrumbPage,\n  type BreadcrumbProps,\n  BreadcrumbSeparator,\n} from './breadcrumb'\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  type ContextMenuContentProps,\n  ContextMenuGroup,\n  ContextMenuItem,\n  type ContextMenuItemProps,\n  ContextMenuLabel,\n  ContextMenuPortal,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from './context-menu'\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  type DropdownMenuItemProps,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu'\nexport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarGroup,\n  MenubarItem,\n  type MenubarItemProps,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarPortal,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from './menubar'\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  type NavigationMenuContentProps,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  type NavigationMenuProps,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n} from './navigation-menu'\nexport {\n  generatePagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  type PaginationLinkProps,\n  PaginationNav,\n  type PaginationNavProps,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationRoot,\n} from './pagination'\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  type SidebarProps,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n} from './sidebar'\nexport { Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation,type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps } from './tabs'\n\n// Workflow\nexport { Step, Stepper, type StepperProps, type StepProps } from './stepper'\n\n\n// Typography\nexport { Text, type TextProps, type TextVariant,textVariants } from './text'\n\n// Layout\nexport { Container, type ContainerProps } from './container'\nexport { type SpacingToken,Stack, type StackProps } from './stack'\n\n// Tree View\nexport { TreeItem, type TreeItemProps, type TreeNode,TreeView, type TreeViewProps, useTree } from './tree-view'\n\n// Segmented Control\nexport {\n  SegmentedControl,\n  type SegmentedControlOption,\n  type SegmentedControlProps,\n  type SegmentedControlSize,\n  type SegmentedControlVariant,\n} from './segmented-control'\n\n// Brand Texture\nexport { DevalokGrain, type DevalokGrainProps, type GrainIntensity } from './devalok-grain'\n\n// Chat primitives\nexport {\n  DateSeparator,\n  type DateSeparatorProps,\n  Message,\n  type MessageActionProps,\n  type MessageActionsProps,\n  type MessageAuthorProps,\n  type MessageAvatarProps,\n  type MessageBodyProps,\n  type MessageContentProps,\n  type MessageContextValue,\n  type MessageEditableBodyProps,\n  MessageInput,\n  type MessageInputProps,\n  MessageList,\n  type MessageListProps,\n  type MessageProps,\n  type MessageReactionsProps,\n  SystemMessage,\n  type SystemMessageProps,\n  TypingIndicator,\n  type TypingIndicatorProps,\n  UnreadSeparator,\n  type UnreadSeparatorProps,\n  useMessageContext,\n} from './chat'\n\n// Other\nexport { Link, type LinkProps } from './link'\n\n// OAuth / Social sign-in\nexport {\n  getOAuthLabel,\n  getOAuthName,\n  OAuth,\n  type OAuthAppearance,\n  OAuthButton,\n  type OAuthButtonProps,\n  OAuthConnectionRow,\n  type OAuthConnectionRowProps,\n  OAuthDivider,\n  type OAuthDividerProps,\n  OAuthGlyph,\n  type OAuthGlyphProps,\n  OAuthGroup,\n  type OAuthGroupProps,\n  type OAuthIntent,\n  type OAuthProvider,\n  type OAuthVariant,\n} from './oauth-button'\n\n// Utilities\nexport { formatRelativeTime } from './lib/date-utils'\nexport type { SpringPreset, TweenPreset } from './lib/motion'\nexport { springs, stagger, tweens, withReducedMotion } from './lib/motion'\nexport { cn } from './lib/utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAI,IAAU;AAEd,SAAgB,KAA0B;CACpC,UACA,SAAO,SAAW,MAGtB;MAAI;GAEyB;EAC7B,QAAQ,CAAoB;EAK5B,AAHA,IAAU,IAGV,4BAA4B;GAE1B,AADc,iBAAiB,SAAS,eAAe,CAAC,CAAC,iBAAiB,kBAAkB,CAAC,CAAC,KACzF,KACH,QAAQ,KACN,qMAGF;EAEJ,CAAC;CAd2B;AAe9B;;;ACfA,GAAkB"}

package/dist/ui/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-ds-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-ds-md',\n  lg: 'h-ds-md w-ds-md text-ds-lg',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,KAAK,EAE7D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAIK,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,GAAc,EAC1B,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;AAEpF,QACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,EACD;GACD,WAAW,EAAG,+BAA+B,EAAU;GACvD,GAAI;GACJ,CAAA;EAC2B,CAAA;EAEjC;AACF,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,EAAU;CAAE,GAAI;CAAS,CAAA,CAC3E;AACF,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,EAAgB,EACnD,IAAO,EAAM,WAAW,EAAoB,EAC5C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;AAE/D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,EACD;EACD,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA;GAC/E,CAAA,CAEJ;;EAER;AACF,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;EAAO,CAAA;CAC/B,CAAA,CACN;AACF,EAAkB,cAAc"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n  sm: 'h-ds-sm w-ds-sm text-ds-sm',\n  md: 'h-ds-sm-plus w-ds-sm-plus text-ds-md',\n  lg: 'h-ds-md w-ds-md text-ds-lg',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput> & {\n    state?: 'default' | 'error'\n    /** Slot size. @default 'md' */\n    size?: InputOTPSize\n  }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n  const formField = useFormField()\n  const isError = state === 'error' || formField?.state === 'error'\n  const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n  return (\n    <InputOTPSizeContext.Provider value={size}>\n      <OTPInput\n        ref={ref}\n        aria-invalid={isError || undefined}\n        aria-describedby={formField?.helperTextId}\n        aria-required={formField?.required || undefined}\n        containerClassName={cn(\n          'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n          isError && 'is-error',\n          containerClassName,\n        )}\n        className={cn('disabled:cursor-not-allowed', className)}\n        {...props}\n      />\n    </InputOTPSizeContext.Provider>\n  )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const size = React.useContext(InputOTPSizeContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n        slotSizeClasses[size],\n        'group-[.is-error]/otp:border-error-7',\n        isActive && 'z-raised ring-2 ring-accent-9',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Icon icon={IconMinus} size=\"sm\" />\n  </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n  state?: 'default' | 'error'\n  /** Slot size. @default 'md' */\n  size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,IAAI,GAE5D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAIM,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,EAAa,GACzB,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;CAEpF,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,CACF;GACA,WAAW,EAAG,+BAA+B,CAAS;GACtD,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC;AACD,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,CAAe,GAClD,IAAO,EAAM,WAAW,CAAmB,GAC3C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;CAE/D,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,CACF;EACA,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;EAC/E,CAAA,CAEJ;;AAET,CAAC;AACD,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;CAAM,CAAA;AAC/B,CAAA,CACN;AACD,EAAkB,cAAc"}

package/dist/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm',\n        sm: 'h-ds-sm text-ds-sm',\n        md: 'h-ds-md text-ds-md',\n        lg: 'h-ds-lg text-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: FieldState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-ds-sm',\n      sm: 'text-ds-sm',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAqDK,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAEzB,IAAQ,EAAkB,GAAW,EAAS,MAAM,EACpD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AASD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,SAAM,CAAC,EAC9B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,EACD;YAPH;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,sBAC3B;cAEA;IACI,CAAA;GAGR,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,sBAC3B;eAEA;KACI,CAAA;IACM,CAAA;GAGjB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BArDqC;KAC3C,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAiDoB,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,EACD;IACD,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;IACJ,CAAA;GAED,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,sBACzB;cAEA;IACI,CAAA;GAGR,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,sBACzB;eAEA;KACI,CAAA;IACM,CAAA;GAEb;;EAGX;AACD,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n  [\n    'relative flex items-center w-full font-sans',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'hover:bg-surface-raised-active',\n    'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n    'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n    'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm',\n        sm: 'h-ds-sm text-ds-sm',\n        md: 'h-ds-md text-ds-md',\n        lg: 'h-ds-lg text-ds-md',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n  xs: 'w-[26px]',\n  sm: 'w-[30px]',\n  md: 'w-[38px]',\n  lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputWrapperVariants> {\n  state?: FieldState\n  startSection?: React.ReactNode\n  endSection?: React.ReactNode\n  startSectionClickable?: boolean\n  endSectionClickable?: boolean\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  startSectionType?: 'icon' | 'label'\n  /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n   *  `'label'` = tinted background with border separator (default for strings). */\n  endSectionType?: 'icon' | 'label'\n  /** Classes for the wrapper div (border, bg, ring). */\n  wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      state: stateProp,\n      size: sizeProp = 'md',\n      startSection,\n      endSection,\n      startSectionClickable,\n      endSectionClickable,\n      startSectionType: startSectionTypeProp,\n      endSectionType: endSectionTypeProp,\n      wrapperClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const inputId = props.id ?? fieldCtx.inputId\n\n    const hasStart = !!startSection\n    const hasEnd = !!endSection\n\n    // Infer section type: string → label, ReactElement → icon\n    const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n    const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n    const labelPaddingMap: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-02',\n      md: 'px-ds-03',\n      lg: 'px-ds-03',\n    }\n\n    const labelTextMap: Record<string, string> = {\n      xs: 'text-ds-sm',\n      sm: 'text-ds-sm',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n    }\n\n    const inputPadding: Record<string, string> = {\n      xs: 'px-ds-02',\n      sm: 'px-ds-03',\n      md: 'px-ds-03',\n      lg: 'px-ds-04',\n    }\n\n    return (\n      <div\n        className={cn(\n          inputWrapperVariants({ size }),\n          state === 'error' && 'border-error-7 focus-within:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-within:ring-success-7',\n          wrapperClassName,\n        )}\n      >\n        {hasStart && startType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-r border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-l-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !startSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {startSection}\n          </span>\n        )}\n\n        {hasStart && startType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !startSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {startSection}\n            </span>\n          </IconProvider>\n        )}\n\n        <input\n          type={type}\n          className={cn(\n            'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n            'placeholder:text-surface-fg-subtle',\n            'disabled:cursor-not-allowed',\n            'read-only:cursor-default',\n            inputPadding[size],\n            // Remove left padding when start icon section is present (icon provides visual space)\n            hasStart && startType === 'icon' && 'pl-0',\n            // Remove right padding when end icon section is present\n            hasEnd && endType === 'icon' && 'pr-0',\n            className,\n          )}\n          aria-invalid={state === 'error' || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          ref={ref}\n          {...props}\n          id={inputId}\n        />\n\n        {hasEnd && endType === 'label' && (\n          <span\n            className={cn(\n              'flex items-center shrink-0 select-none self-stretch',\n              'border-l border-surface-border',\n              'bg-surface-raised text-surface-fg-muted',\n              'rounded-r-[inherit]',\n              labelPaddingMap[size],\n              labelTextMap[size],\n              !endSectionClickable && 'pointer-events-none',\n            )}\n          >\n            {endSection}\n          </span>\n        )}\n\n        {hasEnd && endType === 'icon' && (\n          <IconProvider size={iconSizeMap[size]}>\n            <span\n              className={cn(\n                'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n                sectionWidthMap[size],\n                !endSectionClickable && 'pointer-events-none',\n              )}\n            >\n              {endSection}\n            </span>\n          </IconProvider>\n        )}\n      </div>\n    )\n  },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAqDM,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,GAEM,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN;CASA,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,QAAK,CAAC,GAC7B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,CACF;YAPF;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,qBAC5B;cAEC;GACG,CAAA;GAGP,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,qBAC5B;eAEC;IACG,CAAA;GACM,CAAA;GAGhB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BACA;KArDN,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;IAkDE,EAAa,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,CACF;IACA,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;GACL,CAAA;GAEA,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,qBAC1B;cAEC;GACG,CAAA;GAGP,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,qBAC1B;eAEC;IACG,CAAA;GACM,CAAA;EAEb;;AAET,CACF;AACA,EAAM,cAAc"}

package/dist/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../src/ui/label.tsx"],"sourcesContent":["'use client'\n\nimport * as LabelPrimitive from '@primitives/react-label'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean\n}\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, required, children, htmlFor, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  // Explicit htmlFor wins; otherwise fall back to FormField's inputId.\n  const resolvedHtmlFor = htmlFor ?? fieldCtx.inputId\n  const resolvedRequired = required ?? fieldCtx.required\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={resolvedHtmlFor}\n      className={cn(\n        'font-sans text-ds-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {resolvedRequired && (\n        <span className=\"text-error-11 ml-ds-01\" aria-hidden=\"true\">*</span>\n      )}\n    </LabelPrimitive.Root>\n  )\n})\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":";;;;;;;AAaA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,aAAU,aAAU,YAAS,GAAG,KAAS,MAAQ;CAC/D,IAAM,IAAW,GAAc,EAEzB,IAAkB,KAAW,EAAS,SACtC,IAAmB,KAAY,EAAS;AAC9C,QACE,kBAAC,GAAD;EACO;EACL,SAAS;EACT,WAAW,EACT,oKACA,EACD;EACD,GAAI;YAPN,CASG,GACA,KACC,kBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;aAAO;GAAQ,CAAA,CAElD;;EAExB;AACF,EAAM,cAAA,EAAkC"}
+{"version":3,"file":"label.js","names":[],"sources":["../../src/ui/label.tsx"],"sourcesContent":["'use client'\n\nimport * as LabelPrimitive from '@primitives/react-label'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean\n}\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, required, children, htmlFor, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  // Explicit htmlFor wins; otherwise fall back to FormField's inputId.\n  const resolvedHtmlFor = htmlFor ?? fieldCtx.inputId\n  const resolvedRequired = required ?? fieldCtx.required\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={resolvedHtmlFor}\n      className={cn(\n        'font-sans text-ds-md font-medium text-surface-fg leading-none transition-opacity duration-fast-01 ease-productive-standard peer-disabled:opacity-action-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {resolvedRequired && (\n        <span className=\"text-error-11 ml-ds-01\" aria-hidden=\"true\">*</span>\n      )}\n    </LabelPrimitive.Root>\n  )\n})\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"],"mappings":";;;;;;;AAaA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,aAAU,aAAU,YAAS,GAAG,KAAS,MAAQ;CAC/D,IAAM,IAAW,EAAa,GAExB,IAAkB,KAAW,EAAS,SACtC,IAAmB,KAAY,EAAS;CAC9C,OACE,kBAAC,GAAD;EACO;EACL,SAAS;EACT,WAAW,EACT,oKACA,CACF;EACA,GAAI;YAPN,CASG,GACA,KACC,kBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;aAAO;EAAO,CAAA,CAElD;;AAEzB,CAAC;AACD,EAAM,cAAA,EAAkC"}

package/dist/ui/lib/bottom-sheet.d.ts

@@ -12,5 +12,5 @@ export interface BottomSheetProps {
     /** Title for accessibility (sets aria-label on the dialog). */
     title?: string;
 }
-export declare function BottomSheet({ open, onOpenChange, children, className, dragHandle, swipeable, title, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function BottomSheet({ open, onOpenChange, children, className, dragHandle, swipeable, title, }: BottomSheetProps): React.JSX.Element;
 //# sourceMappingURL=bottom-sheet.d.ts.map

package/dist/ui/lib/bottom-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/bottom-sheet.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,SAAgB,EAChB,KAAK,GACN,EAAE,gBAAgB,2CAgElB"}
+{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/bottom-sheet.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,SAAgB,EAChB,KAAK,GACN,EAAE,gBAAgB,qBAgElB"}