@hexclave/dashboard-ui-components 1.0.0

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

@@ -0,0 +1,226 @@
+"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 React, { useCallback, useMemo, useRef, useState } from "react";
+
+//#region src/components/data-grid/data-grid-toolbar.tsx
+function usePopover() {
+	const [open, setOpen] = useState(false);
+	const ref = useRef(null);
+	React.useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [open]);
+	React.useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [open]);
+	return {
+		open,
+		setOpen,
+		ref
+	};
+}
+function PopoverPanel({ children, className, popoverRef }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref: popoverRef,
+		className: cn("absolute top-full left-0 mt-1 z-50", "bg-popover text-popover-foreground rounded-xl shadow-lg", "ring-1 ring-black/[0.08] dark:ring-white/[0.1]", "backdrop-blur-xl", className),
+		children
+	});
+}
+function QuickSearch({ value, onChange, placeholder }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex min-w-0 flex-1 items-center sm:flex-initial",
+		children: [
+			/* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" }),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				className: cn("h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs", "bg-background", "border border-black/[0.08] dark:border-white/[0.08]", "placeholder:text-muted-foreground/40", "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "transition-all duration-150"),
+				placeholder,
+				value,
+				onChange: (e) => onChange(e.target.value)
+			}),
+			value && /* @__PURE__ */ jsx("button", {
+				className: "absolute right-2 text-muted-foreground/40 hover:text-muted-foreground",
+				onClick: () => onChange(""),
+				"aria-label": "Clear search",
+				children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+			})
+		]
+	});
+}
+function ToolbarButton({ children, onClick, active, title, className: extraClassName }) {
+	return /* @__PURE__ */ jsx("button", {
+		className: cn("relative flex items-center justify-center rounded-lg text-xs font-medium", "h-7 w-7", "transition-colors duration-75", active ? "bg-foreground/[0.06] text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]", extraClassName),
+		onClick,
+		title,
+		children
+	});
+}
+function ColumnManager({ columns, visibility, onChange, strings, dateDisplay, onDateDisplayChange, hasDateColumns }) {
+	const hideableColumns = useMemo(() => columns.filter((c) => c.hideable !== false), [columns]);
+	const toggleColumn = (id) => {
+		const current = visibility[id] !== false;
+		onChange({
+			...visibility,
+			[id]: !current
+		});
+	};
+	const showAll = () => {
+		const next = { ...visibility };
+		for (const col of hideableColumns) next[col.id] = true;
+		onChange(next);
+	};
+	const hideAll = () => {
+		const next = { ...visibility };
+		for (const col of hideableColumns) next[col.id] = false;
+		onChange(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-2 min-w-[240px] max-w-[300px]",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "max-h-[280px] overflow-y-auto space-y-0.5",
+				children: hideableColumns.map((col) => {
+					const visible = visibility[col.id] !== false;
+					return /* @__PURE__ */ jsxs("button", {
+						className: cn("flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs", "hover:bg-foreground/[0.06] transition-colors duration-75", visible ? "text-foreground" : "text-muted-foreground/50"),
+						onClick: () => toggleColumn(col.id),
+						children: [
+							visible ? /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 flex-shrink-0 text-blue-500" }) : /* @__PURE__ */ jsx(EyeSlash, { className: "h-3.5 w-3.5 flex-shrink-0" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate text-left",
+								children: typeof col.header === "string" ? col.header : col.id
+							}),
+							visible && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 ml-auto flex-shrink-0 text-blue-500" })
+						]
+					}, col.id);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						className: "text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75",
+						onClick: showAll,
+						children: strings.showAll
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/20",
+						children: "|"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: "text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75",
+						onClick: hideAll,
+						children: strings.hideAll
+					})
+				]
+			}),
+			hasDateColumns && /* @__PURE__ */ jsx("div", {
+				className: "mt-2 pt-2 border-t border-foreground/[0.06]",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2 px-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
+						children: strings.dateFormat
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5",
+						children: [/* @__PURE__ */ jsx("button", {
+							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75", dateDisplay === "relative" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"),
+							onClick: () => onDateDisplayChange("relative"),
+							children: strings.dateFormatRelative
+						}), /* @__PURE__ */ jsx("button", {
+							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75", dateDisplay === "absolute" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"),
+							onClick: () => onDateDisplayChange("absolute"),
+							children: strings.dateFormatAbsolute
+						})]
+					})]
+				})
+			})
+		]
+	});
+}
+function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
+	const { state, onChange, columns, strings, exportCsv } = ctx;
+	const columnPopover = usePopover();
+	const updateVisibility = useCallback((visibility) => {
+		onChange((s) => ({
+			...s,
+			columnVisibility: visibility
+		}));
+	}, [onChange]);
+	const updateDateDisplay = useCallback((mode) => {
+		onChange((s) => ({
+			...s,
+			dateDisplay: mode
+		}));
+	}, [onChange]);
+	const updateQuickSearch = useCallback((value) => {
+		onChange((s) => ({
+			...s,
+			quickSearch: value,
+			pagination: {
+				...s.pagination,
+				pageIndex: 0
+			}
+		}));
+	}, [onChange]);
+	const hasDateColumns = useMemo(() => columns.some((c) => c.type === "date" || c.type === "dateTime"), [columns]);
+	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",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+			children: [
+				!hideQuickSearch && /* @__PURE__ */ jsx(QuickSearch, {
+					value: state.quickSearch,
+					onChange: updateQuickSearch,
+					placeholder: strings.searchPlaceholder
+				}),
+				extraLeading,
+				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" })
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { DataGridToolbar };
+//# sourceMappingURL=data-grid-toolbar.js.map

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

