@nofinite/nui 1.1.1 → 2.0.1

package/dist/components/datagrid/DataGrid.js

@@ -1,227 +1,209 @@
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useState as x, useMemo as M } from "react";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useState as x, useMemo as A } from "react";
 /* empty css             */
-function Q({
-  columns: C,
+import { cn as w } from "../../utils/cn/cn.js";
+function Y({
+  columns: g,
   rows: u,
-  page: $,
-  pageSize: m = 10,
-  onPageChange: A,
-  selectable: k = !1,
-  selectedRowIds: D,
-  onSelectionChange: b,
-  onRowClick: I,
-  renderRowActions: P,
-  className: T = "",
-  disablePagination: p = !1
+  page: F,
+  pageSize: f = 10,
+  onPageChange: W,
+  selectable: p = !1,
+  selectedRowIds: S,
+  onSelectionChange: y,
+  onRowClick: D,
+  renderRowActions: M,
+  className: E,
+  disablePagination: m = !1
 }) {
-  const [c, B] = x({ key: null, dir: null }), [F, K] = x(1), l = $ ?? F, [U, E] = x(/* @__PURE__ */ new Set()), v = D ?? U, g = M(() => p ? 1 : Math.max(1, Math.ceil(u.length / m)), [u.length, m, p]), w = M(() => {
-    if (!c.key || !c.dir) return [...u];
-    const e = c.key, t = c.dir === "asc" ? 1 : -1;
-    return [...u].sort((i, a) => {
-      const r = i[e], n = a[e];
-      return r === void 0 && n !== void 0 ? -1 * t : n === void 0 && r !== void 0 ? 1 * t : typeof r == "number" && typeof n == "number" ? (r - n) * t : r instanceof Date && n instanceof Date ? (r.getTime() - n.getTime()) * t : String(r ?? "").localeCompare(String(n ?? "")) * t;
+  const [s, T] = x({ key: null, dir: null }), [K, G] = x(1), h = F ?? K, [O, B] = x(/* @__PURE__ */ new Set()), k = S ?? O, N = A(() => m || u.length === 0 ? 1 : Math.ceil(u.length / f), [u.length, f, m]), j = A(() => {
+    if (!s.key || !s.dir) return [...u];
+    const e = s.key, t = s.dir === "asc" ? 1 : -1, i = g.find((n) => n.key === e);
+    return [...u].sort((n, d) => {
+      if (i?.sortFn)
+        return s.dir === "asc" ? i.sortFn(n, d) : i.sortFn(d, n);
+      const a = n[e], l = d[e];
+      return a === l ? 0 : a == null ? -1 * t : l == null ? 1 * t : typeof a == "number" && typeof l == "number" ? (a - l) * t : a instanceof Date && l instanceof Date ? (a.getTime() - l.getTime()) * t : String(a).localeCompare(String(l)) * t;
     });
-  }, [u, c]), s = M(() => {
-    if (p) return w;
-    const e = (l - 1) * m;
-    return w.slice(e, e + m);
-  }, [w, l, m, p]), [y, o] = x(null), N = (e, t) => e.id ?? `row-${t}-${Math.random().toString(36).slice(2, 7)}`, G = (e) => {
-    B((t) => t.key !== e ? { key: e, dir: "asc" } : t.dir === "asc" ? { key: e, dir: "desc" } : { key: null, dir: null });
-  }, h = (e) => {
-    const t = Math.max(1, Math.min(g, e));
-    $ === void 0 && K(t), A?.(t);
-  }, S = (e) => {
+  }, [u, s, g]), o = A(() => {
+    if (m) return j;
+    const e = (h - 1) * f;
+    return j.slice(e, e + f);
+  }, [j, h, f, m]), [b, C] = x(null), v = (e, t) => e.id ?? `row-${t}`, U = (e) => {
+    T((t) => t.key !== e ? { key: e, dir: "asc" } : t.dir === "asc" ? { key: e, dir: "desc" } : { key: null, dir: null });
+  }, I = (e) => {
+    const t = Math.max(1, Math.min(N, e));
+    F === void 0 && G(t), W?.(t);
+  }, L = (e) => {
     const t = (i) => {
-      const a = new Set(i);
-      return a.has(e) ? a.delete(e) : a.add(e), a;
+      const n = new Set(i);
+      return n.has(e) ? n.delete(e) : n.add(e), n;
     };
-    if (D) {
-      const i = t(v);
-      b?.(i);
-    } else
-      E((i) => {
-        const a = t(i);
-        return b?.(a), a;
-      });
-  }, H = () => {
-    const e = s.map((a, r) => a.id ?? N(a, r)), t = e.every((a) => v.has(a)), i = (a) => {
-      const r = new Set(a);
-      return t ? e.forEach((n) => r.delete(n)) : e.forEach((n) => r.add(n)), r;
+    S ? y?.(t(k)) : B((i) => {
+      const n = t(i);
+      return y?.(n), n;
+    });
+  }, $ = () => {
+    const e = o.map((n, d) => v(n, d)), t = e.every((n) => k.has(n)), i = (n) => {
+      const d = new Set(n);
+      return t ? e.forEach((a) => d.delete(a)) : e.forEach((a) => d.add(a)), d;
     };
-    if (D) {
-      const a = i(v);
-      b?.(a);
-    } else
-      E((a) => {
-        const r = i(a);
-        return b?.(r), r;
-      });
-  }, O = (e) => {
-    if (s.length !== 0)
+    S ? y?.(i(k)) : B((n) => {
+      const d = i(n);
+      return y?.(d), d;
+    });
+  }, q = (e) => {
+    if (o.length !== 0)
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), o(
-            (t) => t === null ? 0 : Math.min(s.length - 1, t + 1)
-          );
+          e.preventDefault(), C((t) => t === null ? 0 : Math.min(o.length - 1, t + 1));
           break;
         case "ArrowUp":
-          e.preventDefault(), o((t) => t === null ? 0 : Math.max(0, t - 1));
-          break;
-        case "PageDown":
-          e.preventDefault(), h(l + 1), o(0);
-          break;
-        case "PageUp":
-          e.preventDefault(), h(l - 1), o(0);
-          break;
-        case "Home":
-          e.preventDefault(), o(0);
-          break;
-        case "End":
-          e.preventDefault(), o(s.length - 1);
+          e.preventDefault(), C((t) => t === null ? 0 : Math.max(0, t - 1));
           break;
         case "Enter":
-          if (e.preventDefault(), y !== null) {
-            const t = s[y], i = t.id ?? N(t, y);
-            k && S(i), I?.(t);
+        case " ":
+          if (e.preventDefault(), b !== null) {
+            const t = o[b], i = v(t, b);
+            p && L(i), D?.(t);
           }
           break;
       }
-  }, j = !!P;
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: `ui-datagrid ${T}`,
-      onKeyDown: O,
-      tabIndex: 0,
-      role: "grid",
-      "aria-rowcount": u.length,
-      children: /* @__PURE__ */ f("div", { className: "ui-datagrid-table", children: [
-        /* @__PURE__ */ f("div", { className: "ui-datagrid-header", role: "row", children: [
-          k && /* @__PURE__ */ d("div", { className: "ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--select", children: /* @__PURE__ */ d(
-            "input",
-            {
-              type: "checkbox",
-              "aria-label": "Select all on page",
-              onChange: H,
-              checked: s.length > 0 && s.every(
-                (e, t) => v.has(e.id ?? N(e, t))
-              )
-            }
-          ) }),
-          C.map((e) => {
-            const t = c.key === e.key;
-            return /* @__PURE__ */ d(
-              "div",
+  }, P = !!M, H = o.length > 0 && o.every((e, t) => k.has(v(e, t)));
+  return /* @__PURE__ */ c("div", { className: w("nui-datagrid-root", E), children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "nui-datagrid-table-wrapper",
+        onKeyDown: q,
+        tabIndex: 0,
+        children: /* @__PURE__ */ c("table", { className: "nui-datagrid-table", role: "grid", "aria-rowcount": u.length, children: [
+          /* @__PURE__ */ r("thead", { className: "nui-datagrid-thead", children: /* @__PURE__ */ c("tr", { role: "row", children: [
+            p && /* @__PURE__ */ r("th", { className: "nui-datagrid-th nui-datagrid-th--select", scope: "col", children: /* @__PURE__ */ r(
+              "input",
               {
-                className: `ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--${e.align ?? "left"}`,
-                role: "columnheader",
-                style: { width: e.width },
-                "aria-sort": t ? c.dir === "asc" ? "ascending" : "descending" : "none",
-                onClick: () => e.sortable && G(e.key),
-                children: /* @__PURE__ */ f("div", { className: "ui-datagrid-header-content", children: [
-                  /* @__PURE__ */ d("span", { children: e.title }),
-                  e.sortable && /* @__PURE__ */ d("span", { className: "ui-datagrid-sort-indicator", children: t ? c.dir === "asc" ? "▲" : "▼" : "⤓" })
-                ] })
+                type: "checkbox",
+                "aria-label": "Select all on page",
+                onChange: $,
+                checked: H,
+                className: "nui-datagrid-checkbox"
+              }
+            ) }),
+            g.map((e) => {
+              const t = s.key === e.key;
+              return /* @__PURE__ */ r(
+                "th",
+                {
+                  className: "nui-datagrid-th",
+                  style: {
+                    width: e.width,
+                    textAlign: e.align || "left"
+                  },
+                  scope: "col",
+                  "aria-sort": t ? s.dir === "asc" ? "ascending" : "descending" : "none",
+                  children: /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: w(
+                        "nui-datagrid-th-content",
+                        e.sortable && "sortable",
+                        e.align === "right" && "justify-end",
+                        e.align === "center" && "justify-center"
+                      ),
+                      onClick: () => e.sortable && U(e.key),
+                      children: [
+                        /* @__PURE__ */ r("span", { className: "nui-datagrid-th-title", children: e.title }),
+                        e.sortable && /* @__PURE__ */ r("span", { className: w("nui-datagrid-sort-icon", t && "active"), children: t && s.dir === "desc" ? /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "m6 9 6 6 6-6" }) }) : /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "m18 15-6-6-6 6" }) }) })
+                      ]
+                    }
+                  )
+                },
+                e.key
+              );
+            }),
+            P && /* @__PURE__ */ r("th", { className: "nui-datagrid-th nui-datagrid-th--actions", scope: "col" })
+          ] }) }),
+          /* @__PURE__ */ r("tbody", { className: "nui-datagrid-tbody", role: "rowgroup", children: o.length === 0 ? /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: g.length + (p ? 1 : 0) + (P ? 1 : 0), className: "nui-datagrid-empty", children: "No data available" }) }) : o.map((e, t) => {
+            const i = v(e, t), n = k.has(i);
+            return /* @__PURE__ */ c(
+              "tr",
+              {
+                role: "row",
+                tabIndex: -1,
+                "aria-selected": n,
+                className: w(
+                  "nui-datagrid-tr",
+                  n && "selected",
+                  b === t && "focused",
+                  D && "clickable"
+                ),
+                onClick: () => {
+                  p && L(i), D?.(e), C(t);
+                },
+                children: [
+                  p && /* @__PURE__ */ r("td", { className: "nui-datagrid-td nui-datagrid-td--select", children: /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: n,
+                      onClick: (a) => a.stopPropagation(),
+                      onChange: () => L(i),
+                      "aria-label": "Select row",
+                      className: "nui-datagrid-checkbox"
+                    }
+                  ) }),
+                  g.map((a) => /* @__PURE__ */ r(
+                    "td",
+                    {
+                      role: "gridcell",
+                      className: "nui-datagrid-td",
+                      style: { textAlign: a.align || "left" },
+                      children: a.render ? a.render(e) : String(e[a.key] ?? "")
+                    },
+                    a.key
+                  )),
+                  P && /* @__PURE__ */ r("td", { className: "nui-datagrid-td nui-datagrid-td--actions", onClick: (a) => a.stopPropagation(), children: M?.(e) })
+                ]
               },
-              e.key
+              String(i)
             );
-          }),
-          j && /* @__PURE__ */ d("div", { className: "ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--actions" })
-        ] }),
-        /* @__PURE__ */ d("div", { className: "ui-datagrid-body", role: "rowgroup", children: s.length === 0 ? /* @__PURE__ */ d("div", { className: "ui-datagrid-empty", children: "No data" }) : s.map((e, t) => {
-          const i = e.id ?? N(e, t), a = v.has(i), r = y === t;
-          return /* @__PURE__ */ f(
-            "div",
-            {
-              className: [
-                "ui-datagrid-row",
-                a ? "selected" : "",
-                r ? "focused" : ""
-              ].filter(Boolean).join(" "),
-              role: "row",
-              tabIndex: r ? 0 : -1,
-              "aria-selected": a || void 0,
-              onClick: () => {
-                k && S(i), I?.(e), o(t);
-              },
-              onFocus: () => o(t),
-              children: [
-                k && /* @__PURE__ */ d("div", { className: "ui-datagrid-cell ui-datagrid-cell--select", children: /* @__PURE__ */ d(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: a,
-                    onClick: (n) => n.stopPropagation(),
-                    onChange: () => S(i),
-                    "aria-label": `Select row ${String(i)}`
-                  }
-                ) }),
-                C.map((n) => /* @__PURE__ */ d(
-                  "div",
-                  {
-                    role: "gridcell",
-                    className: `ui-datagrid-cell ui-datagrid-cell--${n.align ?? "left"}`,
-                    style: { width: n.width },
-                    children: n.render ? n.render(e) : String(e[n.key] ?? "")
-                  },
-                  n.key
-                )),
-                j && /* @__PURE__ */ d("div", { className: "ui-datagrid-cell ui-datagrid-cell--actions", children: P?.(e) })
-              ]
-            },
-            String(i)
-          );
-        }) }),
-        !p && g > 1 && /* @__PURE__ */ f("div", { className: "ui-datagrid-footer", children: [
-          /* @__PURE__ */ d(
-            "button",
-            {
-              className: "ui-datagrid-page-btn",
-              onClick: () => h(1),
-              disabled: l === 1,
-              children: "«"
-            }
-          ),
-          /* @__PURE__ */ d(
-            "button",
-            {
-              className: "ui-datagrid-page-btn",
-              onClick: () => h(l - 1),
-              disabled: l === 1,
-              children: "‹"
-            }
-          ),
-          /* @__PURE__ */ f("div", { className: "ui-datagrid-page-info", children: [
-            "Page ",
-            l,
-            " of ",
-            g
-          ] }),
-          /* @__PURE__ */ d(
-            "button",
-            {
-              className: "ui-datagrid-page-btn",
-              onClick: () => h(l + 1),
-              disabled: l === g,
-              children: "›"
-            }
-          ),
-          /* @__PURE__ */ d(
-            "button",
-            {
-              className: "ui-datagrid-page-btn",
-              onClick: () => h(g),
-              disabled: l === g,
-              children: "»"
-            }
-          )
+          }) })
         ] })
