@craftzbay/ui 0.9.0 → 0.11.0

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":";;;;;;AAmCO,MAAMA,IAAcC,EAAqB,MACnCC,IAAqBD,EAAqB,SAC1CE,IAAmBF,EAAqB,OACxCG,IAAoBH,EAAqB,QACzCI,IAAiBJ,EAAqB,KACtCK,IAAwBL,EAAqB,YAEpDM,IAAcC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAwBC,EAGnC,SAA+B,EAAE,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC9E,SACE,gBAAAC;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACTD;AAAA,QACA;AAAA,QACAK,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAI,EAACC,GAAA,EAAa,WAAU,yCAAwC,eAAW,GAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlF,CAAC;AACDT,EAAsB,cAAc;AAE7B,MAAMU,IAAwBT,EAGnC,SAA+B,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AAC7D,SACE,gBAAAE;AAAA,IAAChB,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAsB,cAAc;AAE7B,MAAMC,IAAqBV,EAGhC,SAA4B,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AAC1D,2BACGX,GAAA,EACC,UAAA,gBAAAa;AAAA,IAAChB,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAG;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDM,EAAmB,cAAc;AAE1B,MAAMC,IAAkBX,EAM7B,SAAyB,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAU,GAAa,GAAGR,EAAA,GAASC,GAAK;AAC3E,SACE,gBAAAE;AAAA,IAAChB,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACTD;AAAA,QACAK,KAAS;AAAA,QACTU,KACE;AAAA,QACFX;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDO,EAAgB,cAAc;AAEvB,MAAME,IAA0Bb,EAGrC,SAAiC,EAAE,WAAAC,GAAW,UAAAE,GAAU,GAAGC,EAAA,GAASC,GAAK;AACzE,SACE,gBAAAC;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAAChB,EAAqB,eAArB,EACC,UAAA,gBAAAgB,EAACO,GAAA,EAAM,WAAU,sBAAqB,eAAW,GAAA,CAAC,GACpD,GACF;AAAA,QACCX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDU,EAAwB,cAAc;AAE/B,MAAME,IAAuBf,EAGlC,SAA8B,EAAE,WAAAC,GAAW,UAAAE,GAAU,GAAGC,EAAA,GAASC,GAAK;AACtE,SACE,gBAAAC;AAAA,IAACf,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP,EAAGD,GAAa,QAAQI,CAAS;AAAA,MAC3C,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2DACd,UAAA,gBAAAA,EAAChB,EAAqB,eAArB,EACC,UAAA,gBAAAgB,EAACS,GAAA,EAAO,WAAU,kCAAiC,eAAW,GAAA,CAAC,GACjE,GACF;AAAA,QACCb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDY,EAAqB,cAAc;AAE5B,MAAME,IAAmBjB,EAG9B,SAA0B,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGE,EAAA,GAASC,GAAK;AAC/D,SACE,gBAAAE;AAAA,IAAChB,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACAI,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDa,EAAiB,cAAc;AAExB,MAAMC,IAAuBlB,EAGlC,SAA8B,EAAE,WAAAC,GAAW,GAAGG,EAAA,GAASC,GAAK;AAC5D,SACE,gBAAAE;AAAA,IAAChB,EAAqB;AAAA,IAArB;AAAA,MACC,KAAAc;AAAA,MACA,WAAWP,EAAG,6BAA6BG,CAAS;AAAA,MACnD,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDc,EAAqB,cAAc;AAE5B,SAASC,EAAoB,EAAE,WAAAlB,GAAW,GAAGG,KAA0C;AAC5F,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWT,EAAG,oEAAoEG,CAAS;AAAA,MAC1F,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV;AACAe,EAAoB,cAAc;"}

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

