@craftzbay/ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,164 @@
+"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: "ml-auto size-4 text-foreground-subtle", "aria-hidden": !0 })
+      ]
+    }
+  );
+});
+b.displayName = "DropdownMenuSubTrigger";
+const w = i(function({ className: e, ...t }, n) {
+  return /* @__PURE__ */ r(
+    o.SubContent,
+    {
+      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",
+        "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(
+        "z-[var(--z-popover)] min-w-[12rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground 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: "size-4 text-accent", "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: "size-2 fill-accent text-accent", "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(
+        "px-2 py-1.5 text-xs font-medium text-foreground-subtle",
+        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("-mx-1 my-1 h-px bg-border", e),
+      ...t
+    }
+  );
+});
+C.displayName = "DropdownMenuSeparator";
+function I({ className: s, ...e }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: d("ml-auto text-xs tracking-widest text-foreground-subtle font-mono", 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(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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"}

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

@@ -0,0 +1,32 @@
+"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) {
+  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
+      ),
+      ...o,
+      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,
+          s
+        ] })
+      ]
+    }
+  );
+});
+x.displayName = "EmptyState";
+export {
+  x 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 { 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;"}

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

@@ -0,0 +1,48 @@
+"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) => ({
+  404: {
+    illustration: /* @__PURE__ */ r(b, { className: "size-32" }),
+    title: e.errorState.notFoundTitle,
+    description: e.errorState.notFoundDescription
+  },
+  500: {
+    illustration: /* @__PURE__ */ r(N, { className: "size-32" }),
+    title: e.errorState.serverTitle,
+    description: e.errorState.serverDescription
+  },
+  generic: {
+    illustration: /* @__PURE__ */ r(S, { 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(
+    "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
+      ),
+      ...m,
+      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 }) })
+      ]
+    }
+  );
+});
+E.displayName = "ErrorState";
+export {
+  E 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 { 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;"}

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+export type FileRejectReason = 'size' | 'type';
 export interface FileUploadProps {
     /** Accepted file types, e.g. `image/*` or `.pdf,.docx`. */
     accept?: string;
@@ -10,6 +11,8 @@ export interface FileUploadProps {
     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. */

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

@@ -0,0 +1,108 @@
+"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`;
+}
+function q(s, i) {
+  if (!i) return !0;
+  const a = i.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(
+    (e) => {
+      l === void 0 && $(e), r == null || r(e);
+    },
+    [r, l]
+  ), w = F(
+    (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));
+    },
+    [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);
+  };
+  return /* @__PURE__ */ m("div", { ref: z, className: k("flex flex-col gap-3", U), children: [
+    /* @__PURE__ */ m(
+      "label",
+      {
+        htmlFor: N,
+        onDragOver: (e) => {
+          e.preventDefault(), p || g(!0);
+        },
+        onDragLeave: () => g(!1),
+        onDrop: I,
+        className: k(
+          "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",
+          "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"
+        ),
+        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__ */ t(
+            "input",
+            {
+              ref: D,
+              id: N,
+              type: "file",
+              accept: i,
+              multiple: a,
+              disabled: p,
+              className: "sr-only",
+              onChange: (e) => {
+                e.target.files && w(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(
+      "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__ */ t(
+            "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 })
+            }
+          )
+        ]
+      },
+      `${e.name}-${o}`
+    )) })
+  ] });
+});
+E.displayName = "FileUpload";
+export {
+  E 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 } 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) {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\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  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    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        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setOver(true);\n        }}\n        onDragLeave={() => setOver(false)}\n        onDrop={onDrop}\n        className={cn(\n          'group relative flex cursor-pointer flex-col items-center justify-center gap-2',\n          'border-border 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}-${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\">{formatSize(file.size)}</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 rounded-sm p-1 outline-none focus-visible:ring-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","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","files","update","useCallback","next","addFiles","incoming","accepted","tooLarge","wrongType","f","remove","idx","_","i","onDrop","cn","jsxs","jsx","Upload","FileIcon","formatString","X"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ export declare function useFormField(): {
     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>>;

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

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as a, useContext as f, useEffect as I, useId as g, useState as b, createContext as F } from "react";
+import * as h from "@radix-ui/react-label";
+import { FormProvider as v, Controller as D, useFormContext as N } from "react-hook-form";
+import { Slot as y } from "@radix-ui/react-slot";
+import { cn as c } from "../../lib/utils.js";
+const k = v, p = F(null);
+function q(n) {
+  return /* @__PURE__ */ m(p.Provider, { value: { name: n.name }, children: /* @__PURE__ */ m(D, { ...n }) });
+}
+const u = F(null);
+function d() {
+  const n = f(p), o = f(u), { getFieldState: s, formState: e } = N();
+  if (!n)
+    throw new Error("useFormField must be used inside <FormField>");
+  const i = s(n.name, e), r = (o == null ? void 0 : o.id) ?? "";
+  return {
+    id: r,
+    name: n.name,
+    formItemId: `${r}-item`,
+    formDescriptionId: `${r}-desc`,
+    formMessageId: `${r}-error`,
+    hasDescription: (o == null ? void 0 : o.hasDescription) ?? !1,
+    ...i
+  };
+}
+const C = a(
+  function({ className: o, ...s }, e) {
+    const i = g(), [r, t] = b(!1);
+    return /* @__PURE__ */ m(u.Provider, { value: { id: i, hasDescription: r, setHasDescription: t }, children: /* @__PURE__ */ m("div", { ref: e, className: c("flex flex-col gap-1.5", o), ...s }) });
+  }
+);
+C.displayName = "FormItem";
+const P = a(function({ className: o, ...s }, e) {
+  const { formItemId: i, error: r } = d();
+  return /* @__PURE__ */ m(
+    h.Root,
+    {
+      ref: e,
+      htmlFor: i,
+      className: c("text-foreground text-sm font-medium", r && "text-danger-text", o),
+      ...s
+    }
+  );
+});
+P.displayName = "FormLabel";
+const S = a(
+  function(o, s) {
+    const { error: e, formItemId: i, formDescriptionId: r, formMessageId: t, hasDescription: l } = d(), x = [l ? r : null, e ? t : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ m(
+      y,
+      {
+        ref: s,
+        id: i,
+        "aria-describedby": x,
+        "aria-invalid": !!e,
+        ...e ? { tone: "error" } : {},
+        ...o
+      }
+    );
+  }
+);
+S.displayName = "FormControl";
+const E = a(function({ className: o, ...s }, e) {
+  const { formDescriptionId: i } = d(), r = f(u), t = r == null ? void 0 : r.setHasDescription;
+  return I(() => (t == null || t(!0), () => t == null ? void 0 : t(!1)), [t]), /* @__PURE__ */ m(
+    "p",
+    {
+      ref: e,
+      id: i,
+      className: c("text-foreground-subtle text-xs", o),
+      ...s
+    }
+  );
+});
+E.displayName = "FormDescription";
+const L = a(
+  function({ className: o, children: s, ...e }, i) {
+    const { error: r, formMessageId: t } = d(), l = r ? String((r == null ? void 0 : r.message) ?? "") : s;
+    return l ? /* @__PURE__ */ m(
+      "p",
+      {
+        ref: i,
+        id: t,
+        role: "alert",
+        className: c("text-danger-text text-xs", o),
+        ...e,
+        children: l
+      }
+    ) : null;
+  }
+);
+L.displayName = "FormError";
+export {
+  k as Form,
+  S as FormControl,
+  E as FormDescription,
+  L as FormError,
+  q as FormField,
+  C as FormItem,
+  P as FormLabel,
+  d as useFormField
+};
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../src/components/ui/Form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  react-hook-form bindings + accessible label / description / error wiring.\n *\n *  Usage:\n *    const form = useForm<Values>(…);\n *    <Form {...form}>\n *      <FormField\n *        control={form.control}\n *        name=\"email\"\n *        render={({ field }) => (\n *          <FormItem>\n *            <FormLabel>Email</FormLabel>\n *            <FormControl><Input type=\"email\" {...field} /></FormControl>\n *            <FormDescription>We never share this.</FormDescription>\n *            <FormError />\n *          </FormItem>\n *        )}\n *      />\n *    </Form>\n * --------------------------------------------------------------------------- */\n\nexport const Form = FormProvider;\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name as string }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\ninterface FormItemContextValue {\n  id: string;\n  /** Whether a <FormDescription> is mounted — drives aria-describedby. */\n  hasDescription: boolean;\n  setHasDescription: (v: boolean) => void;\n}\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  if (!fieldContext) {\n    throw new Error('useFormField must be used inside <FormField>');\n  }\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const id = itemContext?.id ?? '';\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-item`,\n    formDescriptionId: `${id}-desc`,\n    formMessageId: `${id}-error`,\n    hasDescription: itemContext?.hasDescription ?? false,\n    ...fieldState,\n  };\n}\n\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, ...props }, ref) {\n    const id = useId();\n    const [hasDescription, setHasDescription] = useState(false);\n    return (\n      <FormItemContext.Provider value={{ id, hasDescription, setHasDescription }}>\n        <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nexport const FormLabel = forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function FormLabel({ className, ...props }, ref) {\n  const { formItemId, error } = useFormField();\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn('text-foreground text-sm font-medium', error && 'text-danger-text', className)}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nexport const FormControl = forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(\n  function FormControl(props, ref) {\n    const { error, formItemId, formDescriptionId, formMessageId, hasDescription } = useFormField();\n    // Only reference ids that actually render: the description when mounted,\n    // the message only while there is an error (FormError returns null otherwise).\n    const describedBy =\n      [hasDescription ? formDescriptionId : null, error ? formMessageId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    // Input-style children read `tone=\"error\"` for the red border; plain\n    // elements ignore the unknown prop via Slot merging only when they accept it,\n    // so it is only set while there is an error.\n    const toneProps = error ? { tone: 'error' as const } : {};\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={describedBy}\n        aria-invalid={!!error}\n        {...toneProps}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\n  const itemContext = useContext(FormItemContext);\n  const setHasDescription = itemContext?.setHasDescription;\n  useEffect(() => {\n    setHasDescription?.(true);\n    return () => setHasDescription?.(false);\n  }, [setHasDescription]);\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-foreground-subtle text-xs', className)}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\nexport const FormError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormError({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        role=\"alert\"\n        className={cn('text-danger-text text-xs', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormError.displayName = 'FormError';\n"],"names":["Form","FormProvider","FormFieldContext","createContext","FormField","props","jsx","Controller","FormItemContext","useFormField","fieldContext","useContext","itemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","forwardRef","className","ref","useId","hasDescription","setHasDescription","useState","cn","FormLabel","formItemId","error","LabelPrimitive","FormControl","formDescriptionId","formMessageId","describedBy","Slot","FormDescription","useEffect","FormError","children","body"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as a, Suspense as l, lazy as d } from "react";
+import i from "lucide-react/dynamicIconImports";
+const p = Object.keys(i), o = /* @__PURE__ */ new Map();
+function u(e) {
+  const t = o.get(e);
+  if (t) return t;
+  const c = d(i[e]);
+  return o.set(e, c), c;
+}
+function y({ name: e, fallback: t, ...c }) {
+  const s = a(() => u(e), [e]), r = t ?? /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": !0,
+      style: { display: "inline-block", width: c.size ?? "1em", height: c.size ?? "1em" }
+    }
+  );
+  return /* @__PURE__ */ n(l, { fallback: r, children: /* @__PURE__ */ n(s, { ...c }) });
+}
+export {
+  y as Icon,
+  p as iconNames
+};
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/ui/Icon.tsx"],"sourcesContent":["'use client';\n\nimport {\n  lazy,\n  Suspense,\n  useMemo,\n  type LazyExoticComponent,\n  type ReactNode,\n} from 'react';\nimport dynamicIconImports from 'lucide-react/dynamicIconImports';\nimport type { LucideIcon, LucideProps } from 'lucide-react';\n\n/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */\nexport type IconName = keyof typeof dynamicIconImports;\n\n/** All available icon names (useful for pickers and docs). */\nexport const iconNames = Object.keys(dynamicIconImports) as IconName[];\n\n// lazy() must return a stable component per name or React remounts (and\n// re-suspends) on every render.\nconst cache = new Map<IconName, LazyExoticComponent<LucideIcon>>();\n\nfunction getIcon(name: IconName): LazyExoticComponent<LucideIcon> {\n  const cached = cache.get(name);\n  if (cached) return cached;\n  const created = lazy(dynamicIconImports[name]);\n  cache.set(name, created);\n  return created;\n}\n\nexport interface IconProps extends Omit<LucideProps, 'ref'> {\n  /** Lucide icon name in kebab-case, e.g. `name=\"calendar\"`. Autocompletes. */\n  name: IconName;\n  /**\n   * Shown while the icon chunk loads (first use only — icons are cached).\n   * Defaults to an invisible square so layout doesn't shift.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * Name-addressed lucide icon. Use when the icon is dynamic (data-driven\n * nav items, user-configurable dashboards) or when importing components for\n * every icon is friction.\n *\n * Each icon is code-split and loaded on first use, so referencing the full\n * lucide set costs nothing up front — `<Icon name=\"rocket\" />` ships only\n * the rocket.\n *\n * @example\n *   <Icon name=\"calendar\" className=\"size-4\" />\n *   <Icon name=\"chevrons-up-down\" size={16} strokeWidth={1.5} />\n *\n * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.\n * @dont Reach for this in hot lists with hundreds of distinct icons on first\n *       paint — statically imported icons from `Icons` skip the lazy hop.\n */\nexport function Icon({ name, fallback, ...props }: IconProps) {\n  const LucideIcon = useMemo(() => getIcon(name), [name]);\n\n  const placeholder = fallback ?? (\n    <span\n      aria-hidden\n      style={{ display: 'inline-block', width: props.size ?? '1em', height: props.size ?? '1em' }}\n    />\n  );\n\n  return (\n    <Suspense fallback={placeholder}>\n      <LucideIcon {...props} />\n    </Suspense>\n  );\n}\n"],"names":["iconNames","dynamicIconImports","cache","getIcon","name","cached","created","lazy","Icon","fallback","props","LucideIcon","useMemo","placeholder","jsx","Suspense"],"mappings":";;;;AAgBO,MAAMA,IAAY,OAAO,KAAKC,CAAkB,GAIjDC,wBAAY,IAAA;AAElB,SAASC,EAAQC,GAAiD;AAChE,QAAMC,IAASH,EAAM,IAAIE,CAAI;AAC7B,MAAIC,EAAQ,QAAOA;AACnB,QAAMC,IAAUC,EAAKN,EAAmBG,CAAI,CAAC;AAC7C,SAAAF,EAAM,IAAIE,GAAME,CAAO,GAChBA;AACT;AA6BO,SAASE,EAAK,EAAE,MAAAJ,GAAM,UAAAK,GAAU,GAAGC,KAAoB;AAC5D,QAAMC,IAAaC,EAAQ,MAAMT,EAAQC,CAAI,GAAG,CAACA,CAAI,CAAC,GAEhDS,IAAcJ,KAClB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO,EAAE,SAAS,gBAAgB,OAAOJ,EAAM,QAAQ,OAAO,QAAQA,EAAM,QAAQ,MAAA;AAAA,IAAM;AAAA,EAAA;AAI9F,SACE,gBAAAI,EAACC,KAAS,UAAUF,GAClB,4BAACF,GAAA,EAAY,GAAGD,GAAO,EAAA,CACzB;AAEJ;"}

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { VariantProps } from '../../lib/cva';
+import { VariantProps } from '../../lib/cva.js';
 declare const iconButton: (props?: ({
     variant?: "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;