@gerege-systems/ui 0.11.2

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

@@ -0,0 +1,169 @@
+"use client";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import * as o from "@radix-ui/react-dropdown-menu";
+import { Check as l, Circle as m, ChevronRight as f } from "../../icons/index.js";
+import { cn as d } from "../../lib/utils.js";
+const R = o.Root, k = o.Trigger, T = o.Group, g = o.Portal, j = o.Sub, G = o.RadioGroup, p = d(
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none",
+  "data-[highlighted]:bg-background-muted data-[highlighted]:text-foreground",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "transition-colors duration-[var(--duration-fast)]"
+), b = i(function({ className: e, inset: t, children: n, ...a }, u) {
+  return /* @__PURE__ */ c(
+    o.SubTrigger,
+    {
+      ref: u,
+      className: d(
+        p,
+        "data-[state=open]:bg-background-muted",
+        t && "pl-8",
+        e
+      ),
+      ...a,
+      children: [
+        n,
+        /* @__PURE__ */ r(f, { className: "text-foreground-subtle ml-auto size-4", "aria-hidden": !0 })
+      ]
+    }
+  );
+});
+b.displayName = "DropdownMenuSubTrigger";
+const w = i(function({ className: e, ...t }, n) {
+  return /* @__PURE__ */ r(
+    o.SubContent,
+    {
+      ref: n,
+      className: d(
+        "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",
+        e
+      ),
+      ...t
+    }
+  );
+});
+w.displayName = "DropdownMenuSubContent";
+const h = i(function({ className: e, sideOffset: t = 4, align: n = "end", ...a }, u) {
+  return /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+    o.Content,
+    {
+      ref: u,
+      sideOffset: t,
+      align: n,
+      className: d(
+        "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",
+        "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
+        e
+      ),
+      ...a
+    }
+  ) });
+});
+h.displayName = "DropdownMenuContent";
+const D = i(function({ className: e, inset: t, destructive: n, ...a }, u) {
+  return /* @__PURE__ */ r(
+    o.Item,
+    {
+      ref: u,
+      className: d(
+        p,
+        t && "pl-8",
+        n && "text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text",
+        e
+      ),
+      ...a
+    }
+  );
+});
+D.displayName = "DropdownMenuItem";
+const M = i(function({ className: e, children: t, checked: n, ...a }, u) {
+  return /* @__PURE__ */ c(
+    o.CheckboxItem,
+    {
+      ref: u,
+      checked: n,
+      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: "text-accent size-4", "aria-hidden": !0 }) }) }),
+        t
+      ]
+    }
+  );
+});
+M.displayName = "DropdownMenuCheckboxItem";
+const x = i(function({ className: e, children: t, ...n }, a) {
+  return /* @__PURE__ */ c(
+    o.RadioItem,
+    {
+      ref: 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: "fill-accent text-accent size-2", "aria-hidden": !0 }) }) }),
+        t
+      ]
+    }
+  );
+});
+x.displayName = "DropdownMenuRadioItem";
+const N = i(function({ className: e, inset: t, ...n }, a) {
+  return /* @__PURE__ */ r(
+    o.Label,
+    {
+      ref: a,
+      className: d(
+        "text-foreground-subtle px-2 py-1.5 text-xs font-medium",
+        t && "pl-8",
+        e
+      ),
+      ...n
+    }
+  );
+});
+N.displayName = "DropdownMenuLabel";
+const C = i(function({ className: e, ...t }, n) {
+  return /* @__PURE__ */ r(
+    o.Separator,
+    {
+      ref: n,
+      className: d("bg-border -mx-1 my-1 h-px", e),
+      ...t
+    }
+  );
+});
+C.displayName = "DropdownMenuSeparator";
+function I({ className: s, ...e }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: d("text-foreground-subtle ml-auto font-mono text-xs tracking-widest", s),
+      ...e
+    }
+  );
+}
+I.displayName = "DropdownMenuShortcut";
+export {
+  R as DropdownMenu,
+  M as DropdownMenuCheckboxItem,
+  h as DropdownMenuContent,
+  T as DropdownMenuGroup,
+  D as DropdownMenuItem,
+  N as DropdownMenuLabel,
+  g as DropdownMenuPortal,
+  G as DropdownMenuRadioGroup,
+  x as DropdownMenuRadioItem,
+  C as DropdownMenuSeparator,
+  I as DropdownMenuShortcut,
+  j as DropdownMenuSub,
+  w as DropdownMenuSubContent,
+  b as DropdownMenuSubTrigger,
+  k as DropdownMenuTrigger
+};
+//# sourceMappingURL=DropdownMenu.js.map

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

