@hexclave/dashboard-ui-components 1.0.53 → 1.0.55

package/dist/{data-grid-AJi1TNDa.d.ts → data-grid-DWHAjaNo.d.ts}

@@ -1,4 +1,4 @@
-import { w as DataGridProps } from "./types-1-eOd1JF.js";
+import { w as DataGridProps } from "./types-D8o47V7M.js";
 
 //#region src/components/data-grid/data-grid.d.ts
 declare function isDataGridInteractiveRowClickTarget(target: EventTarget | null): boolean;
@@ -43,4 +43,4 @@ declare function isDataGridInteractiveRowClickTarget(target: EventTarget | null)
 declare function DataGrid<TRow>(props: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { isDataGridInteractiveRowClickTarget as n, DataGrid as t };
-//# sourceMappingURL=data-grid-AJi1TNDa.d.ts.map
+//# sourceMappingURL=data-grid-DWHAjaNo.d.ts.map

package/dist/data-grid-DWHAjaNo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-DWHAjaNo.d.ts","names":[],"sources":["../src/components/data-grid/data-grid.tsx"],"mappings":";;;iBA+EgB,mCAAA,CAAoC,MAA0B,EAAlB,WAAW;;AAAvE;;;;AAA8E;AA6mB9E;;;;;;;;;;;AAAyD;;;;;;;;;;;;;;;;;;;;;iBAAzC,QAAA,OAAe,KAAA,EAAO,aAAa,CAAC,IAAA,gCAAK,GAAA,CAAA,OAAA"}

package/dist/{data-grid-sizing-S1ixcZKo.d.ts → data-grid-sizing-D9y1xwaq.d.ts}

@@ -1,4 +1,4 @@
-import { i as DataGridColumnDef } from "./types-1-eOd1JF.js";
+import { i as DataGridColumnDef } from "./types-D8o47V7M.js";
 
 //#region src/components/data-grid/data-grid-sizing.d.ts
 declare const DEFAULT_MAX_COL_WIDTH = 800;
@@ -10,4 +10,4 @@ declare function getEffectiveMaxWidth<TRow>(col: DataGridColumnDef<TRow>): numbe
 declare function clampColumnWidth<TRow>(col: DataGridColumnDef<TRow>, width: number): number;
 //#endregion
 export { getEffectiveMinWidth as a, getEffectiveMaxWidth as i, DEFAULT_MAX_COL_WIDTH as n, clampColumnWidth as r, DEFAULT_COL_WIDTH as t };
-//# sourceMappingURL=data-grid-sizing-S1ixcZKo.d.ts.map
+//# sourceMappingURL=data-grid-sizing-D9y1xwaq.d.ts.map

package/dist/{data-grid-sizing-S1ixcZKo.d.ts.map → data-grid-sizing-D9y1xwaq.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-sizing-S1ixcZKo.d.ts","names":[],"sources":["../src/components/data-grid/data-grid-sizing.ts"],"mappings":";;;cAIa,qBAAA;AAAA,cACA,iBAAA;AADb;;AAAA,iBA+BgB,oBAAA,OAA2B,GAAA,EAAK,iBAAiB,CAAC,IAAA;AAAA,iBASlD,oBAAA,OAA2B,GAAA,EAAK,iBAAiB,CAAC,IAAA;AAAA,iBAIlD,gBAAA,OAAuB,GAAA,EAAK,iBAAiB,CAAC,IAAA,GAAO,KAAA"}
+{"version":3,"file":"data-grid-sizing-D9y1xwaq.d.ts","names":[],"sources":["../src/components/data-grid/data-grid-sizing.ts"],"mappings":";;;cAIa,qBAAA;AAAA,cACA,iBAAA;AADb;;AAAA,iBA+BgB,oBAAA,OAA2B,GAAA,EAAK,iBAAiB,CAAC,IAAA;AAAA,iBASlD,oBAAA,OAA2B,GAAA,EAAK,iBAAiB,CAAC,IAAA;AAAA,iBAIlD,gBAAA,OAAuB,GAAA,EAAK,iBAAiB,CAAC,IAAA,GAAO,KAAA"}

package/dist/{data-grid-toolbar-BGSNGDpT.d.ts → data-grid-toolbar-dgvnYEpC.d.ts}

@@ -1,4 +1,4 @@
-import { M as DataGridToolbarContext } from "./types-1-eOd1JF.js";
+import { M as DataGridToolbarContext } from "./types-D8o47V7M.js";
 import React from "react";
 
 //#region src/components/data-grid/data-grid-toolbar.d.ts
@@ -6,13 +6,13 @@ declare function DataGridToolbar<TRow>({
   ctx,
   extra,
   extraLeading,
+  extraActions,
   hideQuickSearch
 }: {
   ctx: DataGridToolbarContext<TRow>;
-  /** Extra content rendered inside the toolbar row, to the left of the
-   *  built-in columns / export actions. Use this to add table-specific
-   *  affordances (refresh, custom toggles, row counts) without giving up
-   *  the default actions. */
+  /** Extra content in the leading cluster, after search / `extraLeading`
+   *  (filters, status badges, row counts). Stays with the search side so
+   *  it doesn't compete with the trailing icon actions. */
   extra?: React.ReactNode;
   /** Extra content rendered at the START of the toolbar row — occupies
    *  the same position as the built-in quick search (after it, if the
@@ -20,6 +20,10 @@ declare function DataGridToolbar<TRow>({
    *  to fully replace the quick search with a custom input, e.g. an
    *  AI-powered search bar. */
   extraLeading?: React.ReactNode;
+  /** Extra content in the trailing action cluster, immediately before
+   *  the built-in columns / export buttons (e.g. a labeled Refresh).
+   *  When present, a hairline divider separates it from those icons. */
+  extraActions?: React.ReactNode;
   /** Whether to hide the built-in quick-search input. When `true`,
    *  callers are expected to provide their own search UI via
    *  `extraLeading`. */
@@ -27,4 +31,4 @@ declare function DataGridToolbar<TRow>({
 }): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { DataGridToolbar as t };
-//# sourceMappingURL=data-grid-toolbar-BGSNGDpT.d.ts.map
+//# sourceMappingURL=data-grid-toolbar-dgvnYEpC.d.ts.map

package/dist/data-grid-toolbar-dgvnYEpC.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-toolbar-dgvnYEpC.d.ts","names":[],"sources":["../src/components/data-grid/data-grid-toolbar.tsx"],"mappings":";;;;iBA6QgB,eAAA;EACd,GAAA;EACA,KAAA;EACA,YAAA;EACA,YAAA;EACA;AAAA;EAEA,GAAA,EAAK,sBAAA,CAAuB,IAAA;EAPd;;;EAWd,KAAA,GAAQ,KAAA,CAAM,SAAA;EATd;;;;;EAeA,YAAA,GAAe,KAAA,CAAM,SAAA;EANb;;;EAUR,YAAA,GAAe,KAAA,CAAM,SAAA;EAAS;;;EAI9B,eAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

package/dist/esm/components/data-grid/data-grid-toolbar.d.ts

@@ -6,13 +6,13 @@ declare function DataGridToolbar<TRow>({
   ctx,
   extra,
   extraLeading,
+  extraActions,
   hideQuickSearch
 }: {
   ctx: DataGridToolbarContext<TRow>;
-  /** Extra content rendered inside the toolbar row, to the left of the
-   *  built-in columns / export actions. Use this to add table-specific
-   *  affordances (refresh, custom toggles, row counts) without giving up
-   *  the default actions. */
+  /** Extra content in the leading cluster, after search / `extraLeading`
+   *  (filters, status badges, row counts). Stays with the search side so
+   *  it doesn't compete with the trailing icon actions. */
   extra?: React.ReactNode;
   /** Extra content rendered at the START of the toolbar row — occupies
    *  the same position as the built-in quick search (after it, if the
@@ -20,6 +20,10 @@ declare function DataGridToolbar<TRow>({
    *  to fully replace the quick search with a custom input, e.g. an
    *  AI-powered search bar. */
   extraLeading?: React.ReactNode;
+  /** Extra content in the trailing action cluster, immediately before
+   *  the built-in columns / export buttons (e.g. a labeled Refresh).
+   *  When present, a hairline divider separates it from those icons. */
+  extraActions?: React.ReactNode;
   /** Whether to hide the built-in quick-search input. When `true`,
    *  callers are expected to provide their own search UI via
    *  `extraLeading`. */

package/dist/esm/components/data-grid/data-grid-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-toolbar.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"mappings":";;;;iBA6QgB,eAAA;EACd,GAAA;EACA,KAAA;EACA,YAAA;EACA;AAAA;EAEA,GAAA,EAAK,sBAAA,CAAuB,IAAA;EANd;;;;EAWd,KAAA,GAAQ,KAAA,CAAM,SAAA;EARd;;;;;EAcA,YAAA,GAAe,KAAA,CAAM,SAAA;EAAS;;;EAI9B,eAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}
+{"version":3,"file":"data-grid-toolbar.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"mappings":";;;;iBA6QgB,eAAA;EACd,GAAA;EACA,KAAA;EACA,YAAA;EACA,YAAA;EACA;AAAA;EAEA,GAAA,EAAK,sBAAA,CAAuB,IAAA;EAPd;;;EAWd,KAAA,GAAQ,KAAA,CAAM,SAAA;EATd;;;;;EAeA,YAAA,GAAe,KAAA,CAAM,SAAA;EANb;;;EAUR,YAAA,GAAe,KAAA,CAAM,SAAA;EAAS;;;EAI9B,eAAA;AAAA,gCACD,GAAA,CAAA,OAAA"}

package/dist/esm/components/data-grid/data-grid-toolbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { Check, DownloadSimple, Eye, EyeSlash, MagnifyingGlass, X } from "@phosphor-icons/react";
 import { cn } from "@hexclave/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 //#region src/components/data-grid/data-grid-toolbar.tsx
 function usePopover() {
@@ -148,7 +148,7 @@ function ColumnManager({ columns, visibility, onChange, strings, dateDisplay, on
 		]
 	});
 }
-function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
+function DataGridToolbar({ ctx, extra, extraLeading, extraActions, hideQuickSearch }) {
 	const { state, onChange, columns, strings, exportCsv } = ctx;
 	const columnPopover = usePopover();
 	const updateVisibility = useCallback((visibility) => {
@@ -174,8 +174,9 @@ function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
 		}));
 	}, [onChange]);
 	const hasDateColumns = useMemo(() => columns.some((c) => c.type === "date" || c.type === "dateTime"), [columns]);
+	const hasExtraActions = React.Children.toArray(extraActions).length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2",
+		className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 pr-3 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
 			children: [
@@ -188,33 +189,40 @@ function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
 				extra
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center justify-end gap-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative shrink-0",
-				ref: columnPopover.ref,
-				children: [/* @__PURE__ */ jsx(ToolbarButton, {
-					onClick: () => columnPopover.setOpen(!columnPopover.open),
-					active: columnPopover.open,
-					title: strings.columns,
-					children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
-				}), columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, {
-					popoverRef: columnPopover.ref,
-					className: "right-0 left-auto",
-					children: /* @__PURE__ */ jsx(ColumnManager, {
-						columns,
-						visibility: state.columnVisibility,
-						onChange: updateVisibility,
-						strings,
-						dateDisplay: state.dateDisplay,
-						onDateDisplayChange: updateDateDisplay,
-						hasDateColumns
-					})
-				})]
-			}), /* @__PURE__ */ jsx(ToolbarButton, {
-				onClick: exportCsv,
-				title: strings.export,
-				children: /* @__PURE__ */ jsx(DownloadSimple, { className: "h-3.5 w-3.5" })
-			})]
+			className: "flex shrink-0 items-center justify-end gap-1.5",
+			children: [
+				hasExtraActions && /* @__PURE__ */ jsxs(Fragment, { children: [extraActions, /* @__PURE__ */ jsx("div", {
+					className: "mx-0.5 hidden h-4 w-px bg-foreground/[0.1] sm:block",
+					"aria-hidden": true
+				})] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative shrink-0",
+					ref: columnPopover.ref,
+					children: [/* @__PURE__ */ jsx(ToolbarButton, {
+						onClick: () => columnPopover.setOpen(!columnPopover.open),
+						active: columnPopover.open,
+						title: strings.columns,
+						children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
+					}), columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, {
+						popoverRef: columnPopover.ref,
+						className: "right-0 left-auto",
+						children: /* @__PURE__ */ jsx(ColumnManager, {
+							columns,
+							visibility: state.columnVisibility,
+							onChange: updateVisibility,
+							strings,
+							dateDisplay: state.dateDisplay,
+							onDateDisplayChange: updateDateDisplay,
+							hasDateColumns
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToolbarButton, {
+					onClick: exportCsv,
+					title: strings.export,
+					children: /* @__PURE__ */ jsx(DownloadSimple, { className: "h-3.5 w-3.5" })
+				})
+			]
 		})]
 	});
 }

