@skiddph/prui 0.1.0

package/dist/chunks/data-table-toolbar-C9likJBN.js

@@ -0,0 +1,430 @@
+import { jsx as e, jsxs as o, Fragment as M } from "react/jsx-runtime";
+import * as g from "react";
+import { ArrowUp as I, ArrowDown as L, ArrowUpDown as $, Inbox as A, ChevronLeft as z, ChevronRight as B, Check as Y, PlusCircle as q, Search as E } from "lucide-react";
+import { cn as N } from "../core/cn.js";
+import { Button as T } from "../core/button.js";
+import { Select as G, SelectTrigger as H, SelectValue as J, SelectContent as Q, SelectItem as W } from "../core/select.js";
+import { Input as S } from "../core/input.js";
+import { Badge as X } from "../core/card.js";
+import { Dropdown as Z } from "../core/dropdown.js";
+import { Label as D } from "../core/label.js";
+function ne({
+  columns: a,
+  rows: u,
+  rowKey: f,
+  sort: m,
+  onSortChange: i,
+  defaultSort: d = null,
+  loading: h = !1,
+  emptyMessage: b = "No results.",
+  onRowClick: t,
+  className: c
+}) {
+  const [p, s] = g.useState(d), r = m !== void 0, n = r ? m : p, y = a.filter((l) => !l.hidden), j = g.useMemo(() => {
+    if (!n) return u;
+    const l = a.find((v) => v.key === n.key);
+    if (!(l != null && l.sortable)) return u;
+    const x = n.direction === "asc" ? 1 : -1;
+    return [...u].sort((v, R) => {
+      const k = v[n.key], w = R[n.key];
+      return k == null && w == null ? 0 : k == null ? 1 : w == null ? -1 : typeof k == "number" && typeof w == "number" ? (k - w) * x : String(k).localeCompare(String(w)) * x;
+    });
+  }, [u, n, a]), U = (l) => {
+    const x = a.find((R) => R.key === l);
+    if (!(x != null && x.sortable)) return;
+    const v = (n == null ? void 0 : n.key) === l ? n.direction === "asc" ? { key: l, direction: "desc" } : null : { key: l, direction: "asc" };
+    r || s(v), i == null || i(v);
+  };
+  return /* @__PURE__ */ e("div", { className: N("prui-data-table w-full overflow-x-auto rounded-[var(--prui-radius)] border border-[var(--prui-line)]", c), children: /* @__PURE__ */ o("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "border-b border-[var(--prui-line)] bg-[var(--prui-raise)]", children: y.map((l) => {
+      const x = (n == null ? void 0 : n.key) === l.key, v = x ? (n == null ? void 0 : n.direction) === "asc" ? I : L : $;
+      return /* @__PURE__ */ e(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": x ? (n == null ? void 0 : n.direction) === "asc" ? "ascending" : "descending" : l.sortable ? "none" : void 0,
+          style: l.width !== void 0 ? { width: l.width } : void 0,
+          className: N(
+            "px-3 py-2 text-xs font-medium uppercase tracking-wide text-[var(--prui-dim)]",
+            l.align === "right" && "text-right",
+            l.align === "center" && "text-center"
+          ),
+          children: l.sortable ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: () => U(l.key),
+              className: N(
+                "inline-flex items-center gap-1 hover:text-[var(--prui-fg)] cursor-pointer uppercase",
+                x && "text-[var(--prui-fg)]"
+              ),
+              children: [
+                l.label,
+                /* @__PURE__ */ e(v, { className: "h-3 w-3", "aria-hidden": !0 })
+              ]
+            }
+          ) : l.label
+        },
+        l.key
+      );
+    }) }) }),
+    /* @__PURE__ */ e("tbody", { children: h ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: y.length, className: "px-3 py-8 text-center text-[var(--prui-dim)]", "data-testid": "data-table-loading", children: "Loading..." }) }) : j.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: y.length, className: "px-3 py-8 text-center text-[var(--prui-dim)]", "data-testid": "data-table-empty", children: /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ e(A, { className: "h-4 w-4", "aria-hidden": !0 }),
+      b
+    ] }) }) }) : j.map((l, x) => /* @__PURE__ */ e(
+      "tr",
+      {
+        onClick: t ? () => t(l, x) : void 0,
+        className: N(
+          "border-b border-[var(--prui-line)] last:border-b-0 text-[var(--prui-fg)]",
+          t && "cursor-pointer hover:bg-[var(--prui-raise)]"
+        ),
+        children: y.map((v) => /* @__PURE__ */ e(
+          "td",
+          {
+            className: N(
+              "px-3 py-2",
+              v.align === "right" && "text-right",
+              v.align === "center" && "text-center",
+              v.className
+            ),
+            children: v.render ? v.render(l) : _(l[v.key])
+          },
+          v.key
+        ))
+      },
+      f ? f(l, x) : x
+    )) })
+  ] }) });
+}
+function _(a) {
+  return a == null || a === "" ? /* @__PURE__ */ e("span", { className: "text-[var(--prui-dim)]", children: "-" }) : a instanceof Date ? a.toLocaleDateString() : typeof a == "boolean" ? a ? "Yes" : "No" : String(a);
+}
+const se = {
+  name: "DataTable",
+  props: [
+    { name: "columns", type: "Column<T>[]", default: null, control: "object" },
+    { name: "rows", type: "T[]", default: "[]", control: "object" },
+    { name: "sort", type: "{ key, direction } | null", default: "undefined", control: "none" },
+    { name: "onSortChange", type: "(sort) => void", default: null, control: "none" },
+    { name: "loading", type: "boolean", default: "false", control: "boolean" },
+    { name: "emptyMessage", type: "ReactNode", default: "'No results.'", control: "text" },
+    { name: "onRowClick", type: "(row, index) => void", default: null, control: "none" }
+  ]
+};
+function oe({
+  page: a,
+  pageSize: u = 20,
+  hasNextPage: f,
+  hasPreviousPage: m,
+  onPageChange: i,
+  onPageSizeChange: d,
+  pageSizeOptions: h = [10, 20, 50, 100],
+  className: b
+}) {
+  return /* @__PURE__ */ o("div", { className: b ?? "flex items-center justify-between gap-2 py-2", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-sm text-[var(--prui-dim)]", children: [
+      /* @__PURE__ */ e("span", { children: "Rows per page" }),
+      /* @__PURE__ */ e("div", { className: "w-20", children: /* @__PURE__ */ o(
+        G,
+        {
+          value: String(u),
+          onChange: (t) => d == null ? void 0 : d(Number(t)),
+          options: h.map((t) => ({ label: String(t), value: String(t) })),
+          children: [
+            /* @__PURE__ */ e(H, { "aria-label": "Rows per page", className: "h-7", children: /* @__PURE__ */ e(J, {}) }),
+            /* @__PURE__ */ e(Q, { children: h.map((t) => /* @__PURE__ */ e(W, { value: String(t), children: t }, t)) })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o("span", { className: "text-sm text-[var(--prui-dim)]", "data-testid": "pagination-page", children: [
+        "Page ",
+        a
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          variant: "default",
+          size: "icon",
+          "aria-label": "Previous page",
+          disabled: !m,
+          onClick: () => i == null ? void 0 : i(a - 1, "prev"),
+          children: /* @__PURE__ */ e(z, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        T,
+        {
+          variant: "default",
+          size: "icon",
+          "aria-label": "Next page",
+          disabled: !f,
+          onClick: () => i == null ? void 0 : i(a + 1, "next"),
+          children: /* @__PURE__ */ e(B, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      )
+    ] })
+  ] });
+}
+const de = {
+  name: "DataTablePagination",
+  props: [
+    { name: "page", type: "number", default: null, control: "number" },
+    { name: "pageSize", type: "number", default: "20", control: "select", options: ["10", "20", "50", "100"] },
+    { name: "hasNextPage", type: "boolean", default: null, control: "boolean" },
+    { name: "hasPreviousPage", type: "boolean", default: null, control: "boolean" },
+    { name: "onPageChange", type: "(page, direction) => void", default: null, control: "none" },
+    { name: "onPageSizeChange", type: "(size) => void", default: null, control: "none" }
+  ]
+};
+function K({
+  label: a,
+  options: u,
+  value: f,
+  defaultValue: m,
+  onChange: i,
+  className: d
+}) {
+  const [h, b] = g.useState(m ?? []), t = f !== void 0, c = t ? f : h, p = (s) => {
+    const r = c.includes(s) ? c.filter((n) => n !== s) : [...c, s];
+    t || b(r), i == null || i(r);
+  };
+  return /* @__PURE__ */ e(
+    Z,
+    {
+      className: d,
+      trigger: /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          className: "prui-faceted-filter inline-flex h-8 items-center gap-1.5 rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-background)] px-2.5 text-sm cursor-pointer hover:border-[var(--prui-dim)]",
+          "data-testid": "faceted-filter",
+          children: [
+            /* @__PURE__ */ e(q, { className: "h-3.5 w-3.5 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+            a,
+            c.length > 0 ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e("span", { className: "ml-1 rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)] px-1.5 text-xs", children: c.length }) }) : null
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ o("div", { role: "menu", className: "min-w-44", children: [
+        u.length === 0 ? /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-sm text-[var(--prui-dim)]", children: "No options" }) : u.map((s) => {
+          const r = c.includes(s.value);
+          return /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "menuitemcheckbox",
+              "aria-checked": r,
+              onClick: () => p(s.value),
+              "data-selected": r || void 0,
+              className: "flex w-full cursor-pointer items-center gap-2 rounded-[calc(var(--prui-radius)-1px)] px-2 py-1.5 text-left text-sm text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]",
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "flex h-4 w-4 items-center justify-center rounded-[var(--prui-radius-1)] border border-[var(--prui-line)]",
+                    style: r ? { backgroundColor: "var(--prui-brand)", borderColor: "var(--prui-brand)" } : void 0,
+                    children: r ? /* @__PURE__ */ e(Y, { className: "h-3 w-3 text-white", "aria-hidden": !0 }) : null
+                  }
+                ),
+                s.label,
+                s.count !== void 0 ? /* @__PURE__ */ e(X, { variant: "outline", className: "ml-auto", children: s.count }) : null
+              ]
+            },
+            s.value
+          );
+        }),
+        c.length > 0 ? /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              t || b([]), i == null || i([]);
+            },
+            className: "mt-1 w-full cursor-pointer rounded-[calc(var(--prui-radius)-1px)] border-t border-[var(--prui-line)] px-2 py-1.5 text-left text-xs text-[var(--prui-dim)] hover:text-[var(--prui-fg)]",
+            children: [
+              "Clear (",
+              c.length,
+              ")"
+            ]
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function O({
+  label: a = "Date range",
+  value: u,
+  defaultValue: f,
+  onChange: m,
+  className: i
+}) {
+  const [d, h] = g.useState(f ?? {}), b = u !== void 0, t = b ? u : d, c = (p) => {
+    b || h(p), m == null || m(p);
+  };
+  return /* @__PURE__ */ o("div", { className: i ?? "flex items-end gap-2", "data-testid": "daterange-filter", children: [
+    /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ o(D, { className: "text-xs text-[var(--prui-dim)]", children: [
+        a,
+        " from"
+      ] }),
+      /* @__PURE__ */ e(
+        S,
+        {
+          type: "date",
+          "aria-label": `${a} from`,
+          className: "h-8 w-36",
+          value: t.from ?? "",
+          onChange: (p) => c({ ...t, from: p.target.value || void 0 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(D, { className: "text-xs text-[var(--prui-dim)]", children: "to" }),
+      /* @__PURE__ */ e(
+        S,
+        {
+          type: "date",
+          "aria-label": `${a} to`,
+          className: "h-8 w-36",
+          value: t.to ?? "",
+          onChange: (p) => c({ ...t, to: p.target.value || void 0 })
+        }
+      )
+    ] }),
+    t.from || t.to ? /* @__PURE__ */ e(T, { variant: "ghost", size: "sm", onClick: () => c({}), children: "Clear" }) : null
+  ] });
+}
+function V({
+  label: a = "Range",
+  value: u,
+  defaultValue: f,
+  onChange: m,
+  className: i
+}) {
+  const [d, h] = g.useState(f ?? {}), b = u !== void 0, t = b ? u : d, c = (s) => {
+    b || h(s), m == null || m(s);
+  }, p = (s) => {
+    if (s === "") return;
+    const r = Number(s);
+    return Number.isNaN(r) ? void 0 : r;
+  };
+  return /* @__PURE__ */ o("div", { className: i ?? "flex items-end gap-2", "data-testid": "numberrange-filter", children: [
+    /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ o(D, { className: "text-xs text-[var(--prui-dim)]", children: [
+        a,
+        " min"
+      ] }),
+      /* @__PURE__ */ e(
+        S,
+        {
+          type: "number",
+          "aria-label": `${a} min`,
+          className: "h-8 w-24",
+          value: t.min ?? "",
+          onChange: (s) => c({ ...t, min: p(s.target.value) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(D, { className: "text-xs text-[var(--prui-dim)]", children: "max" }),
+      /* @__PURE__ */ e(
+        S,
+        {
+          type: "number",
+          "aria-label": `${a} max`,
+          className: "h-8 w-24",
+          value: t.max ?? "",
+          onChange: (s) => c({ ...t, max: p(s.target.value) })
+        }
+      )
+    ] }),
+    t.min !== void 0 || t.max !== void 0 ? /* @__PURE__ */ e(T, { variant: "ghost", size: "sm", onClick: () => c({}), children: "Clear" }) : null
+  ] });
+}
+function ce({
+  searchPlaceholder: a = "Search...",
+  searchValue: u,
+  onSearchChange: f,
+  filters: m = [],
+  filterValues: i,
+  onFilterChange: d,
+  actions: h,
+  className: b
+}) {
+  const [t, c] = g.useState(""), p = u !== void 0, s = p ? u : t;
+  return /* @__PURE__ */ o("div", { className: N("prui-toolbar flex flex-wrap items-center gap-2 py-2", b), children: [
+    /* @__PURE__ */ o("div", { className: "relative", children: [
+      /* @__PURE__ */ e(E, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+      /* @__PURE__ */ e(
+        S,
+        {
+          type: "search",
+          "aria-label": "Search",
+          placeholder: a,
+          className: "h-8 w-56 pl-8",
+          value: s,
+          onChange: (r) => {
+            p || c(r.target.value), f == null || f(r.target.value);
+          }
+        }
+      )
+    ] }),
+    m.map((r) => {
+      const n = i == null ? void 0 : i[r.key];
+      return r.type === "select" ? /* @__PURE__ */ e(
+        K,
+        {
+          label: r.label,
+          options: r.options ?? [],
+          value: n ?? [],
+          onChange: (y) => d == null ? void 0 : d(r.key, y)
+        },
+        r.key
+      ) : r.type === "daterange" ? /* @__PURE__ */ e(
+        O,
+        {
+          label: r.label,
+          value: n ?? {},
+          onChange: (y) => d == null ? void 0 : d(r.key, y)
+        },
+        r.key
+      ) : /* @__PURE__ */ e(
+        V,
+        {
+          label: r.label,
+          value: n ?? {},
+          onChange: (y) => d == null ? void 0 : d(r.key, y)
+        },
+        r.key
+      );
+    }),
+    h ? /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-2", children: h }) : null
+  ] });
+}
+const ue = {
+  name: "DataTableToolbar",
+  props: [
+    { name: "searchPlaceholder", type: "string", default: "'Search...'", control: "text" },
+    { name: "searchValue", type: "string", default: "undefined", control: "text" },
+    { name: "onSearchChange", type: "(value: string) => void", default: null, control: "none" },
+    { name: "filters", type: "ToolbarFilterConfig[]", default: "[]", control: "object" },
+    { name: "filterValues", type: "ToolbarFilterValues", default: "{}", control: "object" },
+    { name: "onFilterChange", type: "(key, value) => void", default: null, control: "none" },
+    { name: "actions", type: "ReactNode", default: null, control: "none" }
+  ]
+};
+export {
+  ne as D,
+  K as F,
+  V as N,
+  oe as a,
+  ce as b,
+  O as c,
+  de as d,
+  se as e,
+  ue as f
+};