@craftzbay/ui 0.10.0 → 0.11.0

package/dist-lib/components/ui/DropdownMenu.js

@@ -14,11 +14,16 @@ const R = o.Root, k = o.Trigger, T = o.Group, g = o.Portal, j = o.Sub, G = o.Rad
     o.SubTrigger,
     {
       ref: u,
-      className: d(p, "data-[state=open]:bg-background-muted", t && "pl-8", e),
+      className: d(
+        p,
+        "data-[state=open]:bg-background-muted",
+        t && "pl-8",
+        e
+      ),
       ...a,
       children: [
         n,
-        /* @__PURE__ */ r(f, { className: "ml-auto size-4 text-foreground-subtle", "aria-hidden": !0 })
+        /* @__PURE__ */ r(f, { className: "text-foreground-subtle ml-auto size-4", "aria-hidden": !0 })
       ]
     }
   );
@@ -30,7 +35,7 @@ const w = i(function({ className: e, ...t }, n) {
     {
       ref: n,
       className: d(
-        "z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        "border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -49,7 +54,7 @@ const h = i(function({ className: e, sideOffset: t = 4, align: n = "end", ...a }
       sideOffset: t,
       align: n,
       className: d(
-        "z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        "border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border p-1 shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -86,7 +91,7 @@ const M = i(function({ className: e, children: t, checked: n, ...a }, u) {
       className: d(p, "pl-8", e),
       ...a,
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ r(o.ItemIndicator, { children: /* @__PURE__ */ r(l, { className: "size-4 text-accent", "aria-hidden": !0 }) }) }),
+        /* @__PURE__ */ r("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ r(o.ItemIndicator, { children: /* @__PURE__ */ r(l, { className: "text-accent size-4", "aria-hidden": !0 }) }) }),
         t
       ]
     }
@@ -101,7 +106,7 @@ const x = i(function({ className: e, children: t, ...n }, a) {
       className: d(p, "pl-8", e),
       ...n,
       children: [
-        /* @__PURE__ */ r("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ r(o.ItemIndicator, { children: /* @__PURE__ */ r(m, { className: "size-2 fill-accent text-accent", "aria-hidden": !0 }) }) }),
+        /* @__PURE__ */ r("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ r(o.ItemIndicator, { children: /* @__PURE__ */ r(m, { className: "fill-accent text-accent size-2", "aria-hidden": !0 }) }) }),
         t
       ]
     }
@@ -114,7 +119,7 @@ const N = i(function({ className: e, inset: t, ...n }, a) {
     {
       ref: a,
       className: d(
-        "px-2 py-1.5 text-xs font-medium text-foreground-subtle",
+        "text-foreground-subtle px-2 py-1.5 text-xs font-medium",
         t && "pl-8",
         e
       ),
@@ -128,7 +133,7 @@ const C = i(function({ className: e, ...t }, n) {
     o.Separator,
     {
       ref: n,
-      className: d("-mx-1 my-1 h-px bg-border", e),
+      className: d("bg-border -mx-1 my-1 h-px", e),
       ...t
     }
   );
@@ -138,7 +143,7 @@ function I({ className: s, ...e }) {
   return /* @__PURE__ */ r(
     "span",
     {
-      className: d("ml-auto text-xs tracking-widest text-foreground-subtle font-mono", s),
+      className: d("text-foreground-subtle ml-auto font-mono text-xs tracking-widest", s),
       ...e
     }
   );

package/dist-lib/components/ui/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../../src/components/ui/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Check, ChevronRight, Circle } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Full dropdown menu surface with submenu support, separators, checkbox /\n *  radio items, and keyboard shortcut labels (Kbd).\n * --------------------------------------------------------------------------- */\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst itemClasses = cn(\n  'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n  'data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  'transition-colors duration-[var(--duration-fast)]',\n);\n\nexport const DropdownMenuSubTrigger = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(itemClasses, 'data-[state=open]:bg-background-muted', inset && 'pl-8', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4 text-foreground-subtle\" aria-hidden />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\n\nexport const DropdownMenuSubContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(function DropdownMenuSubContent({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n        'z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\n\nexport const DropdownMenuContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(function DropdownMenuContent({ className, sideOffset = 4, align = 'end', ...props }, ref) {\n  return (\n    <DropdownMenuPortal>\n      <DropdownMenuPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          'z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPortal>\n  );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nexport const DropdownMenuItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    destructive?: boolean;\n  }\n>(function DropdownMenuItem({ className, inset, destructive, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemClasses,\n        inset && 'pl-8',\n        destructive &&\n          'text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport const DropdownMenuCheckboxItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-accent\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\n\nexport const DropdownMenuRadioItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Circle className=\"size-2 fill-accent text-accent\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';\n\nexport const DropdownMenuLabel = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean;\n  }\n>(function DropdownMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n        'px-2 py-1.5 text-xs font-medium text-foreground-subtle',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nexport const DropdownMenuSeparator = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(function DropdownMenuSeparator({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\n/**\n * Trailing right-aligned shortcut label inside a menu item. Pair with `<Kbd>`\n * inside the Kbd component file if you want stylised keys.\n */\nexport function DropdownMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-foreground-subtle font-mono', className)}\n      {...props}\n    />\n  );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\n/**\n * @example\n *   <DropdownMenu>\n *     <DropdownMenuTrigger asChild><IconButton aria-label=\"More\" icon={<MoreHorizontal />} /></DropdownMenuTrigger>\n *     <DropdownMenuContent>\n *       <DropdownMenuItem>Open<DropdownMenuShortcut>⌘O</DropdownMenuShortcut></DropdownMenuItem>\n *       <DropdownMenuItem>Rename</DropdownMenuItem>\n *       <DropdownMenuSeparator />\n *       <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n *     </DropdownMenuContent>\n *   </DropdownMenu>\n *\n * @do Group destructive items at the bottom with a separator.\n * @dont Mix link navigation and action items in the same menu — split into\n *       two menus or two groups with labels.\n */\n"],"names":["DropdownMenu","DropdownMenuPrimitive","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuPortal","DropdownMenuSub","DropdownMenuRadioGroup","itemClasses","cn","DropdownMenuSubTrigger","forwardRef","className","inset","children","props","ref","jsxs","jsx","ChevronRight","DropdownMenuSubContent","DropdownMenuContent","sideOffset","align","DropdownMenuItem","destructive","DropdownMenuCheckboxItem","checked","Check","DropdownMenuRadioItem","Circle","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuShortcut"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../../src/components/ui/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Check, ChevronRight, Circle } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Full dropdown menu surface with submenu support, separators, checkbox /\n *  radio items, and keyboard shortcut labels (Kbd).\n * --------------------------------------------------------------------------- */\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst itemClasses = cn(\n  'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n  'data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  'transition-colors duration-[var(--duration-fast)]',\n);\n\nexport const DropdownMenuSubTrigger = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean;\n  }\n>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        itemClasses,\n        'data-[state=open]:bg-background-muted',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"text-foreground-subtle ml-auto size-4\" aria-hidden />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\n\nexport const DropdownMenuSubContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(function DropdownMenuSubContent({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      className={cn(\n        'border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\n\nexport const DropdownMenuContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n  // `align` defaults to 'end' (Radix default is 'center'): triggers are\n  // usually right-aligned icon buttons in toolbars/table rows. Pass\n  // `align=\"start\"` for left-anchored triggers.\n>(function DropdownMenuContent({ className, sideOffset = 4, align = 'end', ...props }, ref) {\n  return (\n    <DropdownMenuPortal>\n      <DropdownMenuPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          'border-border bg-popover text-popover-foreground z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border p-1 shadow-md',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPortal>\n  );\n});\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\nexport const DropdownMenuItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean;\n    destructive?: boolean;\n  }\n>(function DropdownMenuItem({ className, inset, destructive, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemClasses,\n        inset && 'pl-8',\n        destructive &&\n          'text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport const DropdownMenuCheckboxItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Check className=\"text-accent size-4\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\n\nexport const DropdownMenuRadioItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"absolute left-2 flex size-4 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <Circle className=\"fill-accent text-accent size-2\" aria-hidden />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';\n\nexport const DropdownMenuLabel = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean;\n  }\n>(function DropdownMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n        'text-foreground-subtle px-2 py-1.5 text-xs font-medium',\n        inset && 'pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n\nexport const DropdownMenuSeparator = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(function DropdownMenuSeparator({ className, ...props }, ref) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      ref={ref}\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n});\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\n/**\n * Trailing right-aligned shortcut label inside a menu item. Pair with `<Kbd>`\n * inside the Kbd component file if you want stylised keys.\n */\nexport function DropdownMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      className={cn('text-foreground-subtle ml-auto font-mono text-xs tracking-widest', className)}\n      {...props}\n    />\n  );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\n/**\n * @example\n *   <DropdownMenu>\n *     <DropdownMenuTrigger asChild><IconButton aria-label=\"More\" icon={<MoreHorizontal />} /></DropdownMenuTrigger>\n *     <DropdownMenuContent>\n *       <DropdownMenuItem>Open<DropdownMenuShortcut>⌘O</DropdownMenuShortcut></DropdownMenuItem>\n *       <DropdownMenuItem>Rename</DropdownMenuItem>\n *       <DropdownMenuSeparator />\n *       <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n *     </DropdownMenuContent>\n *   </DropdownMenu>\n *\n * @do Group destructive items at the bottom with a separator.\n * @dont Mix link navigation and action items in the same menu — split into\n *       two menus or two groups with labels.\n */\n"],"names":["DropdownMenu","DropdownMenuPrimitive","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuPortal","DropdownMenuSub","DropdownMenuRadioGroup","itemClasses","cn","DropdownMenuSubTrigger","forwardRef","className","inset","children","props","ref","jsxs","jsx","ChevronRight","DropdownMenuSubContent","DropdownMenuContent","sideOffset","align","DropdownMenuItem","destructive","DropdownMenuCheckboxItem","checked","Check","DropdownMenuRadioItem","Circle","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuShortcut"],"mappings":"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"}

package/dist-lib/components/ui/EmptyState.d.ts

@@ -19,6 +19,8 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     action?: ReactNode;
     /** Secondary helper link — "Learn more", "Import existing", etc. */
     secondaryAction?: ReactNode;
+    /** Heading level of the title. Default 3 — match the surrounding outline. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /**
  * Shown when a list / dataset / surface has no content yet. Tone is helpful,

package/dist-lib/components/ui/EmptyState.js

@@ -1,32 +1,46 @@
 "use client";
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { cn as f } from "../../lib/utils.js";
-import { InboxEmpty as u } from "../../illustrations/index.js";
-const x = c(function({ icon: t, illustration: r, title: l, description: d, action: m, secondaryAction: s, className: n, ...o }, i) {
+import { forwardRef as f, createElement as u } from "react";
+import { cn as x } from "../../lib/utils.js";
+import { InboxEmpty as g } from "../../illustrations/index.js";
+const p = f(function({
+  icon: t,
+  illustration: r,
+  title: l,
+  description: m,
+  action: d,
+  secondaryAction: s,
+  headingLevel: n = 3,
+  className: o,
+  ...i
+}, c) {
   return /* @__PURE__ */ a(
     "div",
     {
-      ref: i,
-      className: f(
-        "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-background-subtle p-10 text-center",
-        n
+      ref: c,
+      className: x(
+        "border-border bg-background-subtle flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center",
+        o
       ),
-      ...o,
+      ...i,
       children: [
-        r || (t ? /* @__PURE__ */ e("div", { className: "inline-flex size-12 items-center justify-center rounded-full bg-background-muted text-foreground-muted [&_svg]:size-6", children: t }) : /* @__PURE__ */ e(u, { className: "size-24" })),
-        /* @__PURE__ */ e("h3", { className: "text-base font-semibold text-foreground leading-tight", children: l }),
-        d && /* @__PURE__ */ e("p", { className: "max-w-md text-sm text-foreground-muted leading-relaxed", children: d }),
-        (m || s) && /* @__PURE__ */ a("div", { className: "mt-2 flex items-center gap-2", children: [
-          m,
+        r || (t ? /* @__PURE__ */ e("div", { className: "bg-background-muted text-foreground-muted inline-flex size-12 items-center justify-center rounded-full [&_svg]:size-6", children: t }) : /* @__PURE__ */ e(g, { className: "size-24" })),
+        u(
+          `h${n}`,
+          { className: "text-base font-semibold text-foreground leading-tight" },
+          l
+        ),
+        m && /* @__PURE__ */ e("p", { className: "text-foreground-muted max-w-md text-sm leading-relaxed", children: m }),
+        (d || s) && /* @__PURE__ */ a("div", { className: "mt-2 flex items-center gap-2", children: [
+          d,
           s
         ] })
       ]
     }
   );
 });
-x.displayName = "EmptyState";
+p.displayName = "EmptyState";
 export {
-  x as EmptyState
+  p as EmptyState
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist-lib/components/ui/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/ui/EmptyState.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { InboxEmpty } from '@/illustrations';\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Small Lucide-sized icon rendered inside a 48px circular container.\n   * Use for compact empty states (table cells, sidebar panes, cards).\n   */\n  icon?: ReactNode;\n  /**\n   * Full-size illustration rendered without the icon container. Takes\n   * precedence over `icon`. If neither is set, the default `InboxEmpty`\n   * line illustration is used.\n   */\n  illustration?: ReactNode;\n  /** Heading. One short sentence. */\n  title: ReactNode;\n  /** Description. One or two sentences max. */\n  description?: ReactNode;\n  /** Primary action — usually a `<Button>` that creates the missing item. */\n  action?: ReactNode;\n  /** Secondary helper link — \"Learn more\", \"Import existing\", etc. */\n  secondaryAction?: ReactNode;\n}\n\n/**\n * Shown when a list / dataset / surface has no content yet. Tone is helpful,\n * never apologetic.\n *\n * @example Default — uses the built-in InboxEmpty illustration\n *   <EmptyState\n *     title=\"No projects yet\"\n *     description=\"Create a project to start tracking work.\"\n *     action={<Button>New project</Button>}\n *   />\n *\n * @example Compact — small Lucide icon for dense layouts\n *   <EmptyState\n *     icon={<Folder className=\"size-6\" />}\n *     title=\"No items\"\n *   />\n *\n * @example Custom illustration\n *   <EmptyState\n *     illustration={<Illustrations.NoSearchResults className=\"size-32\" />}\n *     title=\"No results\"\n *   />\n */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { icon, illustration, title, description, action, secondaryAction, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-background-subtle p-10 text-center',\n        className,\n      )}\n      {...props}\n    >\n      {/* Visual: illustration > icon > default illustration */}\n      {illustration ? (\n        illustration\n      ) : icon ? (\n        <div className=\"inline-flex size-12 items-center justify-center rounded-full bg-background-muted text-foreground-muted [&_svg]:size-6\">\n          {icon}\n        </div>\n      ) : (\n        <InboxEmpty className=\"size-24\" />\n      )}\n      <h3 className=\"text-base font-semibold text-foreground leading-tight\">{title}</h3>\n      {description && (\n        <p className=\"max-w-md text-sm text-foreground-muted leading-relaxed\">{description}</p>\n      )}\n      {(action || secondaryAction) && (\n        <div className=\"mt-2 flex items-center gap-2\">\n          {action}\n          {secondaryAction}\n        </div>\n      )}\n    </div>\n  );\n});\nEmptyState.displayName = 'EmptyState';\n"],"names":["EmptyState","forwardRef","icon","illustration","title","description","action","secondaryAction","className","props","ref","jsxs","cn","jsx","InboxEmpty"],"mappings":";;;;;AAmDO,MAAMA,IAAaC,EAA4C,SACpE,EAAE,MAAAC,GAAM,cAAAC,GAAc,OAAAC,GAAO,aAAAC,GAAa,QAAAC,GAAQ,iBAAAC,GAAiB,WAAAC,GAAW,GAAGC,EAAA,GACjFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAGH,UAAA;AAAA,QAAAN,MAEGD,IACF,gBAAAW,EAAC,OAAA,EAAI,WAAU,yHACZ,UAAAX,EAAA,CACH,IAEA,gBAAAW,EAACC,GAAA,EAAW,WAAU,WAAU;AAAA,QAElC,gBAAAD,EAAC,MAAA,EAAG,WAAU,yDAAyD,UAAAT,GAAM;AAAA,QAC5EC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0DAA0D,UAAAR,GAAY;AAAA,SAEnFC,KAAUC,MACV,gBAAAI,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,UAAAL;AAAA,UACAC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDP,EAAW,cAAc;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/ui/EmptyState.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { InboxEmpty } from '@/illustrations';\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Small Lucide-sized icon rendered inside a 48px circular container.\n   * Use for compact empty states (table cells, sidebar panes, cards).\n   */\n  icon?: ReactNode;\n  /**\n   * Full-size illustration rendered without the icon container. Takes\n   * precedence over `icon`. If neither is set, the default `InboxEmpty`\n   * line illustration is used.\n   */\n  illustration?: ReactNode;\n  /** Heading. One short sentence. */\n  title: ReactNode;\n  /** Description. One or two sentences max. */\n  description?: ReactNode;\n  /** Primary action — usually a `<Button>` that creates the missing item. */\n  action?: ReactNode;\n  /** Secondary helper link — \"Learn more\", \"Import existing\", etc. */\n  secondaryAction?: ReactNode;\n  /** Heading level of the title. Default 3 — match the surrounding outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\n/**\n * Shown when a list / dataset / surface has no content yet. Tone is helpful,\n * never apologetic.\n *\n * @example Default — uses the built-in InboxEmpty illustration\n *   <EmptyState\n *     title=\"No projects yet\"\n *     description=\"Create a project to start tracking work.\"\n *     action={<Button>New project</Button>}\n *   />\n *\n * @example Compact — small Lucide icon for dense layouts\n *   <EmptyState\n *     icon={<Folder className=\"size-6\" />}\n *     title=\"No items\"\n *   />\n *\n * @example Custom illustration\n *   <EmptyState\n *     illustration={<Illustrations.NoSearchResults className=\"size-32\" />}\n *     title=\"No results\"\n *   />\n */\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  {\n    icon,\n    illustration,\n    title,\n    description,\n    action,\n    secondaryAction,\n    headingLevel = 3,\n    className,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'border-border bg-background-subtle flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center',\n        className,\n      )}\n      {...props}\n    >\n      {/* Visual: illustration > icon > default illustration */}\n      {illustration ? (\n        illustration\n      ) : icon ? (\n        <div className=\"bg-background-muted text-foreground-muted inline-flex size-12 items-center justify-center rounded-full [&_svg]:size-6\">\n          {icon}\n        </div>\n      ) : (\n        <InboxEmpty className=\"size-24\" />\n      )}\n      {createElement(\n        `h${headingLevel}`,\n        { className: 'text-base font-semibold text-foreground leading-tight' },\n        title,\n      )}\n      {description && (\n        <p className=\"text-foreground-muted max-w-md text-sm leading-relaxed\">{description}</p>\n      )}\n      {(action || secondaryAction) && (\n        <div className=\"mt-2 flex items-center gap-2\">\n          {action}\n          {secondaryAction}\n        </div>\n      )}\n    </div>\n  );\n});\nEmptyState.displayName = 'EmptyState';\n"],"names":["EmptyState","forwardRef","icon","illustration","title","description","action","secondaryAction","headingLevel","className","props","ref","jsxs","cn","jsx","InboxEmpty","createElement"],"mappings":";;;;;AAqDO,MAAMA,IAAaC,EAA4C,SACpE;AAAA,EACE,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAGH,UAAA;AAAA,QAAAP,MAEGD,IACF,gBAAAY,EAAC,OAAA,EAAI,WAAU,yHACZ,UAAAZ,EAAA,CACH,IAEA,gBAAAY,EAACC,GAAA,EAAW,WAAU,WAAU;AAAA,QAEjCC;AAAA,UACC,IAAIR,CAAY;AAAA,UAChB,EAAE,WAAW,wDAAA;AAAA,UACbJ;AAAA,QAAA;AAAA,QAEDC,KACC,gBAAAS,EAAC,KAAA,EAAE,WAAU,0DAA0D,UAAAT,GAAY;AAAA,SAEnFC,KAAUC,MACV,gBAAAK,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,UAAAN;AAAA,UACAC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDP,EAAW,cAAc;"}

package/dist-lib/components/ui/ErrorState.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** `404` not-found, `500` server, or `generic` (catch-all). */
-    variant?: '404' | '500' | 'generic';
+    /** `403` permission-denied, `404` not-found, `500` server, or `generic` (catch-all). */
+    variant?: '403' | '404' | '500' | 'generic';
     /** Override the default title. */
     title?: ReactNode;
     /** Override the default description. */
@@ -15,6 +15,14 @@ export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     action?: ReactNode;
     /** When provided, renders a default "Try again" button calling this handler. */
     onRetry?: () => void;
+    /** Heading level of the title. Default 3 — match the surrounding outline. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Announce the error politely when it appears in-place (e.g. a failed
+     * refetch inside a panel). Off by default — page-level errors are read as
+     * part of the page and must not double-announce.
+     */
+    live?: boolean;
 }
 /**
  * Page-level error placeholder. Pair with `onRetry` for transient failures.
@@ -25,6 +33,9 @@ export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  * @example 500 with retry
  *   <ErrorState variant="500" onRetry={refetch} />
  *
+ * @example 403 with a way out (no retry — permission won't change on reload)
+ *   <ErrorState variant="403" action={<Button variant="outline" asChild><a href="/">Go home</a></Button>} />
+ *
  * @example Custom
  *   <ErrorState
  *     title="Quota exceeded"

package/dist-lib/components/ui/ErrorState.js

@@ -1,48 +1,69 @@
 "use client";
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { cn as f } from "../../lib/utils.js";
-import { useStrings as x } from "../../hooks/use-strings.js";
-import { ConnectionLost as S, ServerError as N, NotFound as b } from "../../illustrations/index.js";
-import { Button as h } from "./Button.js";
-const v = (e) => ({
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { forwardRef as S, createElement as x } from "react";
+import { cn as b } from "../../lib/utils.js";
+import { useStrings as N } from "../../hooks/use-strings.js";
+import { ConnectionLost as v, ServerError as h, NotFound as E, Locked as z } from "../../illustrations/index.js";
+import { Button as D } from "./Button.js";
+const T = (e) => ({
+  403: {
+    illustration: /* @__PURE__ */ r(z, { className: "size-32" }),
+    title: e.errorState.forbiddenTitle,
+    description: e.errorState.forbiddenDescription
+  },
   404: {
-    illustration: /* @__PURE__ */ r(b, { className: "size-32" }),
+    illustration: /* @__PURE__ */ r(E, { className: "size-32" }),
     title: e.errorState.notFoundTitle,
     description: e.errorState.notFoundDescription
   },
   500: {
-    illustration: /* @__PURE__ */ r(N, { className: "size-32" }),
+    illustration: /* @__PURE__ */ r(h, { className: "size-32" }),
     title: e.errorState.serverTitle,
     description: e.errorState.serverDescription
   },
   generic: {
-    illustration: /* @__PURE__ */ r(S, { className: "size-32" }),
+    illustration: /* @__PURE__ */ r(v, { className: "size-32" }),
     title: e.errorState.genericTitle,
     description: e.errorState.genericDescription
   }
-}), E = g(function({ variant: s = "generic", title: a, description: l, illustration: c, action: i, onRetry: o, className: d, ...m }, p) {
-  const n = x(), t = v(n)[s];
-  return /* @__PURE__ */ u(
+}), j = S(function({
+  variant: s = "generic",
+  title: a,
+  description: l,
+  illustration: c,
+  action: i,
+  onRetry: o,
+  headingLevel: d = 3,
+  live: m,
+  className: p,
+  ...u
+}, f) {
+  const n = N(), t = T(n)[s];
+  return /* @__PURE__ */ g(
     "div",
     {
-      ref: p,
-      className: f(
-        "flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-background-subtle p-10 text-center",
-        d
+      ref: f,
+      className: b(
+        "border-border bg-background-subtle flex flex-col items-center justify-center gap-3 rounded-lg border p-10 text-center",
+        p
       ),
-      ...m,
+      "aria-live": m ? "polite" : void 0,
+      ...u,
       children: [
         c ?? t.illustration,
-        /* @__PURE__ */ r("h3", { className: "text-base font-semibold text-foreground leading-tight", children: a ?? t.title }),
-        /* @__PURE__ */ r("p", { className: "max-w-md text-sm text-foreground-muted leading-relaxed", children: l ?? t.description }),
-        (i || o) && /* @__PURE__ */ r("div", { className: "mt-2 flex items-center gap-2", children: i ?? /* @__PURE__ */ r(h, { onClick: o, variant: "outline", children: n.errorState.tryAgain }) })
+        x(
+          `h${d}`,
+          { className: "text-base font-semibold text-foreground leading-tight" },
+          a ?? t.title
+        ),
+        /* @__PURE__ */ r("p", { className: "text-foreground-muted max-w-md text-sm leading-relaxed", children: l ?? t.description }),
+        (i || o) && /* @__PURE__ */ r("div", { className: "mt-2 flex items-center gap-2", children: i ?? /* @__PURE__ */ r(D, { onClick: o, variant: "outline", children: n.errorState.tryAgain }) })
       ]
     }
   );
 });
-E.displayName = "ErrorState";
+j.displayName = "ErrorState";
 export {
-  E as ErrorState
+  j as ErrorState
 };
 //# sourceMappingURL=ErrorState.js.map

package/dist-lib/components/ui/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","sources":["../../../src/components/ui/ErrorState.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport type { UiStrings } from '@/lib/strings';\nimport { NotFound, ServerError, ConnectionLost } from '@/illustrations';\nimport { Button } from './Button';\n\nexport interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** `404` not-found, `500` server, or `generic` (catch-all). */\n  variant?: '404' | '500' | 'generic';\n  /** Override the default title. */\n  title?: ReactNode;\n  /** Override the default description. */\n  description?: ReactNode;\n  /**\n   * Override the variant's default illustration. Pass any ReactNode (e.g.\n   * `<Illustrations.Construction className=\"size-32\" />`).\n   */\n  illustration?: ReactNode;\n  /** Custom action node. Replaces the default retry button. */\n  action?: ReactNode;\n  /** When provided, renders a default \"Try again\" button calling this handler. */\n  onRetry?: () => void;\n}\n\nconst presets = (s: UiStrings) => ({\n  '404': {\n    illustration: <NotFound className=\"size-32\" />,\n    title: s.errorState.notFoundTitle,\n    description: s.errorState.notFoundDescription,\n  },\n  '500': {\n    illustration: <ServerError className=\"size-32\" />,\n    title: s.errorState.serverTitle,\n    description: s.errorState.serverDescription,\n  },\n  generic: {\n    illustration: <ConnectionLost className=\"size-32\" />,\n    title: s.errorState.genericTitle,\n    description: s.errorState.genericDescription,\n  },\n});\n\n/**\n * Page-level error placeholder. Pair with `onRetry` for transient failures.\n *\n * @example 404 (uses built-in line illustration)\n *   <ErrorState variant=\"404\" />\n *\n * @example 500 with retry\n *   <ErrorState variant=\"500\" onRetry={refetch} />\n *\n * @example Custom\n *   <ErrorState\n *     title=\"Quota exceeded\"\n *     description=\"Your plan allows 1,000 events/day.\"\n *     illustration={<Illustrations.Construction className=\"size-32\" />}\n *     action={<Button>Upgrade plan</Button>}\n *   />\n *\n * @do Match the tone to the cause — server errors apologise, user errors\n *      explain. Always offer a next step.\n * @dont Show a raw stack trace to end users.\n */\nexport const ErrorState = forwardRef<HTMLDivElement, ErrorStateProps>(function ErrorState(\n  { variant = 'generic', title, description, illustration, action, onRetry, className, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  const preset = presets(strings)[variant];\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-background-subtle p-10 text-center',\n        className,\n      )}\n      {...props}\n    >\n      {illustration ?? preset.illustration}\n      <h3 className=\"text-base font-semibold text-foreground leading-tight\">\n        {title ?? preset.title}\n      </h3>\n      <p className=\"max-w-md text-sm text-foreground-muted leading-relaxed\">\n        {description ?? preset.description}\n      </p>\n      {(action || onRetry) && (\n        <div className=\"mt-2 flex items-center gap-2\">\n          {action ?? (\n            <Button onClick={onRetry} variant=\"outline\">\n              {strings.errorState.tryAgain}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\nErrorState.displayName = 'ErrorState';\n"],"names":["presets","s","jsx","NotFound","ServerError","ConnectionLost","ErrorState","forwardRef","variant","title","description","illustration","action","onRetry","className","props","ref","strings","useStrings","preset","jsxs","cn","Button"],"mappings":";;;;;;;AA2BA,MAAMA,IAAU,CAACC,OAAkB;AAAA,EACjC,KAAO;AAAA,IACL,cAAc,gBAAAC,EAACC,GAAA,EAAS,WAAU,UAAA,CAAU;AAAA,IAC5C,OAAOF,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAAA,EAE5B,KAAO;AAAA,IACL,cAAc,gBAAAC,EAACE,GAAA,EAAY,WAAU,UAAA,CAAU;AAAA,IAC/C,OAAOH,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAAA,EAE5B,SAAS;AAAA,IACP,cAAc,gBAAAC,EAACG,GAAA,EAAe,WAAU,UAAA,CAAU;AAAA,IAClD,OAAOJ,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAE9B,IAuBaK,IAAaC,EAA4C,SACpE,EAAE,SAAAC,IAAU,WAAW,OAAAC,GAAO,aAAAC,GAAa,cAAAC,GAAc,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GACxFC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAASnB,EAAQiB,CAAO,EAAET,CAAO;AACvC,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAgBQ,EAAO;AAAA,0BACvB,MAAA,EAAG,WAAU,yDACX,UAAAV,KAASU,EAAO,OACnB;AAAA,0BACC,KAAA,EAAE,WAAU,0DACV,UAAAT,KAAeS,EAAO,aACzB;AAAA,SACEP,KAAUC,MACV,gBAAAX,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAAU,KACC,gBAAAV,EAACoB,GAAA,EAAO,SAAST,GAAS,SAAQ,WAC/B,UAAAI,EAAQ,WAAW,UACtB,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDX,EAAW,cAAc;"}
+{"version":3,"file":"ErrorState.js","sources":["../../../src/components/ui/ErrorState.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport type { UiStrings } from '@/lib/strings';\nimport { NotFound, ServerError, ConnectionLost, Locked } from '@/illustrations';\nimport { Button } from './Button';\n\nexport interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** `403` permission-denied, `404` not-found, `500` server, or `generic` (catch-all). */\n  variant?: '403' | '404' | '500' | 'generic';\n  /** Override the default title. */\n  title?: ReactNode;\n  /** Override the default description. */\n  description?: ReactNode;\n  /**\n   * Override the variant's default illustration. Pass any ReactNode (e.g.\n   * `<Illustrations.Construction className=\"size-32\" />`).\n   */\n  illustration?: ReactNode;\n  /** Custom action node. Replaces the default retry button. */\n  action?: ReactNode;\n  /** When provided, renders a default \"Try again\" button calling this handler. */\n  onRetry?: () => void;\n  /** Heading level of the title. Default 3 — match the surrounding outline. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Announce the error politely when it appears in-place (e.g. a failed\n   * refetch inside a panel). Off by default — page-level errors are read as\n   * part of the page and must not double-announce.\n   */\n  live?: boolean;\n}\n\nconst presets = (s: UiStrings) => ({\n  '403': {\n    illustration: <Locked className=\"size-32\" />,\n    title: s.errorState.forbiddenTitle,\n    description: s.errorState.forbiddenDescription,\n  },\n  '404': {\n    illustration: <NotFound className=\"size-32\" />,\n    title: s.errorState.notFoundTitle,\n    description: s.errorState.notFoundDescription,\n  },\n  '500': {\n    illustration: <ServerError className=\"size-32\" />,\n    title: s.errorState.serverTitle,\n    description: s.errorState.serverDescription,\n  },\n  generic: {\n    illustration: <ConnectionLost className=\"size-32\" />,\n    title: s.errorState.genericTitle,\n    description: s.errorState.genericDescription,\n  },\n});\n\n/**\n * Page-level error placeholder. Pair with `onRetry` for transient failures.\n *\n * @example 404 (uses built-in line illustration)\n *   <ErrorState variant=\"404\" />\n *\n * @example 500 with retry\n *   <ErrorState variant=\"500\" onRetry={refetch} />\n *\n * @example 403 with a way out (no retry — permission won't change on reload)\n *   <ErrorState variant=\"403\" action={<Button variant=\"outline\" asChild><a href=\"/\">Go home</a></Button>} />\n *\n * @example Custom\n *   <ErrorState\n *     title=\"Quota exceeded\"\n *     description=\"Your plan allows 1,000 events/day.\"\n *     illustration={<Illustrations.Construction className=\"size-32\" />}\n *     action={<Button>Upgrade plan</Button>}\n *   />\n *\n * @do Match the tone to the cause — server errors apologise, user errors\n *      explain. Always offer a next step.\n * @dont Show a raw stack trace to end users.\n */\nexport const ErrorState = forwardRef<HTMLDivElement, ErrorStateProps>(function ErrorState(\n  {\n    variant = 'generic',\n    title,\n    description,\n    illustration,\n    action,\n    onRetry,\n    headingLevel = 3,\n    live,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const preset = presets(strings)[variant];\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'border-border bg-background-subtle flex flex-col items-center justify-center gap-3 rounded-lg border p-10 text-center',\n        className,\n      )}\n      aria-live={live ? 'polite' : undefined}\n      {...props}\n    >\n      {illustration ?? preset.illustration}\n      {createElement(\n        `h${headingLevel}`,\n        { className: 'text-base font-semibold text-foreground leading-tight' },\n        title ?? preset.title,\n      )}\n      <p className=\"text-foreground-muted max-w-md text-sm leading-relaxed\">\n        {description ?? preset.description}\n      </p>\n      {(action || onRetry) && (\n        <div className=\"mt-2 flex items-center gap-2\">\n          {action ?? (\n            <Button onClick={onRetry} variant=\"outline\">\n              {strings.errorState.tryAgain}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\nErrorState.displayName = 'ErrorState';\n"],"names":["presets","s","jsx","Locked","NotFound","ServerError","ConnectionLost","ErrorState","forwardRef","variant","title","description","illustration","action","onRetry","headingLevel","live","className","props","ref","strings","useStrings","preset","jsxs","cn","createElement","Button"],"mappings":";;;;;;;AAmCA,MAAMA,IAAU,CAACC,OAAkB;AAAA,EACjC,KAAO;AAAA,IACL,cAAc,gBAAAC,EAACC,GAAA,EAAO,WAAU,UAAA,CAAU;AAAA,IAC1C,OAAOF,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAAA,EAE5B,KAAO;AAAA,IACL,cAAc,gBAAAC,EAACE,GAAA,EAAS,WAAU,UAAA,CAAU;AAAA,IAC5C,OAAOH,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAAA,EAE5B,KAAO;AAAA,IACL,cAAc,gBAAAC,EAACG,GAAA,EAAY,WAAU,UAAA,CAAU;AAAA,IAC/C,OAAOJ,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAAA,EAE5B,SAAS;AAAA,IACP,cAAc,gBAAAC,EAACI,GAAA,EAAe,WAAU,UAAA,CAAU;AAAA,IAClD,OAAOL,EAAE,WAAW;AAAA,IACpB,aAAaA,EAAE,WAAW;AAAA,EAAA;AAE9B,IA0BaM,IAAaC,EAA4C,SACpE;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAStB,EAAQoB,CAAO,EAAEX,CAAO;AACvC,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAEF,aAAWD,IAAO,WAAW;AAAA,MAC5B,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAN,KAAgBU,EAAO;AAAA,QACvBG;AAAA,UACC,IAAIV,CAAY;AAAA,UAChB,EAAE,WAAW,wDAAA;AAAA,UACbL,KAASY,EAAO;AAAA,QAAA;AAAA,0BAEjB,KAAA,EAAE,WAAU,0DACV,UAAAX,KAAeW,EAAO,aACzB;AAAA,SACET,KAAUC,MACV,gBAAAZ,EAAC,OAAA,EAAI,WAAU,gCACZ,UAAAW,KACC,gBAAAX,EAACwB,GAAA,EAAO,SAASZ,GAAS,SAAQ,WAC/B,UAAAM,EAAQ,WAAW,UACtB,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDb,EAAW,cAAc;"}

package/dist-lib/components/ui/FileUpload.js

@@ -1,108 +1,111 @@
 "use client";
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as A, useRef as O, useId as S, useState as y, useCallback as F } from "react";
-import { Upload as T, File as C, X as K } from "../../icons/index.js";
-import { cn as k } from "../../lib/utils.js";
-import { useStrings as M } from "../../hooks/use-strings.js";
-import { formatString as X } from "../../lib/strings.js";
-function _(s) {
-  return s < 1024 ? `${s} B` : s < 1024 * 1024 ? `${(s / 1024).toFixed(1)} KB` : `${(s / 1024 / 1024).toFixed(1)} MB`;
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as T, useRef as F, useId as B, useState as D, useCallback as U } from "react";
+import { Upload as C, File as E, X } from "../../icons/index.js";
+import { cn as z } from "../../lib/utils.js";
+import { useStrings as _ } from "../../hooks/use-strings.js";
+import { formatString as h } from "../../lib/strings.js";
+function q(s, t) {
+  return s < 1024 ? h(t.bytes, { n: s }) : s < 1024 * 1024 ? h(t.kilobytes, { n: (s / 1024).toFixed(1) }) : h(t.megabytes, { n: (s / 1024 / 1024).toFixed(1) });
 }
-function q(s, i) {
-  if (!i) return !0;
-  const a = i.split(",").map((r) => r.trim().toLowerCase()).filter(Boolean);
+function G(s, t) {
+  if (!t) return !0;
+  const a = t.split(",").map((r) => r.trim().toLowerCase()).filter(Boolean);
   if (!a.length) return !0;
   const d = s.name.toLowerCase(), l = s.type.toLowerCase();
   return a.some((r) => r.startsWith(".") ? d.endsWith(r) : r.endsWith("/*") ? l.startsWith(r.slice(0, -1)) : l === r);
 }
-const E = A(function({ accept: i, multiple: a, maxSize: d, value: l, onChange: r, onReject: n, hint: b, disabled: p, className: U }, z) {
-  const v = M(), D = O(null), N = S(), [L, $] = y([]), [B, g] = y(!1), f = l ?? L, h = F(
+const H = T(function({ accept: t, multiple: a, maxSize: d, value: l, onChange: r, onReject: i, hint: y, disabled: g, className: L }, W) {
+  const b = _(), $ = F(null), w = B(), [I, A] = D([]), [M, x] = D(!1), f = F(0), c = l ?? I, v = U(
     (e) => {
-      l === void 0 && $(e), r == null || r(e);
+      l === void 0 && A(e), r == null || r(e);
     },
     [r, l]
-  ), w = F(
+  ), k = U(
     (e) => {
-      const o = [], c = [], x = [];
-      for (const u of Array.from(e))
-        q(u, i) ? d && u.size > d ? c.push(u) : o.push(u) : x.push(u);
-      x.length && (n == null || n(x, "type")), c.length && (n == null || n(c, "size")), o.length && h(a ? [...f, ...o] : o.slice(0, 1));
+      const o = [], u = [], N = [];
+      for (const m of Array.from(e))
+        G(m, t) ? d && m.size > d ? u.push(m) : o.push(m) : N.push(m);
+      N.length && (i == null || i(N, "type")), u.length && (i == null || i(u, "size")), o.length && v(a ? [...c, ...o] : o.slice(0, 1));
     },
-    [i, f, d, a, n, h]
-  ), W = (e) => h(f.filter((o, c) => c !== e)), I = (e) => {
-    e.preventDefault(), g(!1), !p && w(e.dataTransfer.files);
+    [t, c, d, a, i, v]
+  ), O = (e) => v(c.filter((o, u) => u !== e)), S = (e) => {
+    e.preventDefault(), f.current = 0, x(!1), !g && k(e.dataTransfer.files);
   };
-  return /* @__PURE__ */ m("div", { ref: z, className: k("flex flex-col gap-3", U), children: [
-    /* @__PURE__ */ m(
+  return /* @__PURE__ */ p("div", { ref: W, className: z("flex flex-col gap-3", L), children: [
+    /* @__PURE__ */ p(
       "label",
       {
-        htmlFor: N,
-        onDragOver: (e) => {
-          e.preventDefault(), p || g(!0);
+        htmlFor: w,
+        onDragEnter: () => {
+          f.current += 1, g || x(!0);
         },
-        onDragLeave: () => g(!1),
-        onDrop: I,
-        className: k(
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: () => {
+          f.current = Math.max(0, f.current - 1), f.current === 0 && x(!1);
+        },
+        onDrop: S,
+        className: z(
           "group relative flex cursor-pointer flex-col items-center justify-center gap-2",
-          "border-border bg-background-subtle rounded-md border border-dashed px-6 py-8",
+          "border-border-input bg-background-subtle rounded-md border border-dashed px-6 py-8",
           "text-center transition-colors",
           "hover:border-border-strong hover:bg-background-muted",
           "focus-within:ring-ring focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2",
-          B && "border-accent bg-accent-soft",
-          p && "pointer-events-none opacity-50"
+          M && "border-accent bg-accent-soft",
+          g && "pointer-events-none opacity-50"
         ),
         children: [
-          /* @__PURE__ */ t(T, { className: "text-foreground-muted size-5", "aria-hidden": !0 }),
-          /* @__PURE__ */ m("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ t("p", { className: "text-sm font-medium", children: v.fileUpload.drop }),
-            b && /* @__PURE__ */ t("p", { className: "text-foreground-muted text-xs", children: b })
+          /* @__PURE__ */ n(C, { className: "text-foreground-muted size-5", "aria-hidden": !0 }),
+          /* @__PURE__ */ p("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: b.fileUpload.drop }),
+            y && /* @__PURE__ */ n("p", { className: "text-foreground-muted text-xs", children: y })
           ] }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             "input",
             {
-              ref: D,
-              id: N,
+              ref: $,
+              id: w,
               type: "file",
-              accept: i,
+              accept: t,
               multiple: a,
-              disabled: p,
+              disabled: g,
               className: "sr-only",
               onChange: (e) => {
-                e.target.files && w(e.target.files), e.target.value = "";
+                e.target.files && k(e.target.files), e.target.value = "";
               }
             }
           )
         ]
       }
     ),
-    f.length > 0 && /* @__PURE__ */ t("ul", { className: "flex flex-col gap-2", children: f.map((e, o) => /* @__PURE__ */ m(
+    c.length > 0 && /* @__PURE__ */ n("ul", { className: "flex flex-col gap-2", children: c.map((e, o) => /* @__PURE__ */ p(
       "li",
       {
         className: "border-border bg-card flex items-center gap-3 rounded-md border px-3 py-2",
         children: [
-          /* @__PURE__ */ t(C, { className: "text-foreground-muted size-4 shrink-0", "aria-hidden": !0 }),
-          /* @__PURE__ */ m("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ t("p", { className: "truncate text-sm", title: e.name, children: e.name }),
-            /* @__PURE__ */ t("p", { className: "text-foreground-muted text-xs", children: _(e.size) })
+          /* @__PURE__ */ n(E, { className: "text-foreground-muted size-4 shrink-0", "aria-hidden": !0 }),
+          /* @__PURE__ */ p("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ n("p", { className: "truncate text-sm", title: e.name, children: e.name }),
+            /* @__PURE__ */ n("p", { className: "text-foreground-muted text-xs", children: q(e.size, b.fileUpload) })
           ] }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
-              onClick: () => W(o),
-              className: "text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring rounded-sm p-1 outline-none focus-visible:ring-2",
-              "aria-label": X(v.fileUpload.remove, { name: e.name }),
-              children: /* @__PURE__ */ t(K, { className: "size-4", "aria-hidden": !0 })
+              onClick: () => O(o),
+              className: "text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm p-1 outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "aria-label": h(b.fileUpload.remove, { name: e.name }),
+              children: /* @__PURE__ */ n(X, { className: "size-4", "aria-hidden": !0 })
             }
           )
         ]
       },
-      `${e.name}-${o}`
+      `${e.name}-${e.size}-${e.lastModified}-${o}`
     )) })
   ] });
 });
-E.displayName = "FileUpload";
+H.displayName = "FileUpload";
 export {
-  E as FileUpload
+  H as FileUpload
 };
 //# sourceMappingURL=FileUpload.js.map