package/dist/esm/components/data-grid/data-grid-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-toolbar.js","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n  Check,\n  DownloadSimple,\n  Eye,\n  EyeSlash,\n  MagnifyingGlass,\n  X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n  DataGridColumnDef,\n  DataGridDateDisplay,\n  DataGridStrings,\n  DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [open]);\n\n  return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n  children,\n  className,\n  popoverRef,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  popoverRef: React.Ref<HTMLDivElement>;\n}) {\n  return (\n    <div\n      ref={popoverRef}\n      className={cn(\n        \"absolute top-full left-0 mt-1 z-50\",\n        \"bg-white text-popover-foreground rounded-xl shadow-lg dark:bg-popover\",\n        \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n        \"backdrop-blur-xl\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n  value,\n  onChange,\n  placeholder,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n}) {\n  return (\n    <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n      <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none\" />\n      <input\n        type=\"text\"\n        className={cn(\n          \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n          \"border border-black/[0.08] dark:border-white/[0.06]\",\n          \"bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n          \"placeholder:text-muted-foreground/50\",\n          \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n          \"transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]\",\n        )}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {value && (\n        <button\n          className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n          onClick={() => onChange(\"\")}\n          aria-label=\"Clear search\"\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n  children,\n  onClick,\n  active,\n  title,\n  className: extraClassName,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  title?: string;\n  className?: string;\n}) {\n  return (\n    <button\n      className={cn(\n        \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n        \"h-7 w-7\",\n        \"transition-colors duration-75\",\n        active\n          ? \"bg-foreground/[0.06] text-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n        extraClassName,\n      )}\n      onClick={onClick}\n      title={title}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n  columns,\n  visibility,\n  onChange,\n  strings,\n  dateDisplay,\n  onDateDisplayChange,\n  hasDateColumns,\n}: {\n  columns: readonly DataGridColumnDef<TRow>[];\n  visibility: Record<string, boolean>;\n  onChange: (visibility: Record<string, boolean>) => void;\n  strings: DataGridStrings;\n  dateDisplay: DataGridDateDisplay;\n  onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n  hasDateColumns: boolean;\n}) {\n  const hideableColumns = useMemo(\n    () => columns.filter((c) => c.hideable !== false),\n    [columns],\n  );\n\n  const toggleColumn = (id: string) => {\n    const current = visibility[id] !== false;\n    onChange({ ...visibility, [id]: !current });\n  };\n\n  const showAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = true;\n    onChange(next);\n  };\n\n  const hideAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = false;\n    onChange(next);\n  };\n\n  return (\n    <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n      <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n        {hideableColumns.map((col) => {\n          const visible = visibility[col.id] !== false;\n          return (\n            <button\n              key={col.id}\n              className={cn(\n                \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n                \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n                visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n              )}\n              onClick={() => toggleColumn(col.id)}\n            >\n              {visible ? (\n                <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n              ) : (\n                <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n              )}\n              <span className=\"truncate text-left\">\n                {typeof col.header === \"string\" ? col.header : col.id}\n              </span>\n              {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n            </button>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n          {strings.showAll}\n        </button>\n        <span className=\"text-muted-foreground/20\">|</span>\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n          {strings.hideAll}\n        </button>\n      </div>\n\n      {/* Date format toggle — only rendered when at least one column\n          uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n          `state.dateDisplay` and the grid re-renders every date cell. */}\n      {hasDateColumns && (\n        <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n          <div className=\"flex items-center justify-between gap-2 px-1\">\n            <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n              {strings.dateFormat}\n            </span>\n            <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]\">\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"relative\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"relative\")}\n              >\n                {strings.dateFormatRelative}\n              </button>\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"absolute\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"absolute\")}\n              >\n                {strings.dateFormatAbsolute}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n  ctx,\n  extra,\n  extraLeading,\n  hideQuickSearch,\n}: {\n  ctx: DataGridToolbarContext<TRow>;\n  /** Extra content rendered inside the toolbar row, to the left of the\n   *  built-in columns / export actions. Use this to add table-specific\n   *  affordances (refresh, custom toggles, row counts) without giving up\n   *  the default actions. */\n  extra?: React.ReactNode;\n  /** Extra content rendered at the START of the toolbar row — occupies\n   *  the same position as the built-in quick search (after it, if the\n   *  quick search is visible). Use this together with `hideQuickSearch`\n   *  to fully replace the quick search with a custom input, e.g. an\n   *  AI-powered search bar. */\n  extraLeading?: React.ReactNode;\n  /** Whether to hide the built-in quick-search input. When `true`,\n   *  callers are expected to provide their own search UI via\n   *  `extraLeading`. */\n  hideQuickSearch?: boolean;\n}) {\n  const { state, onChange, columns, strings, exportCsv } = ctx;\n\n  const columnPopover = usePopover();\n\n  const updateVisibility = useCallback(\n    (visibility: Record<string, boolean>) => {\n      onChange((s) => ({ ...s, columnVisibility: visibility }));\n    },\n    [onChange],\n  );\n\n  const updateDateDisplay = useCallback(\n    (mode: DataGridDateDisplay) => {\n      onChange((s) => ({ ...s, dateDisplay: mode }));\n    },\n    [onChange],\n  );\n\n  const updateQuickSearch = useCallback(\n    (value: string) => {\n      onChange((s) => ({\n        ...s,\n        quickSearch: value,\n        // Reset to first page whenever the search text changes,\n        // otherwise you can end up on a page index that no longer\n        // exists in the filtered / refetched result set.\n        pagination: { ...s.pagination, pageIndex: 0 },\n      }));\n    },\n    [onChange],\n  );\n\n  const hasDateColumns = useMemo(\n    () => columns.some((c) => c.type === \"date\" || c.type === \"dateTime\"),\n    [columns],\n  );\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {!hideQuickSearch && (\n          <QuickSearch\n            value={state.quickSearch}\n            onChange={updateQuickSearch}\n            placeholder={strings.searchPlaceholder}\n          />\n        )}\n        {extraLeading}\n        {extra}\n      </div>\n      <div className=\"flex shrink-0 items-center justify-end gap-2\">\n        <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n          <ToolbarButton\n            onClick={() => columnPopover.setOpen(!columnPopover.open)}\n            active={columnPopover.open}\n            title={strings.columns}\n          >\n            <Eye className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          {columnPopover.open && (\n            <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n              <ColumnManager\n                columns={columns}\n                visibility={state.columnVisibility}\n                onChange={updateVisibility}\n                strings={strings}\n                dateDisplay={state.dateDisplay}\n                onDateDisplayChange={updateDateDisplay}\n                hasDateColumns={hasDateColumns}\n              />\n            </PopoverPanel>\n          )}\n        </div>\n\n        <ToolbarButton onClick={exportCsv} title={strings.export}>\n          <DownloadSimple className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-grid-toolbar.js","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n  Check,\n  DownloadSimple,\n  Eye,\n  EyeSlash,\n  MagnifyingGlass,\n  X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n  DataGridColumnDef,\n  DataGridDateDisplay,\n  DataGridStrings,\n  DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [open]);\n\n  return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n  children,\n  className,\n  popoverRef,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  popoverRef: React.Ref<HTMLDivElement>;\n}) {\n  return (\n    <div\n      ref={popoverRef}\n      className={cn(\n        \"absolute top-full left-0 mt-1 z-50\",\n        \"bg-white text-popover-foreground rounded-xl shadow-lg dark:bg-popover\",\n        \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n        \"backdrop-blur-xl\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n  value,\n  onChange,\n  placeholder,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n}) {\n  return (\n    <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n      <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none\" />\n      <input\n        type=\"text\"\n        className={cn(\n          \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n          \"border border-black/[0.08] dark:border-white/[0.06]\",\n          \"bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n          \"placeholder:text-muted-foreground/50\",\n          \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n          \"transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]\",\n        )}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {value && (\n        <button\n          className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n          onClick={() => onChange(\"\")}\n          aria-label=\"Clear search\"\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n  children,\n  onClick,\n  active,\n  title,\n  className: extraClassName,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  title?: string;\n  className?: string;\n}) {\n  return (\n    <button\n      className={cn(\n        \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n        \"h-7 w-7\",\n        \"transition-colors duration-75\",\n        active\n          ? \"bg-foreground/[0.06] text-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n        extraClassName,\n      )}\n      onClick={onClick}\n      title={title}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n  columns,\n  visibility,\n  onChange,\n  strings,\n  dateDisplay,\n  onDateDisplayChange,\n  hasDateColumns,\n}: {\n  columns: readonly DataGridColumnDef<TRow>[];\n  visibility: Record<string, boolean>;\n  onChange: (visibility: Record<string, boolean>) => void;\n  strings: DataGridStrings;\n  dateDisplay: DataGridDateDisplay;\n  onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n  hasDateColumns: boolean;\n}) {\n  const hideableColumns = useMemo(\n    () => columns.filter((c) => c.hideable !== false),\n    [columns],\n  );\n\n  const toggleColumn = (id: string) => {\n    const current = visibility[id] !== false;\n    onChange({ ...visibility, [id]: !current });\n  };\n\n  const showAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = true;\n    onChange(next);\n  };\n\n  const hideAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = false;\n    onChange(next);\n  };\n\n  return (\n    <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n      <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n        {hideableColumns.map((col) => {\n          const visible = visibility[col.id] !== false;\n          return (\n            <button\n              key={col.id}\n              className={cn(\n                \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n                \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n                visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n              )}\n              onClick={() => toggleColumn(col.id)}\n            >\n              {visible ? (\n                <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n              ) : (\n                <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n              )}\n              <span className=\"truncate text-left\">\n                {typeof col.header === \"string\" ? col.header : col.id}\n              </span>\n              {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n            </button>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n          {strings.showAll}\n        </button>\n        <span className=\"text-muted-foreground/20\">|</span>\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n          {strings.hideAll}\n        </button>\n      </div>\n\n      {/* Date format toggle — only rendered when at least one column\n          uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n          `state.dateDisplay` and the grid re-renders every date cell. */}\n      {hasDateColumns && (\n        <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n          <div className=\"flex items-center justify-between gap-2 px-1\">\n            <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n              {strings.dateFormat}\n            </span>\n            <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]\">\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"relative\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"relative\")}\n              >\n                {strings.dateFormatRelative}\n              </button>\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"absolute\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"absolute\")}\n              >\n                {strings.dateFormatAbsolute}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n  ctx,\n  extra,\n  extraLeading,\n  extraActions,\n  hideQuickSearch,\n}: {\n  ctx: DataGridToolbarContext<TRow>;\n  /** Extra content in the leading cluster, after search / `extraLeading`\n   *  (filters, status badges, row counts). Stays with the search side so\n   *  it doesn't compete with the trailing icon actions. */\n  extra?: React.ReactNode;\n  /** Extra content rendered at the START of the toolbar row — occupies\n   *  the same position as the built-in quick search (after it, if the\n   *  quick search is visible). Use this together with `hideQuickSearch`\n   *  to fully replace the quick search with a custom input, e.g. an\n   *  AI-powered search bar. */\n  extraLeading?: React.ReactNode;\n  /** Extra content in the trailing action cluster, immediately before\n   *  the built-in columns / export buttons (e.g. a labeled Refresh).\n   *  When present, a hairline divider separates it from those icons. */\n  extraActions?: React.ReactNode;\n  /** Whether to hide the built-in quick-search input. When `true`,\n   *  callers are expected to provide their own search UI via\n   *  `extraLeading`. */\n  hideQuickSearch?: boolean;\n}) {\n  const { state, onChange, columns, strings, exportCsv } = ctx;\n\n  const columnPopover = usePopover();\n\n  const updateVisibility = useCallback(\n    (visibility: Record<string, boolean>) => {\n      onChange((s) => ({ ...s, columnVisibility: visibility }));\n    },\n    [onChange],\n  );\n\n  const updateDateDisplay = useCallback(\n    (mode: DataGridDateDisplay) => {\n      onChange((s) => ({ ...s, dateDisplay: mode }));\n    },\n    [onChange],\n  );\n\n  const updateQuickSearch = useCallback(\n    (value: string) => {\n      onChange((s) => ({\n        ...s,\n        quickSearch: value,\n        // Reset to first page whenever the search text changes,\n        // otherwise you can end up on a page index that no longer\n        // exists in the filtered / refetched result set.\n        pagination: { ...s.pagination, pageIndex: 0 },\n      }));\n    },\n    [onChange],\n  );\n\n  const hasDateColumns = useMemo(\n    () => columns.some((c) => c.type === \"date\" || c.type === \"dateTime\"),\n    [columns],\n  );\n  const hasExtraActions = React.Children.toArray(extraActions).length > 0;\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 pr-3 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {!hideQuickSearch && (\n          <QuickSearch\n            value={state.quickSearch}\n            onChange={updateQuickSearch}\n            placeholder={strings.searchPlaceholder}\n          />\n        )}\n        {extraLeading}\n        {extra}\n      </div>\n      <div className=\"flex shrink-0 items-center justify-end gap-1.5\">\n        {hasExtraActions && (\n          <>\n            {extraActions}\n            <div\n              className=\"mx-0.5 hidden h-4 w-px bg-foreground/[0.1] sm:block\"\n              aria-hidden\n            />\n          </>\n        )}\n        <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n          <ToolbarButton\n            onClick={() => columnPopover.setOpen(!columnPopover.open)}\n            active={columnPopover.open}\n            title={strings.columns}\n          >\n            <Eye className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          {columnPopover.open && (\n            <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n              <ColumnManager\n                columns={columns}\n                visibility={state.columnVisibility}\n                onChange={updateVisibility}\n                strings={strings}\n                dateDisplay={state.dateDisplay}\n                onDateDisplayChange={updateDateDisplay}\n                hasDateColumns={hasDateColumns}\n              />\n            </PopoverPanel>\n          )}\n        </div>\n\n        <ToolbarButton onClick={exportCsv} title={strings.export}>\n          <DownloadSimple className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAqBA,SAAS,aAAa;CACpB,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,MAAM,OAAuB,IAAI;CAEvC,MAAM,gBAAgB;EACpB,IAAI,CAAC,MAAM;EACX,MAAM,WAAW,MAAkB;GACjC,IAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAc,GACvD,QAAQ,KAAK;EAEjB;EACA,SAAS,iBAAiB,aAAa,OAAO;EAC9C,aAAa,SAAS,oBAAoB,aAAa,OAAO;CAChE,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAgB;EACpB,IAAI,CAAC,MAAM;EACX,MAAM,WAAW,MAAqB;GACpC,IAAI,EAAE,QAAQ,UAAU,QAAQ,KAAK;EACvC;EACA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,aAAa,SAAS,oBAAoB,WAAW,OAAO;CAC9D,GAAG,CAAC,IAAI,CAAC;CAET,OAAO;EAAE;EAAM;EAAS;CAAI;AAC9B;AAEA,SAAS,aAAa,EACpB,UACA,WACA,cAKC;CACD,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,sCACA,yEACA,kDACA,oBACA,SACF;EAEC;CACE,CAAA;AAET;AAIA,SAAS,YAAY,EACnB,OACA,UACA,eAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,iBAAD,EAAiB,WAAU,6EAA8E,CAAA;GACzG,oBAAC,SAAD;IACE,MAAK;IACL,WAAW,GACT,mDACA,uDACA,yFACA,wCACA,+DACA,uGACF;IACa;IACN;IACP,WAAW,MAAM,SAAS,EAAE,OAAO,KAAK;GACzC,CAAA;GACA,SACC,oBAAC,UAAD;IACE,WAAU;IACV,eAAe,SAAS,EAAE;IAC1B,cAAW;cAEX,oBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;GAClB,CAAA;EAEP;;AAET;AAIA,SAAS,cAAc,EACrB,UACA,SACA,QACA,OACA,WAAW,kBAOV;CACD,OACE,oBAAC,UAAD;EACE,WAAW,GACT,4EACA,WACA,iCACA,SACI,yCACA,0EACJ,cACF;EACS;EACF;EAEN;CACK,CAAA;AAEZ;AAIA,SAAS,cAAoB,EAC3B,SACA,YACA,UACA,SACA,aACA,qBACA,kBASC;CACD,MAAM,kBAAkB,cAChB,QAAQ,QAAQ,MAAM,EAAE,aAAa,KAAK,GAChD,CAAC,OAAO,CACV;CAEA,MAAM,gBAAgB,OAAe;EACnC,MAAM,UAAU,WAAW,QAAQ;EACnC,SAAS;GAAE,GAAG;IAAa,KAAK,CAAC;EAAQ,CAAC;CAC5C;CAEA,MAAM,gBAAgB;EACpB,MAAM,OAAO,EAAE,GAAG,WAAW;EAC7B,KAAK,MAAM,OAAO,iBAAiB,KAAK,IAAI,MAAM;EAClD,SAAS,IAAI;CACf;CAEA,MAAM,gBAAgB;EACpB,MAAM,OAAO,EAAE,GAAG,WAAW;EAC7B,KAAK,MAAM,OAAO,iBAAiB,KAAK,IAAI,MAAM;EAClD,SAAS,IAAI;CACf;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACZ,gBAAgB,KAAK,QAAQ;KAC5B,MAAM,UAAU,WAAW,IAAI,QAAQ;KACvC,OACE,qBAAC,UAAD;MAEE,WAAW,GACT,mEACA,4DACA,UAAU,oBAAoB,0BAChC;MACA,eAAe,aAAa,IAAI,EAAE;gBAPpC;OASG,UACC,oBAAC,KAAD,EAAK,WAAU,0CAA2C,CAAA,IAE1D,oBAAC,UAAD,EAAU,WAAU,4BAA6B,CAAA;OAEnD,oBAAC,QAAD;QAAM,WAAU;kBACb,OAAO,IAAI,WAAW,WAAW,IAAI,SAAS,IAAI;OAC/C,CAAA;OACL,WAAW,oBAAC,OAAD,EAAO,WAAU,8CAA+C,CAAA;MACtE;QAjBD,IAAI,EAiBH;IAEZ,CAAC;GACE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,UAAD;MAAQ,WAAU;MAA6H,SAAS;gBACrJ,QAAQ;KACH,CAAA;KACR,oBAAC,QAAD;MAAM,WAAU;gBAA2B;KAAO,CAAA;KAClD,oBAAC,UAAD;MAAQ,WAAU;MAA6H,SAAS;gBACrJ,QAAQ;KACH,CAAA;IACL;;GAKJ,kBACC,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBACb,QAAQ;KACL,CAAA,GACN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,UAAD;OACE,WAAW,GACT,uGACA,gBAAgB,aACZ,0GACA,0FACN;OACA,eAAe,oBAAoB,UAAU;iBAE5C,QAAQ;MACH,CAAA,GACR,oBAAC,UAAD;OACE,WAAW,GACT,uGACA,gBAAgB,aACZ,0GACA,0FACN;OACA,eAAe,oBAAoB,UAAU;iBAE5C,QAAQ;MACH,CAAA,CACL;OACF;;GACF,CAAA;EAEJ;;AAET;AAIA,SAAgB,gBAAsB,EACpC,KACA,OACA,cACA,cACA,mBAqBC;CACD,MAAM,EAAE,OAAO,UAAU,SAAS,SAAS,cAAc;CAEzD,MAAM,gBAAgB,WAAW;CAEjC,MAAM,mBAAmB,aACtB,eAAwC;EACvC,UAAU,OAAO;GAAE,GAAG;GAAG,kBAAkB;EAAW,EAAE;CAC1D,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,aACvB,SAA8B;EAC7B,UAAU,OAAO;GAAE,GAAG;GAAG,aAAa;EAAK,EAAE;CAC/C,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,oBAAoB,aACvB,UAAkB;EACjB,UAAU,OAAO;GACf,GAAG;GACH,aAAa;GAIb,YAAY;IAAE,GAAG,EAAE;IAAY,WAAW;GAAE;EAC9C,EAAE;CACJ,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,iBAAiB,cACf,QAAQ,MAAM,MAAM,EAAE,SAAS,UAAU,EAAE,SAAS,UAAU,GACpE,CAAC,OAAO,CACV;CACA,MAAM,kBAAkB,MAAM,SAAS,QAAQ,YAAY,CAAC,CAAC,SAAS;CAEtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,CAAC,mBACA,oBAAC,aAAD;KACE,OAAO,MAAM;KACb,UAAU;KACV,aAAa,QAAQ;IACtB,CAAA;IAEF;IACA;GACE;MACL,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,mBACC,qBAAA,UAAA,EAAA,UAAA,CACG,cACD,oBAAC,OAAD;KACE,WAAU;KACV,eAAA;IACD,CAAA,CACD,EAAA,CAAA;IAEJ,qBAAC,OAAD;KAAK,WAAU;KAAoB,KAAK,cAAc;eAAtD,CACE,oBAAC,eAAD;MACE,eAAe,cAAc,QAAQ,CAAC,cAAc,IAAI;MACxD,QAAQ,cAAc;MACtB,OAAO,QAAQ;gBAEf,oBAAC,KAAD,EAAK,WAAU,cAAe,CAAA;KACjB,CAAA,GACd,cAAc,QACb,oBAAC,cAAD;MAAc,YAAY,cAAc;MAAK,WAAU;gBACrD,oBAAC,eAAD;OACW;OACT,YAAY,MAAM;OAClB,UAAU;OACD;OACT,aAAa,MAAM;OACnB,qBAAqB;OACL;MACjB,CAAA;KACW,CAAA,CAEb;;IAEL,oBAAC,eAAD;KAAe,SAAS;KAAW,OAAO,QAAQ;eAChD,oBAAC,gBAAD,EAAgB,WAAU,cAAe,CAAA;IAC5B,CAAA;GACZ;IACF;;AAET"}

package/dist/esm/components/data-grid/data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid.tsx"],"mappings":";;;iBAyEgB,mCAAA,CAAoC,MAA0B,EAAlB,WAAW;;AAAvE;;;;AAA8E;AAkiB9E;;;;;;;;;;;AAAyD;;;;;;;;;;;;;;;;;;;;;iBAAzC,QAAA,OAAe,KAAA,EAAO,aAAa,CAAC,IAAA,gCAAK,GAAA,CAAA,OAAA"}
+{"version":3,"file":"data-grid.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid.tsx"],"mappings":";;;iBA+EgB,mCAAA,CAAoC,MAA0B,EAAlB,WAAW;;AAAvE;;;;AAA8E;AA6mB9E;;;;;;;;;;;AAAyD;;;;;;;;;;;;;;;;;;;;;iBAAzC,QAAA,OAAe,KAAA,EAAO,aAAa,CAAC,IAAA,gCAAK,GAAA,CAAA,OAAA"}

package/dist/esm/components/data-grid/data-grid.js

@@ -14,6 +14,7 @@ import { DataGridExportDialog } from "./data-grid-export-dialog.js";
 import { DataGridToolbar } from "./data-grid-toolbar.js";
 //#region src/components/data-grid/data-grid.tsx
 const DEFAULT_INFINITE_MAX_HEIGHT = "calc(100dvh - 16rem)";
+const DATA_GRID_SCROLLBAR_CLASS_NAME = cn("[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]");
 function getEventTargetElement(target) {
 	if (target instanceof Element) return target;
 	if (target instanceof Node) return target.parentElement;
@@ -247,6 +248,20 @@ function hashStringToInt(value) {
 	for (let i = 0; i < value.length; i++) hash = (hash << 5) - hash + value.charCodeAt(i) | 0;
 	return Math.abs(hash);
 }
+/**
+* Column flex fractions used when the grid is loading before any schema is
+* known (e.g. QueryDataGrid discovers columns from the first result page).
+* Without these, `SkeletonRow` would render zero cells and the body looks
+* like an empty black void instead of a shimmer.
+*/
+const SCHEMA_PENDING_COL_FRACTIONS = [
+	.18,
+	.16,
+	.34,
+	.2,
+	.12
+];
+const SCHEMA_PENDING_SKELETON_ROWS = 10;
 function SkeletonRow({ columns, height, showCheckbox }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex",
@@ -266,6 +281,46 @@ function SkeletonRow({ columns, height, showCheckbox }) {
 		}, col.id))]
 	});
 }
