@gerege-systems/ui 0.11.2

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as d, useRef as x, useEffect as y } from "react";
+import { Command as m } from "cmdk";
+import * as l from "@radix-ui/react-dialog";
+import { Search as C } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStrings as p } from "../../hooks/use-strings.js";
+const f = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m,
+    {
+      ref: o,
+      className: r(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-lg",
+        t
+      ),
+      ...e
+    }
+  );
+});
+f.displayName = "Command";
+const b = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ u("div", { className: "border-border flex items-center gap-2 border-b px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ a(C, { className: "text-foreground-subtle size-4 shrink-0", "aria-hidden": !0 }),
+    /* @__PURE__ */ a(
+      m.Input,
+      {
+        ref: o,
+        className: r(
+          "flex h-11 w-full bg-transparent py-3 text-lg outline-none md:text-sm",
+          "placeholder:text-foreground-subtle disabled:cursor-not-allowed disabled:opacity-50",
+          t
+        ),
+        ...e
+      }
+    )
+  ] });
+});
+b.displayName = "CommandInput";
+const h = d(function({ className: t, label: e, ...o }, i) {
+  const s = p();
+  return /* @__PURE__ */ a(
+    m.List,
+    {
+      ref: i,
+      label: e ?? s.command.suggestions,
+      className: r("max-h-[320px] overflow-y-auto p-1", t),
+      ...o
+    }
+  );
+});
+h.displayName = "CommandList";
+const v = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Empty,
+    {
+      ref: o,
+      className: r("text-foreground-subtle py-8 text-center text-sm", t),
+      ...e
+    }
+  );
+});
+v.displayName = "CommandEmpty";
+const N = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Group,
+    {
+      ref: o,
+      className: r(
+        "text-foreground overflow-hidden 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",
+        t
+      ),
+      ...e
+    }
+  );
+});
+N.displayName = "CommandGroup";
+const w = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(m.Separator, { ref: o, asChild: !0, ...e, children: /* @__PURE__ */ a("div", { role: "none", className: r("bg-border -mx-1 my-1 h-px", t) }) });
+});
+w.displayName = "CommandSeparator";
+const k = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Item,
+    {
+      ref: o,
+      className: r(
+        "text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[selected=true]:bg-background-muted data-[selected=true]:text-foreground",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "[&_svg]:text-foreground-subtle [&_svg]:size-4",
+        t
+      ),
+      ...e
+    }
+  );
+});
+k.displayName = "CommandItem";
+function S({
+  children: n,
+  className: t
+}) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: r(
+        "text-foreground-subtle ml-auto inline-flex items-center gap-0.5 font-mono text-xs tracking-widest",
+        t
+      ),
+      children: n
+    }
+  );
+}
+S.displayName = "CommandShortcut";
+function K({ open: n, onOpenChange: t, children: e, title: o }) {
+  const i = p(), s = x(null);
+  return /* @__PURE__ */ a(l.Root, { open: n, onOpenChange: t, children: /* @__PURE__ */ u(l.Portal, { children: [
+    /* @__PURE__ */ a(
+      l.Overlay,
+      {
+        className: r(
+          "bg-overlay fixed inset-0 z-[var(--z-overlay)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ u(
+      l.Content,
+      {
+        "aria-describedby": void 0,
+        onOpenAutoFocus: () => {
+          s.current = document.activeElement;
+        },
+        onCloseAutoFocus: (g) => {
+          var c;
+          g.preventDefault(), (c = s.current) == null || c.focus(), s.current = null;
+        },
+        className: r(
+          "fixed top-[20%] left-1/2 z-[var(--z-modal)] -translate-x-1/2",
+          "w-[calc(100%-2rem)] max-w-[640px] overflow-hidden",
+          "border-border bg-popover text-popover-foreground rounded-lg border 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__ */ a(l.Title, { className: "sr-only", children: o ?? i.commandDialog.title }),
+          /* @__PURE__ */ a(f, { children: e })
+        ]
+      }
+    )
+  ] }) });
+}
+function G(n) {
+  y(() => {
+    const t = (e) => {
+      (e.key === "k" || e.key === "K") && (e.metaKey || e.ctrlKey) && !e.altKey && (e.preventDefault(), n((o) => !o));
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [n]);
+}
+export {
+  f as Command,
+  K as CommandDialog,
+  v as CommandEmpty,
+  N as CommandGroup,
+  b as CommandInput,
+  k as CommandItem,
+  h as CommandList,
+  w as CommandSeparator,
+  S as CommandShortcut,
+  G 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  useRef,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ElementRef,\n  type ReactNode,\n  type SetStateAction,\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        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-lg',\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=\"border-border flex items-center gap-2 border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"text-foreground-subtle size-4 shrink-0\" aria-hidden />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-11 w-full bg-transparent py-3 text-lg outline-none md:text-sm',\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, label, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      label={label ?? strings.command.suggestions}\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({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      className={cn('text-foreground-subtle py-8 text-center text-sm', className)}\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        'text-foreground overflow-hidden 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  // cmdk hard-codes role=\"separator\", which is not a permitted child of the\n  // listbox. asChild lets the child's role win: the divider is purely visual.\n  return (\n    <CommandPrimitive.Separator ref={ref} asChild {...props}>\n      <div role=\"none\" className={cn('bg-border -mx-1 my-1 h-px', className)} />\n    </CommandPrimitive.Separator>\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        'text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-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]:text-foreground-subtle [&_svg]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommandItem.displayName = 'CommandItem';\n\nexport function CommandShortcut({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        'text-foreground-subtle ml-auto inline-flex items-center gap-0.5 font-mono text-xs tracking-widest',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\nCommandShortcut.displayName = 'CommandShortcut';\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  // The palette has no DialogTrigger (⌘K / any button opens it), so Radix has\n  // no trigger to return focus to and would drop it on <body>. Remember what\n  // was focused when the dialog opened and restore it on close.\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className={cn(\n            'bg-overlay fixed inset-0 z-[var(--z-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          onOpenAutoFocus={() => {\n            returnFocusRef.current = document.activeElement as HTMLElement | null;\n          }}\n          onCloseAutoFocus={(event) => {\n            event.preventDefault();\n            returnFocusRef.current?.focus();\n            returnFocusRef.current = null;\n          }}\n          className={cn(\n            'fixed top-[20%] left-1/2 z-[var(--z-modal)] -translate-x-1/2',\n            'w-[calc(100%-2rem)] max-w-[640px] overflow-hidden',\n            'border-border bg-popover text-popover-foreground rounded-lg border 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: Dispatch<SetStateAction<boolean>>): void {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey) && !e.altKey) {\n        e.preventDefault();\n        // Functional update: ⌘K toggles without the hook tracking open state.\n        setOpen((prev) => !prev);\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","label","strings","useStrings","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","children","CommandDialog","open","onOpenChange","title","returnFocusRef","useRef","DialogPrimitive","event","_a","useCommandPaletteShortcut","setOpen","useEffect","onKey","prev"],"mappings":"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"}

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

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+/**
+ * Right-click (or two-finger tap) menu. Visual surface mirrors DropdownMenu
+ * for consistency.
+ *
+ * @example
+ *   <ContextMenu>
+ *     <ContextMenuTrigger asChild>
+ *       <div className="grid h-32 place-items-center rounded-lg border border-border">
+ *         Right-click me
+ *       </div>
+ *     </ContextMenuTrigger>
+ *     <ContextMenuContent>
+ *       <ContextMenuItem>Open</ContextMenuItem>
+ *       <ContextMenuSeparator />
+ *       <ContextMenuItem destructive>Delete</ContextMenuItem>
+ *     </ContextMenuContent>
+ *   </ContextMenu>
+ *
+ * @do Mirror DropdownMenu items for the same surface — users expect the same
+ *      operations from both.
+ * @dont Hide critical actions behind right-click — they must also exist in
+ *       a visible button or menu.
+ */
+export declare const ContextMenu: import('react').FC<ContextMenuPrimitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuPortal: import('react').FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+export declare const ContextMenuSub: import('react').FC<ContextMenuPrimitive.ContextMenuSubProps>;
+export declare const ContextMenuRadioGroup: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubTrigger: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    destructive?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuCheckboxItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContextMenuShortcut {
+    var displayName: string;
+}

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

@@ -0,0 +1,165 @@
+"use client";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import * as t from "@radix-ui/react-context-menu";
+import { Check as m, Circle as x, ChevronRight as p } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+const w = t.Root, T = t.Trigger, j = t.Group, C = t.Portal, G = t.Sub, L = t.RadioGroup, i = 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",
+  "transition-colors duration-[var(--duration-fast)]"
+), g = u(function({ className: e, inset: n, children: o, ...d }, c) {
+  return /* @__PURE__ */ l(
+    t.SubTrigger,
+    {
+      ref: c,
+      className: r(
+        i,
+        "data-[state=open]:bg-background-muted",
+        n && "pl-8",
+        e
+      ),
+      ...d,
+      children: [
+        o,
+        /* @__PURE__ */ a(p, { className: "text-foreground-subtle ml-auto size-4", "aria-hidden": !0 })
+      ]
+    }
+  );
+});
+g.displayName = "ContextMenuSubTrigger";
+const f = u(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(
+    t.SubContent,
+    {
+      ref: o,
+      className: r(
+        "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
+      ),
+      ...n
+    }
+  );
+});
+f.displayName = "ContextMenuSubContent";
+const b = u(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(C, { children: /* @__PURE__ */ a(
+    t.Content,
+    {
+      ref: o,
+      className: r(
+        "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",
+        e
+      ),
+      ...n
+    }
+  ) });
+});
+b.displayName = "ContextMenuContent";
+const h = u(function({ className: e, inset: n, destructive: o, ...d }, c) {
+  return /* @__PURE__ */ a(
+    t.Item,
+    {
+      ref: c,
+      className: r(
+        i,
+        n && "pl-8",
+        o && "text-danger-text data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger-text",
+        e
+      ),
+      ...d
+    }
+  );
+});
+h.displayName = "ContextMenuItem";
+const M = u(function({ className: e, children: n, ...o }, d) {
+  return /* @__PURE__ */ l(
+    t.CheckboxItem,
+    {
+      ref: d,
+      className: r(i, "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: "text-accent size-4", "aria-hidden": !0 }) }) }),
+        n
+      ]
+    }
+  );
+});
+M.displayName = "ContextMenuCheckboxItem";
+const N = u(function({ className: e, children: n, ...o }, d) {
+  return /* @__PURE__ */ l(
+    t.RadioItem,
+    {
+      ref: d,
+      className: r(i, "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(x, { className: "fill-accent text-accent size-2", "aria-hidden": !0 }) }) }),
+        n
+      ]
+    }
+  );
+});
+N.displayName = "ContextMenuRadioItem";
+const I = u(function({ className: e, inset: n, ...o }, d) {
+  return /* @__PURE__ */ a(
+    t.Label,
+    {
+      ref: d,
+      className: r(
+        "text-foreground-subtle px-2 py-1.5 text-xs font-medium",
+        n && "pl-8",
+        e
+      ),
+      ...o
+    }
+  );
+});
+I.displayName = "ContextMenuLabel";
+const S = u(function({ className: e, ...n }, o) {
+  return /* @__PURE__ */ a(
+    t.Separator,
+    {
+      ref: o,
+      className: r("bg-border -mx-1 my-1 h-px", e),
+      ...n
+    }
+  );
+});
+S.displayName = "ContextMenuSeparator";
+function v({ className: s, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: r("text-foreground-subtle ml-auto font-mono text-xs tracking-widest", s),
+      ...e
+    }
+  );
+}
+v.displayName = "ContextMenuShortcut";
+export {
+  w as ContextMenu,
+  M as ContextMenuCheckboxItem,
+  b as ContextMenuContent,
+  j as ContextMenuGroup,
+  h as ContextMenuItem,
+  I as ContextMenuLabel,
+  C as ContextMenuPortal,
+  L as ContextMenuRadioGroup,
+  N as ContextMenuRadioItem,
+  S as ContextMenuSeparator,
+  v as ContextMenuShortcut,
+  G as ContextMenuSub,
+  f as ContextMenuSubContent,
+  g as ContextMenuSubTrigger,
+  T 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  'transition-colors duration-[var(--duration-fast)]',\n);\n\nexport const ContextMenuSubTrigger = forwardRef<\n  ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(function ContextMenuSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.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    </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        '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});\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          '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          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> & {\n    inset?: boolean;\n    destructive?: boolean;\n  }\n>(function ContextMenuItem({ className, inset, destructive, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.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});\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=\"text-accent size-4\" 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=\"fill-accent text-accent size-2\" 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> & { inset?: boolean }\n>(function ContextMenuLabel({ className, inset, ...props }, ref) {\n  return (\n    <ContextMenuPrimitive.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});\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('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n});\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\nexport function ContextMenuShortcut({ 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}\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n"],"names":["ContextMenu","ContextMenuPrimitive","ContextMenuTrigger","ContextMenuGroup","ContextMenuPortal","ContextMenuSub","ContextMenuRadioGroup","itemClasses","cn","ContextMenuSubTrigger","forwardRef","className","inset","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.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+export interface DataGridColumn<TRow> {
+    /**
+     * Stable key used for visibility, sort, and React lists. Autocompletes
+     * row fields; any string is allowed for computed columns (with `cell`).
+     */
+    key: (keyof TRow & string) | (string & {});
+    /** Header label. */
+    header: ReactNode;
+    /**
+     * Render the cell. Defaults to the value at `row[key]`: `Date` →
+     * `formatDate` (yyyy-MM-dd HH:mm), primitives as-is, other objects via
+     * `String()`.
+     */
+    cell?: (row: TRow) => ReactNode;
+    /** Cell width — passed to `<col>` so the grid keeps shape during loading. */
+    width?: string;
+    /** Allow sorting on this column. */
+    sortable?: boolean;
+    /** Right-align numeric / monetary columns. */
+    align?: 'left' | 'right';
+}
+export interface DataGridProps<TRow extends {
+    id: string | number;
+}> {
+    columns: DataGridColumn<TRow>[];
+    rows: TRow[];
+    loading?: boolean;
+    /** Initial sort state. */
+    sort?: {
+        key: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    onSortChange?: (sort: {
+        key: string;
+        direction: 'asc' | 'desc';
+    }) => void;
+    /** Show a filter input row above the grid. */
+    filter?: {
+        value: string;
+        onChange: (q: string) => void;
+        placeholder?: string;
+    };
+    /** Empty-state node when no rows are visible. */
+    emptyState?: ReactNode;
+    /**
+     * Controlled column visibility: `{ [key]: boolean }` (missing = visible).
+     * Omit for internal state. At least one column always stays visible.
+     */
+    columnVisibility?: Record<string, boolean>;
+    onColumnVisibilityChange?: (next: Record<string, boolean>) => void;
+    className?: string;
+}
+/**
+ * Composite grid built from `Table` + DropdownMenu + Input. Provides
+ * column visibility toggle, an inline filter, sortable headers, and
+ * loading / empty states.
+ *
+ * @example
+ *   <DataGrid
+ *     columns={[
+ *       { key: 'name', header: 'Name', sortable: true },
+ *       { key: 'status', header: 'Status', cell: r => <Badge tone={...}>{r.status}</Badge> },
+ *       { key: 'updatedAt', header: 'Updated', align: 'right' },
+ *     ]}
+ *     rows={rows}
+ *     filter={{ value: q, onChange: setQ }}
+ *     sort={sort}
+ *     onSortChange={setSort}
+ *   />
+ *
+ * @do Provide a meaningful empty state with a primary action when the grid
+ *      starts empty (no items at all, not just filtered out).
+ * @dont Render thousands of rows synchronously — virtualise with `@tanstack/react-virtual`
+ *       and wrap with this component's headers as a shell.
+ */
+export declare function DataGrid<TRow extends {
+    id: string | number;
+}>({ columns, rows, loading, sort, onSortChange, filter, emptyState, columnVisibility, onColumnVisibilityChange, className, }: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;

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

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