@skiddph/prui 0.7.0 → 0.8.0

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

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