@jameskabz/nextcraft-ui 0.6.6 → 0.6.8

package/dist/components/craft-data-table.js

@@ -0,0 +1,373 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { CraftPagination } from "../components/craft-pagination";
+function getColumnValue(column, row) {
+  if (typeof column.accessor === "function") return column.accessor(row);
+  const record = row;
+  if (typeof column.accessor === "string") return record[column.accessor];
+  return record[column.id];
+}
+function normalizeValue(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return value.toLowerCase();
+  if (value instanceof Date) return value.getTime();
+  return String(value).toLowerCase();
+}
+function CraftDataTable({
+  data,
+  columns,
+  tone,
+  className,
+  loading = false,
+  emptyState,
+  toolbar,
+  enableSorting = true,
+  enableFiltering = true,
+  enableColumnVisibility = true,
+  enableRowSelection = true,
+  enablePagination = true,
+  showGlobalFilter,
+  manualSorting = false,
+  manualFiltering = false,
+  manualPagination = false,
+  sortBy,
+  onSortChange,
+  filters,
+  onFiltersChange,
+  globalFilter,
+  onGlobalFilterChange,
+  columnVisibility,
+  onColumnVisibilityChange,
+  selectedRowIds,
+  onRowSelectionChange,
+  getRowId,
+  pageIndex,
+  pageSize = 10,
+  pageCount,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const [internalSort, setInternalSort] = React.useState(null);
+  const [internalFilters, setInternalFilters] = React.useState({});
+  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState("");
+  const [internalVisibility, setInternalVisibility] = React.useState(
+    () => columns.reduce((acc, column) => {
+      acc[column.id] = !column.hidden;
+      return acc;
+    }, {})
+  );
+  const [internalSelection, setInternalSelection] = React.useState({});
+  const [internalPageIndex, setInternalPageIndex] = React.useState(0);
+  const [showColumns, setShowColumns] = React.useState(false);
+  const resolvedSort = sortBy != null ? sortBy : internalSort;
+  const resolvedFilters = filters != null ? filters : internalFilters;
+  const resolvedGlobalFilter = globalFilter != null ? globalFilter : internalGlobalFilter;
+  const resolvedVisibility = columnVisibility != null ? columnVisibility : internalVisibility;
+  const resolvedSelection = selectedRowIds != null ? selectedRowIds : internalSelection;
+  const resolvedPageIndex = pageIndex != null ? pageIndex : internalPageIndex;
+  const setSort = (next) => {
+    if (sortBy === void 0) setInternalSort(next);
+    onSortChange == null ? void 0 : onSortChange(next);
+  };
+  const setFilters = (next) => {
+    if (filters === void 0) setInternalFilters(next);
+    onFiltersChange == null ? void 0 : onFiltersChange(next);
+  };
+  const setVisibility = (next) => {
+    if (columnVisibility === void 0) setInternalVisibility(next);
+    onColumnVisibilityChange == null ? void 0 : onColumnVisibilityChange(next);
+  };
+  const setSelection = (next) => {
+    if (selectedRowIds === void 0) setInternalSelection(next);
+    onRowSelectionChange == null ? void 0 : onRowSelectionChange(next);
+  };
+  const setPageIndex = React.useCallback(
+    (next) => {
+      if (pageIndex === void 0) setInternalPageIndex(next);
+      onPageChange == null ? void 0 : onPageChange(next);
+    },
+    [pageIndex, onPageChange]
+  );
+  const visibleColumns = columns.filter(
+    (column) => resolvedVisibility[column.id] !== false
+  );
+  const filteredData = React.useMemo(() => {
+    if (manualFiltering) return data;
+    const globalValue = resolvedGlobalFilter.trim();
+    return data.filter((row) => {
+      if (globalValue) {
+        const matchesGlobal = columns.some((column) => {
+          const value = normalizeValue(getColumnValue(column, row));
+          return String(value).includes(globalValue.toLowerCase());
+        });
+        if (!matchesGlobal) return false;
+      }
+      return Object.entries(resolvedFilters).every(([columnId, value]) => {
+        if (!value) return true;
+        const column = columns.find((col) => col.id === columnId);
+        if (!column) return true;
+        const cellValue = normalizeValue(getColumnValue(column, row));
+        return String(cellValue).includes(value.toLowerCase());
+      });
+    });
+  }, [columns, data, manualFiltering, resolvedFilters, resolvedGlobalFilter]);
+  const sortedData = React.useMemo(() => {
+    if (manualSorting || !resolvedSort) return filteredData;
+    const column = columns.find((col) => col.id === resolvedSort.id);
+    if (!column) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
+      const valueA = normalizeValue(getColumnValue(column, a));
+      const valueB = normalizeValue(getColumnValue(column, b));
+      if (typeof valueA === "number" && typeof valueB === "number") {
+        return valueA - valueB;
+      }
+      return String(valueA).localeCompare(String(valueB));
+    });
+    return resolvedSort.desc ? sorted.reverse() : sorted;
+  }, [columns, filteredData, manualSorting, resolvedSort]);
+  const resolvedPageCount = manualPagination ? Math.max(pageCount != null ? pageCount : 1, 1) : Math.max(Math.ceil(sortedData.length / pageSize), 1);
+  React.useEffect(() => {
+    if (resolvedPageIndex > resolvedPageCount - 1) {
+      setPageIndex(Math.max(resolvedPageCount - 1, 0));
+    }
+  }, [resolvedPageCount, resolvedPageIndex, setPageIndex]);
+  const pagedData = React.useMemo(() => {
+    if (!enablePagination || manualPagination) return sortedData;
+    const start = resolvedPageIndex * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [enablePagination, manualPagination, pageSize, resolvedPageIndex, sortedData]);
+  const rowIdFor = React.useCallback(
+    (row, index) => {
+      var _a;
+      return (_a = getRowId == null ? void 0 : getRowId(row, index)) != null ? _a : String(index);
+    },
+    [getRowId]
+  );
+  const pageStartIndex = enablePagination && !manualPagination ? resolvedPageIndex * pageSize : 0;
+  const pageRowIds = pagedData.map(
+    (row, index) => rowIdFor(row, pageStartIndex + index)
+  );
+  const allSelected = pageRowIds.length > 0 && pageRowIds.every((id) => resolvedSelection[id]);
+  const someSelected = pageRowIds.some((id) => resolvedSelection[id]);
+  const headerCheckboxRef = React.useRef(null);
+  React.useEffect(() => {
+    if (headerCheckboxRef.current) {
+      headerCheckboxRef.current.indeterminate = someSelected && !allSelected;
+    }
+  }, [someSelected, allSelected]);
+  const toggleSort = (column) => {
+    if (!enableSorting || column.sortable === false) return;
+    const current = resolvedSort;
+    if (!current || current.id !== column.id) {
+      setSort({ id: column.id, desc: false });
+      return;
+    }
+    if (!current.desc) {
+      setSort({ id: column.id, desc: true });
+      return;
+    }
+    setSort(null);
+  };
+  const emptyContent = emptyState != null ? emptyState : /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-[rgb(var(--nc-fg-muted))]", children: "No results found." });
+  const resolvedShowGlobalFilter = showGlobalFilter != null ? showGlobalFilter : enableFiltering && !toolbar;
+  const setGlobalFilter = (next) => {
+    if (globalFilter === void 0) setInternalGlobalFilter(next);
+    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-nc-theme": tone, children: [
+    toolbar,
+    resolvedShowGlobalFilter && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-2 text-sm text-[rgb(var(--nc-fg))]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: "Global filter" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          value: resolvedGlobalFilter,
+          onChange: (event) => setGlobalFilter(event.target.value),
+          placeholder: "Search all columns...",
+          className: "w-full max-w-xs rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.18)] px-3 py-2 text-xs text-[rgb(var(--nc-fg))]"
+        }
+      )
+    ] }),
+    enableColumnVisibility && /* @__PURE__ */ jsxs("div", { className: "relative flex justify-end", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-2 text-xs text-[rgb(var(--nc-fg))] transition hover:bg-[rgb(var(--nc-surface)/0.2)]",
+          onClick: () => setShowColumns((prev) => !prev),
+          children: "Columns"
+        }
+      ),
+      showColumns && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-10 z-20 w-48 rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.2)] p-3 shadow-[0_12px_30px_rgba(0,0,0,0.35)] backdrop-blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: columns.map((column) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 text-xs text-[rgb(var(--nc-fg))]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "h-4 w-4 accent-[rgb(var(--nc-accent-1))]",
+                checked: resolvedVisibility[column.id] !== false,
+                onChange: (event) => setVisibility({
+                  ...resolvedVisibility,
+                  [column.id]: event.target.checked
+                })
+              }
+            ),
+            column.header
+          ]
+        },
+        column.id
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] shadow-[0_18px_50px_rgba(0,0,0,0.35)] backdrop-blur-2xl", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg-muted))]", children: /* @__PURE__ */ jsxs("tr", { children: [
+        enableRowSelection && /* @__PURE__ */ jsx("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: headerCheckboxRef,
+            type: "checkbox",
+            className: "h-4 w-4 accent-[rgb(var(--nc-accent-1))]",
+            checked: allSelected,
+            onChange: (event) => {
+              const next = { ...resolvedSelection };
+              pageRowIds.forEach((id) => {
+                next[id] = event.target.checked;
+              });
+              setSelection(next);
+            }
+          }
+        ) }),
+        visibleColumns.map((column) => {
+          var _a;
+          return /* @__PURE__ */ jsxs(
+            "th",
+            {
+              className: cn(
+                "px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em]",
+                column.headerClassName
+              ),
+              style: { width: column.width },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "flex items-center gap-2",
+                      enableSorting && column.sortable !== false ? "cursor-pointer" : "cursor-default"
+                    ),
+                    onClick: () => toggleSort(column),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: column.header }),
+                      (resolvedSort == null ? void 0 : resolvedSort.id) === column.id && /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-accent-1))]", children: resolvedSort.desc ? "\u2193" : "\u2191" })
+                    ]
+                  }
+                ),
+                enableFiltering && column.filterable !== false && /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: (_a = resolvedFilters[column.id]) != null ? _a : "",
+                    onChange: (event) => setFilters({
+                      ...resolvedFilters,
+                      [column.id]: event.target.value
+                    }),
+                    placeholder: "Filter",
+                    className: "mt-2 w-full rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.18)] px-2 py-1 text-xs text-[rgb(var(--nc-fg))]"
+                  }
+                )
+              ]
+            },
+            column.id
+          );
+        })
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { className: "text-[rgb(var(--nc-fg))]", children: [
+        loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: visibleColumns.length + (enableRowSelection ? 1 : 0),
+            className: "px-4 py-10 text-center text-sm text-[rgb(var(--nc-fg-muted))]",
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-[rgb(var(--nc-fg-muted))] border-t-transparent" }),
+              "Loading data..."
+            ] })
+          }
+        ) }),
+        !loading && pagedData.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: visibleColumns.length + (enableRowSelection ? 1 : 0),
+            className: "px-4 py-10",
+            children: emptyContent
+          }
+        ) }),
+        !loading && pagedData.map((row, rowIndex) => {
+          const rowId = rowIdFor(row, pageStartIndex + rowIndex);
+          const isSelected = resolvedSelection[rowId];
+          return /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: cn(
+                "border-t border-[rgb(var(--nc-border)/0.15)]",
+                isSelected && "bg-[rgb(var(--nc-accent-1)/0.08)]"
+              ),
+              children: [
+                enableRowSelection && /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 accent-[rgb(var(--nc-accent-1))]",
+                    checked: isSelected,
+                    onChange: (event) => setSelection({
+                      ...resolvedSelection,
+                      [rowId]: event.target.checked
+                    })
+                  }
+                ) }),
+                visibleColumns.map((column) => {
+                  var _a;
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cn(
+                        "px-4 py-4",
+                        column.align === "center" && "text-center",
+                        column.align === "right" && "text-right",
+                        column.cellClassName
+                      ),
+                      children: column.cell ? column.cell(row) : String((_a = getColumnValue(column, row)) != null ? _a : "")
+                    },
+                    column.id
+                  );
+                })
+              ]
+            },
+            rowId
+          );
+        })
+      ] })
+    ] }) }),
+    enablePagination && /* @__PURE__ */ jsx(
+      CraftPagination,
+      {
+        pageIndex: resolvedPageIndex,
+        pageCount: resolvedPageCount,
+        onPageChange: setPageIndex,
+        pageSize,
+        onPageSizeChange,
+        tone
+      }
+    )
+  ] });
+}
+export {
+  CraftDataTable
+};
+//# sourceMappingURL=craft-data-table.js.map