+      }
+    ),
+    !m && N > 1 && /* @__PURE__ */ c("div", { className: "nui-datagrid-pagination", children: [
+      /* @__PURE__ */ c("span", { className: "nui-datagrid-page-info", children: [
+        "Page ",
+        h,
+        " of ",
+        N
+      ] }),
+      /* @__PURE__ */ c("div", { className: "nui-datagrid-page-controls", children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: "nui-datagrid-page-btn",
+            onClick: () => I(h - 1),
+            disabled: h === 1,
+            "aria-label": "Previous Page",
+            children: /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ r("polyline", { points: "15 18 9 12 15 6" }) })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: "nui-datagrid-page-btn",
+            onClick: () => I(h + 1),
+            disabled: h === N,
+            "aria-label": "Next Page",
+            children: /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ r("polyline", { points: "9 18 15 12 9 6" }) })
+          }
+        )
       ] })
-    }
-  );
+    ] })
+  ] });
 }
 export {
-  Q as DataGrid
+  Y as DataGrid
 };
 //# sourceMappingURL=DataGrid.js.map

package/dist/components/datagrid/DataGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.js","sources":["../../../src/components/datagrid/DataGrid.tsx"],"sourcesContent":["/**\r\n * DataGrid.tsx\r\n * -------------\r\n * Vercel-style DataGrid for NUI\r\n *\r\n * Features:\r\n * - Sortable columns\r\n * - Sticky header\r\n * - Optional row selection (checkbox)\r\n * - Row actions slot\r\n * - Pagination (client-side)\r\n * - Keyboard navigation & focus\r\n * - Accessible (aria-sort, aria-selected, table/grid roles)\r\n */\r\n\r\nimport React, { useMemo, useState } from 'react';\r\nimport './DataGrid.css';\r\n\r\nexport type DataRow = Record<string, unknown> & {\r\n  id?: string | number;\r\n};\r\n\r\nexport type DataGridColumn<T extends DataRow = DataRow> = {\r\n  key: keyof T & string;\r\n  title: React.ReactNode;\r\n  sortable?: boolean;\r\n  width?: number | string;\r\n  align?: 'left' | 'center' | 'right';\r\n  render?: (row: T) => React.ReactNode;\r\n};\r\n\r\nexport interface DataGridProps<T extends DataRow = DataRow> {\r\n  columns: DataGridColumn<T>[];\r\n  rows: T[];\r\n\r\n  page?: number;\r\n  pageSize?: number;\r\n  onPageChange?: (page: number) => void;\r\n\r\n  selectable?: boolean;\r\n  selectedRowIds?: Set<string | number>;\r\n  onSelectionChange?: (ids: Set<string | number>) => void;\r\n\r\n  onRowClick?: (row: T) => void;\r\n  renderRowActions?: (row: T) => React.ReactNode;\r\n\r\n  className?: string;\r\n  disablePagination?: boolean;\r\n}\r\n\r\ntype SortState = { key: string | null; dir: 'asc' | 'desc' | null };\r\n\r\nexport function DataGrid<T extends DataRow = DataRow>({\r\n  columns,\r\n  rows,\r\n  page: controlledPage,\r\n  pageSize = 10,\r\n  onPageChange,\r\n\r\n  selectable = false,\r\n  selectedRowIds,\r\n  onSelectionChange,\r\n\r\n  onRowClick,\r\n  renderRowActions,\r\n  className = '',\r\n  disablePagination = false,\r\n}: DataGridProps<T>) {\r\n  const [sort, setSort] = useState<SortState>({ key: null, dir: null });\r\n  const [internalPage, setInternalPage] = useState(1);\r\n  const currentPage = controlledPage ?? internalPage;\r\n\r\n  const [internalSelection, setInternalSelection] = useState<\r\n    Set<string | number>\r\n  >(new Set());\r\n\r\n  const selection = selectedRowIds ?? internalSelection;\r\n\r\n  const totalPages = useMemo(() => {\r\n    if (disablePagination) return 1;\r\n    return Math.max(1, Math.ceil(rows.length / pageSize));\r\n  }, [rows.length, pageSize, disablePagination]);\r\n\r\n  const sortedRows = useMemo(() => {\r\n    if (!sort.key || !sort.dir) return [...rows];\r\n\r\n    const key = sort.key as keyof T;\r\n    const dir = sort.dir === 'asc' ? 1 : -1;\r\n\r\n    return [...rows].sort((a, b) => {\r\n      const va = a[key];\r\n      const vb = b[key];\r\n\r\n      if (va === undefined && vb !== undefined) return -1 * dir;\r\n      if (vb === undefined && va !== undefined) return 1 * dir;\r\n\r\n      if (typeof va === 'number' && typeof vb === 'number') {\r\n        return (va - vb) * dir;\r\n      }\r\n\r\n      if (va instanceof Date && vb instanceof Date) {\r\n        return (va.getTime() - vb.getTime()) * dir;\r\n      }\r\n\r\n      return String(va ?? '').localeCompare(String(vb ?? '')) * dir;\r\n    });\r\n  }, [rows, sort]);\r\n\r\n  const paginatedRows = useMemo(() => {\r\n    if (disablePagination) return sortedRows;\r\n    const start = (currentPage - 1) * pageSize;\r\n    return sortedRows.slice(start, start + pageSize);\r\n  }, [sortedRows, currentPage, pageSize, disablePagination]);\r\n\r\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\r\n\r\n  const rowId = (r: T, idx: number) =>\r\n    r.id ?? `row-${idx}-${Math.random().toString(36).slice(2, 7)}`;\r\n\r\n  const toggleSort = (key: string) => {\r\n    setSort((prev) => {\r\n      if (prev.key !== key) return { key, dir: 'asc' };\r\n      if (prev.dir === 'asc') return { key, dir: 'desc' };\r\n      return { key: null, dir: null };\r\n    });\r\n  };\r\n\r\n  const setPage = (page: number) => {\r\n    const next = Math.max(1, Math.min(totalPages, page));\r\n    if (controlledPage === undefined) setInternalPage(next);\r\n    onPageChange?.(next);\r\n  };\r\n\r\n  const toggleSelectRow = (id: string | number) => {\r\n    const update = (set: Set<string | number>) => {\r\n      const next = new Set(set);\r\n      if (next.has(id)) next.delete(id);\r\n      else next.add(id);\r\n      return next;\r\n    };\r\n\r\n    if (selectedRowIds) {\r\n      const next = update(selection);\r\n      onSelectionChange?.(next);\r\n    } else {\r\n      setInternalSelection((prev) => {\r\n        const next = update(prev);\r\n        onSelectionChange?.(next);\r\n        return next;\r\n      });\r\n    }\r\n  };\r\n\r\n  const selectAllOnPage = () => {\r\n    const ids = paginatedRows.map((r, i) => r.id ?? rowId(r, i));\r\n    const allSelected = ids.every((id) => selection.has(id));\r\n\r\n    const update = (set: Set<string | number>) => {\r\n      const next = new Set(set);\r\n      if (allSelected) ids.forEach((id) => next.delete(id));\r\n      else ids.forEach((id) => next.add(id));\r\n      return next;\r\n    };\r\n\r\n    if (selectedRowIds) {\r\n      const next = update(selection);\r\n      onSelectionChange?.(next);\r\n    } else {\r\n      setInternalSelection((prev) => {\r\n        const next = update(prev);\r\n        onSelectionChange?.(next);\r\n        return next;\r\n      });\r\n    }\r\n  };\r\n\r\n  const onKeyDownTable = (e: React.KeyboardEvent<HTMLDivElement>): void => {\r\n    if (paginatedRows.length === 0) return;\r\n\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n        e.preventDefault();\r\n        setFocusedIndex((prev) =>\r\n          prev === null ? 0 : Math.min(paginatedRows.length - 1, prev + 1)\r\n        );\r\n        break;\r\n\r\n      case 'ArrowUp':\r\n        e.preventDefault();\r\n        setFocusedIndex((prev) => (prev === null ? 0 : Math.max(0, prev - 1)));\r\n        break;\r\n\r\n      case 'PageDown':\r\n        e.preventDefault();\r\n        setPage(currentPage + 1);\r\n        setFocusedIndex(0);\r\n        break;\r\n\r\n      case 'PageUp':\r\n        e.preventDefault();\r\n        setPage(currentPage - 1);\r\n        setFocusedIndex(0);\r\n        break;\r\n\r\n      case 'Home':\r\n        e.preventDefault();\r\n        setFocusedIndex(0);\r\n        break;\r\n\r\n      case 'End':\r\n        e.preventDefault();\r\n        setFocusedIndex(paginatedRows.length - 1);\r\n        break;\r\n\r\n      case 'Enter':\r\n        e.preventDefault();\r\n        if (focusedIndex !== null) {\r\n          const row = paginatedRows[focusedIndex];\r\n          const id = row.id ?? rowId(row, focusedIndex);\r\n          if (selectable) toggleSelectRow(id);\r\n          onRowClick?.(row);\r\n        }\r\n        break;\r\n\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  const showActions = Boolean(renderRowActions);\r\n\r\n  return (\r\n    <div\r\n      className={`ui-datagrid ${className}`}\r\n      onKeyDown={onKeyDownTable}\r\n      tabIndex={0}\r\n      role=\"grid\"\r\n      aria-rowcount={rows.length}\r\n    >\r\n      <div className=\"ui-datagrid-table\">\r\n        {/* HEADER */}\r\n        <div className=\"ui-datagrid-header\" role=\"row\">\r\n          {selectable && (\r\n            <div className=\"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--select\">\r\n              <input\r\n                type=\"checkbox\"\r\n                aria-label=\"Select all on page\"\r\n                onChange={selectAllOnPage}\r\n                checked={\r\n                  paginatedRows.length > 0 &&\r\n                  paginatedRows.every((r, i) =>\r\n                    selection.has(r.id ?? rowId(r, i))\r\n                  )\r\n                }\r\n              />\r\n            </div>\r\n          )}\r\n\r\n          {columns.map((col) => {\r\n            const isSorted = sort.key === col.key;\r\n            return (\r\n              <div\r\n                key={col.key}\r\n                className={`ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--${\r\n                  col.align ?? 'left'\r\n                }`}\r\n                role=\"columnheader\"\r\n                style={{ width: col.width }}\r\n                aria-sort={\r\n                  isSorted\r\n                    ? sort.dir === 'asc'\r\n                      ? 'ascending'\r\n                      : 'descending'\r\n                    : 'none'\r\n                }\r\n                onClick={() => col.sortable && toggleSort(col.key)}\r\n              >\r\n                <div className=\"ui-datagrid-header-content\">\r\n                  <span>{col.title}</span>\r\n                  {col.sortable && (\r\n                    <span className=\"ui-datagrid-sort-indicator\">\r\n                      {isSorted ? (sort.dir === 'asc' ? '▲' : '▼') : '⤓'}\r\n                    </span>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n\r\n          {showActions && (\r\n            <div className=\"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--actions\" />\r\n          )}\r\n        </div>\r\n\r\n        {/* BODY */}\r\n        <div className=\"ui-datagrid-body\" role=\"rowgroup\">\r\n          {paginatedRows.length === 0 ? (\r\n            <div className=\"ui-datagrid-empty\">No data</div>\r\n          ) : (\r\n            paginatedRows.map((row, idx) => {\r\n              const rid = row.id ?? rowId(row, idx);\r\n              const isSelected = selection.has(rid);\r\n              const focused = focusedIndex === idx;\r\n\r\n              return (\r\n                <div\r\n                  key={String(rid)}\r\n                  className={[\r\n                    'ui-datagrid-row',\r\n                    isSelected ? 'selected' : '',\r\n                    focused ? 'focused' : '',\r\n                  ]\r\n                    .filter(Boolean)\r\n                    .join(' ')}\r\n                  role=\"row\"\r\n                  tabIndex={focused ? 0 : -1}\r\n                  aria-selected={isSelected || undefined}\r\n                  onClick={() => {\r\n                    if (selectable) toggleSelectRow(rid);\r\n                    onRowClick?.(row);\r\n                    setFocusedIndex(idx);\r\n                  }}\r\n                  onFocus={() => setFocusedIndex(idx)}\r\n                >\r\n                  {selectable && (\r\n                    <div className=\"ui-datagrid-cell ui-datagrid-cell--select\">\r\n                      <input\r\n                        type=\"checkbox\"\r\n                        checked={isSelected}\r\n                        onClick={(e) => e.stopPropagation()}\r\n                        onChange={() => toggleSelectRow(rid)}\r\n                        aria-label={`Select row ${String(rid)}`}\r\n                      />\r\n                    </div>\r\n                  )}\r\n\r\n                  {columns.map((col) => (\r\n                    <div\r\n                      key={col.key}\r\n                      role=\"gridcell\"\r\n                      className={`ui-datagrid-cell ui-datagrid-cell--${\r\n                        col.align ?? 'left'\r\n                      }`}\r\n                      style={{ width: col.width }}\r\n                    >\r\n                      {col.render\r\n                        ? col.render(row)\r\n                        : String(row[col.key] ?? '')}\r\n                    </div>\r\n                  ))}\r\n\r\n                  {showActions && (\r\n                    <div className=\"ui-datagrid-cell ui-datagrid-cell--actions\">\r\n                      {renderRowActions?.(row)}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n              );\r\n            })\r\n          )}\r\n        </div>\r\n\r\n        {/* PAGINATION */}\r\n        {!disablePagination && totalPages > 1 && (\r\n          <div className=\"ui-datagrid-footer\">\r\n            <button\r\n              className=\"ui-datagrid-page-btn\"\r\n              onClick={() => setPage(1)}\r\n              disabled={currentPage === 1}\r\n            >\r\n              «\r\n            </button>\r\n\r\n            <button\r\n              className=\"ui-datagrid-page-btn\"\r\n              onClick={() => setPage(currentPage - 1)}\r\n              disabled={currentPage === 1}\r\n            >\r\n              ‹\r\n            </button>\r\n\r\n            <div className=\"ui-datagrid-page-info\">\r\n              Page {currentPage} of {totalPages}\r\n            </div>\r\n\r\n            <button\r\n              className=\"ui-datagrid-page-btn\"\r\n              onClick={() => setPage(currentPage + 1)}\r\n              disabled={currentPage === totalPages}\r\n            >\r\n              ›\r\n            </button>\r\n\r\n            <button\r\n              className=\"ui-datagrid-page-btn\"\r\n              onClick={() => setPage(totalPages)}\r\n              disabled={currentPage === totalPages}\r\n            >\r\n              »\r\n            </button>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["DataGrid","columns","rows","controlledPage","pageSize","onPageChange","selectable","selectedRowIds","onSelectionChange","onRowClick","renderRowActions","className","disablePagination","sort","setSort","useState","internalPage","setInternalPage","currentPage","internalSelection","setInternalSelection","selection","totalPages","useMemo","sortedRows","key","dir","a","b","va","vb","paginatedRows","start","focusedIndex","setFocusedIndex","rowId","r","idx","toggleSort","prev","setPage","page","next","toggleSelectRow","id","update","set","selectAllOnPage","ids","i","allSelected","onKeyDownTable","row","showActions","jsx","jsxs","col","isSorted","rid","isSelected","focused","e"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/datagrid/DataGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from 'react';\nimport { cn } from '../../utils';\nimport './DataGrid.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport type DataRow = Record<string, unknown> & {\n  /** Strongly recommended to provide an ID for reliable row selection */\n  id?: string | number;\n};\n\nexport type DataGridColumn<T> = {\n  /** The key must exist on the generic type T */\n  key: Extract<keyof T, string>;\n  title: React.ReactNode;\n  sortable?: boolean;\n  width?: number | string;\n  align?: 'left' | 'center' | 'right';\n  /** Custom render function for the cell content. Useful for formatting dates or rendering JSX. */\n  render?: (row: T) => React.ReactNode;\n  /** Custom sort function. If omitted, the grid falls back to a robust default string/number sort. */\n  sortFn?: (a: T, b: T) => number; \n};\n\nexport interface DataGridProps<T> {\n  columns: DataGridColumn<T>[];\n  rows: T[];\n  /** Controlled page number */\n  page?: number;\n  pageSize?: number;\n  onPageChange?: (page: number) => void;\n  selectable?: boolean;\n  /** Controlled selection state */\n  selectedRowIds?: Set<string | number>;\n  onSelectionChange?: (ids: Set<string | number>) => void;\n  onRowClick?: (row: T) => void;\n  /** Renders a floating action column on the far right of the grid */\n  renderRowActions?: (row: T) => React.ReactNode;\n  className?: string;\n  disablePagination?: boolean;\n}\n\ntype SortState = { key: string | null; dir: 'asc' | 'desc' | null };\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * DataGrid Component\n * * A highly performant, accessible table for displaying structured data.\n */\nexport function DataGrid<T>({\n  columns,\n  rows,\n  page: controlledPage,\n  pageSize = 10,\n  onPageChange,\n  selectable = false,\n  selectedRowIds,\n  onSelectionChange,\n  onRowClick,\n  renderRowActions,\n  className,\n  disablePagination = false,\n}: DataGridProps<T>) {\n  const [sort, setSort] = useState<SortState>({ key: null, dir: null });\n  const [internalPage, setInternalPage] = useState(1);\n  const currentPage = controlledPage ?? internalPage;\n\n  const [internalSelection, setInternalSelection] = useState<Set<string | number>>(new Set());\n  const selection = selectedRowIds ?? internalSelection;\n\n  /* ----------------------------------------------------\n     Data Processing Engine\n  ---------------------------------------------------- */\n  const totalPages = useMemo(() => {\n    if (disablePagination || rows.length === 0) return 1;\n    return Math.ceil(rows.length / pageSize);\n  }, [rows.length, pageSize, disablePagination]);\n\n  const sortedRows = useMemo(() => {\n    if (!sort.key || !sort.dir) return [...rows];\n\n    const key = sort.key as keyof T;\n    const dir = sort.dir === 'asc' ? 1 : -1;\n    const column = columns.find(c => c.key === key);\n\n    return [...rows].sort((a, b) => {\n      // 1. Custom Sort Function override\n      if (column?.sortFn) {\n        return sort.dir === 'asc' ? column.sortFn(a, b) : column.sortFn(b, a);\n      }\n\n      // 2. Default Universal Sort\n      const va = a[key];\n      const vb = b[key];\n\n      if (va === vb) return 0;\n      if (va === undefined || va === null) return -1 * dir;\n      if (vb === undefined || vb === null) return 1 * dir;\n\n      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;\n      if (va instanceof Date && vb instanceof Date) return (va.getTime() - vb.getTime()) * dir;\n\n      return String(va).localeCompare(String(vb)) * dir;\n    });\n  }, [rows, sort, columns]);\n\n  const paginatedRows = useMemo(() => {\n    if (disablePagination) return sortedRows;\n    const start = (currentPage - 1) * pageSize;\n    return sortedRows.slice(start, start + pageSize);\n  }, [sortedRows, currentPage, pageSize, disablePagination]);\n\n  /* ----------------------------------------------------\n     Event Handlers\n  ---------------------------------------------------- */\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n  const getRowId = (r: T, idx: number) => {\n    // Safely cast to extract ID, fallback to index if missing\n    const row = r as { id?: string | number };\n    return row.id ?? `row-${idx}`;\n  };\n\n  const toggleSort = (key: string) => {\n    setSort((prev) => {\n      // Cycle state: asc -> desc -> un-sorted\n      if (prev.key !== key) return { key, dir: 'asc' };\n      if (prev.dir === 'asc') return { key, dir: 'desc' };\n      return { key: null, dir: null };\n    });\n  };\n\n  const setPage = (page: number) => {\n    const next = Math.max(1, Math.min(totalPages, page));\n    if (controlledPage === undefined) setInternalPage(next);\n    onPageChange?.(next);\n  };\n\n  const toggleSelectRow = (id: string | number) => {\n    const update = (set: Set<string | number>) => {\n      const next = new Set(set);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    };\n\n    if (selectedRowIds) {\n      onSelectionChange?.(update(selection));\n    } else {\n      setInternalSelection((prev) => {\n        const next = update(prev);\n        onSelectionChange?.(next);\n        return next;\n      });\n    }\n  };\n\n  const selectAllOnPage = () => {\n    const ids = paginatedRows.map((r, i) => getRowId(r, i));\n    const allSelected = ids.every((id) => selection.has(id));\n\n    const update = (set: Set<string | number>) => {\n      const next = new Set(set);\n      if (allSelected) ids.forEach((id) => next.delete(id));\n      else ids.forEach((id) => next.add(id));\n      return next;\n    };\n\n    if (selectedRowIds) {\n      onSelectionChange?.(update(selection));\n    } else {\n      setInternalSelection((prev) => {\n        const next = update(prev);\n        onSelectionChange?.(next);\n        return next;\n      });\n    }\n  };\n\n  const onKeyDownTable = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (paginatedRows.length === 0) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        setFocusedIndex((prev) => prev === null ? 0 : Math.min(paginatedRows.length - 1, prev + 1));\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        setFocusedIndex((prev) => (prev === null ? 0 : Math.max(0, prev - 1)));\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (focusedIndex !== null) {\n          const row = paginatedRows[focusedIndex];\n          const id = getRowId(row, focusedIndex);\n          if (selectable) toggleSelectRow(id);\n          onRowClick?.(row);\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  const showActions = Boolean(renderRowActions);\n  const isAllPageSelected = paginatedRows.length > 0 && paginatedRows.every((r, i) => selection.has(getRowId(r, i)));\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  return (\n    <div className={cn(\"nui-datagrid-root\", className)}>\n      <div \n        className=\"nui-datagrid-table-wrapper\"\n        onKeyDown={onKeyDownTable}\n        tabIndex={0}\n      >\n        <table className=\"nui-datagrid-table\" role=\"grid\" aria-rowcount={rows.length}>\n          \n          {/* HEADER */}\n          <thead className=\"nui-datagrid-thead\">\n            <tr role=\"row\">\n              {selectable && (\n                <th className=\"nui-datagrid-th nui-datagrid-th--select\" scope=\"col\">\n                  <input\n                    type=\"checkbox\"\n                    aria-label=\"Select all on page\"\n                    onChange={selectAllOnPage}\n                    checked={isAllPageSelected}\n                    className=\"nui-datagrid-checkbox\"\n                  />\n                </th>\n              )}\n\n              {columns.map((col) => {\n                const isSorted = sort.key === col.key;\n                return (\n                  <th\n                    key={col.key}\n                    className=\"nui-datagrid-th\"\n                    style={{ \n                      width: col.width,\n                      textAlign: col.align || 'left'\n                    }}\n                    scope=\"col\"\n                    aria-sort={isSorted ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'}\n                  >\n                    <div \n                      className={cn(\n                        \"nui-datagrid-th-content\",\n                        col.sortable && \"sortable\",\n                        col.align === 'right' && \"justify-end\",\n                        col.align === 'center' && \"justify-center\"\n                      )}\n                      onClick={() => col.sortable && toggleSort(col.key)}\n                    >\n                      <span className=\"nui-datagrid-th-title\">{col.title}</span>\n                      {col.sortable && (\n                        <span className={cn(\"nui-datagrid-sort-icon\", isSorted && \"active\")}>\n                          {isSorted && sort.dir === 'desc' ? (\n                            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>\n                          ) : (\n                            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m18 15-6-6-6 6\"/></svg>\n                          )}\n                        </span>\n                      )}\n                    </div>\n                  </th>\n                );\n              })}\n\n              {showActions && <th className=\"nui-datagrid-th nui-datagrid-th--actions\" scope=\"col\"></th>}\n            </tr>\n          </thead>\n\n          {/* BODY */}\n          <tbody className=\"nui-datagrid-tbody\" role=\"rowgroup\">\n            {paginatedRows.length === 0 ? (\n              <tr>\n                <td colSpan={columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)} className=\"nui-datagrid-empty\">\n                  No data available\n                </td>\n              </tr>\n            ) : (\n              paginatedRows.map((row, idx) => {\n                const rid = getRowId(row, idx);\n                const isSelected = selection.has(rid);\n                const isFocused = focusedIndex === idx;\n\n                return (\n                  <tr\n                    key={String(rid)}\n                    role=\"row\"\n                    tabIndex={-1}\n                    aria-selected={isSelected}\n                    className={cn(\n                      \"nui-datagrid-tr\",\n                      isSelected && \"selected\",\n                      isFocused && \"focused\",\n                      onRowClick && \"clickable\"\n                    )}\n                    onClick={() => {\n                      if (selectable) toggleSelectRow(rid);\n                      onRowClick?.(row);\n                      setFocusedIndex(idx);\n                    }}\n                  >\n                    {selectable && (\n                      <td className=\"nui-datagrid-td nui-datagrid-td--select\">\n                        <input\n                          type=\"checkbox\"\n                          checked={isSelected}\n                          onClick={(e) => e.stopPropagation()}\n                          onChange={() => toggleSelectRow(rid)}\n                          aria-label={`Select row`}\n                          className=\"nui-datagrid-checkbox\"\n                        />\n                      </td>\n                    )}\n\n                    {columns.map((col) => (\n                      <td\n                        key={col.key}\n                        role=\"gridcell\"\n                        className=\"nui-datagrid-td\"\n                        style={{ textAlign: col.align || 'left' }}\n                      >\n                        {col.render ? col.render(row) : String(row[col.key] ?? '')}\n                      </td>\n                    ))}\n\n                    {showActions && (\n                      <td className=\"nui-datagrid-td nui-datagrid-td--actions\" onClick={(e) => e.stopPropagation()}>\n                        {renderRowActions?.(row)}\n                      </td>\n                    )}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* PAGINATION */}\n      {!disablePagination && totalPages > 1 && (\n        <div className=\"nui-datagrid-pagination\">\n          <span className=\"nui-datagrid-page-info\">\n            Page {currentPage} of {totalPages}\n          </span>\n          <div className=\"nui-datagrid-page-controls\">\n            <button\n              className=\"nui-datagrid-page-btn\"\n              onClick={() => setPage(currentPage - 1)}\n              disabled={currentPage === 1}\n              aria-label=\"Previous Page\"\n            >\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n            </button>\n            <button\n              className=\"nui-datagrid-page-btn\"\n              onClick={() => setPage(currentPage + 1)}\n              disabled={currentPage === totalPages}\n              aria-label=\"Next Page\"\n            >\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}"],"names":["DataGrid","columns","rows","controlledPage","pageSize","onPageChange","selectable","selectedRowIds","onSelectionChange","onRowClick","renderRowActions","className","disablePagination","sort","setSort","useState","internalPage","setInternalPage","currentPage","internalSelection","setInternalSelection","selection","totalPages","useMemo","sortedRows","key","dir","column","c","a","b","va","vb","paginatedRows","start","focusedIndex","setFocusedIndex","getRowId","r","idx","toggleSort","prev","setPage","page","next","toggleSelectRow","id","update","set","selectAllOnPage","ids","i","allSelected","onKeyDownTable","row","showActions","isAllPageSelected","cn","jsx","jsxs","col","isSorted","rid","isSelected","e"],"mappings":"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"}

package/dist/components/datepicker/DatePicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react");;/* empty css                 */const oe=require("../../utils/onclickoutside/onClickOutside.cjs"),le=require("../../utils/restorefocus/restoreFocus.cjs"),ie=require("../../utils/portal/portal.cjs"),_=n=>n<10?`0${n}`:`${n}`,U=n=>`${n.getFullYear()}-${_(n.getMonth()+1)}-${_(n.getDate())}`;function $(n){if(!n)return null;const[h,v,N]=n.split("-").map(Number),D=new Date(h,v-1,N);return Number.isNaN(D.getTime())?null:D}const B=n=>new Date(n.getFullYear(),n.getMonth(),1),k=(n,h)=>new Date(n.getFullYear(),n.getMonth()+h,1),K=n=>new Date(n.getFullYear(),n.getMonth()+1,0).getDate();function ce({value:n,defaultValue:h,onChange:v,minDate:N,maxDate:D,placeholder:T="Select date",name:S,locale:g="en-US",id:V,className:z=""}){const F=n!==void 0,[G,H]=l.useState(h),b=F?n:G,J=$(b)??new Date,[a,f]=l.useState(B(J)),[c,p]=l.useState(!1),[j,d]=l.useState(!1),w=l.useRef(null),C=l.useRef(null),R=l.useRef({}),x=$(N)??void 0,y=$(D)??void 0,A=e=>!!(x&&e<x||y&&e>y);l.useEffect(()=>{if(c)return oe.onClickOutside(C,()=>{p(!1),d(!1)})},[c]),l.useEffect(()=>{if(!c)return;const e=w.current;return()=>{le.restoreFocus(e??null),d(!1)}},[c]);const[M,Q]=l.useState(null);l.useEffect(()=>{if(!c||!w.current)return;const e=w.current.getBoundingClientRect();Q({top:e.bottom+8,left:e.left})},[c,a]);const m=l.useMemo(()=>{const t=B(a).getDay(),r=K(a),i=[];for(let o=0;o<t;o++)i.push(null);for(let o=1;o<=r;o++)i.push(o);for(;i.length%7!==0;)i.push(null);return i},[a]),W=l.useMemo(()=>Array.from({length:7}).map((e,t)=>new Date(2020,5,7+t).toLocaleDateString(g,{weekday:"short"})),[g]),X=a.getFullYear(),P=100,I=X-P,Z=l.useMemo(()=>Array.from({length:P*2+1}).map((e,t)=>I+t),[I]),ee=l.useMemo(()=>Array.from({length:12}).map((e,t)=>new Date(2020,t,1).toLocaleDateString(g,{month:"short"})),[g]),te=(e,t)=>{const r=new Date(e,t,1),i=new Date(e,t,K(r));return!!(x&&i<x||y&&r>y)},O=e=>{const t=new Date(a.getFullYear(),a.getMonth(),e);if(A(t))return;const r=U(t);F||H(r),v?.(r),p(!1),d(!1)},se=e=>{f(new Date(a.getFullYear(),e,1)),d(!1)},ne=e=>{f(new Date(e,a.getMonth(),1))},re=e=>{if(e<0||e>=m.length)return;const t=m[e];if(!t)return;const r=`${a.getFullYear()}-${a.getMonth()}-${t}`;R.current[r]?.focus()},ae=(e,t)=>{const r=m.findIndex(u=>u===t);if(r===-1)return;const i=7;let o=null;switch(e.key){case"ArrowRight":o=r+1;break;case"ArrowLeft":o=r-1;break;case"ArrowDown":o=r+i;break;case"ArrowUp":o=r-i;break;case"Enter":case" ":e.preventDefault(),O(t);return;case"PageUp":f(u=>k(u,-1));return;case"PageDown":f(u=>k(u,1));return;case"Escape":p(!1);return;default:return}e.preventDefault(),o!==null&&(o<0||o>=m.length||m[o]!=null&&re(o))},q=a.toLocaleDateString(g,{month:"long"}),E=a.getFullYear();return s.jsxs("div",{className:`ui-datepicker minimal ${z}`,children:[S&&s.jsx("input",{type:"hidden",name:S,value:b??""}),s.jsx("button",{id:V,ref:w,type:"button",className:"ui-datepicker-input","aria-haspopup":"dialog","aria-expanded":c,onClick:()=>{p(e=>!e),d(!1)},children:b??T}),c&&M&&s.jsx(ie.Portal,{children:s.jsx("div",{ref:C,className:"ui-datepicker-popover",style:{position:"fixed",top:M.top,left:M.left},children:s.jsxs("div",{className:"ui-datepicker-panel minimal",children:[s.jsxs("div",{className:"ui-header-row",children:[s.jsx("button",{className:"ui-arrow","aria-label":"Previous month",onClick:()=>f(e=>k(e,-1)),children:"‹"}),s.jsxs("button",{className:"ui-header-center",onClick:()=>d(e=>!e),"aria-expanded":j,children:[q," ",E]}),s.jsx("button",{className:"ui-arrow","aria-label":"Next month",onClick:()=>f(e=>k(e,1)),children:"›"})]}),j&&s.jsxs("div",{className:"ui-ym-panel",children:[s.jsx("div",{className:"ui-year-grid",children:Z.map(e=>{const t=e===a.getFullYear();return s.jsx("button",{className:`ui-year-item ${t?"selected":""}`,onClick:()=>ne(e),children:e},e)})}),s.jsx("div",{className:"ui-month-grid",children:ee.map((e,t)=>{const r=te(a.getFullYear(),t),i=t===a.getMonth();return s.jsx("button",{className:`ui-month-item ${r?"disabled":""} ${i?"selected":""}`,disabled:r?!0:void 0,onClick:()=>!r&&se(t),children:e},t)})})]}),!j&&s.jsxs("div",{className:"ui-calendar minimal",role:"grid","aria-label":`${q} ${E}`,children:[s.jsx("div",{className:"ui-weekdays",children:W.map((e,t)=>s.jsx("div",{className:"ui-weekday",children:e},t))}),s.jsx("div",{className:"ui-days-grid",children:m.map((e,t)=>{if(e===null)return s.jsx("div",{className:"ui-day-empty"},t);const r=new Date(a.getFullYear(),a.getMonth(),e),i=U(r),o=A(r),u=b===i,L=`${a.getFullYear()}-${a.getMonth()}-${e}`;return s.jsx("button",{ref:Y=>{R.current[L]=Y},className:`ui-day ${u?"selected":""}`,"aria-selected":u||void 0,onClick:()=>!o&&O(e),onKeyDown:Y=>ae(Y,e),disabled:o?!0:void 0,children:e},L)})})]}),s.jsx("div",{className:"ui-footer",children:s.jsx("button",{onClick:()=>{p(!1),d(!1)},children:"Close"})})]})})})]})}exports.DatePicker=ce;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react");;/* empty css                 */const ge=require("../../utils/onclickoutside/onClickOutside.cjs"),pe=require("../../utils/restorefocus/restoreFocus.cjs"),L=require("../../utils/cn/cn.cjs"),me=require("../../utils/portal/portal.cjs"),H=i=>i<10?`0${i}`:`${i}`,P=i=>`${i.getFullYear()}-${H(i.getMonth()+1)}-${H(i.getDate())}`;function M(i){if(!i)return null;const[D,$,S]=i.split("-").map(Number),Y=new Date(D,$-1,S);return Number.isNaN(Y.getTime())?null:Y}const G=i=>new Date(i.getFullYear(),i.getMonth(),1),R=(i,D)=>new Date(i.getFullYear(),i.getMonth()+D,1),J=i=>new Date(i.getFullYear(),i.getMonth()+1,0).getDate();function we({value:i,defaultValue:D,onChange:$,minDate:S,maxDate:Y,placeholder:Q="Select date",name:q,locale:g="en-US",id:Z,className:ee,disabled:te=!1,formatDisplay:O}){const B=i!==void 0,[ne,re]=c.useState(D),u=B?i:ne,I=M(u)??new Date,[o,p]=c.useState(G(I)),[d,N]=c.useState(!1),[f,m]=c.useState(!1),v=c.useRef(null),F=c.useRef(null),b=c.useRef({}),A=c.useRef(null),T=c.useRef(null),w=M(S)??void 0,k=M(Y)??void 0,K=c.useCallback(e=>!!(w&&e<w||k&&e>k),[w,k]);c.useEffect(()=>d?ge.onClickOutside([F,v],()=>{N(!1),m(!1)}):void 0,[d]),c.useEffect(()=>{if(!d)return;const e=v.current,t=setTimeout(()=>{if(!f){const n=M(u)||new Date,a=n.getMonth()===o.getMonth()&&n.getFullYear()===o.getFullYear()?n.getDate():1,s=`${o.getFullYear()}-${o.getMonth()}-${a}`;if(b.current[s])b.current[s]?.focus();else{const l=`${o.getFullYear()}-${o.getMonth()}-1`;b.current[l]?.focus()}}},10);return()=>{clearTimeout(t),pe.restoreFocus(e??null),m(!1)}},[d,f,u,o]);const[U,se]=c.useState({top:-9999,left:-9999}),x=c.useCallback(()=>{if(!v.current||!F.current)return;const e=v.current.getBoundingClientRect(),t=F.current.getBoundingClientRect(),n=window.scrollY,a=window.scrollX;let s=e.bottom+n+8,l=e.left+a;const y=16,C=document.documentElement.clientWidth-t.width-y;l>C+a&&(l=e.right+a-t.width,l<y+a&&(l=y+a));const j=document.documentElement.clientHeight-t.height-y;e.bottom+8>j&&(s=e.top+n-t.height-8),se({top:s,left:l})},[]);c.useLayoutEffect(()=>{if(d)return x(),window.addEventListener("resize",x),window.addEventListener("scroll",x,!0),()=>{window.removeEventListener("resize",x),window.removeEventListener("scroll",x,!0)}},[d,x]),c.useEffect(()=>{f&&A.current&&A.current.scrollIntoView({block:"center",behavior:"smooth"})},[f]);const h=c.useMemo(()=>{const t=G(o).getDay(),n=J(o),a=[];for(let s=0;s<t;s++)a.push(null);for(let s=1;s<=n;s++)a.push(s);for(;a.length%7!==0;)a.push(null);return a},[o]),oe=c.useMemo(()=>Array.from({length:7}).map((e,t)=>new Date(2020,5,7+t).toLocaleDateString(g,{weekday:"short"})),[g]),ae=o.getFullYear(),V=100,W=ae-V,ie=c.useMemo(()=>Array.from({length:V*2+1}).map((e,t)=>W+t),[W]),ce=c.useMemo(()=>Array.from({length:12}).map((e,t)=>new Date(2020,t,1).toLocaleDateString(g,{month:"short"})),[g]),le=c.useCallback((e,t)=>{const n=new Date(e,t,1),a=new Date(e,t,J(n));return!!(w&&a<w||k&&n>k)},[w,k]),_=e=>{const t=new Date(o.getFullYear(),o.getMonth(),e);if(K(t))return;const n=P(t);B||re(n),$?.(n),N(!1),m(!1)},ue=e=>{p(new Date(o.getFullYear(),e,1)),m(!1)},de=e=>{p(new Date(e,o.getMonth(),1))},E=e=>{if(e<0||e>=h.length)return;const t=h[e];if(!t)return;const n=`${o.getFullYear()}-${o.getMonth()}-${t}`;b.current[n]?.focus()},he=e=>{if(e.target===T.current&&["ArrowRight","ArrowLeft","ArrowDown","ArrowUp"].includes(e.key)){e.preventDefault();const t=M(u)||new Date,n=t.getMonth()===o.getMonth()&&t.getFullYear()===o.getFullYear()?t.getDate():1,a=h.findIndex(s=>s===n);if(a!==-1)E(a);else{const s=h.findIndex(l=>l!==null);s!==-1&&E(s)}}},fe=(e,t)=>{const n=h.findIndex(l=>l===t);if(n===-1)return;const a=7;let s=null;switch(e.key){case"ArrowRight":s=n+1;break;case"ArrowLeft":s=n-1;break;case"ArrowDown":s=n+a;break;case"ArrowUp":s=n-a;break;case"Enter":case" ":e.preventDefault(),_(t);return;case"PageUp":e.preventDefault(),p(l=>R(l,-1));return;case"PageDown":e.preventDefault(),p(l=>R(l,1));return;case"Escape":e.preventDefault(),N(!1);return;default:return}s!==null&&s>=0&&s<h.length&&h[s]!==null&&(e.preventDefault(),E(s))},z=o.toLocaleDateString(g,{month:"long"}),X=o.getFullYear();return r.jsxs("div",{className:L.cn("nui-datepicker-root",ee),children:[q&&r.jsx("input",{type:"hidden",name:q,value:u??""}),r.jsxs("button",{id:Z,ref:v,type:"button",disabled:te,className:"nui-datepicker-trigger","aria-haspopup":"dialog","aria-expanded":d,onClick:()=>{N(e=>!e),m(!1)},children:[r.jsx("span",{className:u?"":"nui-datepicker-placeholder",children:u?O?O(I):new Intl.DateTimeFormat(g,{year:"numeric",month:"short",day:"numeric"}).format(I):Q}),r.jsxs("svg",{className:"nui-datepicker-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[r.jsx("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2",ry:"2"}),r.jsx("line",{x1:"16",y1:"2",x2:"16",y2:"6"}),r.jsx("line",{x1:"8",y1:"2",x2:"8",y2:"6"}),r.jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"})]})]}),d&&r.jsx(me.Portal,{children:r.jsx("div",{ref:F,className:"nui-datepicker-popover",style:{position:"absolute",top:U.top,left:U.left},children:r.jsxs("div",{className:"nui-datepicker-panel",children:[r.jsxs("div",{className:"nui-datepicker-header",children:[r.jsx("button",{className:"nui-datepicker-arrow","aria-label":"Previous month",onClick:()=>p(e=>R(e,-1)),children:r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r.jsx("polyline",{points:"15 18 9 12 15 6"})})}),r.jsxs("button",{className:"nui-datepicker-ym-toggle",onClick:()=>m(e=>!e),"aria-expanded":f,children:[z," ",X]}),r.jsx("button",{className:"nui-datepicker-arrow","aria-label":"Next month",onClick:()=>p(e=>R(e,1)),children:r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r.jsx("polyline",{points:"9 18 15 12 9 6"})})})]}),f&&r.jsxs("div",{className:"nui-datepicker-ym-panel",children:[r.jsx("div",{className:"nui-datepicker-year-grid",children:ie.map(e=>{const t=e===o.getFullYear();return r.jsx("button",{ref:t?A:null,className:L.cn("nui-datepicker-year",t&&"selected"),onClick:()=>de(e),children:e},e)})}),r.jsx("div",{className:"nui-datepicker-month-grid",children:ce.map((e,t)=>{const n=le(o.getFullYear(),t),a=t===o.getMonth();return r.jsx("button",{className:L.cn("nui-datepicker-month",n&&"disabled",a&&"selected"),disabled:n?!0:void 0,onClick:()=>!n&&ue(t),children:e},t)})})]}),!f&&r.jsxs("div",{className:"nui-datepicker-calendar",role:"grid","aria-label":`${z} ${X}`,ref:T,tabIndex:-1,onKeyDown:he,style:{outline:"none"},children:[r.jsx("div",{className:"nui-datepicker-weekdays",children:oe.map((e,t)=>r.jsx("div",{className:"nui-datepicker-weekday",children:e},t))}),r.jsx("div",{className:"nui-datepicker-days",children:h.map((e,t)=>{if(e===null)return r.jsx("div",{className:"nui-datepicker-empty"},t);const n=new Date(o.getFullYear(),o.getMonth(),e),a=P(n),s=K(n),l=u===a,y=P(new Date)===a,C=`${o.getFullYear()}-${o.getMonth()}-${e}`;return r.jsx("button",{ref:j=>{b.current[C]=j},className:L.cn("nui-datepicker-day",l&&"selected",y&&!l&&"today"),"aria-selected":l||void 0,onClick:()=>!s&&_(e),onKeyDown:j=>fe(j,e),disabled:s?!0:void 0,children:e},C)})})]})]})})})]})}exports.DatePicker=we;
 //# sourceMappingURL=DatePicker.cjs.map