@@ -0,0 +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 \"@stackframe/stack-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-popover text-popover-foreground rounded-xl shadow-lg\",\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/50 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          \"bg-background\",\n          \"border border-black/[0.08] dark:border-white/[0.08]\",\n          \"placeholder:text-muted-foreground/40\",\n          \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n          \"transition-all duration-150\",\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-foreground/[0.04] p-0.5\">\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75\",\n                  dateDisplay === \"relative\"\n                    ? \"bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground\",\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-75\",\n                  dateDisplay === \"absolute\"\n                    ? \"bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground\",\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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"}

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

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DataGridProps } from "./types";
+
+//#region src/components/data-grid/data-grid.d.ts
+declare function isDataGridInteractiveRowClickTarget(target: EventTarget | null): boolean;
+/**
+ * Interactive table built on TanStack Table v8. Sorting, column sizing,
+ * visibility, ordering, and pinning are owned by the table instance; we
+ * layer virtualization, sticky toolbar/header/footer, infinite scroll,
+ * quick search, CSV export, and date-format toggling on top.
+ *
+ * The grid is display-only — it does not fetch or page data itself. Pair
+ * with `useDataSource` for client- or server-side data and pass the
+ * already-processed slice through `rows`.
+ *
+ * ```tsx
+ * const columns = useMemo(() => [...], []);
+ * const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+ * const gridData = useDataSource({
+ *   data: users, columns, getRowId: (r) => r.id,
+ *   sorting: gridState.sorting,
+ *   quickSearch: gridState.quickSearch,
+ *   pagination: gridState.pagination,
+ *   paginationMode: "client",
+ * });
+ *
+ * <DataGrid
+ *   columns={columns}
+ *   rows={gridData.rows}
+ *   getRowId={(r) => r.id}
+ *   totalRowCount={gridData.totalRowCount}
+ *   isLoading={gridData.isLoading}
+ *   state={gridState}
+ *   onChange={setGridState}
+ * />
+ * ```
+ *
+ * Iron rules:
+ * - `rows` is always `gridData.rows`, never your raw array.
+ * - Columns must be stable (define outside the component or wrap in `useMemo`).
+ * - Initialize state with `createDefaultDataGridState(columns)`.
+ * - `renderCell` must be a pure function — no React hooks inside.
+ */
+declare function DataGrid<TRow>(props: DataGridProps<TRow>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataGrid, isDataGridInteractiveRowClickTarget };
+//# sourceMappingURL=data-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid.tsx"],"mappings":";;;;iBAmEgB,mCAAA,CAAoC,MAAA,EAAQ,WAAA;;;AAA5D;;;;;AAohBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,QAAA,MAAA,CAAe,KAAA,EAAO,aAAA,CAAc,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}