@skiddph/prui 0.1.0 → 0.2.0

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

@@ -0,0 +1,581 @@
+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
+};

package/dist/core/modal.js

@@ -173,7 +173,13 @@ function G(n) {
           M(!0), k(!0), document.body.classList.add("modal-open");
         }, 10);
         return () => clearTimeout(i);
-      }, []), r.useEffect(() => {
+      }, []);
+      const m = (i) => {
+        R(!0), k(!1), document.body.classList.remove("modal-open"), setTimeout(() => {
+          E(), z(i);
+        }, 300);
+      };
+      if (r.useEffect(() => {
         var C;
         if (!h || l) return;
         (C = c.current) == null || C.focus();
@@ -190,13 +196,7 @@ function G(n) {
           !p || !s.some((j) => j === p) ? (a.preventDefault(), b.focus()) : a.shiftKey && p === b ? (a.preventDefault(), t.focus()) : !a.shiftKey && p === t && (a.preventDefault(), b.focus());
         };
         return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-      }, [h, l]);
-      const m = (i) => {
-        R(!0), k(!1), document.body.classList.remove("modal-open"), setTimeout(() => {
-          E(), z(i);
-        }, 300);
-      };
-      if (!h) return null;
+      }, [h, l]), !h) return null;
       const w = P[T];
       return /* @__PURE__ */ e(
         "div",

package/dist/core/select.d.ts

@@ -16,7 +16,7 @@ export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     onOpenChange?: (open: boolean) => void;
 }
 export declare const Select: {
-    ({ options, value: valueProp, defaultValue, placeholder, disabled, name, onChange, onOpenChange, children, }: SelectProps): React.JSX.Element;
+    ({ options, value: valueProp, defaultValue, placeholder, disabled, name, id, onChange, onOpenChange, children, ...rest }: SelectProps): React.JSX.Element;
     displayName: string;
 };
 export type SelectTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;