@@ -1,10 +1,17 @@
 import { ReactNode } from 'react';
 export interface DataGridColumn<TRow> {
-    /** Stable key used for visibility, sort, and React lists. */
-    key: string;
+    /**
+     * 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]`. */
+    /**
+     * 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;
@@ -36,6 +43,12 @@ export interface DataGridProps<TRow extends {
     };
     /** 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;
 }
 /**
@@ -63,4 +76,4 @@ export interface DataGridProps<TRow extends {
  */
 export declare function DataGrid<TRow extends {
     id: string | number;
-}>({ columns, rows, loading, sort, onSortChange, filter, emptyState, className, }: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;
+}>({ 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

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 { isValidElement, useMemo, useState, type ReactNode } from 'react';\nimport { Settings } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { formatDate } from '@/lib/format';\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  /**\n   * Stable key used for visibility, sort, and React lists. Autocompletes\n   * row fields; any string is allowed for computed columns (with `cell`).\n   */\n  key: (keyof TRow & string) | (string & {});\n  /** Header label. */\n  header: ReactNode;\n  /**\n   * Render the cell. Defaults to the value at `row[key]`: `Date` →\n   * `formatDate` (yyyy-MM-dd HH:mm), primitives as-is, other objects via\n   * `String()`.\n   */\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  /**\n   * Controlled column visibility: `{ [key]: boolean }` (missing = visible).\n   * Omit for internal state. At least one column always stays visible.\n   */\n  columnVisibility?: Record<string, boolean>;\n  onColumnVisibilityChange?: (next: Record<string, boolean>) => void;\n  className?: string;\n}\n\n/** Default cell renderer for `row[key]` when no `cell` is given. */\nfunction renderValue(v: unknown, emptyLabel: string): ReactNode {\n  if (v === null || v === undefined || v === '') {\n    return (\n      <span aria-label={emptyLabel} className=\"text-foreground-subtle\">\n        —\n      </span>\n    );\n  }\n  if (v instanceof Date) return formatDate(v);\n  if (typeof v === 'object') return isValidElement(v) ? v : String(v);\n  return v as ReactNode;\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  columnVisibility,\n  onColumnVisibilityChange,\n  className,\n}: DataGridProps<TRow>) {\n  const strings = useStrings();\n  const [internalVisibility, setInternalVisibility] = useState<Record<string, boolean>>({});\n  const visibility = columnVisibility ?? internalVisibility;\n  const isVisible = (key: string) => visibility[key] !== false;\n  const visibleColumns = useMemo(\n    () => columns.filter((c) => visibility[c.key] !== false),\n    [columns, visibility],\n  );\n  const setColumnVisible = (key: string, visible: boolean) => {\n    // Never let the user hide the last visible column — an empty grid has no\n    // affordance to bring columns back.\n    if (!visible && visibleColumns.length <= 1) return;\n    const next = { ...visibility, [key]: visible };\n    if (columnVisibility === undefined) setInternalVisibility(next);\n    onColumnVisibilityChange?.(next);\n  };\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={Math.max(1, visibleColumns.length)} className=\"h-32 text-center\">\n            {emptyState ?? <span className=\"text-foreground-subtle\">{strings.dataGrid.empty}</span>}\n          </TableCell>\n        </TableRow>\n      );\n    }\n    return rows.map((row) => (\n      <TableRow key={row.id}>\n        {visibleColumns.map((c) => (\n          <TableCell key={c.key} align={c.align ?? 'left'}>\n            {c.cell\n              ? c.cell(row)\n              : renderValue((row as Record<string, unknown>)[c.key], strings.dataGrid.emptyCell)}\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=\"w-full max-w-sm\"\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\n                aria-label={strings.dataGrid.columnVisibility}\n                icon={<Settings />}\n                variant=\"outline\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuLabel>{strings.dataGrid.columns}</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {columns.map((c) => (\n                <DropdownMenuCheckboxItem\n                  key={c.key}\n                  checked={isVisible(c.key)}\n                  disabled={isVisible(c.key) && visibleColumns.length <= 1}\n                  onCheckedChange={(v) => setColumnVisible(c.key, v === true)}\n                >\n                  {c.header}\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <Table containerClassName=\"rounded-lg border border-border\">\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                  align={c.align ?? 'left'}\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} align={c.align ?? 'left'}>\n                  {c.header}\n                </TableHead>\n              ),\n            )}\n          </TableRow>\n        </TableHeader>\n        <TableBody>{renderRows()}</TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"names":["renderValue","v","emptyLabel","formatDate","isValidElement","DataGrid","columns","rows","loading","sort","onSortChange","filter","emptyState","columnVisibility","onColumnVisibilityChange","className","strings","useStrings","internalVisibility","setInternalVisibility","useState","visibility","isVisible","key","visibleColumns","useMemo","c","setColumnVisible","visible","next","renderRows","_","i","jsx","TableRow","TableCell","Skeleton","row","cn","jsxs","Input","DropdownMenu","DropdownMenuTrigger","IconButton","Settings","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuCheckboxItem","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 {};

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

@@ -0,0 +1,193 @@
+"use client";
+import { jsx as n, jsxs as $ } from "react/jsx-runtime";
+import { forwardRef as O, useId as R, useState as S, useMemo as F } from "react";
+import * as f from "@radix-ui/react-popover";
+import { Calendar as A } from "../../icons/index.js";
+import { Calendar as D } from "./Calendar.js";
+import { cn as C } from "../../lib/utils.js";
+import { useStrings as w } from "../../hooks/use-strings.js";
+function z(t, e) {
+  if (e != null && e.code)
+    return t.toLocaleDateString(e.code, { year: "numeric", month: "short", day: "numeric" });
+  const o = (r) => String(r).padStart(2, "0");
+  return `${t.getFullYear()}-${o(t.getMonth() + 1)}-${o(t.getDate())}`;
+}
+function v(t, e, o) {
+  return F(() => {
+    const r = [];
+    return t && r.push({ before: t }), e && r.push({ after: e }), o && r.push(...Array.isArray(o) ? o : [o]), r.length ? r : void 0;
+  }, [t, e, o]);
+}
+function B({
+  label: t,
+  placeholder: e,
+  hasValue: o,
+  children: r,
+  error: s,
+  fieldId: i,
+  disabled: g,
+  open: d
+}) {
+  const a = `${i}-error`, p = `${i}-calendar`, c = o ? r : e;
+  return /* @__PURE__ */ $("div", { className: "flex flex-col gap-1.5", children: [
+    t && /* @__PURE__ */ n(
+      "label",
+      {
+        id: `${i}-label`,
+        htmlFor: i,
+        className: "text-foreground text-sm font-medium",
+        children: t
+      }
+    ),
+    /* @__PURE__ */ n(f.Trigger, { asChild: !0, children: /* @__PURE__ */ $(
+      "button",
+      {
+        id: i,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": d,
+        "aria-controls": p,
+        "aria-labelledby": t ? `${i}-label` : void 0,
+        "aria-label": t ? void 0 : e,
+        disabled: g,
+        "aria-invalid": !!s || void 0,
+        "aria-describedby": s ? a : void 0,
+        className: C(
+          "bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-lg md:text-sm",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+          "focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          s ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border-input focus-visible:border-accent focus-visible:ring-ring",
+          !o && "text-foreground-subtle"
+        ),
+        children: [
+          /* @__PURE__ */ n(A, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }),
+          /* @__PURE__ */ n("span", { className: "truncate", title: typeof c == "string" ? c : void 0, children: c })
+        ]
+      }
+    ) }),
+    s && /* @__PURE__ */ n("p", { id: a, className: "text-danger-text text-xs", children: s })
+  ] });
+}
+const T = O(function({
+  value: e,
+  onChange: o,
+  label: r,
+  placeholder: s,
+  error: i,
+  disabled: g,
+  fromDate: d,
+  toDate: a,
+  disabledDays: p,
+  formatDate: c,
+  locale: h,
+  className: P
+}, k) {
+  const N = w(), u = c ?? ((m) => z(m, h)), b = s ?? N.datePicker.pickDate, l = R(), [x, y] = S(!1), M = v(d, a, p);
+  return /* @__PURE__ */ n("div", { ref: k, className: C(P), children: /* @__PURE__ */ $(f.Root, { open: x, onOpenChange: y, children: [
+    /* @__PURE__ */ n(
+      B,
+      {
+        label: r,
+        placeholder: b,
+        hasValue: !!e,
+        error: i,
+        fieldId: l,
+        disabled: g,
+        open: x,
+        children: e ? u(e) : ""
+      }
+    ),
+    /* @__PURE__ */ n(f.Portal, { children: /* @__PURE__ */ n(
+      f.Content,
+      {
+        id: `${l}-calendar`,
+        "aria-labelledby": r ? `${l}-label` : void 0,
+        "aria-label": r ? void 0 : b,
+        align: "start",
+        sideOffset: 4,
+        className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md",
+        children: /* @__PURE__ */ n(
+          D,
+          {
+            mode: "single",
+            selected: e,
+            defaultMonth: e,
+            onSelect: (m) => {
+              o(m ?? void 0), m && y(!1);
+            },
+            startMonth: d,
+            endMonth: a,
+            disabled: M,
+            locale: h
+          }
+        )
+      }
+    ) })
+  ] }) });
+});
+T.displayName = "DatePicker";
+const L = O(
+  function({
+    value: e,
+    onChange: o,
+    label: r,
+    placeholder: s,
+    error: i,
+    disabled: g,
+    fromDate: d,
+    toDate: a,
+    disabledDays: p,
+    formatDate: c,
+    locale: h,
+    className: P
+  }, k) {
+    const N = w(), u = c ?? ((j) => z(j, h)), b = s ?? N.datePicker.pickRange, l = R(), [x, y] = S(!1), M = !!(e != null && e.from), m = v(d, a, p);
+    return /* @__PURE__ */ n("div", { ref: k, className: C(P), children: /* @__PURE__ */ $(f.Root, { open: x, onOpenChange: y, children: [
+      /* @__PURE__ */ n(
+        B,
+        {
+          label: r,
+          placeholder: b,
+          hasValue: M,
+          error: i,
+          fieldId: l,
+          disabled: g,
+          open: x,
+          children: e != null && e.from && e.to ? `${u(e.from)} – ${u(e.to)}` : e != null && e.from ? u(e.from) : ""
+        }
+      ),
+      /* @__PURE__ */ n(f.Portal, { children: /* @__PURE__ */ n(
+        f.Content,
+        {
+          id: `${l}-calendar`,
+          "aria-labelledby": r ? `${l}-label` : void 0,
+          "aria-label": r ? void 0 : b,
+          align: "start",
+          sideOffset: 4,
+          className: "text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md",
+          children: /* @__PURE__ */ n(
+            D,
+            {
+              mode: "range",
+              selected: e,
+              defaultMonth: e == null ? void 0 : e.from,
+              onSelect: o,
+              numberOfMonths: 2,
+              startMonth: d,
+              endMonth: a,
+              disabled: m,
+              locale: h
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+L.displayName = "DateRangePicker";
+export {
+  T as DatePicker,
+  L as DateRangePicker
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/ui/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useMemo, useState, type ReactNode } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport type { DateRange, DayPickerProps, Matcher } from 'react-day-picker';\nimport { Calendar as CalendarIcon } from '@/icons';\nimport { Calendar } from './Calendar';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  Two related components share the same trigger shell:\n *\n *    <DatePicker value={date} onChange={setDate} />        // single date\n *    <DateRangePicker value={range} onChange={setRange} /> // {from,to}\n * --------------------------------------------------------------------------- */\n\ntype CalendarLocale = DayPickerProps['locale'];\n\n/**\n * Default trigger text. With a date-fns `locale` the date is rendered in that\n * locale; without one it is the canonical `yyyy-MM-dd` — deterministic on\n * server and client, so SSR output never depends on the host's locale.\n */\nfunction defaultFormatDate(d: Date, locale?: CalendarLocale): string {\n  if (locale?.code) {\n    return d.toLocaleDateString(locale.code, { year: 'numeric', month: 'short', day: 'numeric' });\n  }\n  const pad = (n: number) => String(n).padStart(2, '0');\n  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n}\n\n/** Merge the fromDate/toDate bounds with any consumer-supplied RDP matcher. */\nfunction useBounds(fromDate?: Date, toDate?: Date, disabled?: Matcher | Matcher[]) {\n  return useMemo<Matcher[] | undefined>(() => {\n    const list: Matcher[] = [];\n    if (fromDate) list.push({ before: fromDate });\n    if (toDate) list.push({ after: toDate });\n    if (disabled) list.push(...(Array.isArray(disabled) ? disabled : [disabled]));\n    return list.length ? list : undefined;\n  }, [fromDate, toDate, disabled]);\n}\n\nfunction PickerTrigger({\n  label,\n  placeholder,\n  hasValue,\n  children,\n  error,\n  fieldId,\n  disabled,\n  open,\n}: {\n  label?: ReactNode;\n  placeholder: string;\n  hasValue: boolean;\n  children: ReactNode;\n  error?: ReactNode;\n  fieldId: string;\n  disabled?: boolean;\n  open: boolean;\n}) {\n  const errorId = `${fieldId}-error`;\n  const calendarId = `${fieldId}-calendar`;\n  const text = hasValue ? children : placeholder;\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {label && (\n        <label\n          id={`${fieldId}-label`}\n          htmlFor={fieldId}\n          className=\"text-foreground text-sm font-medium\"\n        >\n          {label}\n        </label>\n      )}\n      <PopoverPrimitive.Trigger asChild>\n        <button\n          id={fieldId}\n          type=\"button\"\n          // combobox-with-dialog pattern: lets the field carry aria-invalid like other inputs.\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={calendarId}\n          // role=combobox takes no name from content; expose the placeholder.\n          aria-labelledby={label ? `${fieldId}-label` : undefined}\n          aria-label={label ? undefined : placeholder}\n          disabled={disabled}\n          aria-invalid={Boolean(error) || undefined}\n          aria-describedby={error ? errorId : undefined}\n          className={cn(\n            'bg-card inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 text-left text-lg md:text-sm',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            error\n              ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n              : 'border-border-input focus-visible:border-accent focus-visible:ring-ring',\n            !hasValue && 'text-foreground-subtle',\n          )}\n        >\n          <CalendarIcon className=\"text-foreground-subtle size-4\" aria-hidden />\n          <span className=\"truncate\" title={typeof text === 'string' ? text : undefined}>\n            {text}\n          </span>\n        </button>\n      </PopoverPrimitive.Trigger>\n      {error && (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\ninterface PickerCommonProps {\n  label?: ReactNode;\n  placeholder?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  /** Restrict to a date range. Days outside are not selectable. */\n  fromDate?: Date;\n  toDate?: Date;\n  /** Extra RDP matcher(s) for disabled days, merged with `fromDate`/`toDate`. */\n  disabledDays?: Matcher | Matcher[];\n  /** Custom display formatter for the trigger text. */\n  formatDate?: (d: Date) => string;\n  /** date-fns locale object passed through to react-day-picker. */\n  locale?: CalendarLocale;\n  className?: string;\n}\n\nexport interface DatePickerProps extends PickerCommonProps {\n  value?: Date;\n  onChange: (date: Date | undefined) => void;\n}\n\n/**\n * Single-date picker.\n *\n * @example\n *   <DatePicker label=\"Date of birth\" value={dob} onChange={setDob} />\n *\n * @do Use locale-aware formatting via `formatDate` / `locale`.\n * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(function DatePicker(\n  {\n    value,\n    onChange,\n    label,\n    placeholder: placeholderProp,\n    error,\n    disabled,\n    fromDate,\n    toDate,\n    disabledDays,\n    formatDate: formatDateProp,\n    locale,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const formatDate = formatDateProp ?? ((d: Date) => defaultFormatDate(d, locale));\n  const placeholder = placeholderProp ?? strings.datePicker.pickDate;\n  const fieldId = useId();\n  const [open, setOpen] = useState(false);\n  const bounds = useBounds(fromDate, toDate, disabledDays);\n\n  return (\n    <div ref={ref} className={cn(className)}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PickerTrigger\n          label={label}\n          placeholder={placeholder}\n          hasValue={Boolean(value)}\n          error={error}\n          fieldId={fieldId}\n          disabled={disabled}\n          open={open}\n        >\n          {value ? formatDate(value) : ''}\n        </PickerTrigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            id={`${fieldId}-calendar`}\n            // Radix gives the popover role=\"dialog\"; name it after the field.\n            aria-labelledby={label ? `${fieldId}-label` : undefined}\n            aria-label={label ? undefined : placeholder}\n            align=\"start\"\n            sideOffset={4}\n            className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md\"\n          >\n            <Calendar\n              mode=\"single\"\n              selected={value}\n              // RDP 9 ignores `selected` for the initial month; open on the value.\n              defaultMonth={value}\n              onSelect={(d) => {\n                onChange(d ?? undefined);\n                if (d) setOpen(false);\n              }}\n              startMonth={fromDate}\n              endMonth={toDate}\n              disabled={bounds}\n              locale={locale}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </div>\n  );\n});\nDatePicker.displayName = 'DatePicker';\n\nexport interface DateRangePickerProps extends PickerCommonProps {\n  value?: DateRange;\n  onChange: (range: DateRange | undefined) => void;\n}\n\n/**\n * Two-date range picker. `value` is `{from, to}`.\n *\n * @example\n *   <DateRangePicker label=\"Reporting period\" value={range} onChange={setRange} />\n */\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  function DateRangePicker(\n    {\n      value,\n      onChange,\n      label,\n      placeholder: placeholderProp,\n      error,\n      disabled,\n      fromDate,\n      toDate,\n      disabledDays,\n      formatDate: formatDateProp,\n      locale,\n      className,\n    },\n    ref,\n  ) {\n    const strings = useStrings();\n    const formatDate = formatDateProp ?? ((d: Date) => defaultFormatDate(d, locale));\n    const placeholder = placeholderProp ?? strings.datePicker.pickRange;\n    const fieldId = useId();\n    const [open, setOpen] = useState(false);\n    const hasValue = Boolean(value?.from);\n    const bounds = useBounds(fromDate, toDate, disabledDays);\n\n    return (\n      <div ref={ref} className={cn(className)}>\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PickerTrigger\n            label={label}\n            placeholder={placeholder}\n            hasValue={hasValue}\n            error={error}\n            fieldId={fieldId}\n            disabled={disabled}\n            open={open}\n          >\n            {value?.from && value.to\n              ? `${formatDate(value.from)} – ${formatDate(value.to)}`\n              : value?.from\n                ? formatDate(value.from)\n                : ''}\n          </PickerTrigger>\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              id={`${fieldId}-calendar`}\n              aria-labelledby={label ? `${fieldId}-label` : undefined}\n              aria-label={label ? undefined : placeholder}\n              align=\"start\"\n              sideOffset={4}\n              className=\"text-popover-foreground z-[var(--z-popover)] rounded-lg shadow-md\"\n            >\n              <Calendar\n                mode=\"range\"\n                selected={value}\n                defaultMonth={value?.from}\n                onSelect={onChange}\n                numberOfMonths={2}\n                startMonth={fromDate}\n                endMonth={toDate}\n                disabled={bounds}\n                locale={locale}\n              />\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </div>\n    );\n  },\n);\nDateRangePicker.displayName = 'DateRangePicker';\n"],"names":["defaultFormatDate","d","locale","pad","n","useBounds","fromDate","toDate","disabled","useMemo","list","PickerTrigger","label","placeholder","hasValue","children","error","fieldId","open","errorId","calendarId","text","jsxs","jsx","PopoverPrimitive","cn","CalendarIcon","DatePicker","forwardRef","value","onChange","placeholderProp","disabledDays","formatDateProp","className","ref","strings","useStrings","formatDate","useId","setOpen","useState","bounds","Calendar","DateRangePicker"],"mappings":"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"}