package/dist/components/craft-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/craft-data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\nimport { CraftPagination } from \"@/components/craft-pagination\";\n\nexport type CraftDataTableColumn<T> = {\n  id: string;\n  header: React.ReactNode;\n  accessor?: keyof T | ((row: T) => unknown);\n  cell?: (row: T) => React.ReactNode;\n  sortable?: boolean;\n  filterable?: boolean;\n  width?: string | number;\n  align?: \"left\" | \"center\" | \"right\";\n  hidden?: boolean;\n  headerClassName?: string;\n  cellClassName?: string;\n};\n\nexport type CraftDataTableSort = {\n  id: string;\n  desc?: boolean;\n};\n\nexport type CraftDataTableProps<T> = {\n  data: T[];\n  columns: CraftDataTableColumn<T>[];\n  tone?: ThemeName;\n  className?: string;\n  loading?: boolean;\n  emptyState?: React.ReactNode;\n  toolbar?: React.ReactNode;\n  enableSorting?: boolean;\n  enableFiltering?: boolean;\n  enableColumnVisibility?: boolean;\n  enableRowSelection?: boolean;\n  enablePagination?: boolean;\n  showGlobalFilter?: boolean;\n  manualSorting?: boolean;\n  manualFiltering?: boolean;\n  manualPagination?: boolean;\n  sortBy?: CraftDataTableSort | null;\n  onSortChange?: (sort: CraftDataTableSort | null) => void;\n  filters?: Record<string, string>;\n  onFiltersChange?: (filters: Record<string, string>) => void;\n  globalFilter?: string;\n  onGlobalFilterChange?: (value: string) => void;\n  columnVisibility?: Record<string, boolean>;\n  onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;\n  selectedRowIds?: Record<string, boolean>;\n  onRowSelectionChange?: (selection: Record<string, boolean>) => void;\n  getRowId?: (row: T, index: number) => string;\n  pageIndex?: number;\n  pageSize?: number;\n  pageCount?: number;\n  onPageChange?: (pageIndex: number) => void;\n  onPageSizeChange?: (size: number) => void;\n};\n\nfunction getColumnValue<T>(column: CraftDataTableColumn<T>, row: T) {\n  if (typeof column.accessor === \"function\") return column.accessor(row);\n  const record = row as Record<string, unknown>;\n  if (typeof column.accessor === \"string\") return record[column.accessor];\n  return record[column.id];\n}\n\nfunction normalizeValue(value: unknown) {\n  if (value === null || value === undefined) return \"\";\n  if (typeof value === \"number\") return value;\n  if (typeof value === \"string\") return value.toLowerCase();\n  if (value instanceof Date) return value.getTime();\n  return String(value).toLowerCase();\n}\n\nexport function CraftDataTable<T>({\n  data,\n  columns,\n  tone,\n  className,\n  loading = false,\n  emptyState,\n  toolbar,\n  enableSorting = true,\n  enableFiltering = true,\n  enableColumnVisibility = true,\n  enableRowSelection = true,\n  enablePagination = true,\n  showGlobalFilter,\n  manualSorting = false,\n  manualFiltering = false,\n  manualPagination = false,\n  sortBy,\n  onSortChange,\n  filters,\n  onFiltersChange,\n  globalFilter,\n  onGlobalFilterChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  selectedRowIds,\n  onRowSelectionChange,\n  getRowId,\n  pageIndex,\n  pageSize = 10,\n  pageCount,\n  onPageChange,\n  onPageSizeChange,\n}: CraftDataTableProps<T>) {\n  const [internalSort, setInternalSort] = React.useState<CraftDataTableSort | null>(null);\n  const [internalFilters, setInternalFilters] = React.useState<Record<string, string>>({});\n  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(\"\");\n  const [internalVisibility, setInternalVisibility] = React.useState<Record<string, boolean>>(() =>\n    columns.reduce((acc, column) => {\n      acc[column.id] = !column.hidden;\n      return acc;\n    }, {} as Record<string, boolean>)\n  );\n  const [internalSelection, setInternalSelection] = React.useState<Record<string, boolean>>({});\n  const [internalPageIndex, setInternalPageIndex] = React.useState(0);\n  const [showColumns, setShowColumns] = React.useState(false);\n\n  const resolvedSort = sortBy ?? internalSort;\n  const resolvedFilters = filters ?? internalFilters;\n  const resolvedGlobalFilter = globalFilter ?? internalGlobalFilter;\n  const resolvedVisibility = columnVisibility ?? internalVisibility;\n  const resolvedSelection = selectedRowIds ?? internalSelection;\n  const resolvedPageIndex = pageIndex ?? internalPageIndex;\n\n  const setSort = (next: CraftDataTableSort | null) => {\n    if (sortBy === undefined) setInternalSort(next);\n    onSortChange?.(next);\n  };\n\n  const setFilters = (next: Record<string, string>) => {\n    if (filters === undefined) setInternalFilters(next);\n    onFiltersChange?.(next);\n  };\n\n  const setVisibility = (next: Record<string, boolean>) => {\n    if (columnVisibility === undefined) setInternalVisibility(next);\n    onColumnVisibilityChange?.(next);\n  };\n\n  const setSelection = (next: Record<string, boolean>) => {\n    if (selectedRowIds === undefined) setInternalSelection(next);\n    onRowSelectionChange?.(next);\n  };\n\n  const setPageIndex = React.useCallback(\n    (next: number) => {\n      if (pageIndex === undefined) setInternalPageIndex(next);\n      onPageChange?.(next);\n    },\n    [pageIndex, onPageChange]\n  );\n\n  const visibleColumns = columns.filter(\n    (column) => resolvedVisibility[column.id] !== false\n  );\n\n  const filteredData = React.useMemo(() => {\n    if (manualFiltering) return data;\n    const globalValue = resolvedGlobalFilter.trim();\n    return data.filter((row) => {\n      if (globalValue) {\n        const matchesGlobal = columns.some((column) => {\n          const value = normalizeValue(getColumnValue(column, row));\n          return String(value).includes(globalValue.toLowerCase());\n        });\n        if (!matchesGlobal) return false;\n      }\n\n      return Object.entries(resolvedFilters).every(([columnId, value]) => {\n        if (!value) return true;\n        const column = columns.find((col) => col.id === columnId);\n        if (!column) return true;\n        const cellValue = normalizeValue(getColumnValue(column, row));\n        return String(cellValue).includes(value.toLowerCase());\n      });\n    });\n  }, [columns, data, manualFiltering, resolvedFilters, resolvedGlobalFilter]);\n\n  const sortedData = React.useMemo(() => {\n    if (manualSorting || !resolvedSort) return filteredData;\n    const column = columns.find((col) => col.id === resolvedSort.id);\n    if (!column) return filteredData;\n    const sorted = [...filteredData].sort((a, b) => {\n      const valueA = normalizeValue(getColumnValue(column, a));\n      const valueB = normalizeValue(getColumnValue(column, b));\n      if (typeof valueA === \"number\" && typeof valueB === \"number\") {\n        return valueA - valueB;\n      }\n      return String(valueA).localeCompare(String(valueB));\n    });\n    return resolvedSort.desc ? sorted.reverse() : sorted;\n  }, [columns, filteredData, manualSorting, resolvedSort]);\n\n  const resolvedPageCount = manualPagination\n    ? Math.max(pageCount ?? 1, 1)\n    : Math.max(Math.ceil(sortedData.length / pageSize), 1);\n\n  React.useEffect(() => {\n    if (resolvedPageIndex > resolvedPageCount - 1) {\n      setPageIndex(Math.max(resolvedPageCount - 1, 0));\n    }\n  }, [resolvedPageCount, resolvedPageIndex, setPageIndex]);\n\n  const pagedData = React.useMemo(() => {\n    if (!enablePagination || manualPagination) return sortedData;\n    const start = resolvedPageIndex * pageSize;\n    return sortedData.slice(start, start + pageSize);\n  }, [enablePagination, manualPagination, pageSize, resolvedPageIndex, sortedData]);\n\n  const rowIdFor = React.useCallback(\n    (row: T, index: number) => getRowId?.(row, index) ?? String(index),\n    [getRowId]\n  );\n\n  const pageStartIndex =\n    enablePagination && !manualPagination ? resolvedPageIndex * pageSize : 0;\n  const pageRowIds = pagedData.map((row, index) =>\n    rowIdFor(row, pageStartIndex + index)\n  );\n  const allSelected =\n    pageRowIds.length > 0 && pageRowIds.every((id) => resolvedSelection[id]);\n  const someSelected = pageRowIds.some((id) => resolvedSelection[id]);\n  const headerCheckboxRef = React.useRef<HTMLInputElement | null>(null);\n\n  React.useEffect(() => {\n    if (headerCheckboxRef.current) {\n      headerCheckboxRef.current.indeterminate = someSelected && !allSelected;\n    }\n  }, [someSelected, allSelected]);\n\n  const toggleSort = (column: CraftDataTableColumn<T>) => {\n    if (!enableSorting || column.sortable === false) return;\n    const current = resolvedSort;\n    if (!current || current.id !== column.id) {\n      setSort({ id: column.id, desc: false });\n      return;\n    }\n    if (!current.desc) {\n      setSort({ id: column.id, desc: true });\n      return;\n    }\n    setSort(null);\n  };\n\n  const emptyContent = emptyState ?? (\n    <div className=\"text-center text-sm text-[rgb(var(--nc-fg-muted))]\">\n      No results found.\n    </div>\n  );\n\n  const resolvedShowGlobalFilter =\n    showGlobalFilter ?? (enableFiltering && !toolbar);\n\n  const setGlobalFilter = (next: string) => {\n    if (globalFilter === undefined) setInternalGlobalFilter(next);\n    onGlobalFilterChange?.(next);\n  };\n\n  return (\n    <div className={cn(\"space-y-4\", className)} data-nc-theme={tone}>\n      {toolbar}\n\n      {resolvedShowGlobalFilter && (\n        <div className=\"flex items-center justify-between gap-3 rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-2 text-sm text-[rgb(var(--nc-fg))]\">\n          <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">Global filter</span>\n          <input\n            type=\"search\"\n            value={resolvedGlobalFilter}\n            onChange={(event) => setGlobalFilter(event.target.value)}\n            placeholder=\"Search all columns...\"\n            className=\"w-full max-w-xs rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.18)] px-3 py-2 text-xs text-[rgb(var(--nc-fg))]\"\n          />\n        </div>\n      )}\n\n      {enableColumnVisibility && (\n        <div className=\"relative flex justify-end\">\n          <button\n            type=\"button\"\n            className=\"rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-2 text-xs text-[rgb(var(--nc-fg))] transition hover:bg-[rgb(var(--nc-surface)/0.2)]\"\n            onClick={() => setShowColumns((prev) => !prev)}\n          >\n            Columns\n          </button>\n          {showColumns && (\n            <div className=\"absolute right-0 top-10 z-20 w-48 rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.2)] p-3 shadow-[0_12px_30px_rgba(0,0,0,0.35)] backdrop-blur-2xl\">\n              <div className=\"grid gap-2\">\n                {columns.map((column) => (\n                  <label\n                    key={column.id}\n                    className=\"flex items-center gap-2 text-xs text-[rgb(var(--nc-fg))]\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      className=\"h-4 w-4 accent-[rgb(var(--nc-accent-1))]\"\n                      checked={resolvedVisibility[column.id] !== false}\n                      onChange={(event) =>\n                        setVisibility({\n                          ...resolvedVisibility,\n                          [column.id]: event.target.checked,\n                        })\n                      }\n                    />\n                    {column.header}\n                  </label>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"overflow-hidden rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] shadow-[0_18px_50px_rgba(0,0,0,0.35)] backdrop-blur-2xl\">\n        <table className=\"w-full border-collapse text-left text-sm\">\n          <thead className=\"bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg-muted))]\">\n            <tr>\n              {enableRowSelection && (\n                <th className=\"w-12 px-4 py-3\">\n                  <input\n                    ref={headerCheckboxRef}\n                    type=\"checkbox\"\n                    className=\"h-4 w-4 accent-[rgb(var(--nc-accent-1))]\"\n                    checked={allSelected}\n                    onChange={(event) => {\n                      const next = { ...resolvedSelection };\n                      pageRowIds.forEach((id) => {\n                        next[id] = event.target.checked;\n                      });\n                      setSelection(next);\n                    }}\n                  />\n                </th>\n              )}\n              {visibleColumns.map((column) => (\n                <th\n                  key={column.id}\n                  className={cn(\n                    \"px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em]\",\n                    column.headerClassName\n                  )}\n                  style={{ width: column.width }}\n                >\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      \"flex items-center gap-2\",\n                      enableSorting && column.sortable !== false\n                        ? \"cursor-pointer\"\n                        : \"cursor-default\"\n                    )}\n                    onClick={() => toggleSort(column)}\n                  >\n                    <span>{column.header}</span>\n                    {resolvedSort?.id === column.id && (\n                      <span className=\"text-[rgb(var(--nc-accent-1))]\">\n                        {resolvedSort.desc ? \"↓\" : \"↑\"}\n                      </span>\n                    )}\n                  </button>\n                  {enableFiltering && column.filterable !== false && (\n                    <input\n                      type=\"text\"\n                      value={resolvedFilters[column.id] ?? \"\"}\n                      onChange={(event) =>\n                        setFilters({\n                          ...resolvedFilters,\n                          [column.id]: event.target.value,\n                        })\n                      }\n                      placeholder=\"Filter\"\n                      className=\"mt-2 w-full rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.18)] px-2 py-1 text-xs text-[rgb(var(--nc-fg))]\"\n                    />\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"text-[rgb(var(--nc-fg))]\">\n            {loading && (\n              <tr>\n                <td\n                  colSpan={visibleColumns.length + (enableRowSelection ? 1 : 0)}\n                  className=\"px-4 py-10 text-center text-sm text-[rgb(var(--nc-fg-muted))]\"\n                >\n                  <span className=\"inline-flex items-center gap-2\">\n                    <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-[rgb(var(--nc-fg-muted))] border-t-transparent\" />\n                    Loading data...\n                  </span>\n                </td>\n              </tr>\n            )}\n            {!loading && pagedData.length === 0 && (\n              <tr>\n                <td\n                  colSpan={visibleColumns.length + (enableRowSelection ? 1 : 0)}\n                  className=\"px-4 py-10\"\n                >\n                  {emptyContent}\n                </td>\n              </tr>\n            )}\n            {!loading &&\n              pagedData.map((row, rowIndex) => {\n                const rowId = rowIdFor(row, pageStartIndex + rowIndex);\n                const isSelected = resolvedSelection[rowId];\n                return (\n                  <tr\n                    key={rowId}\n                    className={cn(\n                      \"border-t border-[rgb(var(--nc-border)/0.15)]\",\n                      isSelected && \"bg-[rgb(var(--nc-accent-1)/0.08)]\"\n                    )}\n                  >\n                    {enableRowSelection && (\n                      <td className=\"px-4 py-4\">\n                        <input\n                          type=\"checkbox\"\n                          className=\"h-4 w-4 accent-[rgb(var(--nc-accent-1))]\"\n                          checked={isSelected}\n                          onChange={(event) =>\n                            setSelection({\n                              ...resolvedSelection,\n                              [rowId]: event.target.checked,\n                            })\n                          }\n                        />\n                      </td>\n                    )}\n                    {visibleColumns.map((column) => (\n                      <td\n                        key={column.id}\n                        className={cn(\n                          \"px-4 py-4\",\n                          column.align === \"center\" && \"text-center\",\n                          column.align === \"right\" && \"text-right\",\n                          column.cellClassName\n                        )}\n                      >\n                        {column.cell\n                          ? column.cell(row)\n                          : String(getColumnValue(column, row) ?? \"\")}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })}\n          </tbody>\n        </table>\n      </div>\n\n      {enablePagination && (\n        <CraftPagination\n          pageIndex={resolvedPageIndex}\n          pageCount={resolvedPageCount}\n          onPageChange={setPageIndex}\n          pageSize={pageSize}\n          onPageSizeChange={onPageSizeChange}\n          tone={tone}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA4PI,cAkBI,YAlBJ;AA1PJ,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,SAAS,uBAAuB;AAwDhC,SAAS,eAAkB,QAAiC,KAAQ;AAClE,MAAI,OAAO,OAAO,aAAa,WAAY,QAAO,OAAO,SAAS,GAAG;AACrE,QAAM,SAAS;AACf,MAAI,OAAO,OAAO,aAAa,SAAU,QAAO,OAAO,OAAO,QAAQ;AACtE,SAAO,OAAO,OAAO,EAAE;AACzB;AAEA,SAAS,eAAe,OAAgB;AACtC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,YAAY;AACxD,MAAI,iBAAiB,KAAM,QAAO,MAAM,QAAQ;AAChD,SAAO,OAAO,KAAK,EAAE,YAAY;AACnC;AAEO,SAAS,eAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,yBAAyB;AAAA,EACzB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAoC,IAAI;AACtF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAiC,CAAC,CAAC;AACvF,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,MAAM,SAAS,EAAE;AACzE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM;AAAA,IAAkC,MAC1F,QAAQ,OAAO,CAAC,KAAK,WAAW;AAC9B,UAAI,OAAO,EAAE,IAAI,CAAC,OAAO;AACzB,aAAO;AAAA,IACT,GAAG,CAAC,CAA4B;AAAA,EAClC;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAkC,CAAC,CAAC;AAC5F,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,CAAC;AAClE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAE1D,QAAM,eAAe,0BAAU;AAC/B,QAAM,kBAAkB,4BAAW;AACnC,QAAM,uBAAuB,sCAAgB;AAC7C,QAAM,qBAAqB,8CAAoB;AAC/C,QAAM,oBAAoB,0CAAkB;AAC5C,QAAM,oBAAoB,gCAAa;AAEvC,QAAM,UAAU,CAAC,SAAoC;AACnD,QAAI,WAAW,OAAW,iBAAgB,IAAI;AAC9C,iDAAe;AAAA,EACjB;AAEA,QAAM,aAAa,CAAC,SAAiC;AACnD,QAAI,YAAY,OAAW,oBAAmB,IAAI;AAClD,uDAAkB;AAAA,EACpB;AAEA,QAAM,gBAAgB,CAAC,SAAkC;AACvD,QAAI,qBAAqB,OAAW,uBAAsB,IAAI;AAC9D,yEAA2B;AAAA,EAC7B;AAEA,QAAM,eAAe,CAAC,SAAkC;AACtD,QAAI,mBAAmB,OAAW,sBAAqB,IAAI;AAC3D,iEAAuB;AAAA,EACzB;AAEA,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,SAAiB;AAChB,UAAI,cAAc,OAAW,sBAAqB,IAAI;AACtD,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,WAAW,YAAY;AAAA,EAC1B;AAEA,QAAM,iBAAiB,QAAQ;AAAA,IAC7B,CAAC,WAAW,mBAAmB,OAAO,EAAE,MAAM;AAAA,EAChD;AAEA,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,QAAI,gBAAiB,QAAO;AAC5B,UAAM,cAAc,qBAAqB,KAAK;AAC9C,WAAO,KAAK,OAAO,CAAC,QAAQ;AAC1B,UAAI,aAAa;AACf,cAAM,gBAAgB,QAAQ,KAAK,CAAC,WAAW;AAC7C,gBAAM,QAAQ,eAAe,eAAe,QAAQ,GAAG,CAAC;AACxD,iBAAO,OAAO,KAAK,EAAE,SAAS,YAAY,YAAY,CAAC;AAAA,QACzD,CAAC;AACD,YAAI,CAAC,cAAe,QAAO;AAAA,MAC7B;AAEA,aAAO,OAAO,QAAQ,eAAe,EAAE,MAAM,CAAC,CAAC,UAAU,KAAK,MAAM;AAClE,YAAI,CAAC,MAAO,QAAO;AACnB,cAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,OAAO,QAAQ;AACxD,YAAI,CAAC,OAAQ,QAAO;AACpB,cAAM,YAAY,eAAe,eAAe,QAAQ,GAAG,CAAC;AAC5D,eAAO,OAAO,SAAS,EAAE,SAAS,MAAM,YAAY,CAAC;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,MAAM,iBAAiB,iBAAiB,oBAAoB,CAAC;AAE1E,QAAM,aAAa,MAAM,QAAQ,MAAM;AACrC,QAAI,iBAAiB,CAAC,aAAc,QAAO;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,OAAO,aAAa,EAAE;AAC/D,QAAI,CAAC,OAAQ,QAAO;AACpB,UAAM,SAAS,CAAC,GAAG,YAAY,EAAE,KAAK,CAAC,GAAG,MAAM;AAC9C,YAAM,SAAS,eAAe,eAAe,QAAQ,CAAC,CAAC;AACvD,YAAM,SAAS,eAAe,eAAe,QAAQ,CAAC,CAAC;AACvD,UAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAAU;AAC5D,eAAO,SAAS;AAAA,MAClB;AACA,aAAO,OAAO,MAAM,EAAE,cAAc,OAAO,MAAM,CAAC;AAAA,IACpD,CAAC;AACD,WAAO,aAAa,OAAO,OAAO,QAAQ,IAAI;AAAA,EAChD,GAAG,CAAC,SAAS,cAAc,eAAe,YAAY,CAAC;AAEvD,QAAM,oBAAoB,mBACtB,KAAK,IAAI,gCAAa,GAAG,CAAC,IAC1B,KAAK,IAAI,KAAK,KAAK,WAAW,SAAS,QAAQ,GAAG,CAAC;AAEvD,QAAM,UAAU,MAAM;AACpB,QAAI,oBAAoB,oBAAoB,GAAG;AAC7C,mBAAa,KAAK,IAAI,oBAAoB,GAAG,CAAC,CAAC;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,mBAAmB,mBAAmB,YAAY,CAAC;AAEvD,QAAM,YAAY,MAAM,QAAQ,MAAM;AACpC,QAAI,CAAC,oBAAoB,iBAAkB,QAAO;AAClD,UAAM,QAAQ,oBAAoB;AAClC,WAAO,WAAW,MAAM,OAAO,QAAQ,QAAQ;AAAA,EACjD,GAAG,CAAC,kBAAkB,kBAAkB,UAAU,mBAAmB,UAAU,CAAC;AAEhF,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,KAAQ,UAAe;AAzN5B;AAyN+B,wDAAW,KAAK,WAAhB,YAA0B,OAAO,KAAK;AAAA;AAAA,IACjE,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,iBACJ,oBAAoB,CAAC,mBAAmB,oBAAoB,WAAW;AACzE,QAAM,aAAa,UAAU;AAAA,IAAI,CAAC,KAAK,UACrC,SAAS,KAAK,iBAAiB,KAAK;AAAA,EACtC;AACA,QAAM,cACJ,WAAW,SAAS,KAAK,WAAW,MAAM,CAAC,OAAO,kBAAkB,EAAE,CAAC;AACzE,QAAM,eAAe,WAAW,KAAK,CAAC,OAAO,kBAAkB,EAAE,CAAC;AAClE,QAAM,oBAAoB,MAAM,OAAgC,IAAI;AAEpE,QAAM,UAAU,MAAM;AACpB,QAAI,kBAAkB,SAAS;AAC7B,wBAAkB,QAAQ,gBAAgB,gBAAgB,CAAC;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,QAAM,aAAa,CAAC,WAAoC;AACtD,QAAI,CAAC,iBAAiB,OAAO,aAAa,MAAO;AACjD,UAAM,UAAU;AAChB,QAAI,CAAC,WAAW,QAAQ,OAAO,OAAO,IAAI;AACxC,cAAQ,EAAE,IAAI,OAAO,IAAI,MAAM,MAAM,CAAC;AACtC;AAAA,IACF;AACA,QAAI,CAAC,QAAQ,MAAM;AACjB,cAAQ,EAAE,IAAI,OAAO,IAAI,MAAM,KAAK,CAAC;AACrC;AAAA,IACF;AACA,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,eAAe,kCACnB,oBAAC,SAAI,WAAU,sDAAqD,+BAEpE;AAGF,QAAM,2BACJ,8CAAqB,mBAAmB,CAAC;AAE3C,QAAM,kBAAkB,CAAC,SAAiB;AACxC,QAAI,iBAAiB,OAAW,yBAAwB,IAAI;AAC5D,iEAAuB;AAAA,EACzB;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAG,iBAAe,MACxD;AAAA;AAAA,IAEA,4BACC,qBAAC,SAAI,WAAU,6KACb;AAAA,0BAAC,UAAK,WAAU,0CAAyC,2BAAa;AAAA,MACtE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,gBAAgB,MAAM,OAAO,KAAK;AAAA,UACvD,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IAGD,0BACC,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,eAAe,CAAC,SAAS,CAAC,IAAI;AAAA,UAC9C;AAAA;AAAA,MAED;AAAA,MACC,eACC,oBAAC,SAAI,WAAU,uLACb,8BAAC,SAAI,WAAU,cACZ,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,mBAAmB,OAAO,EAAE,MAAM;AAAA,gBAC3C,UAAU,CAAC,UACT,cAAc;AAAA,kBACZ,GAAG;AAAA,kBACH,CAAC,OAAO,EAAE,GAAG,MAAM,OAAO;AAAA,gBAC5B,CAAC;AAAA;AAAA,YAEL;AAAA,YACC,OAAO;AAAA;AAAA;AAAA,QAdH,OAAO;AAAA,MAed,CACD,GACH,GACF;AAAA,OAEJ;AAAA,IAGF,oBAAC,SAAI,WAAU,kKACb,+BAAC,WAAM,WAAU,4CACf;AAAA,0BAAC,WAAM,WAAU,mEACf,+BAAC,QACE;AAAA,8BACC,oBAAC,QAAG,WAAU,kBACZ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT,UAAU,CAAC,UAAU;AACnB,oBAAM,OAAO,EAAE,GAAG,kBAAkB;AACpC,yBAAW,QAAQ,CAAC,OAAO;AACzB,qBAAK,EAAE,IAAI,MAAM,OAAO;AAAA,cAC1B,CAAC;AACD,2BAAa,IAAI;AAAA,YACnB;AAAA;AAAA,QACF,GACF;AAAA,QAED,eAAe,IAAI,CAAC,WAAQ;AApV3C;AAqVgB;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT;AAAA,gBACA,OAAO;AAAA,cACT;AAAA,cACA,OAAO,EAAE,OAAO,OAAO,MAAM;AAAA,cAE7B;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAW;AAAA,sBACT;AAAA,sBACA,iBAAiB,OAAO,aAAa,QACjC,mBACA;AAAA,oBACN;AAAA,oBACA,SAAS,MAAM,WAAW,MAAM;AAAA,oBAEhC;AAAA,0CAAC,UAAM,iBAAO,QAAO;AAAA,uBACpB,6CAAc,QAAO,OAAO,MAC3B,oBAAC,UAAK,WAAU,kCACb,uBAAa,OAAO,WAAM,UAC7B;AAAA;AAAA;AAAA,gBAEJ;AAAA,gBACC,mBAAmB,OAAO,eAAe,SACxC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO,qBAAgB,OAAO,EAAE,MAAzB,YAA8B;AAAA,oBACrC,UAAU,CAAC,UACT,WAAW;AAAA,sBACT,GAAG;AAAA,sBACH,CAAC,OAAO,EAAE,GAAG,MAAM,OAAO;AAAA,oBAC5B,CAAC;AAAA,oBAEH,aAAY;AAAA,oBACZ,WAAU;AAAA;AAAA,gBACZ;AAAA;AAAA;AAAA,YApCG,OAAO;AAAA,UAsCd;AAAA,SACD;AAAA,SACH,GACF;AAAA,MACA,qBAAC,WAAM,WAAU,4BACd;AAAA,mBACC,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,eAAe,UAAU,qBAAqB,IAAI;AAAA,YAC3D,WAAU;AAAA,YAEV,+BAAC,UAAK,WAAU,kCACd;AAAA,kCAAC,UAAK,WAAU,oGAAmG;AAAA,cAAE;AAAA,eAEvH;AAAA;AAAA,QACF,GACF;AAAA,QAED,CAAC,WAAW,UAAU,WAAW,KAChC,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,eAAe,UAAU,qBAAqB,IAAI;AAAA,YAC3D,WAAU;AAAA,YAET;AAAA;AAAA,QACH,GACF;AAAA,QAED,CAAC,WACA,UAAU,IAAI,CAAC,KAAK,aAAa;AAC/B,gBAAM,QAAQ,SAAS,KAAK,iBAAiB,QAAQ;AACrD,gBAAM,aAAa,kBAAkB,KAAK;AAC1C,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT;AAAA,gBACA,cAAc;AAAA,cAChB;AAAA,cAEC;AAAA,sCACC,oBAAC,QAAG,WAAU,aACZ;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT,UAAU,CAAC,UACT,aAAa;AAAA,sBACX,GAAG;AAAA,sBACH,CAAC,KAAK,GAAG,MAAM,OAAO;AAAA,oBACxB,CAAC;AAAA;AAAA,gBAEL,GACF;AAAA,gBAED,eAAe,IAAI,CAAC,WAAQ;AAnbjD;AAobsB;AAAA,oBAAC;AAAA;AAAA,sBAEC,WAAW;AAAA,wBACT;AAAA,wBACA,OAAO,UAAU,YAAY;AAAA,wBAC7B,OAAO,UAAU,WAAW;AAAA,wBAC5B,OAAO;AAAA,sBACT;AAAA,sBAEC,iBAAO,OACJ,OAAO,KAAK,GAAG,IACf,QAAO,oBAAe,QAAQ,GAAG,MAA1B,YAA+B,EAAE;AAAA;AAAA,oBAVvC,OAAO;AAAA,kBAWd;AAAA,iBACD;AAAA;AAAA;AAAA,YAnCI;AAAA,UAoCP;AAAA,QAEJ,CAAC;AAAA,SACL;AAAA,OACF,GACF;AAAA,IAEC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,WAAW;AAAA,QACX,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/craft-date-picker.cjs

