@craftzbay/ui 0.8.1 → 0.10.0

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

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as d, useState as p, useEffect as f } from "react";
+import { Command as m } from "cmdk";
+import * as i from "@radix-ui/react-dialog";
+import { Search as g } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStrings as x } from "../../hooks/use-strings.js";
+const u = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ n(
+    m,
+    {
+      ref: o,
+      className: r(
+        "flex h-full w-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground",
+        e
+      ),
+      ...t
+    }
+  );
+});
+u.displayName = "Command";
+const y = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-2 border-b border-border px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ n(g, { className: "size-4 shrink-0 text-foreground-subtle", "aria-hidden": !0 }),
+    /* @__PURE__ */ n(
+      m.Input,
+      {
+        ref: o,
+        className: r(
+          "flex h-11 w-full bg-transparent py-3 text-sm outline-none",
+          "placeholder:text-foreground-subtle disabled:cursor-not-allowed disabled:opacity-50",
+          e
+        ),
+        ...t
+      }
+    )
+  ] });
+});
+y.displayName = "CommandInput";
+const b = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ n(
+    m.List,
+    {
+      ref: o,
+      className: r("max-h-[320px] overflow-y-auto p-1", e),
+      ...t
+    }
+  );
+});
+b.displayName = "CommandList";
+const C = d(function(e, t) {
+  return /* @__PURE__ */ n(
+    m.Empty,
+    {
+      ref: t,
+      className: "py-8 text-center text-sm text-foreground-subtle",
+      ...e
+    }
+  );
+});
+C.displayName = "CommandEmpty";
+const h = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ n(
+    m.Group,
+    {
+      ref: o,
+      className: r(
+        "overflow-hidden text-foreground p-1",
+        "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+        "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "[&_[cmdk-group-heading]]:text-foreground-subtle",
+        e
+      ),
+      ...t
+    }
+  );
+});
+h.displayName = "CommandGroup";
+const v = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ n(
+    m.Separator,
+    {
+      ref: o,
+      className: r("-mx-1 my-1 h-px bg-border", e),
+      ...t
+    }
+  );
+});
+v.displayName = "CommandSeparator";
+const N = d(function({ className: e, ...t }, o) {
+  return /* @__PURE__ */ n(
+    m.Item,
+    {
+      ref: o,
+      className: r(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none",
+        "data-[selected=true]:bg-background-muted data-[selected=true]:text-foreground",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "[&_svg]:size-4 [&_svg]:text-foreground-subtle",
+        e
+      ),
+      ...t
+    }
+  );
+});
+N.displayName = "CommandItem";
+function E({ children: a, className: e }) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: r(
+        "ml-auto inline-flex items-center gap-0.5 text-xs tracking-widest text-foreground-subtle font-mono",
+        e
+      ),
+      children: a
+    }
+  );
+}
+function L({ open: a, onOpenChange: e, children: t, title: o }) {
+  const s = x();
+  return /* @__PURE__ */ n(i.Root, { open: a, onOpenChange: e, children: /* @__PURE__ */ l(i.Portal, { children: [
+    /* @__PURE__ */ n(
+      i.Overlay,
+      {
+        className: r(
+          "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ l(
+      i.Content,
+      {
+        "aria-describedby": void 0,
+        className: r(
+          "fixed left-1/2 top-[20%] z-[var(--z-modal)] -translate-x-1/2",
+          "w-[calc(100%-2rem)] max-w-[640px] overflow-hidden",
+          "rounded-lg border border-border bg-popover text-popover-foreground shadow-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
+        ),
+        children: [
+          /* @__PURE__ */ n(i.Title, { className: "sr-only", children: o ?? s.commandDialog.title }),
+          /* @__PURE__ */ n(u, { children: t })
+        ]
+      }
+    )
+  ] }) });
+}
+function D(a) {
+  const [e, t] = p(0);
+  f(() => {
+    const o = (s) => {
+      s.key === "k" && (s.metaKey || s.ctrlKey) && (s.preventDefault(), a(!0), t((c) => c + 1));
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [a]);
+}
+export {
+  u as Command,
+  L as CommandDialog,
+  C as CommandEmpty,
+  h as CommandGroup,
+  y as CommandInput,
+  N as CommandItem,
+  b as CommandList,
+  v as CommandSeparator,
+  E as CommandShortcut,
+  D as useCommandPaletteShortcut
+};
+//# sourceMappingURL=CommandPalette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../../src/components/ui/CommandPalette.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Search } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  CommandPalette is a Dialog hosting a `cmdk` Command. It supports grouped\n *  items, keyboard navigation (handled by cmdk), an empty state, and a\n *  pluggable list of \"recent\" items shown when the search input is empty.\n * --------------------------------------------------------------------------- */\n\nexport const Command = forwardRef<\n  ElementRef<typeof CommandPrimitive>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(function Command({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive\n      ref={ref}\n      className={cn(\n        'flex h-full w-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommand.displayName = 'Command';\n\nexport const CommandInput = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(function CommandInput({ className, ...props }, ref) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"size-4 shrink-0 text-foreground-subtle\" aria-hidden />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-11 w-full bg-transparent py-3 text-sm outline-none',\n          'placeholder:text-foreground-subtle disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nCommandInput.displayName = 'CommandInput';\n\nexport const CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(function CommandList({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      className={cn('max-h-[320px] overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n});\nCommandList.displayName = 'CommandList';\n\nexport const CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(function CommandEmpty(props, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      className=\"py-8 text-center text-sm text-foreground-subtle\"\n      {...props}\n    />\n  );\n});\nCommandEmpty.displayName = 'CommandEmpty';\n\nexport const CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(function CommandGroup({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      className={cn(\n        'overflow-hidden text-foreground p-1',\n        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5',\n        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n        '[&_[cmdk-group-heading]]:text-foreground-subtle',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommandGroup.displayName = 'CommandGroup';\n\nexport const CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(function CommandSeparator({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\nCommandSeparator.displayName = 'CommandSeparator';\n\nexport const CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(function CommandItem({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      className={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-[selected=true]:bg-background-muted data-[selected=true]:text-foreground',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n        '[&_svg]:size-4 [&_svg]:text-foreground-subtle',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommandItem.displayName = 'CommandItem';\n\nexport function CommandShortcut({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <span\n      className={cn(\n        'ml-auto inline-flex items-center gap-0.5 text-xs tracking-widest text-foreground-subtle font-mono',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\n/* -----------------------------------------------------------------------------\n *  Dialog wrapper — a ready-to-use ⌘K palette.\n * --------------------------------------------------------------------------- */\n\nexport interface CommandDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n  /** Visible label for screen readers. */\n  title?: string;\n}\n\nexport function CommandDialog({ open, onOpenChange, children, title }: CommandDialogProps) {\n  const strings = useStrings();\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className={cn(\n            'fixed inset-0 z-[var(--z-overlay)] bg-overlay',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n          )}\n        />\n        <DialogPrimitive.Content\n          aria-describedby={undefined}\n          className={cn(\n            'fixed left-1/2 top-[20%] z-[var(--z-modal)] -translate-x-1/2',\n            'w-[calc(100%-2rem)] max-w-[640px] overflow-hidden',\n            'rounded-lg border border-border bg-popover text-popover-foreground shadow-lg',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n            'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',\n          )}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">\n            {title ?? strings.commandDialog.title}\n          </DialogPrimitive.Title>\n          <Command>{children}</Command>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n/**\n * Hook that wires ⌘K / Ctrl+K to a setter — the canonical way to mount the\n * palette in an app shell.\n *\n * @example\n *   const [open, setOpen] = useState(false);\n *   useCommandPaletteShortcut(setOpen);\n *   …\n *   <CommandDialog open={open} onOpenChange={setOpen}>\n *     <CommandInput placeholder=\"Type a command…\" />\n *     <CommandList>\n *       <CommandEmpty>No results.</CommandEmpty>\n *       <CommandGroup heading=\"Suggestions\">\n *         <CommandItem>Create project</CommandItem>\n *         <CommandItem>Invite teammate</CommandItem>\n *       </CommandGroup>\n *     </CommandList>\n *   </CommandDialog>\n *\n * @do Group items by category. Show \"Recent\" first when the query is empty.\n * @dont Hide essential actions behind the palette only — keep at least one\n *       button entry in the UI.\n */\nexport function useCommandPaletteShortcut(setOpen: (open: boolean) => void): void {\n  const [_, force] = useState(0);\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen(true);\n        force((n) => n + 1);\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [setOpen]);\n}\n"],"names":["Command","forwardRef","className","props","ref","jsx","CommandPrimitive","cn","CommandInput","jsxs","Search","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","children","CommandDialog","open","onOpenChange","title","strings","useStrings","DialogPrimitive","useCommandPaletteShortcut","setOpen","_","force","useState","useEffect","onKey","e","n"],"mappings":"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"}

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

@@ -0,0 +1,150 @@
+"use client";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import * as t from "@radix-ui/react-context-menu";
+import { Check as l, Circle as m, ChevronRight as x } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+const k = t.Root, w = t.Trigger, T = t.Group, p = t.Portal, j = t.Sub, G = t.RadioGroup, d = r(
+  "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"
+), C = s(function({ className: e, children: n, ...o }, i) {
+  return /* @__PURE__ */ c(
+    t.SubTrigger,
+    {
+      ref: i,
+      className: r(d, "data-[state=open]:bg-background-muted", e),
+      ...o,
+      children: [
+        n,
+        /* @__PURE__ */ a(x, { className: "ml-auto size-4 text-foreground-subtle", "aria-hidden": !0 })
+      ]
+    }
+  );
+});
+C.displayName = "ContextMenuSubTrigger";
+const g = s(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(
+    t.SubContent,
+    {
+      ref: o,
+      className: r(
+        "z-[var(--z-popover)] min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        e
+      ),
+      ...n
+    }
+  );
+});
+g.displayName = "ContextMenuSubContent";
+const b = s(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(p, { children: /* @__PURE__ */ a(
+    t.Content,
+    {
+      ref: o,
+      className: r(
+        "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",
+        e
+      ),
+      ...n
+    }
+  ) });
+});
+b.displayName = "ContextMenuContent";
+const f = s(function({ className: e, destructive: n, ...o }, i) {
+  return /* @__PURE__ */ a(
+    t.Item,
+    {
+      ref: i,
+      className: r(
+        d,
+        n && "text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text",
+        e
+      ),
+      ...o
+    }
+  );
+});
+f.displayName = "ContextMenuItem";
+const h = s(function({ className: e, children: n, ...o }, i) {
+  return /* @__PURE__ */ c(
+    t.CheckboxItem,
+    {
+      ref: i,
+      className: r(d, "pl-8", e),
+      ...o,
+      children: [
+        /* @__PURE__ */ a("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ a(t.ItemIndicator, { children: /* @__PURE__ */ a(l, { className: "size-4 text-accent", "aria-hidden": !0 }) }) }),
+        n
+      ]
+    }
+  );
+});
+h.displayName = "ContextMenuCheckboxItem";
+const M = s(function({ className: e, children: n, ...o }, i) {
+  return /* @__PURE__ */ c(
+    t.RadioItem,
+    {
+      ref: i,
+      className: r(d, "pl-8", e),
+      ...o,
+      children: [
+        /* @__PURE__ */ a("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ a(t.ItemIndicator, { children: /* @__PURE__ */ a(m, { className: "size-2 fill-accent text-accent", "aria-hidden": !0 }) }) }),
+        n
+      ]
+    }
+  );
+});
+M.displayName = "ContextMenuRadioItem";
+const N = s(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(
+    t.Label,
+    {
+      ref: o,
+      className: r("px-2 py-1.5 text-xs font-medium text-foreground-subtle", e),
+      ...n
+    }
+  );
+});
+N.displayName = "ContextMenuLabel";
+const I = s(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(
+    t.Separator,
+    {
+      ref: o,
+      className: r("-mx-1 my-1 h-px bg-border", e),
+      ...n
+    }
+  );
+});
+I.displayName = "ContextMenuSeparator";
+function S({ className: u, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: r("ml-auto text-xs tracking-widest text-foreground-subtle font-mono", u),
+      ...e
+    }
+  );
+}
+S.displayName = "ContextMenuShortcut";
+export {
+  k as ContextMenu,
+  h as ContextMenuCheckboxItem,
+  b as ContextMenuContent,
+  T as ContextMenuGroup,
+  f as ContextMenuItem,
+  N as ContextMenuLabel,
+  p as ContextMenuPortal,
+  G as ContextMenuRadioGroup,
+  M as ContextMenuRadioItem,
+  I as ContextMenuSeparator,
+  S as ContextMenuShortcut,
+  j as ContextMenuSub,
+  g as ContextMenuSubContent,
+  C as ContextMenuSubTrigger,
+  w as ContextMenuTrigger
+};
+//# sourceMappingURL=ContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/ui/ContextMenu.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu';\nimport { Check, ChevronRight, Circle } from '@/icons';\nimport { cn } from '@/lib/utils';\n\n/**\n * Right-click (or two-finger tap) menu. Visual surface mirrors DropdownMenu\n * for consistency.\n *\n * @example\n *   <ContextMenu>\n *     <ContextMenuTrigger asChild>\n *       <div className=\"grid h-32 place-items-center rounded-lg border border-border\">\n *         Right-click me\n *       </div>\n *     </ContextMenuTrigger>\n *     <ContextMenuContent>\n *       <ContextMenuItem>Open</ContextMenuItem>\n *       <ContextMenuSeparator />\n *       <ContextMenuItem destructive>Delete</ContextMenuItem>\n *     </ContextMenuContent>\n *   </ContextMenu>\n *\n * @do Mirror DropdownMenu items for the same surface — users expect the same\n *      operations from both.\n * @dont Hide critical actions behind right-click — they must also exist in\n *       a visible button or menu.\n */\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\nexport const ContextMenuGroup = ContextMenuPrimitive.Group;\nexport const ContextMenuPortal = ContextMenuPrimitive.Portal;\nexport const ContextMenuSub = ContextMenuPrimitive.Sub;\nexport const ContextMenuRadioGroup = ContextMenuPrimitive.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);\n\nexport const ContextMenuSubTrigger = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>\n>(function ContextMenuSubTrigger({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(itemClasses, 'data-[state=open]:bg-background-muted', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4 text-foreground-subtle\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n});\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\n\nexport const ContextMenuSubContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(function ContextMenuSubContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.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        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuSubContent.displayName = 'ContextMenuSubContent';\n\nexport const ContextMenuContent = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(function ContextMenuContent({ className, ...props }, ref) {\n  return (\n    <ContextMenuPortal>\n      <ContextMenuPrimitive.Content\n        ref={ref}\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          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPortal>\n  );\n});\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport const ContextMenuItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { destructive?: boolean }\n>(function ContextMenuItem({ className, destructive, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemClasses,\n        destructive &&\n          'text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nContextMenuItem.displayName = 'ContextMenuItem';\n\nexport const ContextMenuCheckboxItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\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        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-accent\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n});\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\n\nexport const ContextMenuRadioItem = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(function ContextMenuRadioItem({ className, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.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        <ContextMenuPrimitive.ItemIndicator>\n          <Circle className=\"size-2 fill-accent text-accent\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n});\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\n\nexport const ContextMenuLabel = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>\n>(function ContextMenuLabel({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Label\n      ref={ref}\n      className={cn('px-2 py-1.5 text-xs font-medium text-foreground-subtle', className)}\n      {...props}\n    />\n  );\n});\nContextMenuLabel.displayName = 'ContextMenuLabel';\n\nexport const ContextMenuSeparator = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(function ContextMenuSeparator({ className, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.Separator\n      ref={ref}\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\nexport function ContextMenuShortcut({ 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}\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n"],"names":["ContextMenu","ContextMenuPrimitive","ContextMenuTrigger","ContextMenuGroup","ContextMenuPortal","ContextMenuSub","ContextMenuRadioGroup","itemClasses","cn","ContextMenuSubTrigger","forwardRef","className","children","props","ref","jsxs","jsx","ChevronRight","ContextMenuSubContent","ContextMenuContent","ContextMenuItem","destructive","ContextMenuCheckboxItem","Check","ContextMenuRadioItem","Circle","ContextMenuLabel","ContextMenuSeparator","ContextMenuShortcut"],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useState as x, useMemo as v } from "react";
+import { Settings as C } from "../../icons/index.js";
+import { cn as c } from "../../lib/utils.js";
+import { useStrings as N } from "../../hooks/use-strings.js";
+import { DropdownMenu as S, DropdownMenuTrigger as T, DropdownMenuContent as D, DropdownMenuLabel as M, DropdownMenuSeparator as G, DropdownMenuCheckboxItem as H } from "./DropdownMenu.js";
+import { IconButton as j } from "./IconButton.js";
+import { Input as I } from "./Input.js";
+import { Table as R, TableHeader as B, TableRow as o, TableSortHeader as L, TableHead as A, TableBody as K, TableCell as m } from "./Table.js";
+import { Skeleton as P } from "./Skeleton.js";
+function U({
+  columns: h,
+  rows: p,
+  loading: g,
+  sort: b,
+  onSortChange: u,
+  filter: a,
+  emptyState: f,
+  className: y
+}) {
+  const n = N(), [s, k] = x({}), t = v(() => h.filter((e) => !s[e.key]), [h, s]), w = () => g ? Array.from({ length: 5 }).map((e, l) => /* @__PURE__ */ r(o, { children: t.map((i) => /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(P, { variant: "text", className: "w-3/4" }) }, i.key)) }, `skel-${l}`)) : p.length === 0 ? /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(m, { colSpan: t.length, className: "h-32 text-center", children: f ?? /* @__PURE__ */ r("span", { className: "text-foreground-subtle", children: n.dataGrid.empty }) }) }) : p.map((e) => /* @__PURE__ */ r(o, { children: t.map((l) => /* @__PURE__ */ r(
+    m,
+    {
+      className: c(l.align === "right" && "text-right tabular"),
+      children: l.cell ? l.cell(e) : e[l.key]
+    },
+    l.key
+  )) }, e.id));
+  return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-3", y), children: [
+    /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2", children: [
+      a ? /* @__PURE__ */ r(
+        I,
+        {
+          type: "search",
+          placeholder: a.placeholder ?? n.dataGrid.filterPlaceholder,
+          value: a.value,
+          onChange: (e) => a.onChange(e.target.value),
+          clearable: !0,
+          onClear: () => a.onChange(""),
+          className: "max-w-sm w-full",
+          hideLabel: !0,
+          label: n.dataGrid.filterRows
+        }
+      ) : /* @__PURE__ */ r("div", {}),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ d(S, { children: [
+        /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(j, { "aria-label": n.dataGrid.columnVisibility, icon: /* @__PURE__ */ r(C, {}), variant: "outline" }) }),
+        /* @__PURE__ */ d(D, { children: [
+          /* @__PURE__ */ r(M, { children: n.dataGrid.columns }),
+          /* @__PURE__ */ r(G, {}),
+          h.map((e) => /* @__PURE__ */ r(
+            H,
+            {
+              checked: !s[e.key],
+              onCheckedChange: (l) => k((i) => ({ ...i, [e.key]: !l })),
+              children: e.header
+            },
+            e.key
+          ))
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "rounded-lg border border-border overflow-hidden", children: /* @__PURE__ */ d(R, { children: [
+      /* @__PURE__ */ r("colgroup", { children: t.map((e) => /* @__PURE__ */ r("col", { style: e.width ? { width: e.width } : void 0 }, e.key)) }),
+      /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(o, { children: t.map(
+        (e) => e.sortable && u ? /* @__PURE__ */ r(
+          L,
+          {
+            sortKey: e.key,
+            currentSort: b ?? null,
+            onSortChange: (l, i) => u({ key: l, direction: i }),
+            children: e.header
+          },
+          e.key
+        ) : /* @__PURE__ */ r(A, { className: c(e.align === "right" && "text-right"), children: e.header }, e.key)
+      ) }) }),
+      /* @__PURE__ */ r(K, { children: w() })
+    ] }) })
+  ] });
+}
+export {
+  U as DataGrid
+};
+//# sourceMappingURL=DataGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/ui/DataGrid.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState, type ReactNode } from 'react';\nimport { Settings } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './DropdownMenu';\nimport { IconButton } from './IconButton';\nimport { Input } from './Input';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableSortHeader,\n} from './Table';\nimport { Skeleton } from './Skeleton';\n\nexport interface DataGridColumn<TRow> {\n  /** Stable key used for visibility, sort, and React lists. */\n  key: string;\n  /** Header label. */\n  header: ReactNode;\n  /** Render the cell. Defaults to the value at `row[key]`. */\n  cell?: (row: TRow) => ReactNode;\n  /** Cell width — passed to `<col>` so the grid keeps shape during loading. */\n  width?: string;\n  /** Allow sorting on this column. */\n  sortable?: boolean;\n  /** Right-align numeric / monetary columns. */\n  align?: 'left' | 'right';\n}\n\nexport interface DataGridProps<TRow extends { id: string | number }> {\n  columns: DataGridColumn<TRow>[];\n  rows: TRow[];\n  loading?: boolean;\n  /** Initial sort state. */\n  sort?: { key: string; direction: 'asc' | 'desc' } | null;\n  onSortChange?: (sort: { key: string; direction: 'asc' | 'desc' }) => void;\n  /** Show a filter input row above the grid. */\n  filter?: { value: string; onChange: (q: string) => void; placeholder?: string };\n  /** Empty-state node when no rows are visible. */\n  emptyState?: ReactNode;\n  className?: string;\n}\n\n/**\n * Composite grid built from `Table` + DropdownMenu + Input. Provides\n * column visibility toggle, an inline filter, sortable headers, and\n * loading / empty states.\n *\n * @example\n *   <DataGrid\n *     columns={[\n *       { key: 'name', header: 'Name', sortable: true },\n *       { key: 'status', header: 'Status', cell: r => <Badge tone={...}>{r.status}</Badge> },\n *       { key: 'updatedAt', header: 'Updated', align: 'right' },\n *     ]}\n *     rows={rows}\n *     filter={{ value: q, onChange: setQ }}\n *     sort={sort}\n *     onSortChange={setSort}\n *   />\n *\n * @do Provide a meaningful empty state with a primary action when the grid\n *      starts empty (no items at all, not just filtered out).\n * @dont Render thousands of rows synchronously — virtualise with `@tanstack/react-virtual`\n *       and wrap with this component's headers as a shell.\n */\nexport function DataGrid<TRow extends { id: string | number }>({\n  columns,\n  rows,\n  loading,\n  sort,\n  onSortChange,\n  filter,\n  emptyState,\n  className,\n}: DataGridProps<TRow>) {\n  const strings = useStrings();\n  const [hidden, setHidden] = useState<Record<string, boolean>>({});\n  const visibleColumns = useMemo(() => columns.filter((c) => !hidden[c.key]), [columns, hidden]);\n\n  const renderRows = () => {\n    if (loading) {\n      return Array.from({ length: 5 }).map((_, i) => (\n        <TableRow key={`skel-${i}`}>\n          {visibleColumns.map((c) => (\n            <TableCell key={c.key}>\n              <Skeleton variant=\"text\" className=\"w-3/4\" />\n            </TableCell>\n          ))}\n        </TableRow>\n      ));\n    }\n    if (rows.length === 0) {\n      return (\n        <TableRow>\n          <TableCell colSpan={visibleColumns.length} className=\"h-32 text-center\">\n            {emptyState ?? (\n              <span className=\"text-foreground-subtle\">{strings.dataGrid.empty}</span>\n            )}\n          </TableCell>\n        </TableRow>\n      );\n    }\n    return rows.map((row) => (\n      <TableRow key={row.id}>\n        {visibleColumns.map((c) => (\n          <TableCell\n            key={c.key}\n            className={cn(c.align === 'right' && 'text-right tabular')}\n          >\n            {c.cell ? c.cell(row) : (row as Record<string, unknown>)[c.key] as ReactNode}\n          </TableCell>\n        ))}\n      </TableRow>\n    ));\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-3', className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        {filter ? (\n          <Input\n            type=\"search\"\n            placeholder={filter.placeholder ?? strings.dataGrid.filterPlaceholder}\n            value={filter.value}\n            onChange={(e) => filter.onChange(e.target.value)}\n            clearable\n            onClear={() => filter.onChange('')}\n            className=\"max-w-sm w-full\"\n            hideLabel\n            label={strings.dataGrid.filterRows}\n          />\n        ) : (\n          <div />\n        )}\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <IconButton aria-label={strings.dataGrid.columnVisibility} icon={<Settings />} variant=\"outline\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuLabel>{strings.dataGrid.columns}</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {columns.map((c) => (\n                <DropdownMenuCheckboxItem\n                  key={c.key}\n                  checked={!hidden[c.key]}\n                  onCheckedChange={(v) =>\n                    setHidden((prev) => ({ ...prev, [c.key]: !v }))\n                  }\n                >\n                  {c.header}\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <div className=\"rounded-lg border border-border overflow-hidden\">\n        <Table>\n          <colgroup>\n            {visibleColumns.map((c) => (\n              <col key={c.key} style={c.width ? { width: c.width } : undefined} />\n            ))}\n          </colgroup>\n          <TableHeader>\n            <TableRow>\n              {visibleColumns.map((c) =>\n                c.sortable && onSortChange ? (\n                  <TableSortHeader\n                    key={c.key}\n                    sortKey={c.key}\n                    currentSort={sort ?? null}\n                    onSortChange={(k, d) => onSortChange({ key: k, direction: d })}\n                  >\n                    {c.header}\n                  </TableSortHeader>\n                ) : (\n                  <TableHead key={c.key} className={cn(c.align === 'right' && 'text-right')}>\n                    {c.header}\n                  </TableHead>\n                ),\n              )}\n            </TableRow>\n          </TableHeader>\n          <TableBody>{renderRows()}</TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataGrid","columns","rows","loading","sort","onSortChange","filter","emptyState","className","strings","useStrings","hidden","setHidden","useState","visibleColumns","useMemo","c","renderRows","_","i","jsx","TableRow","TableCell","Skeleton","row","cn","jsxs","Input","DropdownMenu","DropdownMenuTrigger","IconButton","Settings","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","v","prev","Table","TableHeader","TableSortHeader","k","d","TableHead","TableBody"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
-import { DateRange } from 'react-day-picker';
-export interface DatePickerProps {
-    value?: Date;
-    onChange: (date: Date | undefined) => void;
+import { DateRange, DayPickerProps, Matcher } from 'react-day-picker';
+type CalendarLocale = DayPickerProps['locale'];
+interface PickerCommonProps {
     label?: ReactNode;
     placeholder?: string;
     error?: ReactNode;
@@ -10,28 +9,31 @@ export interface DatePickerProps {
     /** Restrict to a date range. Days outside are not selectable. */
     fromDate?: Date;
     toDate?: Date;
+    /** Extra RDP matcher(s) for disabled days, merged with `fromDate`/`toDate`. */
+    disabledDays?: Matcher | Matcher[];
+    /** Custom display formatter for the trigger text. */
+    formatDate?: (d: Date) => string;
+    /** date-fns locale object passed through to react-day-picker. */
+    locale?: CalendarLocale;
     className?: string;
 }
+export interface DatePickerProps extends PickerCommonProps {
+    value?: Date;
+    onChange: (date: Date | undefined) => void;
+}
 /**
  * Single-date picker.
  *
  * @example
  *   <DatePicker label="Date of birth" value={dob} onChange={setDob} />
  *
- * @do Use locale-aware formatting via the consumer's display layer.
+ * @do Use locale-aware formatting via `formatDate` / `locale`.
  * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.
  */
 export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export interface DateRangePickerProps {
+export interface DateRangePickerProps extends PickerCommonProps {
     value?: DateRange;
     onChange: (range: DateRange | undefined) => void;
-    label?: ReactNode;
-    placeholder?: string;
-    error?: ReactNode;
-    disabled?: boolean;
-    fromDate?: Date;
-    toDate?: Date;
-    className?: string;
 }
 /**
  * Two-date range picker. `value` is `{from, to}`.
@@ -40,3 +42,4 @@ export interface DateRangePickerProps {
  *   <DateRangePicker label="Reporting period" value={range} onChange={setRange} />
  */
 export declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};