@gridkitjs/react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blagoja Blazhevski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# @gridkitjs/react
+
+React data-grid components built on
+[`@gridkitjs/core`](https://www.npmjs.com/package/@gridkitjs/core).
+
+> **Early development.** The API is still moving and may break between minor
+> versions.
+
+```bash
+pnpm add @gridkitjs/react
+```
+
+```tsx
+import { defineColumnsFromRows } from "@gridkitjs/core";
+import { DataGridComponent, type ColumnDefinition } from "@gridkitjs/react";
+
+const rows = [
+  { Id: 1, Application: { Id: 9, Name: "Portal" }, Cost: 1250.5 },
+  { Id: 2, Application: { Id: 4, Name: "Admin" }, Cost: 87.25 },
+];
+
+type Row = (typeof rows)[number];
+
+const columns: readonly ColumnDefinition<Row>[] = [
+  ...defineColumnsFromRows(rows),
+  { field: "Cost", id: "Cost.currency", type: "currency", header: "Cost" },
+];
+
+<DataGridComponent
+  dataSource={rows}
+  columns={columns}
+  resizableColumns
+  resizeMode="fit"
+/>;
+```
+
+Columns can be inferred from the data or declared outright — a column's `type`
+drives its default alignment. With `resizableColumns`, a column edge can be
+dragged to resize or double-clicked to fit its content. `resizeMode="fit"`
+keeps columns filling the grid; `"fixed"` lets each keep its own width.
+
+Requires React 19.
+
+Full documentation: [github.com/blagojablazhevski/gridkit](https://github.com/blagojablazhevski/gridkit#readme)
+
+## License
+
+MIT © Blagoja Blazhevski

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ColumnDefinition as ColumnDefinition$1, ColumnSizingState, ColumnSizeDefaults, ColumnResizeEvent, ResolvedColumn as ResolvedColumn$1 } from '@gridkitjs/core';
+export { ColumnResizeEvent, ColumnSizeDefaults, ColumnSizingState } from '@gridkitjs/core';
+
+/**
+ * A column whose header may render arbitrary React content. @gridkitjs/core
+ * stays framework-agnostic and so leaves that output type open; this is the
+ * binding React consumers want, and the one they should import.
+ */
+type ColumnDefinition<Row> = ColumnDefinition$1<Row, ReactNode>;
+/** A column paired with the width it renders at. */
+type ResolvedColumn<Row> = ResolvedColumn$1<Row, ReactNode>;
+type Borders = "horizontal" | "vertical" | "all" | "none";
+/**
+ * How a column's width relates to the grid's.
+ *
+ * `"fit"` keeps the columns filling the grid: the space a column gives up is
+ * handed to the others, and the space it takes comes out of them. `"fixed"`
+ * lets every column keep its own width, so a resize moves one column and
+ * nothing else, and the grid scrolls or leaves a gap accordingly.
+ */
+type ResizeMode = "fit" | "fixed";
+interface HoverableConfig {
+    rows?: boolean;
+    columns?: boolean;
+    cells?: boolean;
+}
+interface DataGridProps<Row> {
+    columns?: readonly ColumnDefinition<Row>[] | undefined;
+    dataSource?: readonly Row[] | undefined;
+    borders?: Borders | undefined;
+    hoverable?: HoverableConfig | undefined;
+    /** Whether columns can be dragged wider, unless a column says otherwise. */
+    resizableColumns?: boolean | undefined;
+    /**
+     * Whether columns fill the grid's width or sit at their own. Defaults to
+     * `"fit"`, under which columns the user has sized keep their width and the
+     * rest share what is left.
+     */
+    resizeMode?: ResizeMode | undefined;
+    /** Column widths to start from, keyed by column id. Uncontrolled. */
+    defaultColumnSizing?: ColumnSizingState | undefined;
+    /**
+     * Sizes applied to columns that do not set their own — the width they start
+     * at and the bounds they may be resized between. Distinct from
+     * `defaultColumnSizing`, which sets specific columns' starting widths.
+     */
+    columnSizeDefaults?: Partial<ColumnSizeDefaults> | undefined;
+    /**
+     * Called as the user resizes a column. Fires continuously with
+     * `phase: "move"` and once on release with `phase: "end"` — the latter being
+     * the one to persist. Auto-fit does not call it; it reports user intent only.
+     */
+    onColumnResize?: ((event: ColumnResizeEvent) => void) | undefined;
+}
+declare function DataGridComponent<Row>({ dataSource, columns, borders, hoverable, resizableColumns, resizeMode, defaultColumnSizing, columnSizeDefaults, onColumnResize, }: DataGridProps<Row>): react.JSX.Element;
+
+export { type ColumnDefinition, DataGridComponent, type DataGridProps, type ResizeMode, type ResolvedColumn };

package/dist/index.js

@@ -0,0 +1,328 @@
+// src/DataGrid/DataGrid.tsx
+import { useMemo, useRef, useState as useState3 } from "react";
+import {
+  defineColumnsFromRows,
+  fitColumnsToWidth,
+  resolveColumnWidths,
+  totalColumnWidth
+} from "@gridkitjs/core";
+
+// src/DataGrid/components/GridHeader.tsx
+import { KEYBOARD_STEP } from "@gridkitjs/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GridHeader({
+  columns,
+  resize
+}) {
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "grid-header", children: columns.map((entry) => {
+    const { column } = entry;
+    const resizing = resize.activeColumnId === entry.id;
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        "data-gridkit-column": entry.id,
+        className: resizing ? "header-cell is-resizing" : "header-cell",
+        children: [
+          entry.label,
+          entry.resizable && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "header-resize-handle",
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": `Resize ${column.field}`,
+              tabIndex: 0,
+              onPointerDown: (event) => {
+                resize.startResize(entry, event);
+              },
+              onDoubleClick: () => {
+                resize.sizeToContent(entry);
+              },
+              onKeyDown: (event) => {
+                if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                  return;
+                event.preventDefault();
+                resize.nudge(
+                  entry,
+                  event.key === "ArrowLeft" ? -KEYBOARD_STEP : KEYBOARD_STEP
+                );
+              },
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "header-resize-grip",
+                  viewBox: "0 0 6 14",
+                  width: "6",
+                  height: "14",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "1.5", cy: "4", r: "1" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "1.5", cy: "7", r: "1" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "1.5", cy: "10", r: "1" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "4", r: "1" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "7", r: "1" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "10", r: "1" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      entry.id
+    );
+  }) }) });
+}
+
+// src/DataGrid/components/GridBody.tsx
+import { accessDotted } from "@gridkitjs/core";
+import "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function GridBody({
+  columns,
+  dataSource,
+  activeColumnId
+}) {
+  return /* @__PURE__ */ jsx2("tbody", { className: "grid-body", children: dataSource?.map((row, index) => /* @__PURE__ */ jsx2("tr", { className: "grid-row", children: columns.map(({ id, column, alignment }) => /* @__PURE__ */ jsx2(
+    "td",
+    {
+      "data-gridkit-column": id,
+      className: id === activeColumnId ? "grid-cell is-resizing" : "grid-cell",
+      style: { textAlign: alignment },
+      children: accessDotted(row, column.field)
+    },
+    id
+  )) }, index)) });
+}
+
+// src/DataGrid/useColumnResize.ts
+import {
+  useState
+} from "react";
+import {
+  applyColumnResize,
+  beginColumnResize,
+  clampColumnWidth,
+  resolveColumnConstraints,
+  sizeColumnToContent
+} from "@gridkitjs/core";
+
+// src/DataGrid/measureColumnContent.ts
+function measureColumnContent(table, columnId) {
+  const cells = table.querySelectorAll(
+    `[data-gridkit-column="${CSS.escape(columnId)}"]`
+  );
+  const range = document.createRange();
+  let widest = null;
+  for (const cell of cells) {
+    range.selectNodeContents(cell);
+    const style = getComputedStyle(cell);
+    const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
+    if (widest === null || width > widest) {
+      widest = width;
+    }
+  }
+  return widest;
+}
+
+// src/DataGrid/useColumnResize.ts
+function useColumnResize({
+  tableRef,
+  sizing,
+  setSizing,
+  columnSizeDefaults,
+  onColumnResize
+}) {
+  const [activeColumnId, setActiveColumnId] = useState(null);
+  function commit(base, columnId, width, phase) {
+    const next = { ...base, [columnId]: width };
+    setSizing(next);
+    onColumnResize?.({ columnId, width, sizing: next, phase });
+  }
+  function startResize(entry, event) {
+    const handle = event.currentTarget;
+    const { pointerId } = event;
+    const session = beginColumnResize(
+      entry.column,
+      entry.width,
+      event.clientX,
+      columnSizeDefaults
+    );
+    const base = sizing;
+    let width = session.startWidth;
+    event.preventDefault();
+    event.stopPropagation();
+    handle.setPointerCapture(pointerId);
+    setActiveColumnId(session.columnId);
+    function move(moveEvent) {
+      width = applyColumnResize(session, moveEvent.clientX);
+      commit(base, session.columnId, width, "move");
+    }
+    function stop() {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", end);
+      handle.removeEventListener("pointercancel", cancel);
+      window.removeEventListener("keydown", onKeyDown);
+      if (handle.hasPointerCapture(pointerId)) {
+        handle.releasePointerCapture(pointerId);
+      }
+      setActiveColumnId(null);
+    }
+    function end() {
+      stop();
+      commit(base, session.columnId, width, "end");
+    }
+    function cancel() {
+      stop();
+      setSizing(base);
+      onColumnResize?.({
+        columnId: session.columnId,
+        width: session.startWidth,
+        sizing: base,
+        phase: "end"
+      });
+    }
+    function onKeyDown(keyEvent) {
+      if (keyEvent.key === "Escape") {
+        cancel();
+      }
+    }
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", cancel);
+    window.addEventListener("keydown", onKeyDown);
+  }
+  function sizeToContent(entry) {
+    const table = tableRef.current;
+    if (table === null) {
+      return;
+    }
+    const measured = measureColumnContent(table, entry.id);
+    if (measured === null) {
+      return;
+    }
+    commit(
+      sizing,
+      entry.id,
+      sizeColumnToContent(
+        measured,
+        resolveColumnConstraints(entry.column, columnSizeDefaults)
+      ),
+      "end"
+    );
+  }
+  function nudge(entry, delta) {
+    commit(
+      sizing,
+      entry.id,
+      clampColumnWidth(
+        entry.width + delta,
+        resolveColumnConstraints(entry.column, columnSizeDefaults)
+      ),
+      "end"
+    );
+  }
+  return { activeColumnId, startResize, sizeToContent, nudge };
+}
+
+// src/DataGrid/useElementWidth.ts
+import { useLayoutEffect, useState as useState2 } from "react";
+function useElementWidth(ref, enabled) {
+  const [width, setWidth] = useState2(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element === null || !enabled) {
+      return void 0;
+    }
+    setWidth(element.clientWidth);
+    const observer = new ResizeObserver(() => {
+      setWidth(element.clientWidth);
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, enabled]);
+  return width;
+}
+
+// src/DataGrid/DataGrid.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DataGridComponent({
+  dataSource,
+  columns,
+  borders,
+  hoverable,
+  resizableColumns = false,
+  resizeMode = "fit",
+  defaultColumnSizing,
+  columnSizeDefaults,
+  onColumnResize
+}) {
+  const hoverRows = hoverable?.rows ?? true;
+  const hoverColumns = hoverable?.columns ?? true;
+  const hoverCells = hoverable?.cells ?? true;
+  const viewportRef = useRef(null);
+  const tableRef = useRef(null);
+  const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
+  const [sizing, setSizing] = useState3(
+    defaultColumnSizing ?? {}
+  );
+  const definedColumns = useMemo(() => {
+    if (columns && columns.length !== 0) return columns;
+    if (dataSource && dataSource.length > 0)
+      return defineColumnsFromRows(dataSource);
+    return [];
+  }, [columns, dataSource]);
+  const resolved = useMemo(() => {
+    const widths = resolveColumnWidths(definedColumns, sizing, {
+      sizes: columnSizeDefaults,
+      resizable: resizableColumns
+    });
+    return resizeMode === "fit" && viewportWidth !== null ? fitColumnsToWidth(widths, viewportWidth, columnSizeDefaults) : widths;
+  }, [
+    definedColumns,
+    sizing,
+    resizeMode,
+    viewportWidth,
+    columnSizeDefaults,
+    resizableColumns
+  ]);
+  const resize = useColumnResize({
+    tableRef,
+    sizing,
+    setSizing,
+    columnSizeDefaults,
+    onColumnResize
+  });
+  return /* @__PURE__ */ jsx3("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: /* @__PURE__ */ jsxs2(
+    "table",
+    {
+      ref: tableRef,
+      style: { width: totalColumnWidth(resolved) },
+      className: [
+        "gridkit-data-grid",
+        borders ? `borders-${borders}` : "",
+        hoverRows ? "" : "no-hover-rows",
+        hoverColumns ? "" : "no-hover-columns",
+        hoverCells ? "" : "no-hover-cells"
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx3("colgroup", { children: resolved.map((entry) => /* @__PURE__ */ jsx3("col", { style: { width: entry.width } }, entry.id)) }),
+        /* @__PURE__ */ jsx3(GridHeader, { columns: resolved, resize }),
+        /* @__PURE__ */ jsx3(
+          GridBody,
+          {
+            columns: resolved,
+            dataSource,
+            activeColumnId: resize.activeColumnId
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  DataGridComponent
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DataGrid/DataGrid.tsx","../src/DataGrid/components/GridHeader.tsx","../src/DataGrid/components/GridBody.tsx","../src/DataGrid/useColumnResize.ts","../src/DataGrid/measureColumnContent.ts","../src/DataGrid/useElementWidth.ts"],"sourcesContent":["import { useMemo, useRef, useState, type ReactNode } from \"react\";\nimport {\n  defineColumnsFromRows,\n  fitColumnsToWidth,\n  resolveColumnWidths,\n  totalColumnWidth,\n  type ColumnDefinition as CoreColumnDefinition,\n  type ResolvedColumn as CoreResolvedColumn,\n  type ColumnResizeEvent,\n  type ColumnSizeDefaults,\n  type ColumnSizingState,\n} from \"@gridkitjs/core\";\nimport GridHeader from \"./components/GridHeader\";\nimport GridBody from \"./components/GridBody\";\nimport useColumnResize from \"./useColumnResize\";\nimport useElementWidth from \"./useElementWidth\";\n\n/**\n * A column whose header may render arbitrary React content. @gridkitjs/core\n * stays framework-agnostic and so leaves that output type open; this is the\n * binding React consumers want, and the one they should import.\n */\nexport type ColumnDefinition<Row> = CoreColumnDefinition<Row, ReactNode>;\n\n/** A column paired with the width it renders at. */\nexport type ResolvedColumn<Row> = CoreResolvedColumn<Row, ReactNode>;\n\nexport type Borders = \"horizontal\" | \"vertical\" | \"all\" | \"none\";\n\n/**\n * How a column's width relates to the grid's.\n *\n * `\"fit\"` keeps the columns filling the grid: the space a column gives up is\n * handed to the others, and the space it takes comes out of them. `\"fixed\"`\n * lets every column keep its own width, so a resize moves one column and\n * nothing else, and the grid scrolls or leaves a gap accordingly.\n */\nexport type ResizeMode = \"fit\" | \"fixed\";\n\nexport interface HoverableConfig {\n  rows?: boolean;\n  columns?: boolean;\n  cells?: boolean;\n}\n\nexport interface DataGridProps<Row> {\n  columns?: readonly ColumnDefinition<Row>[] | undefined;\n  dataSource?: readonly Row[] | undefined;\n  borders?: Borders | undefined;\n  hoverable?: HoverableConfig | undefined;\n  /** Whether columns can be dragged wider, unless a column says otherwise. */\n  resizableColumns?: boolean | undefined;\n  /**\n   * Whether columns fill the grid's width or sit at their own. Defaults to\n   * `\"fit\"`, under which columns the user has sized keep their width and the\n   * rest share what is left.\n   */\n  resizeMode?: ResizeMode | undefined;\n  /** Column widths to start from, keyed by column id. Uncontrolled. */\n  defaultColumnSizing?: ColumnSizingState | undefined;\n  /**\n   * Sizes applied to columns that do not set their own — the width they start\n   * at and the bounds they may be resized between. Distinct from\n   * `defaultColumnSizing`, which sets specific columns' starting widths.\n   */\n  columnSizeDefaults?: Partial<ColumnSizeDefaults> | undefined;\n  /**\n   * Called as the user resizes a column. Fires continuously with\n   * `phase: \"move\"` and once on release with `phase: \"end\"` — the latter being\n   * the one to persist. Auto-fit does not call it; it reports user intent only.\n   */\n  onColumnResize?: ((event: ColumnResizeEvent) => void) | undefined;\n}\n\nexport function DataGridComponent<Row>({\n  dataSource,\n  columns,\n  borders,\n  hoverable,\n  resizableColumns = false,\n  resizeMode = \"fit\",\n  defaultColumnSizing,\n  columnSizeDefaults,\n  onColumnResize,\n}: DataGridProps<Row>) {\n  const hoverRows = hoverable?.rows ?? true;\n  const hoverColumns = hoverable?.columns ?? true;\n  const hoverCells = hoverable?.cells ?? true;\n\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const viewportWidth = useElementWidth(viewportRef, resizeMode === \"fit\");\n  const [sizing, setSizing] = useState<ColumnSizingState>(\n    defaultColumnSizing ?? {},\n  );\n\n  const definedColumns = useMemo<readonly ColumnDefinition<Row>[]>(() => {\n    if (columns && columns.length !== 0) return columns;\n    if (dataSource && dataSource.length > 0)\n      return defineColumnsFromRows(dataSource);\n    return [];\n  }, [columns, dataSource]);\n\n  /**\n   * Auto-fit is a derivation rather than a write back into `sizing`, so that a\n   * `width` set in a column definition is never overwritten and the effect\n   * cannot chase its own output. `\"fixed\"` is then simply the absence of it.\n   */\n  const resolved = useMemo(() => {\n    const widths = resolveColumnWidths(definedColumns, sizing, {\n      sizes: columnSizeDefaults,\n      resizable: resizableColumns,\n    });\n    return resizeMode === \"fit\" && viewportWidth !== null\n      ? fitColumnsToWidth(widths, viewportWidth, columnSizeDefaults)\n      : widths;\n  }, [\n    definedColumns,\n    sizing,\n    resizeMode,\n    viewportWidth,\n    columnSizeDefaults,\n    resizableColumns,\n  ]);\n\n  const resize = useColumnResize<Row>({\n    tableRef,\n    sizing,\n    setSizing,\n    columnSizeDefaults,\n    onColumnResize,\n  });\n\n  return (\n    <div className=\"gridkit-data-grid-viewport\" ref={viewportRef}>\n      <table\n        ref={tableRef}\n        // Widths are only honoured exactly when the table is as wide as its\n        // columns; at `100%` the fixed layout redistributes the difference.\n        style={{ width: totalColumnWidth(resolved) }}\n        className={[\n          \"gridkit-data-grid\",\n          borders ? `borders-${borders}` : \"\",\n          hoverRows ? \"\" : \"no-hover-rows\",\n          hoverColumns ? \"\" : \"no-hover-columns\",\n          hoverCells ? \"\" : \"no-hover-cells\",\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n      >\n        <colgroup>\n          {resolved.map((entry) => (\n            <col key={entry.id} style={{ width: entry.width }} />\n          ))}\n        </colgroup>\n        <GridHeader<Row> columns={resolved} resize={resize} />\n        <GridBody<Row>\n          columns={resolved}\n          dataSource={dataSource}\n          activeColumnId={resize.activeColumnId}\n        />\n      </table>\n    </div>\n  );\n}\n","import { KEYBOARD_STEP } from \"@gridkitjs/core\";\nimport type { ResolvedColumn } from \"../DataGrid\";\nimport type { ColumnResizeApi } from \"../useColumnResize\";\n\ninterface GridHeaderProps<Row> {\n  columns: readonly ResolvedColumn<Row>[];\n  resize: ColumnResizeApi<Row>;\n}\n\nexport default function GridHeader<Row>({\n  columns,\n  resize,\n}: GridHeaderProps<Row>) {\n  return (\n    <thead>\n      <tr className=\"grid-header\">\n        {columns.map((entry) => {\n          const { column } = entry;\n          const resizing = resize.activeColumnId === entry.id;\n\n          return (\n            <th\n              key={entry.id}\n              data-gridkit-column={entry.id}\n              className={resizing ? \"header-cell is-resizing\" : \"header-cell\"}\n            >\n              {entry.label}\n              {entry.resizable && (\n                <span\n                  className=\"header-resize-handle\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  aria-label={`Resize ${column.field}`}\n                  tabIndex={0}\n                  onPointerDown={(event) => {\n                    resize.startResize(entry, event);\n                  }}\n                  onDoubleClick={() => {\n                    resize.sizeToContent(entry);\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\")\n                      return;\n                    event.preventDefault();\n                    resize.nudge(\n                      entry,\n                      event.key === \"ArrowLeft\"\n                        ? -KEYBOARD_STEP\n                        : KEYBOARD_STEP,\n                    );\n                  }}\n                >\n                  <svg\n                    className=\"header-resize-grip\"\n                    viewBox=\"0 0 6 14\"\n                    width=\"6\"\n                    height=\"14\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle cx=\"1.5\" cy=\"4\" r=\"1\" />\n                    <circle cx=\"1.5\" cy=\"7\" r=\"1\" />\n                    <circle cx=\"1.5\" cy=\"10\" r=\"1\" />\n                    <circle cx=\"4.5\" cy=\"4\" r=\"1\" />\n                    <circle cx=\"4.5\" cy=\"7\" r=\"1\" />\n                    <circle cx=\"4.5\" cy=\"10\" r=\"1\" />\n                  </svg>\n                </span>\n              )}\n            </th>\n          );\n        })}\n      </tr>\n    </thead>\n  );\n}\n","import { accessDotted } from \"@gridkitjs/core\";\nimport { type ReactNode } from \"react\";\nimport type { ResolvedColumn } from \"../DataGrid\";\n\ninterface GridBodyProps<Row> {\n  columns: readonly ResolvedColumn<Row>[];\n  dataSource?: readonly Row[] | undefined;\n  /** The column being resized, so its cells outline with its header. */\n  activeColumnId: string | null;\n}\n\nexport default function GridBody<Row>({\n  columns,\n  dataSource,\n  activeColumnId,\n}: GridBodyProps<Row>) {\n  return (\n    <tbody className=\"grid-body\">\n      {dataSource?.map((row, index) => (\n        <tr key={index} className=\"grid-row\">\n          {columns.map(({ id, column, alignment }) => (\n            <td\n              key={id}\n              data-gridkit-column={id}\n              className={\n                id === activeColumnId ? \"grid-cell is-resizing\" : \"grid-cell\"\n              }\n              style={{ textAlign: alignment }}\n            >\n              {accessDotted(row, column.field) as ReactNode}\n            </td>\n          ))}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n","import {\n  useState,\n  type Dispatch,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n  type SetStateAction,\n} from \"react\";\nimport {\n  applyColumnResize,\n  beginColumnResize,\n  clampColumnWidth,\n  resolveColumnConstraints,\n  sizeColumnToContent,\n  type ColumnResizeEvent,\n  type ColumnSizeDefaults,\n  type ColumnSizingState,\n} from \"@gridkitjs/core\";\nimport type { ResolvedColumn } from \"./DataGrid\";\nimport measureColumnContent from \"./measureColumnContent\";\n\ninterface UseColumnResizeOptions {\n  tableRef: RefObject<HTMLTableElement | null>;\n  sizing: ColumnSizingState;\n  setSizing: Dispatch<SetStateAction<ColumnSizingState>>;\n  columnSizeDefaults?: Partial<ColumnSizeDefaults> | undefined;\n  onColumnResize?: ((event: ColumnResizeEvent) => void) | undefined;\n}\n\nexport interface ColumnResizeApi<Row> {\n  /** The column being dragged, for as long as the drag lasts. */\n  activeColumnId: string | null;\n  startResize: (\n    entry: ResolvedColumn<Row>,\n    event: ReactPointerEvent<HTMLElement>,\n  ) => void;\n  sizeToContent: (entry: ResolvedColumn<Row>) => void;\n  nudge: (entry: ResolvedColumn<Row>, delta: number) => void;\n}\n\n/**\n * Turns pointer and keyboard input into column widths. Every width it produces\n * comes from `@gridkitjs/core`; this hook only supplies the coordinates.\n */\nexport default function useColumnResize<Row>({\n  tableRef,\n  sizing,\n  setSizing,\n  columnSizeDefaults,\n  onColumnResize,\n}: UseColumnResizeOptions): ColumnResizeApi<Row> {\n  const [activeColumnId, setActiveColumnId] = useState<string | null>(null);\n\n  function commit(\n    base: ColumnSizingState,\n    columnId: string,\n    width: number,\n    phase: \"move\" | \"end\",\n  ): void {\n    const next = { ...base, [columnId]: width };\n    setSizing(next);\n    onColumnResize?.({ columnId, width, sizing: next, phase });\n  }\n\n  function startResize(\n    entry: ResolvedColumn<Row>,\n    event: ReactPointerEvent<HTMLElement>,\n  ): void {\n    const handle = event.currentTarget;\n    const { pointerId } = event;\n    const session = beginColumnResize(\n      entry.column,\n      entry.width,\n      event.clientX,\n      columnSizeDefaults,\n    );\n    /**\n     * Only the dragged column can change while the drag lasts, so the state as\n     * it was when the drag opened stays a correct base to merge into — no ref\n     * mirror is needed to dodge a stale closure.\n     */\n    const base = sizing;\n    let width = session.startWidth;\n\n    // Otherwise the drag selects the header text it started on.\n    event.preventDefault();\n    event.stopPropagation();\n    handle.setPointerCapture(pointerId);\n    setActiveColumnId(session.columnId);\n\n    function move(moveEvent: PointerEvent): void {\n      width = applyColumnResize(session, moveEvent.clientX);\n      commit(base, session.columnId, width, \"move\");\n    }\n\n    function stop(): void {\n      handle.removeEventListener(\"pointermove\", move);\n      handle.removeEventListener(\"pointerup\", end);\n      handle.removeEventListener(\"pointercancel\", cancel);\n      window.removeEventListener(\"keydown\", onKeyDown);\n      if (handle.hasPointerCapture(pointerId)) {\n        handle.releasePointerCapture(pointerId);\n      }\n      setActiveColumnId(null);\n    }\n\n    function end(): void {\n      stop();\n      commit(base, session.columnId, width, \"end\");\n    }\n\n    /**\n     * Escape puts back the state the drag started from, which correctly covers\n     * a column that had no stored width at all — merging `startWidth` back in\n     * would instead leave it pinned and hidden from auto-fit.\n     */\n    function cancel(): void {\n      stop();\n      setSizing(base);\n      onColumnResize?.({\n        columnId: session.columnId,\n        width: session.startWidth,\n        sizing: base,\n        phase: \"end\",\n      });\n    }\n\n    function onKeyDown(keyEvent: KeyboardEvent): void {\n      if (keyEvent.key === \"Escape\") {\n        cancel();\n      }\n    }\n\n    handle.addEventListener(\"pointermove\", move);\n    handle.addEventListener(\"pointerup\", end);\n    handle.addEventListener(\"pointercancel\", cancel);\n    window.addEventListener(\"keydown\", onKeyDown);\n  }\n\n  function sizeToContent(entry: ResolvedColumn<Row>): void {\n    const table = tableRef.current;\n    if (table === null) {\n      return;\n    }\n\n    const measured = measureColumnContent(table, entry.id);\n    if (measured === null) {\n      return;\n    }\n\n    commit(\n      sizing,\n      entry.id,\n      sizeColumnToContent(\n        measured,\n        resolveColumnConstraints(entry.column, columnSizeDefaults),\n      ),\n      \"end\",\n    );\n  }\n\n  function nudge(entry: ResolvedColumn<Row>, delta: number): void {\n    commit(\n      sizing,\n      entry.id,\n      clampColumnWidth(\n        entry.width + delta,\n        resolveColumnConstraints(entry.column, columnSizeDefaults),\n      ),\n      \"end\",\n    );\n  }\n\n  // Deliberately a new object each render: the handlers close over `sizing` to\n  // merge into, and a stable identity would need either `sizing` in a\n  // `useCallback` dep list (no gain) or the ref mirror avoided above.\n  return { activeColumnId, startResize, sizeToContent, nudge };\n}\n","/**\n * The width the widest cell in `columnId` needs to show its content in full,\n * or `null` when the column has no cells.\n *\n * Measured with a `Range` over each cell's contents rather than the cell's own\n * `scrollWidth`. A range shrink-wraps what is actually laid out, so a column\n * far wider than its content reports the content width and can be sized *down*;\n * `scrollWidth` never reports less than the cell it is read from and so can\n * only ever grow a column.\n *\n * Only rendered rows are measured — once paging or virtualisation lands, that\n * means the visible ones.\n */\nexport default function measureColumnContent(\n  table: HTMLTableElement,\n  columnId: string,\n): number | null {\n  const cells = table.querySelectorAll<HTMLElement>(\n    `[data-gridkit-column=\"${CSS.escape(columnId)}\"]`,\n  );\n  const range = document.createRange();\n  let widest: number | null = null;\n\n  for (const cell of cells) {\n    range.selectNodeContents(cell);\n    const style = getComputedStyle(cell);\n    // The range covers the content box only, so the cell's own spacing has to\n    // be added back or the column would clip by exactly its padding.\n    const width =\n      range.getBoundingClientRect().width +\n      parseFloat(style.paddingLeft) +\n      parseFloat(style.paddingRight) +\n      parseFloat(style.borderLeftWidth) +\n      parseFloat(style.borderRightWidth);\n\n    if (widest === null || width > widest) {\n      widest = width;\n    }\n  }\n\n  return widest;\n}\n","import { useLayoutEffect, useState, type RefObject } from \"react\";\n\n/**\n * The inner width of `ref`'s element, tracked as it changes.\n *\n * A layout effect rather than an effect so the first measurement lands before\n * paint — otherwise columns show at their natural width for a frame and then\n * visibly jump once auto-fit runs. Server rendering would want the usual\n * isomorphic-layout-effect shim here.\n *\n * Reads `clientWidth` rather than the observer entry's `contentRect` so the\n * first measurement and every later one come from the same, already-rounded,\n * source.\n *\n * @param enabled Whether to observe at all. A caller that does not read the\n * width passes `false` rather than paying a re-render of the whole grid on\n * every frame of a window resize.\n */\nexport default function useElementWidth(\n  ref: RefObject<HTMLElement | null>,\n  enabled: boolean,\n): number | null {\n  const [width, setWidth] = useState<number | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (element === null || !enabled) {\n      return undefined;\n    }\n\n    setWidth(element.clientWidth);\n\n    const observer = new ResizeObserver(() => {\n      setWidth(element.clientWidth);\n    });\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref, enabled]);\n\n  return width;\n}\n"],"mappings":";AAAA,SAAS,SAAS,QAAQ,YAAAA,iBAAgC;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;;;ACXP,SAAS,qBAAqB;AAoDZ,SAOE,KAPF;AA3CH,SAAR,WAAiC;AAAA,EACtC;AAAA,EACA;AACF,GAAyB;AACvB,SACE,oBAAC,WACC,8BAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,WAAW,OAAO,mBAAmB,MAAM;AAEjD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,uBAAqB,MAAM;AAAA,QAC3B,WAAW,WAAW,4BAA4B;AAAA,QAEjD;AAAA,gBAAM;AAAA,UACN,MAAM,aACL;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,oBAAiB;AAAA,cACjB,cAAY,UAAU,OAAO,KAAK;AAAA,cAClC,UAAU;AAAA,cACV,eAAe,CAAC,UAAU;AACxB,uBAAO,YAAY,OAAO,KAAK;AAAA,cACjC;AAAA,cACA,eAAe,MAAM;AACnB,uBAAO,cAAc,KAAK;AAAA,cAC5B;AAAA,cACA,WAAW,CAAC,UAAU;AACpB,oBAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ;AAC7C;AACF,sBAAM,eAAe;AACrB,uBAAO;AAAA,kBACL;AAAA,kBACA,MAAM,QAAQ,cACV,CAAC,gBACD;AAAA,gBACN;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,eAAY;AAAA,kBAEZ;AAAA,wCAAC,YAAO,IAAG,OAAM,IAAG,KAAI,GAAE,KAAI;AAAA,oBAC9B,oBAAC,YAAO,IAAG,OAAM,IAAG,KAAI,GAAE,KAAI;AAAA,oBAC9B,oBAAC,YAAO,IAAG,OAAM,IAAG,MAAK,GAAE,KAAI;AAAA,oBAC/B,oBAAC,YAAO,IAAG,OAAM,IAAG,KAAI,GAAE,KAAI;AAAA,oBAC9B,oBAAC,YAAO,IAAG,OAAM,IAAG,KAAI,GAAE,KAAI;AAAA,oBAC9B,oBAAC,YAAO,IAAG,OAAM,IAAG,MAAK,GAAE,KAAI;AAAA;AAAA;AAAA,cACjC;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,MA5CG,MAAM;AAAA,IA8Cb;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;;;AC1EA,SAAS,oBAAoB;AAC7B,OAA+B;AAoBnB,gBAAAC,YAAA;AAVG,SAAR,SAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,gBAAAA,KAAC,WAAM,WAAU,aACd,sBAAY,IAAI,CAAC,KAAK,UACrB,gBAAAA,KAAC,QAAe,WAAU,YACvB,kBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,UAAU,MACpC,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,uBAAqB;AAAA,MACrB,WACE,OAAO,iBAAiB,0BAA0B;AAAA,MAEpD,OAAO,EAAE,WAAW,UAAU;AAAA,MAE7B,uBAAa,KAAK,OAAO,KAAK;AAAA;AAAA,IAP1B;AAAA,EAQP,CACD,KAZM,KAaT,CACD,GACH;AAEJ;;;ACpCA;AAAA,EACE;AAAA,OAKK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;;;ACHQ,SAAR,qBACL,OACA,UACe;AACf,QAAM,QAAQ,MAAM;AAAA,IAClB,yBAAyB,IAAI,OAAO,QAAQ,CAAC;AAAA,EAC/C;AACA,QAAM,QAAQ,SAAS,YAAY;AACnC,MAAI,SAAwB;AAE5B,aAAW,QAAQ,OAAO;AACxB,UAAM,mBAAmB,IAAI;AAC7B,UAAM,QAAQ,iBAAiB,IAAI;AAGnC,UAAM,QACJ,MAAM,sBAAsB,EAAE,QAC9B,WAAW,MAAM,WAAW,IAC5B,WAAW,MAAM,YAAY,IAC7B,WAAW,MAAM,eAAe,IAChC,WAAW,MAAM,gBAAgB;AAEnC,QAAI,WAAW,QAAQ,QAAQ,QAAQ;AACrC,eAAS;AAAA,IACX;AAAA,EACF;AAEA,SAAO;AACT;;;ADEe,SAAR,gBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AAExE,WAAS,OACP,MACA,UACA,OACA,OACM;AACN,UAAM,OAAO,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM;AAC1C,cAAU,IAAI;AACd,qBAAiB,EAAE,UAAU,OAAO,QAAQ,MAAM,MAAM,CAAC;AAAA,EAC3D;AAEA,WAAS,YACP,OACA,OACM;AACN,UAAM,SAAS,MAAM;AACrB,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IACF;AAMA,UAAM,OAAO;AACb,QAAI,QAAQ,QAAQ;AAGpB,UAAM,eAAe;AACrB,UAAM,gBAAgB;AACtB,WAAO,kBAAkB,SAAS;AAClC,sBAAkB,QAAQ,QAAQ;AAElC,aAAS,KAAK,WAA+B;AAC3C,cAAQ,kBAAkB,SAAS,UAAU,OAAO;AACpD,aAAO,MAAM,QAAQ,UAAU,OAAO,MAAM;AAAA,IAC9C;AAEA,aAAS,OAAa;AACpB,aAAO,oBAAoB,eAAe,IAAI;AAC9C,aAAO,oBAAoB,aAAa,GAAG;AAC3C,aAAO,oBAAoB,iBAAiB,MAAM;AAClD,aAAO,oBAAoB,WAAW,SAAS;AAC/C,UAAI,OAAO,kBAAkB,SAAS,GAAG;AACvC,eAAO,sBAAsB,SAAS;AAAA,MACxC;AACA,wBAAkB,IAAI;AAAA,IACxB;AAEA,aAAS,MAAY;AACnB,WAAK;AACL,aAAO,MAAM,QAAQ,UAAU,OAAO,KAAK;AAAA,IAC7C;AAOA,aAAS,SAAe;AACtB,WAAK;AACL,gBAAU,IAAI;AACd,uBAAiB;AAAA,QACf,UAAU,QAAQ;AAAA,QAClB,OAAO,QAAQ;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,MACT,CAAC;AAAA,IACH;AAEA,aAAS,UAAU,UAA+B;AAChD,UAAI,SAAS,QAAQ,UAAU;AAC7B,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO,iBAAiB,eAAe,IAAI;AAC3C,WAAO,iBAAiB,aAAa,GAAG;AACxC,WAAO,iBAAiB,iBAAiB,MAAM;AAC/C,WAAO,iBAAiB,WAAW,SAAS;AAAA,EAC9C;AAEA,WAAS,cAAc,OAAkC;AACvD,UAAM,QAAQ,SAAS;AACvB,QAAI,UAAU,MAAM;AAClB;AAAA,IACF;AAEA,UAAM,WAAW,qBAAqB,OAAO,MAAM,EAAE;AACrD,QAAI,aAAa,MAAM;AACrB;AAAA,IACF;AAEA;AAAA,MACE;AAAA,MACA,MAAM;AAAA,MACN;AAAA,QACE;AAAA,QACA,yBAAyB,MAAM,QAAQ,kBAAkB;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,WAAS,MAAM,OAA4B,OAAqB;AAC9D;AAAA,MACE;AAAA,MACA,MAAM;AAAA,MACN;AAAA,QACE,MAAM,QAAQ;AAAA,QACd,yBAAyB,MAAM,QAAQ,kBAAkB;AAAA,MAC3D;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAKA,SAAO,EAAE,gBAAgB,aAAa,eAAe,MAAM;AAC7D;;;AEhLA,SAAS,iBAAiB,YAAAC,iBAAgC;AAkB3C,SAAR,gBACL,KACA,SACe;AACf,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAAwB,IAAI;AAEtD,kBAAgB,MAAM;AACpB,UAAM,UAAU,IAAI;AACpB,QAAI,YAAY,QAAQ,CAAC,SAAS;AAChC,aAAO;AAAA,IACT;AAEA,aAAS,QAAQ,WAAW;AAE5B,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,eAAS,QAAQ,WAAW;AAAA,IAC9B,CAAC;AACD,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;;;AL4FM,SAiBM,OAAAC,MAjBN,QAAAC,aAAA;AA7DC,SAAS,kBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,YAAY,WAAW,QAAQ;AACrC,QAAM,eAAe,WAAW,WAAW;AAC3C,QAAM,aAAa,WAAW,SAAS;AAEvC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,gBAAgB,gBAAgB,aAAa,eAAe,KAAK;AACvE,QAAM,CAAC,QAAQ,SAAS,IAAIC;AAAA,IAC1B,uBAAuB,CAAC;AAAA,EAC1B;AAEA,QAAM,iBAAiB,QAA0C,MAAM;AACrE,QAAI,WAAW,QAAQ,WAAW,EAAG,QAAO;AAC5C,QAAI,cAAc,WAAW,SAAS;AACpC,aAAO,sBAAsB,UAAU;AACzC,WAAO,CAAC;AAAA,EACV,GAAG,CAAC,SAAS,UAAU,CAAC;AAOxB,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,SAAS,oBAAoB,gBAAgB,QAAQ;AAAA,MACzD,OAAO;AAAA,MACP,WAAW;AAAA,IACb,CAAC;AACD,WAAO,eAAe,SAAS,kBAAkB,OAC7C,kBAAkB,QAAQ,eAAe,kBAAkB,IAC3D;AAAA,EACN,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,SAAS,gBAAqB;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAF,KAAC,SAAI,WAAU,8BAA6B,KAAK,aAC/C,0BAAAC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MAGL,OAAO,EAAE,OAAO,iBAAiB,QAAQ,EAAE;AAAA,MAC3C,WAAW;AAAA,QACT;AAAA,QACA,UAAU,WAAW,OAAO,KAAK;AAAA,QACjC,YAAY,KAAK;AAAA,QACjB,eAAe,KAAK;AAAA,QACpB,aAAa,KAAK;AAAA,MACpB,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX;AAAA,wBAAAD,KAAC,cACE,mBAAS,IAAI,CAAC,UACb,gBAAAA,KAAC,SAAmB,OAAO,EAAE,OAAO,MAAM,MAAM,KAAtC,MAAM,EAAmC,CACpD,GACH;AAAA,QACA,gBAAAA,KAAC,cAAgB,SAAS,UAAU,QAAgB;AAAA,QACpD,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA,gBAAgB,OAAO;AAAA;AAAA,QACzB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":["useState","jsx","useState","jsx","jsxs","useState"]}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@gridkitjs/react",
+  "version": "0.0.1",
+  "description": "React data-grid components built on @gridkitjs/core.",
+  "license": "MIT",
+  "author": "Blagoja Blazhevski",
+  "homepage": "https://github.com/blagojablazhevski/gridkit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blagojablazhevski/gridkit.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "datagrid",
+    "grid",
+    "table",
+    "react",
+    "headless",
+    "typescript"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@gridkitjs/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  }
+}