@@ -0,0 +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(\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":";;;;;;AAiBO,MAAMA,IAAeC,EAAsB,MACrCC,IAAsBD,EAAsB,SAC5CE,IAAoBF,EAAsB,OAC1CG,IAAqBH,EAAsB,QAC3CI,IAAkBJ,EAAsB,KACxCK,IAAyBL,EAAsB,YAEtDM,IAAcC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAyBC,EAKpC,SAAgC,EAAE,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC/E,SACE,gBAAAC;AAAA,IAACf,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACTD;AAAA,QACA;AAAA,QACAK,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAI,EAACC,GAAA,EAAa,WAAU,yCAAwC,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlF,CAAC;AACDT,EAAuB,cAAc;AAE9B,MAAMU,IAAyBT,EAGpC,SAAgC,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AAC9D,SACE,gBAAAE;AAAA,IAAChB,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAuB,cAAc;AAE9B,MAAMC,IAAsBV,EAMjC,SAA6B,EAAE,WAAAC,GAAW,YAAAU,IAAa,GAAG,OAAAC,IAAQ,OAAO,GAAGR,EAAA,GAASC,GAAK;AAC1F,2BACGX,GAAA,EACC,UAAA,gBAAAa;AAAA,IAAChB,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,YAAAM;AAAA,MACA,OAAAC;AAAA,MACA,WAAWd;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDM,EAAoB,cAAc;AAE3B,MAAMG,IAAmBb,EAM9B,SAA0B,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAY,GAAa,GAAGV,EAAA,GAASC,GAAK;AAC5E,SACE,gBAAAE;AAAA,IAAChB,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACTD;AAAA,QACAK,KAAS;AAAA,QACTY,KACE;AAAA,QACFb;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDS,EAAiB,cAAc;AAExB,MAAME,IAA2Bf,EAGtC,SAAkC,EAAE,WAAAC,GAAW,UAAAE,GAAU,SAAAa,GAAS,GAAGZ,EAAA,GAASC,GAAK;AACnF,SACE,gBAAAC;AAAA,IAACf,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,SAAAW;AAAA,MACA,WAAWlB,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAAChB,EAAsB,eAAtB,EACC,UAAA,gBAAAgB,EAACU,GAAA,EAAM,WAAU,sBAAqB,eAAW,GAAA,CAAC,GACpD,GACF;AAAA,QACCd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDY,EAAyB,cAAc;AAEhC,MAAMG,IAAwBlB,EAGnC,SAA+B,EAAE,WAAAC,GAAW,UAAAE,GAAU,GAAGC,EAAA,GAASC,GAAK;AACvE,SACE,gBAAAC;AAAA,IAACf,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAAChB,EAAsB,eAAtB,EACC,UAAA,gBAAAgB,EAACY,GAAA,EAAO,WAAU,kCAAiC,eAAW,GAAA,CAAC,GACjE,GACF;AAAA,QACChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDe,EAAsB,cAAc;AAE7B,MAAME,IAAoBpB,EAK/B,SAA2B,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGE,EAAA,GAASC,GAAK;AAChE,SACE,gBAAAE;AAAA,IAAChB,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACAI,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDgB,EAAkB,cAAc;AAEzB,MAAMC,IAAwBrB,EAGnC,SAA+B,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AAC7D,SACE,gBAAAE;AAAA,IAAChB,EAAsB;AAAA,IAAtB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP,EAAG,6BAA6BG,CAAS;AAAA,MACnD,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDiB,EAAsB,cAAc;AAM7B,SAASC,EAAqB,EAAE,WAAArB,GAAW,GAAGG,KAA0C;AAC7F,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWT,EAAG,oEAAoEG,CAAS;AAAA,MAC1F,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AACAkB,EAAqB,cAAc;"}

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

@@ -0,0 +1,48 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Small Lucide-sized icon rendered inside a 48px circular container.
+     * Use for compact empty states (table cells, sidebar panes, cards).
+     */
+    icon?: ReactNode;
+    /**
+     * Full-size illustration rendered without the icon container. Takes
+     * precedence over `icon`. If neither is set, the default `InboxEmpty`
+     * line illustration is used.
+     */
+    illustration?: ReactNode;
+    /** Heading. One short sentence. */
+    title: ReactNode;
+    /** Description. One or two sentences max. */
+    description?: ReactNode;
+    /** Primary action — usually a `<Button>` that creates the missing item. */
+    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,
+ * never apologetic.
+ *
+ * @example Default — uses the built-in InboxEmpty illustration
+ *   <EmptyState
+ *     title="No projects yet"
+ *     description="Create a project to start tracking work."
+ *     action={<Button>New project</Button>}
+ *   />
+ *
+ * @example Compact — small Lucide icon for dense layouts
+ *   <EmptyState
+ *     icon={<Folder className="size-6" />}
+ *     title="No items"
+ *   />
+ *
+ * @example Custom illustration
+ *   <EmptyState
+ *     illustration={<Illustrations.NoSearchResults className="size-32" />}
+ *     title="No results"
+ *   />
+ */
+export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+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: 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
+      ),
+      ...i,
+      children: [
+        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
+        ] })
+      ]
+    }
+  );
+});
+p.displayName = "EmptyState";
+export {
+  p as EmptyState
+};
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,51 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** `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. */
+    description?: ReactNode;
+    /**
+     * Override the variant's default illustration. Pass any ReactNode (e.g.
+     * `<Illustrations.Construction className="size-32" />`).
+     */
+    illustration?: ReactNode;
+    /** Custom action node. Replaces the default retry button. */
+    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.
+ *
+ * @example 404 (uses built-in line illustration)
+ *   <ErrorState variant="404" />
+ *
+ * @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"
+ *     description="Your plan allows 1,000 events/day."
+ *     illustration={<Illustrations.Construction className="size-32" />}
+ *     action={<Button>Upgrade plan</Button>}
+ *   />
+ *
+ * @do Match the tone to the cause — server errors apologise, user errors
+ *      explain. Always offer a next step.
+ * @dont Show a raw stack trace to end users.
+ */
+export declare const ErrorState: import('react').ForwardRefExoticComponent<ErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,69 @@
+"use client";
+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(E, { className: "size-32" }),
+    title: e.errorState.notFoundTitle,
+    description: e.errorState.notFoundDescription
+  },
+  500: {
+    illustration: /* @__PURE__ */ r(h, { className: "size-32" }),
+    title: e.errorState.serverTitle,
+    description: e.errorState.serverDescription
+  },
+  generic: {
+    illustration: /* @__PURE__ */ r(v, { className: "size-32" }),
+    title: e.errorState.genericTitle,
+    description: e.errorState.genericDescription
+  }
+}), 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: 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
+      ),
+      "aria-live": m ? "polite" : void 0,
+      ...u,
+      children: [
+        c ?? t.illustration,
+        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 }) })
+      ]
+    }
+  );
+});
+j.displayName = "ErrorState";
+export {
+  j as ErrorState
+};
+//# sourceMappingURL=ErrorState.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type FileRejectReason = 'size' | 'type';
+export interface FileUploadProps {
+    /** Accepted file types, e.g. `image/*` or `.pdf,.docx`. */
+    accept?: string;
+    /** Allow multiple files. */
+    multiple?: boolean;
+    /** Max file size in bytes. Files larger than this are rejected. */
+    maxSize?: number;
+    /** Controlled file list. */
+    value?: File[];
+    /** Called when files are added or removed. */
+    onChange?: (files: File[]) => void;
+    /** Called with the files that were dropped because of `maxSize` or `accept`. */
+    onReject?: (files: File[], reason: FileRejectReason) => void;
+    /** Helper text inside the drop zone. */
+    hint?: ReactNode;
+    /** Disable the picker entirely. */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Drag-and-drop file picker with an inline file list. Uncontrolled by default;
+ * pass `value` + `onChange` to control externally.
+ */
+export declare const FileUpload: import('react').ForwardRefExoticComponent<FileUploadProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,111 @@
+"use client";
+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 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 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 && A(e), r == null || r(e);
+    },
+    [r, l]
+  ), k = U(
+    (e) => {
+      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));
+    },
+    [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__ */ p("div", { ref: W, className: z("flex flex-col gap-3", L), children: [
+    /* @__PURE__ */ p(
+      "label",
+      {
+        htmlFor: w,
+        onDragEnter: () => {
+          f.current += 1, g || x(!0);
+        },
+        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-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",
+          M && "border-accent bg-accent-soft",
+          g && "pointer-events-none opacity-50"
+        ),
+        children: [
+          /* @__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__ */ n(
+            "input",
+            {
+              ref: $,
+              id: w,
+              type: "file",
+              accept: t,
+              multiple: a,
+              disabled: g,
+              className: "sr-only",
+              onChange: (e) => {
+                e.target.files && k(e.target.files), e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    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__ */ 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__ */ n(
+            "button",
+            {
+              type: "button",
+              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}-${e.size}-${e.lastModified}-${o}`
+    )) })
+  ] });
+});
+H.displayName = "FileUpload";
+export {
+  H as FileUpload
+};
+//# sourceMappingURL=FileUpload.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../../src/components/ui/FileUpload.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type DragEvent as ReactDragEvent,\n  type ReactNode,\n} from 'react';\nimport { File as FileIcon, Upload, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString, type UiStrings } from '@/lib/strings';\n\nexport type FileRejectReason = 'size' | 'type';\n\nexport interface FileUploadProps {\n  /** Accepted file types, e.g. `image/*` or `.pdf,.docx`. */\n  accept?: string;\n  /** Allow multiple files. */\n  multiple?: boolean;\n  /** Max file size in bytes. Files larger than this are rejected. */\n  maxSize?: number;\n  /** Controlled file list. */\n  value?: File[];\n  /** Called when files are added or removed. */\n  onChange?: (files: File[]) => void;\n  /** Called with the files that were dropped because of `maxSize` or `accept`. */\n  onReject?: (files: File[], reason: FileRejectReason) => void;\n  /** Helper text inside the drop zone. */\n  hint?: ReactNode;\n  /** Disable the picker entirely. */\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction formatSize(bytes: number, s: UiStrings['fileUpload']) {\n  if (bytes < 1024) return formatString(s.bytes, { n: bytes });\n  if (bytes < 1024 * 1024) return formatString(s.kilobytes, { n: (bytes / 1024).toFixed(1) });\n  return formatString(s.megabytes, { n: (bytes / 1024 / 1024).toFixed(1) });\n}\n\n/** Mirror the browser's `accept` matching for dropped files (which skip the picker filter). */\nfunction matchesAccept(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const rules = accept\n    .split(',')\n    .map((r) => r.trim().toLowerCase())\n    .filter(Boolean);\n  if (!rules.length) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/**\n * Drag-and-drop file picker with an inline file list. Uncontrolled by default;\n * pass `value` + `onChange` to control externally.\n */\nexport const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function FileUpload(\n  { accept, multiple, maxSize, value, onChange, onReject, hint, disabled, className },\n  ref,\n) {\n  const strings = useStrings();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = useId();\n  const [internal, setInternal] = useState<File[]>([]);\n  const [over, setOver] = useState(false);\n  // dragenter/dragleave fire for every child element; count nesting depth so\n  // the highlight does not flicker while the pointer crosses the label's children.\n  const dragDepth = useRef(0);\n  const files = value ?? internal;\n\n  const update = useCallback(\n    (next: File[]) => {\n      if (value === undefined) setInternal(next);\n      onChange?.(next);\n    },\n    [onChange, value],\n  );\n\n  const addFiles = useCallback(\n    (incoming: FileList | File[]) => {\n      const accepted: File[] = [];\n      const tooLarge: File[] = [];\n      const wrongType: File[] = [];\n      for (const f of Array.from(incoming)) {\n        if (!matchesAccept(f, accept)) wrongType.push(f);\n        else if (maxSize && f.size > maxSize) tooLarge.push(f);\n        else accepted.push(f);\n      }\n      if (wrongType.length) onReject?.(wrongType, 'type');\n      if (tooLarge.length) onReject?.(tooLarge, 'size');\n      if (!accepted.length) return;\n      update(multiple ? [...files, ...accepted] : accepted.slice(0, 1));\n    },\n    [accept, files, maxSize, multiple, onReject, update],\n  );\n\n  const remove = (idx: number) => update(files.filter((_, i) => i !== idx));\n\n  const onDrop = (e: ReactDragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    dragDepth.current = 0;\n    setOver(false);\n    if (disabled) return;\n    addFiles(e.dataTransfer.files);\n  };\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-3', className)}>\n      <label\n        htmlFor={inputId}\n        onDragEnter={() => {\n          dragDepth.current += 1;\n          if (!disabled) setOver(true);\n        }}\n        onDragOver={(e) => e.preventDefault()}\n        onDragLeave={() => {\n          dragDepth.current = Math.max(0, dragDepth.current - 1);\n          if (dragDepth.current === 0) setOver(false);\n        }}\n        onDrop={onDrop}\n        className={cn(\n          'group relative flex cursor-pointer flex-col items-center justify-center gap-2',\n          'border-border-input bg-background-subtle rounded-md border border-dashed px-6 py-8',\n          'text-center transition-colors',\n          'hover:border-border-strong hover:bg-background-muted',\n          'focus-within:ring-ring focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n          over && 'border-accent bg-accent-soft',\n          disabled && 'pointer-events-none opacity-50',\n        )}\n      >\n        <Upload className=\"text-foreground-muted size-5\" aria-hidden />\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium\">{strings.fileUpload.drop}</p>\n          {hint && <p className=\"text-foreground-muted text-xs\">{hint}</p>}\n        </div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"sr-only\"\n          onChange={(e) => {\n            if (e.target.files) addFiles(e.target.files);\n            // Allow re-selecting the same file after removing it.\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {files.map((file, idx) => (\n            <li\n              key={`${file.name}-${file.size}-${file.lastModified}-${idx}`}\n              className=\"border-border bg-card flex items-center gap-3 rounded-md border px-3 py-2\"\n            >\n              <FileIcon className=\"text-foreground-muted size-4 shrink-0\" aria-hidden />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm\" title={file.name}>\n                  {file.name}\n                </p>\n                <p className=\"text-foreground-muted text-xs\">\n                  {formatSize(file.size, strings.fileUpload)}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => remove(idx)}\n                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\"\n                aria-label={formatString(strings.fileUpload.remove, { name: file.name })}\n              >\n                <X className=\"size-4\" aria-hidden />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nFileUpload.displayName = 'FileUpload';\n"],"names":["formatSize","bytes","s","formatString","matchesAccept","file","accept","rules","name","type","rule","FileUpload","forwardRef","multiple","maxSize","value","onChange","onReject","hint","disabled","className","ref","strings","useStrings","inputRef","useRef","inputId","useId","internal","setInternal","useState","over","setOver","dragDepth","files","update","useCallback","next","addFiles","incoming","accepted","tooLarge","wrongType","f","remove","idx","_","i","onDrop","cn","jsxs","jsx","Upload","FileIcon"],"mappings":";;;;;;;AAsCA,SAASA,EAAWC,GAAeC,GAA4B;AAC7D,SAAID,IAAQ,OAAaE,EAAaD,EAAE,OAAO,EAAE,GAAGD,GAAO,IACvDA,IAAQ,OAAO,OAAaE,EAAaD,EAAE,WAAW,EAAE,IAAID,IAAQ,MAAM,QAAQ,CAAC,GAAG,IACnFE,EAAaD,EAAE,WAAW,EAAE,IAAID,IAAQ,OAAO,MAAM,QAAQ,CAAC,EAAA,CAAG;AAC1E;AAGA,SAASG,EAAcC,GAAYC,GAA0B;AAC3D,MAAI,CAACA,EAAQ,QAAO;AACpB,QAAMC,IAAQD,EACX,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,OAAO,YAAA,CAAa,EACjC,OAAO,OAAO;AACjB,MAAI,CAACC,EAAM,OAAQ,QAAO;AAC1B,QAAMC,IAAOH,EAAK,KAAK,YAAA,GACjBI,IAAOJ,EAAK,KAAK,YAAA;AACvB,SAAOE,EAAM,KAAK,CAACG,MACbA,EAAK,WAAW,GAAG,IAAUF,EAAK,SAASE,CAAI,IAC/CA,EAAK,SAAS,IAAI,IAAUD,EAAK,WAAWC,EAAK,MAAM,GAAG,EAAE,CAAC,IAC1DD,MAASC,CACjB;AACH;AAMO,MAAMC,IAAaC,EAA4C,SACpE,EAAE,QAAAN,GAAQ,UAAAO,GAAU,SAAAC,GAAS,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,WAAAC,EAAA,GACxEC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAA,GACV,CAACC,GAAUC,CAAW,IAAIC,EAAiB,CAAA,CAAE,GAC7C,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK,GAGhCG,IAAYR,EAAO,CAAC,GACpBS,IAAQnB,KAASa,GAEjBO,IAASC;AAAA,IACb,CAACC,MAAiB;AAChB,MAAItB,MAAU,UAAWc,EAAYQ,CAAI,GACzCrB,KAAA,QAAAA,EAAWqB;AAAA,IACb;AAAA,IACA,CAACrB,GAAUD,CAAK;AAAA,EAAA,GAGZuB,IAAWF;AAAA,IACf,CAACG,MAAgC;AAC/B,YAAMC,IAAmB,CAAA,GACnBC,IAAmB,CAAA,GACnBC,IAAoB,CAAA;AAC1B,iBAAWC,KAAK,MAAM,KAAKJ,CAAQ;AACjC,QAAKnC,EAAcuC,GAAGrC,CAAM,IACnBQ,KAAW6B,EAAE,OAAO7B,IAAS2B,EAAS,KAAKE,CAAC,IAChDH,EAAS,KAAKG,CAAC,IAFWD,EAAU,KAAKC,CAAC;AAMjD,MAFID,EAAU,WAAQzB,KAAA,QAAAA,EAAWyB,GAAW,UACxCD,EAAS,WAAQxB,KAAA,QAAAA,EAAWwB,GAAU,UACrCD,EAAS,UACdL,EAAOtB,IAAW,CAAC,GAAGqB,GAAO,GAAGM,CAAQ,IAAIA,EAAS,MAAM,GAAG,CAAC,CAAC;AAAA,IAClE;AAAA,IACA,CAAClC,GAAQ4B,GAAOpB,GAASD,GAAUI,GAAUkB,CAAM;AAAA,EAAA,GAG/CS,IAAS,CAACC,MAAgBV,EAAOD,EAAM,OAAO,CAACY,GAAGC,MAAMA,MAAMF,CAAG,CAAC,GAElEG,IAAS,CAAC,MAAwC;AAItD,IAHA,EAAE,eAAA,GACFf,EAAU,UAAU,GACpBD,EAAQ,EAAK,GACT,CAAAb,KACJmB,EAAS,EAAE,aAAa,KAAK;AAAA,EAC/B;AAEA,2BACG,OAAA,EAAI,KAAAjB,GAAU,WAAW4B,EAAG,uBAAuB7B,CAAS,GAC3D,UAAA;AAAA,IAAA,gBAAA8B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASxB;AAAA,QACT,aAAa,MAAM;AACjB,UAAAO,EAAU,WAAW,GAChBd,KAAUa,EAAQ,EAAI;AAAA,QAC7B;AAAA,QACA,YAAY,CAAC,MAAM,EAAE,eAAA;AAAA,QACrB,aAAa,MAAM;AACjB,UAAAC,EAAU,UAAU,KAAK,IAAI,GAAGA,EAAU,UAAU,CAAC,GACjDA,EAAU,YAAY,KAAGD,EAAQ,EAAK;AAAA,QAC5C;AAAA,QACA,QAAAgB;AAAA,QACA,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAlB,KAAQ;AAAA,UACRZ,KAAY;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAA,gBAAAgC,EAACC,GAAA,EAAO,WAAU,gCAA+B,eAAW,IAAC;AAAA,UAC7D,gBAAAF,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,YAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAuB,UAAA7B,EAAQ,WAAW,MAAK;AAAA,YAC3DJ,KAAQ,gBAAAiC,EAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAjC,EAAA,CAAK;AAAA,UAAA,GAC9D;AAAA,UACA,gBAAAiC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK3B;AAAA,cACL,IAAIE;AAAA,cACJ,MAAK;AAAA,cACL,QAAApB;AAAA,cACA,UAAAO;AAAA,cACA,UAAAM;AAAA,cACA,WAAU;AAAA,cACV,UAAU,CAAC,MAAM;AACf,gBAAI,EAAE,OAAO,SAAOmB,EAAS,EAAE,OAAO,KAAK,GAE3C,EAAE,OAAO,QAAQ;AAAA,cACnB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDJ,EAAM,SAAS,KACd,gBAAAiB,EAAC,MAAA,EAAG,WAAU,uBACX,UAAAjB,EAAM,IAAI,CAAC7B,GAAMwC,MAChB,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAC,EAACE,GAAA,EAAS,WAAU,yCAAwC,eAAW,IAAC;AAAA,UACxE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,YAAA,gBAAAC,EAAC,OAAE,WAAU,oBAAmB,OAAO9C,EAAK,MACzC,YAAK,KAAA,CACR;AAAA,YACA,gBAAA8C,EAAC,OAAE,WAAU,iCACV,YAAW9C,EAAK,MAAMiB,EAAQ,UAAU,EAAA,CAC3C;AAAA,UAAA,GACF;AAAA,UACA,gBAAA6B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAMP,EAAOC,CAAG;AAAA,cACzB,WAAU;AAAA,cACV,cAAY1C,EAAamB,EAAQ,WAAW,QAAQ,EAAE,MAAMjB,EAAK,MAAM;AAAA,cAEvE,UAAA,gBAAA8C,EAAC,GAAA,EAAE,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,MAAA;AAAA,MAnBK,GAAG9C,EAAK,IAAI,IAAIA,EAAK,IAAI,IAAIA,EAAK,YAAY,IAAIwC,CAAG;AAAA,IAAA,CAqB7D,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;AACDlC,EAAW,cAAc;"}

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+import { ControllerProps, FieldPath, FieldValues, FormProviderProps } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+/**
+ * Form context provider. Spread the `useForm()` return value into it, exactly
+ * like react-hook-form's `FormProvider` — plus one shared live region for
+ * validation announcements.
+ */
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown, TTransformedValues = TFieldValues>({ children, ...form }: FormProviderProps<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var displayName: string;
+}
+export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+export declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+    hasDescription: boolean;
+};
+export declare const FormItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const FormLabel: import('react').ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export declare const FormControl: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare const FormDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+/**
+ * Field-level validation message. Not a live region on its own — it is
+ * referenced from the control via `aria-describedby`, and the form's single
+ * live region announces changes.
+ */
+export declare const FormError: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;