+/** Sticky header shimmer when columns haven't been discovered yet. */
+function SchemaPendingHeaderCells({ showCheckbox }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showCheckbox && /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 items-center justify-center border-r border-foreground/[0.04]",
+		style: { width: 44 }
+	}), SCHEMA_PENDING_COL_FRACTIONS.map((frac, colIdx) => /* @__PURE__ */ jsx("div", {
+		className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+		style: { width: `${frac * 100}%` },
+		children: /* @__PURE__ */ jsx(DesignSkeleton, {
+			className: "h-3 rounded-md",
+			style: { width: `${45 + colIdx * 13 % 30}%` }
+		})
+	}, colIdx))] });
+}
+/** Full-width body shimmer when columns haven't been discovered yet. */
+function SchemaPendingSkeleton({ rowHeight, showCheckbox }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		"data-data-grid-schema-pending-skeleton": "",
+		role: "status",
+		"aria-label": "Loading",
+		children: Array.from({ length: SCHEMA_PENDING_SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full border-b border-black/[0.04] dark:border-white/[0.04]",
+			style: { height: rowHeight },
+			role: "row",
+			children: [showCheckbox && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+				style: { width: 44 },
+				children: /* @__PURE__ */ jsx(DesignSkeleton, { className: "h-4 w-4 rounded" })
+			}), SCHEMA_PENDING_COL_FRACTIONS.map((frac, colIdx) => /* @__PURE__ */ jsx("div", {
+				className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+				style: { width: `${frac * 100}%` },
+				children: /* @__PURE__ */ jsx(DesignSkeleton, {
+					className: "h-3.5 rounded-md",
+					style: { width: `${50 + (rowIdx * 7 + colIdx * 19) % 40}%` }
+				})
+			}, colIdx))]
+		}, rowIdx))
+	});
+}
 function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel, title }) {
 	const Icon = indeterminate ? MinusSquare : checked ? CheckSquare : Square;
 	return /* @__PURE__ */ jsx("button", {
@@ -430,7 +485,7 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 * - `renderCell` must be a pure function — no React hooks inside.
 */
 function DataGrid(props) {
-	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", exportOptions, strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
+	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, horizontalScrollbarPosition = "bottom", toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", exportOptions, strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
 	const isDynamicRowHeight = rowHeightProp === "auto";
 	const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
 	const estimatedRowHeight = estimatedRowHeightProp ?? fixedRowHeight ?? 44;
@@ -715,11 +770,31 @@ function DataGrid(props) {
 			observer.disconnect();
 		};
 	}, []);
-	const handleBodyScroll = useCallback(() => {
+	const isSyncingHorizontalScrollRef = useRef(false);
+	const syncHorizontalScroll = useCallback((source) => {
 		const body = scrollContainerRef.current;
 		const header = headerScrollRef.current;
-		if (body && header) header.scrollLeft = body.scrollLeft;
+		if (body == null || header == null || isSyncingHorizontalScrollRef.current) return;
+		const from = source === "header" ? header : body;
+		const to = source === "header" ? body : header;
+		if (to.scrollLeft === from.scrollLeft) return;
+		isSyncingHorizontalScrollRef.current = true;
+		to.scrollLeft = from.scrollLeft;
+		isSyncingHorizontalScrollRef.current = false;
 	}, []);
+	const handleBodyScroll = useCallback(() => {
+		syncHorizontalScroll("body");
+	}, [syncHorizontalScroll]);
+	const handleHeaderScroll = useCallback(() => {
+		syncHorizontalScroll("header");
+	}, [syncHorizontalScroll]);
+	const horizontalScrollbarAtTop = horizontalScrollbarPosition === "top";
+	const handleBodyWheel = useCallback((event) => {
+		if (!horizontalScrollbarAtTop || event.deltaX === 0) return;
+		const header = headerScrollRef.current;
+		if (header == null) return;
+		header.scrollLeft += event.deltaX;
+	}, [horizontalScrollbarAtTop]);
 	const toolbarCtx = useMemo(() => ({
 		state,
 		onChange,
@@ -798,15 +873,17 @@ function DataGrid(props) {
 						children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" })
 					}), /* @__PURE__ */ jsx("div", {
 						ref: headerScrollRef,
-						className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
-						children: /* @__PURE__ */ jsxs("div", {
+						className: cn("w-full min-w-0 shrink-0 border-b border-foreground/[0.06]", horizontalScrollbarAtTop ? cn("overflow-x-auto overflow-y-hidden", DATA_GRID_SCROLLBAR_CLASS_NAME) : "overflow-hidden"),
+						onScroll: horizontalScrollbarAtTop ? handleHeaderScroll : void 0,
+						children: /* @__PURE__ */ jsx("div", {
 							className: "flex",
 							style: {
 								height: headerHeight,
-								minWidth: totalContentWidth
+								minWidth: totalContentWidth || void 0,
+								width: visibleColumns.length === 0 ? "100%" : void 0
 							},
 							role: "row",
-							children: [selectionMode !== "none" && /* @__PURE__ */ jsx("div", {
+							children: isLoading && visibleColumns.length === 0 ? /* @__PURE__ */ jsx(SchemaPendingHeaderCells, { showCheckbox: selectionMode !== "none" }) : /* @__PURE__ */ jsxs(Fragment, { children: [selectionMode !== "none" && /* @__PURE__ */ jsx("div", {
 								className: "flex items-center justify-center border-r border-foreground/[0.04]",
 								style: { width: 44 },
 								children: selectionMode === "multiple" && /* @__PURE__ */ jsx(SelectionCheckbox, {
@@ -824,15 +901,16 @@ function DataGrid(props) {
 									col,
 									resizable
 								}, col.id);
-							})]
+							})] })
 						})
 					})]
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: scrollContainerRef,
-				className: cn("relative z-0 w-full min-w-0 overflow-auto bg-transparent", isBounded ? "min-h-0 flex-1" : "flex-none", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"),
+				className: cn("relative z-0 w-full min-w-0 bg-transparent", horizontalScrollbarAtTop ? "overflow-y-auto overflow-x-hidden" : "overflow-auto", isBounded ? "min-h-0 flex-1" : "flex-none", DATA_GRID_SCROLLBAR_CLASS_NAME),
 				onScroll: handleBodyScroll,
+				onWheel: horizontalScrollbarAtTop ? handleBodyWheel : void 0,
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: rowsClipRef,
 					"data-data-grid-rows-clip": "",
@@ -843,12 +921,18 @@ function DataGrid(props) {
 					},
 					children: [
 						isLoading && /* @__PURE__ */ jsx("div", {
-							style: { minWidth: totalContentWidth },
-							children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {
+							style: {
+								minWidth: totalContentWidth || void 0,
+								width: visibleColumns.length === 0 ? "100%" : void 0
+							},
+							children: loadingState ?? (visibleColumns.length === 0 ? /* @__PURE__ */ jsx(SchemaPendingSkeleton, {
+								rowHeight: estimatedRowHeight,
+								showCheckbox: selectionMode !== "none"
+							}) : Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {
 								columns: visibleColumns,
 								height: estimatedRowHeight,
 								showCheckbox: selectionMode !== "none"
-							}, i))
+							}, i)))
 						}),
 						!isLoading && rows.length === 0 && /* @__PURE__ */ jsx("div", {
 							className: "flex items-center justify-center py-16 text-sm text-muted-foreground",