@@ -0,0 +1,226 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var craft_date_picker_exports = {};
+__export(craft_date_picker_exports, {
+  CraftDatePicker: () => CraftDatePicker
+});
+module.exports = __toCommonJS(craft_date_picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_cn = require("../utils/cn");
+const WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function parseDate(value) {
+  if (!value) return null;
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) return null;
+  return new Date(year, month - 1, day);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isOutsideRange(date, min, max) {
+  const minDate = parseDate(min);
+  const maxDate = parseDate(max);
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+}
+function CraftDatePicker({
+  value,
+  defaultValue,
+  onChange,
+  tone,
+  min,
+  max,
+  placeholder = "Select date",
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value != null ? value : "" : uncontrolledValue;
+  const selectedDate = parseDate(selectedValue);
+  const initialMonth = selectedDate != null ? selectedDate : /* @__PURE__ */ new Date();
+  const [viewDate, setViewDate] = React.useState(initialMonth);
+  React.useEffect(() => {
+    if (selectedDate) setViewDate(selectedDate);
+  }, [selectedDate]);
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      var _a;
+      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+  const setValue = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+  const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
+  const startDay = monthStart.getDay();
+  const daysInMonth = monthEnd.getDate();
+  const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {
+    const dayNumber = i - startDay + 1;
+    if (dayNumber < 1) return null;
+    return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);
+  });
+  const handleDaySelect = (date) => {
+    if (isOutsideRange(date, min, max)) return;
+    const next = formatDate(date);
+    setValue(next);
+    setOpen(false);
+  };
+  const handleKeyDown = (event) => {
+    if (!open) return;
+    if (!selectedDate) return;
+    const next = new Date(selectedDate);
+    if (event.key === "ArrowRight") next.setDate(next.getDate() + 1);
+    if (event.key === "ArrowLeft") next.setDate(next.getDate() - 1);
+    if (event.key === "ArrowDown") next.setDate(next.getDate() + 7);
+    if (event.key === "ArrowUp") next.setDate(next.getDate() - 7);
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleDaySelect(selectedDate);
+      return;
+    }
+    if (next.getTime() !== selectedDate.getTime()) {
+      event.preventDefault();
+      if (!isOutsideRange(next, min, max)) {
+        setValue(formatDate(next));
+        setViewDate(next);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, ref: wrapperRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: (0, import_cn.cn)(
+          "flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+          "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+          "transition-all duration-300",
+          "border-[rgb(var(--nc-border)/0.35)]",
+          "focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: selectedValue ? "text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-soft))]", children: selectedValue || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "h-4 w-4 text-[rgb(var(--nc-fg-soft))]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)(
+          "absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl"
+        ),
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)
+                ),
+                children: "Prev"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)
+                ),
+                children: "Next"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-center", children: day }, day)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 grid grid-cols-7 gap-2", children: cells.map((date, index) => {
+            if (!date) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}, `empty-${index}`);
+            const disabled = isOutsideRange(date, min, max);
+            const selected = selectedDate && isSameDay(date, selectedDate);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDaySelect(date),
+                disabled,
+                className: (0, import_cn.cn)(
+                  "rounded-lg py-2 text-sm transition-all",
+                  selected ? "bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]",
+                  disabled && "opacity-40 hover:bg-transparent"
+                ),
+                children: date.getDate()
+              },
+              date.toISOString()
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CraftDatePicker
+});
+//# sourceMappingURL=craft-date-picker.cjs.map