@skiddph/prui 0.6.0 → 0.8.0

package/dist/chunks/data-table-toolbar-B-5J2Ozl.js

@@ -0,0 +1,736 @@
+import { jsx as e, jsxs as c, Fragment as _ } from "react/jsx-runtime";
+import * as y from "react";
+import { ArrowUp as fe, ArrowDown as be, ArrowUpDown as xe, Inbox as he, ChevronRight as F, ChevronLeft as ye, Check as Ne, PlusCircle as ge, Search as ke } from "lucide-react";
+import { cn as I } from "../core/cn.js";
+import { usePruiI18n as G } from "../i18n.js";
+import { Button as A } from "../core/button.js";
+import { Select as we, SelectTrigger as Se, SelectValue as Te, SelectContent as De, SelectItem as Re } from "../core/select.js";
+import { Input as T } from "../core/input.js";
+import { Badge as je } from "../core/card.js";
+import { Dropdown as Ue } from "../core/dropdown.js";
+import { Label as j } from "../core/label.js";
+function Ve({
+  columns: r,
+  rows: u,
+  rowKey: v,
+  sort: p,
+  onSortChange: d,
+  defaultSort: s = null,
+  loading: f = !1,
+  emptyMessage: b,
+  onRowClick: n,
+  selectable: l,
+  selectedRowKeys: o,
+  onSelectionChange: m,
+  renderExpandedRow: a,
+  expandedRowKeys: g,
+  onExpandedRowsChange: x,
+  virtualized: k = !1,
+  className: C
+}) {
+  const { t: J } = G(), [ee, te] = y.useState(s), [ae, le] = y.useState([]), [re, ne] = y.useState([]), Z = p !== void 0, h = Z ? p : ee, E = o !== void 0, $ = E ? o : ae, O = g !== void 0, B = O ? g : re, M = l !== void 0 && l !== !1, L = l === !0 || typeof l == "object" && l.multiple !== !1, U = y.useCallback(
+    (t, i) => {
+      if (v) return v(t, i);
+      const N = t.id;
+      return N !== void 0 ? N : i;
+    },
+    [v]
+  ), z = y.useMemo(() => r.filter((t) => !t.hidden), [r]), S = y.useMemo(() => {
+    if (!h) return u;
+    const t = r.find((N) => N.key === h.key);
+    if (!(t != null && t.sortable)) return u;
+    const i = h.direction === "asc" ? 1 : -1;
+    return [...u].sort((N, R) => {
+      const P = N[h.key], W = R[h.key];
+      return P == null && W == null ? 0 : P == null ? 1 : W == null ? -1 : typeof P == "number" && typeof W == "number" ? (P - W) * i : String(P).localeCompare(String(W)) * i;
+    });
+  }, [u, h, r]), ie = (t) => {
+    const i = r.find((R) => R.key === t);
+    if (!(i != null && i.sortable)) return;
+    const N = (h == null ? void 0 : h.key) === t ? h.direction === "asc" ? { key: t, direction: "desc" } : null : { key: t, direction: "asc" };
+    Z || te(N), d == null || d(N);
+  }, q = (t) => {
+    E || le(t), m == null || m(t, u.filter((i, N) => t.includes(U(i, N))));
+  }, se = (t, i) => {
+    if (!L) {
+      const R = $.includes(t) ? [] : [t];
+      q(R);
+      return;
+    }
+    const N = $.includes(t) ? $.filter((R) => R !== t) : [...$, t];
+    q(N);
+  }, Q = M && S.length > 0 && S.every((t, i) => $.includes(U(t, i))), oe = M && !Q && S.some((t, i) => $.includes(U(t, i))), ce = () => {
+    q(Q ? L ? [] : [] : S.map((t, i) => U(t, i)));
+  }, de = (t) => {
+    O || ne(t), x == null || x(t);
+  }, ue = (t) => {
+    de(B.includes(t) ? B.filter((i) => i !== t) : [...B, t]);
+  }, X = y.useRef(null), [H, me] = y.useState(41), [D, pe] = y.useState({ start: 0, end: 50 }), w = k && S.length > 50, Y = y.useCallback(() => {
+    const t = X.current;
+    if (!t) return;
+    const i = 8, N = Math.max(0, Math.floor(t.scrollTop / H) - i), R = Math.ceil(t.clientHeight / H) + i * 2;
+    pe({ start: N, end: N + R });
+  }, [H]);
+  y.useEffect(() => {
+    if (!w) return;
+    const t = X.current;
+    if (!t) return;
+    const i = t.querySelector("tbody tr");
+    i && i.offsetHeight > 0 && me(i.offsetHeight), Y();
+  }, [w, Y, S.length]);
+  const ve = w ? S.slice(D.start, D.end) : S, V = w ? D.start * H : 0, K = w ? Math.max(0, (S.length - D.end) * H) : 0;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: X,
+      onScroll: w ? Y : void 0,
+      className: I(
+        "prui-data-table w-full overflow-auto rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+        w && "max-h-[70vh]",
+        C
+      ),
+      children: /* @__PURE__ */ c("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ e("thead", { className: "sticky top-0 z-[var(--prui-z-content)]", children: /* @__PURE__ */ c("tr", { className: "border-b border-[var(--prui-line)] bg-[var(--prui-raise)]", children: [
+          a ? /* @__PURE__ */ e("th", { scope: "col", className: "w-8 px-3 py-2", "aria-label": void 0, children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Toggle row" }) }) : null,
+          M ? /* @__PURE__ */ e("th", { scope: "col", className: "w-10 px-3 py-2", children: L ? /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": J.selectAllRows,
+              checked: Q,
+              ref: (t) => {
+                t && (t.indeterminate = oe);
+              },
+              onChange: ce,
+              className: "h-4 w-4 cursor-pointer accent-[var(--prui-brand)]"
+            }
+          ) : /* @__PURE__ */ e("span", { className: "sr-only", children: "Selected" }) }) : null,
+          z.map((t) => {
+            const i = (h == null ? void 0 : h.key) === t.key, N = i ? (h == null ? void 0 : h.direction) === "asc" ? fe : be : xe;
+            return /* @__PURE__ */ e(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": i ? (h == null ? void 0 : h.direction) === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
+                style: t.width !== void 0 ? { width: t.width } : void 0,
+                className: I(
+                  "px-3 py-2 text-xs font-medium uppercase tracking-wide text-[var(--prui-dim)]",
+                  t.align === "right" && "text-right",
+                  t.align === "center" && "text-center"
+                ),
+                children: t.sortable ? /* @__PURE__ */ c(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => ie(t.key),
+                    className: I(
+                      "inline-flex items-center gap-1 hover:text-[var(--prui-fg)] cursor-pointer uppercase",
+                      i && "text-[var(--prui-fg)]"
+                    ),
+                    children: [
+                      t.label,
+                      /* @__PURE__ */ e(N, { className: "h-3 w-3", "aria-hidden": !0 })
+                    ]
+                  }
+                ) : t.label
+              },
+              t.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ e("tbody", { children: f ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: z.length + (M ? 1 : 0) + (a ? 1 : 0), className: "px-3 py-8 text-center text-[var(--prui-dim)]", "data-testid": "data-table-loading", children: J.loading }) }) : S.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: z.length + (M ? 1 : 0) + (a ? 1 : 0), className: "px-3 py-8 text-center text-[var(--prui-dim)]", "data-testid": "data-table-empty", children: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ e(he, { className: "h-4 w-4", "aria-hidden": !0 }),
+          b ?? J.noResults
+        ] }) }) }) : /* @__PURE__ */ c(_, { children: [
+          V > 0 ? /* @__PURE__ */ e("tr", { "aria-hidden": !0, style: { height: V }, children: /* @__PURE__ */ e("td", { colSpan: z.length + 2, style: { padding: 0, border: 0 } }) }) : null,
+          ve.map((t, i) => /* @__PURE__ */ e(
+            Me,
+            {
+              row: t,
+              index: w ? D.start + i : i,
+              rowKeyValue: U(t, w ? D.start + i : i),
+              columns: z,
+              onRowClick: n,
+              selectable: M,
+              selected: $.includes(U(t, w ? D.start + i : i)),
+              selectionMultiple: L,
+              onToggleSelected: se,
+              expandable: !!a,
+              expanded: B.includes(U(t, w ? D.start + i : i)),
+              onToggleExpanded: ue,
+              renderExpandedRow: a,
+              colCount: z.length + (M ? 1 : 0) + (a ? 1 : 0)
+            },
+            v ? v(t, D.start + i) : U(t, i)
+          )),
+          K > 0 ? /* @__PURE__ */ e("tr", { "aria-hidden": !0, style: { height: K }, children: /* @__PURE__ */ e("td", { colSpan: z.length + 2, style: { padding: 0, border: 0 } }) }) : null
+        ] }) })
+      ] })
+    }
+  );
+}
+function $e({
+  row: r,
+  index: u,
+  rowKeyValue: v,
+  columns: p,
+  onRowClick: d,
+  selectable: s,
+  selected: f,
+  selectionMultiple: b,
+  onToggleSelected: n,
+  expandable: l,
+  expanded: o,
+  onToggleExpanded: m,
+  renderExpandedRow: a,
+  colCount: g
+}) {
+  const { t: x } = G();
+  return /* @__PURE__ */ c(_, { children: [
+    /* @__PURE__ */ c(
+      "tr",
+      {
+        "data-selected": f || void 0,
+        "aria-selected": s ? f : void 0,
+        onClick: d ? () => d(r, u) : void 0,
+        className: I(
+          "border-b border-[var(--prui-line)] last:border-b-0 text-[var(--prui-fg)]",
+          d && "cursor-pointer hover:bg-[var(--prui-raise)]",
+          f && "bg-[var(--prui-brand)]/8"
+        ),
+        children: [
+          l ? /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "aria-label": o ? x.collapseRow : x.expandRow,
+              "aria-expanded": o,
+              onClick: (k) => {
+                k.stopPropagation(), m(v);
+              },
+              className: "inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-[var(--prui-radius-1)] text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
+              children: /* @__PURE__ */ e(F, { className: I("h-3.5 w-3.5 transition-transform", o && "rotate-90"), "aria-hidden": !0 })
+            }
+          ) }) : null,
+          s ? /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e(
+            "input",
+            {
+              type: b ? "checkbox" : "radio",
+              "aria-label": `${x.selectRow} ${u + 1}`,
+              checked: f,
+              onChange: () => n(v, r),
+              onClick: (k) => k.stopPropagation(),
+              className: "h-4 w-4 cursor-pointer accent-[var(--prui-brand)]"
+            }
+          ) }) : null,
+          p.map((k) => /* @__PURE__ */ e(
+            "td",
+            {
+              className: I(
+                "px-3 py-2",
+                k.align === "right" && "text-right",
+                k.align === "center" && "text-center",
+                k.className
+              ),
+              children: k.render ? k.render(r) : /* @__PURE__ */ e(ze, { value: r[k.key] })
+            },
+            k.key
+          ))
+        ]
+      }
+    ),
+    l && o && a ? /* @__PURE__ */ e("tr", { "data-expanded-row": String(v), children: /* @__PURE__ */ e("td", { colSpan: g, className: "border-b border-[var(--prui-line)] bg-[var(--prui-raise)]/40 px-4 py-3", children: a(r) }) }) : null
+  ] });
+}
+const Me = y.memo($e);
+function ze({ value: r }) {
+  const { t: u } = G();
+  return typeof r == "boolean" ? /* @__PURE__ */ e("span", { children: r ? u.yes : u.no }) : /* @__PURE__ */ e(_, { children: Ie(r) });
+}
+function Ie(r) {
+  return r == null || r === "" ? /* @__PURE__ */ e("span", { className: "text-[var(--prui-dim)]", children: "-" }) : r instanceof Date ? r.toLocaleDateString() : String(r);
+}
+const Ke = {
+  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" },
+    { name: "selectable", type: "boolean | { multiple?: boolean }", default: "undefined", control: "boolean", description: "Renders a checkbox column." },
+    { name: "selectedRowKeys", type: "(string | number)[]", default: "undefined", control: "object" },
+    { name: "onSelectionChange", type: "(keys, rows) => void", default: null, control: "none" },
+    { name: "renderExpandedRow", type: "(row) => ReactNode", default: null, control: "none" },
+    { name: "expandedRowKeys", type: "(string | number)[]", default: "undefined", control: "object" },
+    { name: "onExpandedRowsChange", type: "(keys) => void", default: null, control: "none" },
+    { name: "virtualized", type: "boolean", default: "false", control: "boolean", description: "Window-render large row sets." }
+  ]
+};
+function Fe({
+  page: r,
+  pageSize: u = 20,
+  hasNextPage: v,
+  hasPreviousPage: p,
+  onPageChange: d,
+  onPageSizeChange: s,
+  pageSizeOptions: f = [10, 20, 50, 100],
+  className: b
+}) {
+  const { t: n } = G();
+  return /* @__PURE__ */ c("div", { className: b ?? "flex items-center justify-between gap-2 py-2", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-sm text-[var(--prui-dim)]", children: [
+      /* @__PURE__ */ e("span", { children: n.rowsPerPage }),
+      /* @__PURE__ */ e("div", { className: "w-20", children: /* @__PURE__ */ c(
+        we,
+        {
+          value: String(u),
+          onChange: (l) => s == null ? void 0 : s(Number(l)),
+          options: f.map((l) => ({ label: String(l), value: String(l) })),
+          children: [
+            /* @__PURE__ */ e(Se, { "aria-label": n.rowsPerPage, className: "h-7", children: /* @__PURE__ */ e(Te, {}) }),
+            /* @__PURE__ */ e(De, { children: f.map((l) => /* @__PURE__ */ e(Re, { value: String(l), children: l }, l)) })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm text-[var(--prui-dim)]", "data-testid": "pagination-page", children: `${n.page} ${r}` }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          variant: "default",
+          size: "icon",
+          "aria-label": n.previousPage,
+          disabled: !p,
+          onClick: () => d == null ? void 0 : d(r - 1, "prev"),
+          children: /* @__PURE__ */ e(ye, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        A,
+        {
+          variant: "default",
+          size: "icon",
+          "aria-label": n.nextPage,
+          disabled: !v,
+          onClick: () => d == null ? void 0 : d(r + 1, "next"),
+          children: /* @__PURE__ */ e(F, { className: "h-4 w-4", "aria-hidden": !0 })
+        }
+      )
+    ] })
+  ] });
+}
+const Ce = {
+  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 Ae({
+  label: r,
+  options: u,
+  value: v,
+  defaultValue: p,
+  onChange: d,
+  className: s
+}) {
+  const [f, b] = y.useState(p ?? []), n = v !== void 0, l = n ? v : f, o = (m) => {
+    const a = l.includes(m) ? l.filter((g) => g !== m) : [...l, m];
+    n || b(a), d == null || d(a);
+  };
+  return /* @__PURE__ */ e(
+    Ue,
+    {
+      className: s,
+      trigger: /* @__PURE__ */ c(
+        "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(ge, { className: "h-3.5 w-3.5 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+            r,
+            l.length > 0 ? /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e("span", { className: "ml-1 rounded-[var(--prui-radius-full)] bg-[var(--prui-raise)] px-1.5 text-xs", children: l.length }) }) : null
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ c("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((m) => {
+          const a = l.includes(m.value);
+          return /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              role: "menuitemcheckbox",
+              "aria-checked": a,
+              onClick: () => o(m.value),
+              "data-selected": a || 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: a ? { backgroundColor: "var(--prui-brand)", borderColor: "var(--prui-brand)" } : void 0,
+                    children: a ? /* @__PURE__ */ e(Ne, { className: "h-3 w-3 text-white", "aria-hidden": !0 }) : null
+                  }
+                ),
+                m.label,
+                m.count !== void 0 ? /* @__PURE__ */ e(je, { variant: "outline", className: "ml-auto", children: m.count }) : null
+              ]
+            },
+            m.value
+          );
+        }),
+        l.length > 0 ? /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              n || b([]), d == null || d([]);
+            },
+            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 (",
+              l.length,
+              ")"
+            ]
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function He({
+  label: r = "Date range",
+  value: u,
+  defaultValue: v,
+  onChange: p,
+  className: d
+}) {
+  const [s, f] = y.useState(v ?? {}), b = u !== void 0, n = b ? u : s, l = (o) => {
+    b || f(o), p == null || p(o);
+  };
+  return /* @__PURE__ */ c("div", { className: d ?? "flex items-end gap-2", "data-testid": "daterange-filter", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c(j, { className: "text-xs text-[var(--prui-dim)]", children: [
+        r,
+        " from"
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "date",
+          "aria-label": `${r} from`,
+          className: "h-8 w-36",
+          value: n.from ?? "",
+          onChange: (o) => l({ ...n, from: o.target.value || void 0 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(j, { className: "text-xs text-[var(--prui-dim)]", children: "to" }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "date",
+          "aria-label": `${r} to`,
+          className: "h-8 w-36",
+          value: n.to ?? "",
+          onChange: (o) => l({ ...n, to: o.target.value || void 0 })
+        }
+      )
+    ] }),
+    n.from || n.to ? /* @__PURE__ */ e(A, { variant: "ghost", size: "sm", onClick: () => l({}), children: "Clear" }) : null
+  ] });
+}
+function Pe({
+  label: r = "Date",
+  value: u,
+  defaultValue: v,
+  onChange: p,
+  className: d
+}) {
+  const [s, f] = y.useState(v ?? {}), b = u !== void 0, n = b ? u : s, l = (o) => {
+    b || f(o), p == null || p(o);
+  };
+  return /* @__PURE__ */ c("div", { className: d ?? "flex items-end gap-2", "data-testid": "date-filter", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(j, { className: "text-xs text-[var(--prui-dim)]", children: r }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "date",
+          "aria-label": r,
+          className: "h-8 w-36",
+          value: n.date ?? "",
+          onChange: (o) => l({ date: o.target.value || void 0 })
+        }
+      )
+    ] }),
+    n.date ? /* @__PURE__ */ e(A, { variant: "ghost", size: "sm", onClick: () => l({}), children: "Clear" }) : null
+  ] });
+}
+function We({
+  label: r = "Range",
+  value: u,
+  defaultValue: v,
+  onChange: p,
+  className: d
+}) {
+  const [s, f] = y.useState(v ?? {}), b = u !== void 0, n = b ? u : s, l = (m) => {
+    b || f(m), p == null || p(m);
+  }, o = (m) => {
+    if (m === "") return;
+    const a = Number(m);
+    return Number.isNaN(a) ? void 0 : a;
+  };
+  return /* @__PURE__ */ c("div", { className: d ?? "flex items-end gap-2", "data-testid": "numberrange-filter", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c(j, { className: "text-xs text-[var(--prui-dim)]", children: [
+        r,
+        " min"
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "number",
+          "aria-label": `${r} min`,
+          className: "h-8 w-24",
+          value: n.min ?? "",
+          onChange: (m) => l({ ...n, min: o(m.target.value) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(j, { className: "text-xs text-[var(--prui-dim)]", children: "max" }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "number",
+          "aria-label": `${r} max`,
+          className: "h-8 w-24",
+          value: n.max ?? "",
+          onChange: (m) => l({ ...n, max: o(m.target.value) })
+        }
+      )
+    ] }),
+    n.min !== void 0 || n.max !== void 0 ? /* @__PURE__ */ e(A, { variant: "ghost", size: "sm", onClick: () => l({}), children: "Clear" }) : null
+  ] });
+}
+function Be({
+  label: r = "Price",
+  value: u,
+  defaultValue: v,
+  onChange: p,
+  currency: d = "₱",
+  className: s
+}) {
+  const [f, b] = y.useState(v ?? {}), n = u !== void 0, l = n ? u : f, o = (a) => {
+    n || b(a), p == null || p(a);
+  }, m = (a) => {
+    if (a === "") return;
+    const g = Number(a);
+    return Number.isNaN(g) ? void 0 : g;
+  };
+  return /* @__PURE__ */ c("div", { className: s ?? "flex items-end gap-2", "data-testid": "price-filter", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c(j, { className: "text-xs text-[var(--prui-dim)]", children: [
+        r,
+        " min"
+      ] }),
+      /* @__PURE__ */ c("div", { className: "relative", children: [
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-[var(--prui-dim)]", "aria-hidden": !0, children: d }),
+        /* @__PURE__ */ e(
+          T,
+          {
+            type: "number",
+            "aria-label": `${r} min`,
+            className: "h-8 w-24 pl-6",
+            value: l.min ?? "",
+            onChange: (a) => o({ ...l, min: m(a.target.value) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(j, { className: "text-xs text-[var(--prui-dim)]", children: "max" }),
+      /* @__PURE__ */ c("div", { className: "relative", children: [
+        /* @__PURE__ */ e("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-[var(--prui-dim)]", "aria-hidden": !0, children: d }),
+        /* @__PURE__ */ e(
+          T,
+          {
+            type: "number",
+            "aria-label": `${r} max`,
+            className: "h-8 w-24 pl-6",
+            value: l.max ?? "",
+            onChange: (a) => o({ ...l, max: m(a.target.value) })
+          }
+        )
+      ] })
+    ] }),
+    l.min !== void 0 || l.max !== void 0 ? /* @__PURE__ */ e(A, { variant: "ghost", size: "sm", onClick: () => o({}), children: "Clear" }) : null
+  ] });
+}
+function Le({
+  label: r = "Time",
+  value: u,
+  defaultValue: v,
+  onChange: p,
+  className: d
+}) {
+  const [s, f] = y.useState(v ?? {}), b = u !== void 0, n = b ? u : s, l = (o) => {
+    b || f(o), p == null || p(o);
+  };
+  return /* @__PURE__ */ c("div", { className: d ?? "flex items-end gap-2", "data-testid": "time-filter", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c(j, { className: "text-xs text-[var(--prui-dim)]", children: [
+        r,
+        " from"
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "time",
+          "aria-label": `${r} from`,
+          className: "h-8 w-28",
+          value: n.from ?? "",
+          onChange: (o) => l({ ...n, from: o.target.value || void 0 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e(j, { className: "text-xs text-[var(--prui-dim)]", children: "to" }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          type: "time",
+          "aria-label": `${r} to`,
+          className: "h-8 w-28",
+          value: n.to ?? "",
+          onChange: (o) => l({ ...n, to: o.target.value || void 0 })
+        }
+      )
+    ] }),
+    n.from || n.to ? /* @__PURE__ */ e(A, { variant: "ghost", size: "sm", onClick: () => l({}), children: "Clear" }) : null
+  ] });
+}
+function et({
+  searchPlaceholder: r = "Search...",
+  searchValue: u,
+  onSearchChange: v,
+  filters: p = [],
+  filterValues: d,
+  onFilterChange: s,
+  actions: f,
+  className: b
+}) {
+  const [n, l] = y.useState(""), o = u !== void 0, m = o ? u : n;
+  return /* @__PURE__ */ c("div", { className: I("prui-toolbar flex flex-wrap items-center gap-2 py-2", b), children: [
+    /* @__PURE__ */ c("div", { className: "relative", children: [
+      /* @__PURE__ */ e(ke, { 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(
+        T,
+        {
+          type: "search",
+          "aria-label": "Search",
+          placeholder: r,
+          className: "h-8 w-56 pl-8",
+          value: m,
+          onChange: (a) => {
+            o || l(a.target.value), v == null || v(a.target.value);
+          }
+        }
+      )
+    ] }),
+    p.map((a) => {
+      const g = d == null ? void 0 : d[a.key];
+      return a.type === "select" ? /* @__PURE__ */ e(
+        Ae,
+        {
+          label: a.label,
+          options: a.options ?? [],
+          value: g ?? [],
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      ) : a.type === "daterange" ? /* @__PURE__ */ e(
+        He,
+        {
+          label: a.label,
+          value: g ?? {},
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      ) : a.type === "date" ? /* @__PURE__ */ e(
+        Pe,
+        {
+          label: a.label,
+          value: g ?? {},
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      ) : a.type === "price" ? /* @__PURE__ */ e(
+        Be,
+        {
+          label: a.label,
+          value: g ?? {},
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      ) : a.type === "time" ? /* @__PURE__ */ e(
+        Le,
+        {
+          label: a.label,
+          value: g ?? {},
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      ) : /* @__PURE__ */ e(
+        We,
+        {
+          label: a.label,
+          value: g ?? {},
+          onChange: (x) => s == null ? void 0 : s(a.key, x)
+        },
+        a.key
+      );
+    }),
+    f ? /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-2", children: f }) : null
+  ] });
+}
+const tt = {
+  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 {
+  Ve as D,
+  Ae as F,
+  We as N,
+  Be as P,
+  Le as T,
+  Fe as a,
+  et as b,
+  Pe as c,
+  He as d,
+  Ce as e,
+  Ke as f,
+  tt as g
+};