@craftzbay/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as s, useContext as v, createContext as y } from "react";
+import { Drawer as a } from "vaul";
+import { X as N } from "../../icons/index.js";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as C } from "../../hooks/use-strings.js";
+import { withReturnFocus as z } from "../../lib/return-focus.js";
+const m = y("bottom"), T = ({
+  shouldScaleBackground: t = !0,
+  direction: e = "bottom",
+  ...o
+}) => /* @__PURE__ */ r(m.Provider, { value: e, children: /* @__PURE__ */ r(
+  a.Root,
+  {
+    shouldScaleBackground: t,
+    direction: e,
+    ...o
+  }
+) });
+T.displayName = "Drawer";
+const I = a.Trigger, F = a.Portal, J = a.Close, f = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
+    a.Overlay,
+    {
+      ref: l,
+      className: n("bg-overlay fixed inset-0 z-[var(--z-overlay)]", e),
+      ...o
+    }
+  );
+});
+f.displayName = "DrawerOverlay";
+const O = {
+  bottom: "inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90dvh] flex-col rounded-t-xl border-t border-border pb-[env(safe-area-inset-bottom)]",
+  top: "inset-x-0 top-0 mb-24 flex h-auto max-h-[90dvh] flex-col rounded-b-xl border-b border-border",
+  left: "inset-y-0 left-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-r-xl border-r border-border pl-[env(safe-area-inset-left)]",
+  right: "inset-y-0 right-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-l-xl border-l border-border pr-[env(safe-area-inset-right)]"
+}, j = {
+  bottom: "mx-auto mt-3 h-1.5 w-12 rounded-full bg-border",
+  top: "mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last",
+  left: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0",
+  right: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch"
+}, k = s(function({
+  className: e,
+  direction: o,
+  hideHandle: l,
+  showClose: u = !0,
+  returnFocusTo: x,
+  onCloseAutoFocus: b,
+  children: w,
+  ...h
+}, g) {
+  const p = v(m), i = o ?? p, D = C(), d = i === "left" || i === "right";
+  return /* @__PURE__ */ c(F, { children: [
+    /* @__PURE__ */ r(f, {}),
+    /* @__PURE__ */ c(
+      a.Content,
+      {
+        ref: g,
+        onCloseAutoFocus: z(x, b),
+        className: n(
+          "bg-card fixed z-[var(--z-modal)]",
+          O[i],
+          d && "flex-row",
+          e
+        ),
+        ...h,
+        children: [
+          !l && /* @__PURE__ */ r("div", { "aria-hidden": !0, className: j[i] }),
+          /* @__PURE__ */ r("div", { className: n("min-h-0 min-w-0 flex-1", d && "flex flex-col"), children: w }),
+          u && /* @__PURE__ */ r(
+            a.Close,
+            {
+              "aria-label": D.drawer.close,
+              className: n(
+                "text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md",
+                "hover:bg-background-muted hover:text-foreground",
+                "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                "transition-colors duration-[var(--duration-fast)]"
+              ),
+              children: /* @__PURE__ */ r(N, { className: "size-4", "aria-hidden": !0 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+k.displayName = "DrawerContent";
+function H({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: n("grid gap-1 p-4 text-center sm:text-left", t), ...e });
+}
+H.displayName = "DrawerHeader";
+function P({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: n("mt-auto flex flex-col gap-2 p-4", t), ...e });
+}
+P.displayName = "DrawerFooter";
+const R = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
+    a.Title,
+    {
+      ref: l,
+      className: n("text-lg font-semibold", e),
+      ...o
+    }
+  );
+});
+R.displayName = "DrawerTitle";
+const S = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
+    a.Description,
+    {
+      ref: l,
+      className: n("text-foreground-muted text-sm", e),
+      ...o
+    }
+  );
+});
+S.displayName = "DrawerDescription";
+export {
+  T as Drawer,
+  J as DrawerClose,
+  k as DrawerContent,
+  S as DrawerDescription,
+  P as DrawerFooter,
+  H as DrawerHeader,
+  f as DrawerOverlay,
+  F as DrawerPortal,
+  R as DrawerTitle,
+  I as DrawerTrigger
+};
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/ui/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport { Drawer as DrawerPrimitive } from 'vaul';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { withReturnFocus, type ReturnFocusRef } from '@/lib/return-focus';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\n// vaul needs `direction` on Root for its drag physics; DrawerContent reads it\n// back from here so the side only has to be declared once.\nconst DrawerDirectionContext = createContext<Direction>('bottom');\n\nexport const Drawer = ({\n  shouldScaleBackground = true,\n  direction = 'bottom',\n  ...props\n}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) => (\n  <DrawerDirectionContext.Provider value={direction}>\n    <DrawerPrimitive.Root\n      shouldScaleBackground={shouldScaleBackground}\n      direction={direction}\n      {...props}\n    />\n  </DrawerDirectionContext.Provider>\n);\nDrawer.displayName = 'Drawer';\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport const DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn('bg-overlay fixed inset-0 z-[var(--z-overlay)]', className)}\n      {...props}\n    />\n  );\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n\n// Edge-anchored sides pad by the matching safe-area inset (consumers set viewport-fit=cover).\nconst directionStyles: Record<Direction, string> = {\n  bottom:\n    'inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90dvh] flex-col rounded-t-xl border-t border-border pb-[env(safe-area-inset-bottom)]',\n  top: 'inset-x-0 top-0 mb-24 flex h-auto max-h-[90dvh] flex-col rounded-b-xl border-b border-border',\n  left: 'inset-y-0 left-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-r-xl border-r border-border pl-[env(safe-area-inset-left)]',\n  right:\n    'inset-y-0 right-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-l-xl border-l border-border pr-[env(safe-area-inset-right)]',\n};\n\nconst handleStyles: Record<Direction, string> = {\n  bottom: 'mx-auto mt-3 h-1.5 w-12 rounded-full bg-border',\n  top: 'mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last',\n  left: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0',\n  right: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch',\n};\n\nexport interface DrawerContentProps extends ComponentPropsWithoutRef<\n  typeof DrawerPrimitive.Content\n> {\n  /**\n   * Side the drawer slides in from. Prefer setting `direction` on `<Drawer>`\n   * (vaul needs it there for drag physics); this prop only overrides the\n   * visual placement.\n   */\n  direction?: Direction;\n  /** Hide the drag handle. */\n  hideHandle?: boolean;\n  /** Show the close (×) button. Default `true`. */\n  showClose?: boolean;\n  /**\n   * Element to focus when the overlay closes. Overrides Radix's default\n   * (the element focused when the content mounted), which is `<body>` for\n   * controlled overlays opened from a pointer click on a non-focusable /\n   * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and\n   * wins if it calls `preventDefault()`.\n   */\n  returnFocusTo?: ReturnFocusRef;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  DrawerContentProps\n>(function DrawerContent(\n  {\n    className,\n    direction: directionProp,\n    hideHandle,\n    showClose = true,\n    returnFocusTo,\n    onCloseAutoFocus,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const rootDirection = useContext(DrawerDirectionContext);\n  const direction = directionProp ?? rootDirection;\n  const strings = useStrings();\n  const isHorizontal = direction === 'left' || direction === 'right';\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        onCloseAutoFocus={withReturnFocus(returnFocusTo, onCloseAutoFocus)}\n        className={cn(\n          'bg-card fixed z-[var(--z-modal)]',\n          directionStyles[direction],\n          isHorizontal && 'flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {!hideHandle && <div aria-hidden className={handleStyles[direction]} />}\n        <div className={cn('min-h-0 min-w-0 flex-1', isHorizontal && 'flex flex-col')}>\n          {children}\n        </div>\n        {showClose && (\n          <DrawerPrimitive.Close\n            aria-label={strings.drawer.close}\n            className={cn(\n              'text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md',\n              'hover:bg-background-muted hover:text-foreground',\n              'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DrawerPrimitive.Close>\n        )}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\nDrawerContent.displayName = 'DrawerContent';\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('grid gap-1 p-4 text-center sm:text-left', className)} {...props} />;\n}\nDrawerHeader.displayName = 'DrawerHeader';\n\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n}\nDrawerFooter.displayName = 'DrawerFooter';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n});\nDrawerTitle.displayName = 'DrawerTitle';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nDrawerDescription.displayName = 'DrawerDescription';\n"],"names":["DrawerDirectionContext","createContext","Drawer","shouldScaleBackground","direction","props","jsx","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","forwardRef","className","ref","cn","directionStyles","handleStyles","DrawerContent","directionProp","hideHandle","showClose","returnFocusTo","onCloseAutoFocus","children","rootDirection","useContext","strings","useStrings","isHorizontal","jsxs","withReturnFocus","X","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":"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"}

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":"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"}

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

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

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

@@ -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

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

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

@@ -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

@@ -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. */