@skiddph/prui 0.10.2 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,40 +1,40 @@
1
- import { jsx as e, jsxs as p, Fragment as Me } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as p, Fragment as Pe } from "react/jsx-runtime";
2
2
  import * as l from "react";
3
3
  import { createPortal as ot } from "react-dom";
4
- import { Routes as ct, Route as Se, Navigate as ut, MemoryRouter as dt, BrowserRouter as mt, useLocation as Pe, useNavigate as Oe, Outlet as pt, Link as ft, NavLink as ht } from "react-router-dom";
4
+ import { Routes as ct, Route as Te, Navigate as ut, MemoryRouter as dt, BrowserRouter as mt, useLocation as Oe, useNavigate as De, Outlet as pt, Link as ft, NavLink as ht } from "react-router-dom";
5
5
  import { ChevronsRight as bt, ChevronsLeft as vt, X as gt, Menu as xt, Search as yt, Palette as wt, ChevronDown as Nt, Pencil as kt, Trash2 as St, Plus as Tt, Clock as Ct } from "lucide-react";
6
6
  import { cn as C } from "../core/cn.js";
7
7
  import { Dropdown as Rt } from "../core/dropdown.js";
8
- import { Button as B } from "../core/button.js";
9
- import { useOverlay as De, Portal as Ae, useOverlayStack as Et, useEscapeKey as jt } from "../core/overlay.js";
10
- import { endIndex as Mt, homeIndex as Pt, moveIndex as Te } from "../core/list-nav.js";
11
- import { resolveThemeName as Ot, themeMode as Dt, readPersistedTheme as At, applyTheme as Ce, listThemes as zt, clearAppliedTokens as $t } from "../theme.js";
12
- import { usePruiI18n as J } from "../i18n.js";
13
- import { Modal as ze, confirmModal as Ft } from "../core/modal.js";
14
- import { b as It, D as Lt, a as Kt } from "./data-table-toolbar-B-5J2Ozl.js";
15
- import { Textarea as Bt, Input as oe } from "../core/input.js";
16
- import { Label as Ut } from "../core/label.js";
17
- import { Select as $e } from "../core/select.js";
18
- import { Switch as Fe } from "../core/switch.js";
19
- import { Card as Ie, CardHeader as Le, CardDescription as Ke, CardTitle as Be, CardContent as Ue } from "../core/card.js";
20
- const Vt = [
8
+ import { Button as U } from "../core/button.js";
9
+ import { useOverlay as Ae, useMountTransition as Et, Portal as ze, useOverlayStack as Mt, useEscapeKey as jt } from "../core/overlay.js";
10
+ import { endIndex as Pt, homeIndex as Ot, moveIndex as Ce } from "../core/list-nav.js";
11
+ import { resolveThemeName as Dt, themeMode as At, readPersistedTheme as zt, applyTheme as Re, listThemes as $t, clearAppliedTokens as Ft } from "../theme.js";
12
+ import { usePruiI18n as X } from "../i18n.js";
13
+ import { Modal as $e, confirmModal as It } from "../core/modal.js";
14
+ import { b as Lt, D as Kt, a as Bt } from "./data-table-toolbar-B-5J2Ozl.js";
15
+ import { Textarea as Ut, Input as ce } from "../core/input.js";
16
+ import { Label as Vt } from "../core/label.js";
17
+ import { Select as Fe } from "../core/select.js";
18
+ import { Switch as Ie } from "../core/switch.js";
19
+ import { Card as Le, CardHeader as Ke, CardDescription as Be, CardTitle as Ue, CardContent as Ve } from "../core/card.js";
20
+ const _t = [
21
21
  { path: "/login", name: "login" },
22
22
  { path: "/register", name: "register" },
23
23
  { path: "/forgot-password", name: "forgotPassword" },
24
24
  { path: "/reset-password", name: "resetPassword" },
25
25
  { path: "/otp", name: "otp" },
26
26
  { path: "/logout", name: "logout" }
27
- ], _t = [
27
+ ], qt = [
28
28
  { path: "/404", name: "notFound" },
29
29
  { path: "/error", name: "error" },
30
30
  { path: "/profile", name: "profile" },
31
31
  { path: "/settings", name: "settings" },
32
32
  { path: "/admin-setup", name: "adminSetup" }
33
33
  ];
34
- function qt({ mode: t, config: r, children: n }) {
34
+ function Ht({ mode: t, config: r, children: n }) {
35
35
  const a = t === "auth" || t === "auth+utility", o = t === "utility" || t === "auth+utility", m = [
36
- ...a ? Vt : [],
37
- ...o ? _t : []
36
+ ...a ? _t : [],
37
+ ...o ? qt : []
38
38
  ], [d, T] = l.useState(null);
39
39
  return l.useEffect(() => {
40
40
  let k = !1;
@@ -46,28 +46,28 @@ function qt({ mode: t, config: r, children: n }) {
46
46
  }, []), d ? /* @__PURE__ */ p(ct, { children: [
47
47
  m.map(({ path: k, name: x }) => {
48
48
  const y = d[x];
49
- return y ? /* @__PURE__ */ e(Se, { path: k, element: /* @__PURE__ */ e(y, { ...(r == null ? void 0 : r[x]) ?? {} }) }, k) : null;
49
+ return y ? /* @__PURE__ */ e(Te, { path: k, element: /* @__PURE__ */ e(y, { ...(r == null ? void 0 : r[x]) ?? {} }) }, k) : null;
50
50
  }),
51
51
  n,
52
- a ? /* @__PURE__ */ e(Se, { path: "*", element: /* @__PURE__ */ e(ut, { to: "/login", replace: !0 }) }) : null
52
+ a ? /* @__PURE__ */ e(Te, { path: "*", element: /* @__PURE__ */ e(ut, { to: "/login", replace: !0 }) }) : null
53
53
  ] }) : /* @__PURE__ */ e("div", { className: "p-8 text-center text-sm text-[var(--prui-dim)]", children: "Loading…" });
54
54
  }
55
- const Ht = l.lazy(
56
- () => Promise.resolve().then(() => or).then((t) => ({ default: t.SessionTimeout }))
55
+ const Xt = l.lazy(
56
+ () => Promise.resolve().then(() => cr).then((t) => ({ default: t.SessionTimeout }))
57
57
  );
58
58
  function Jt(t) {
59
- const r = t !== !1, n = typeof t == "object" ? t : {}, a = n.persist !== !1, o = Ot(n.default ?? "control"), m = Dt(o), [d, T] = l.useState(() => (a ? At() : null) ?? { theme: o, mode: m }), k = l.useCallback(
59
+ const r = t !== !1, n = typeof t == "object" ? t : {}, a = n.persist !== !1, o = Dt(n.default ?? "control"), m = At(o), [d, T] = l.useState(() => (a ? zt() : null) ?? { theme: o, mode: m }), k = l.useCallback(
60
60
  (x) => {
61
- T(x), Ce({ theme: x.theme, mode: x.mode, storageKey: a ? "prui:theme" : null });
61
+ T(x), Re({ theme: x.theme, mode: x.mode, storageKey: a ? "prui:theme" : null });
62
62
  },
63
63
  [a]
64
64
  );
65
65
  return l.useEffect(() => {
66
- Ce({ theme: d.theme, mode: d.mode, storageKey: a ? "prui:theme" : null });
66
+ Re({ theme: d.theme, mode: d.mode, storageKey: a ? "prui:theme" : null });
67
67
  }, [d, a]), { enabled: r, state: d, setTheme: k };
68
68
  }
69
69
  function Yt({ config: t }) {
70
- const { enabled: r, state: n, setTheme: a } = Jt(t), { t: o } = J();
70
+ const { enabled: r, state: n, setTheme: a } = Jt(t), { t: o } = X();
71
71
  return r ? /* @__PURE__ */ e(
72
72
  Rt,
73
73
  {
@@ -83,32 +83,32 @@ function Yt({ config: t }) {
83
83
  children: /* @__PURE__ */ e(wt, { className: "h-4 w-4", "aria-hidden": !0 })
84
84
  }
85
85
  ),
86
- items: zt().map((m) => ({
86
+ items: $t().map((m) => ({
87
87
  label: `${m}${m === n.theme ? " (active)" : ""}`,
88
88
  onSelect: () => {
89
- $t(), a({ theme: m, mode: m === "daylight" ? "light" : "dark" });
89
+ Ft(), a({ theme: m, mode: m === "daylight" ? "light" : "dark" });
90
90
  }
91
91
  }))
92
92
  }
93
93
  ) : null;
94
94
  }
95
- function se(t, r) {
95
+ function ie(t, r) {
96
96
  return r === "/" ? t === "/" : t === r || t.startsWith(r + "/");
97
97
  }
98
98
  function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
99
99
  var O;
100
- const { pathname: o } = Pe(), m = Oe(), d = (t.items ?? []).some(
101
- (v) => v.href ? se(o, v.href) : (v.items ?? []).some((i) => i.href && se(o, i.href))
100
+ const { pathname: o } = Oe(), m = De(), d = (t.items ?? []).some(
101
+ (v) => v.href ? ie(o, v.href) : (v.items ?? []).some((i) => i.href && ie(o, i.href))
102
102
  ), [T, k] = l.useState(d || n !== void 0 && o === n);
103
103
  l.useEffect(() => {
104
104
  d && k(!0);
105
105
  }, [d]);
106
- const x = t.icon, [y, M] = l.useState(!1), [w, P] = l.useState(null), g = l.useRef(null), u = l.useRef(null), [b, R] = l.useState(-1), E = l.useCallback(() => {
106
+ const x = t.icon, [y, j] = l.useState(!1), [w, P] = l.useState(null), g = l.useRef(null), u = l.useRef(null), [b, R] = l.useState(-1), E = l.useCallback(() => {
107
107
  var i, S;
108
- M(!1), R(-1);
108
+ j(!1), R(-1);
109
109
  const v = document.activeElement;
110
110
  v && ((i = u.current) != null && i.contains(v)) && ((S = g.current) == null || S.focus());
111
- }, []), { setElement: $, isTop: A } = Et(y);
111
+ }, []), { setElement: z, isTop: A } = Mt(y);
112
112
  if (jt(y, A, () => E()), l.useEffect(() => {
113
113
  var v;
114
114
  y && ((v = u.current) == null || v.focus());
@@ -123,33 +123,33 @@ function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
123
123
  var h;
124
124
  const c = (h = g.current) == null ? void 0 : h.getBoundingClientRect();
125
125
  if (c) {
126
- const K = Math.min(v.length * 32 + 40, 320);
126
+ const B = Math.min(v.length * 32 + 40, 320);
127
127
  P({
128
128
  left: c.right + 8,
129
- top: Math.max(8, Math.min(c.top, window.innerHeight - K - 8))
129
+ top: Math.max(8, Math.min(c.top, window.innerHeight - B - 8))
130
130
  });
131
131
  }
132
- M((K) => !K);
132
+ j((B) => !B);
133
133
  }, N = (c) => {
134
- var L, V;
134
+ var K, _;
135
135
  R(c);
136
- const h = (L = u.current) == null ? void 0 : L.querySelectorAll("[role='menuitem']");
136
+ const h = (K = u.current) == null ? void 0 : K.querySelectorAll("[role='menuitem']");
137
137
  if (!h) return;
138
- (V = Array.from(h)[c]) == null || V.focus();
138
+ (_ = Array.from(h)[c]) == null || _.focus();
139
139
  }, f = (c) => {
140
140
  const h = i.length;
141
141
  switch (c.key) {
142
142
  case "ArrowDown":
143
- c.preventDefault(), N(Te(b, 1, h));
143
+ c.preventDefault(), N(Ce(b, 1, h));
144
144
  break;
145
145
  case "ArrowUp":
146
- c.preventDefault(), N(Te(b, -1, h));
146
+ c.preventDefault(), N(Ce(b, -1, h));
147
147
  break;
148
148
  case "Home":
149
- c.preventDefault(), N(Pt(h));
149
+ c.preventDefault(), N(Ot(h));
150
150
  break;
151
151
  case "End":
152
- c.preventDefault(), N(Mt(h));
152
+ c.preventDefault(), N(Pt(h));
153
153
  break;
154
154
  case "Tab":
155
155
  E();
@@ -178,13 +178,13 @@ function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
178
178
  }
179
179
  ),
180
180
  y && w ? ot(
181
- /* @__PURE__ */ p(Me, { children: [
181
+ /* @__PURE__ */ p(Pe, { children: [
182
182
  /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[var(--prui-z-flyout)]", onClick: () => E(), "data-testid": "rail-flyout-backdrop" }),
183
183
  /* @__PURE__ */ p(
184
184
  "div",
185
185
  {
186
186
  ref: (c) => {
187
- u.current = c, $(c);
187
+ u.current = c, z(c);
188
188
  },
189
189
  role: "menu",
190
190
  "aria-label": t.label,
@@ -205,7 +205,7 @@ function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
205
205
  "data-testid": "rail-flyout-item",
206
206
  className: C(
207
207
  "flex cursor-pointer items-center rounded-[calc(var(--prui-radius)-1px)] px-3 py-1.5 text-left text-sm",
208
- c.href && se(o, c.href) ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)]" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] focus-visible:bg-[var(--prui-raise)] outline-none"
208
+ c.href && ie(o, c.href) ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)]" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] focus-visible:bg-[var(--prui-raise)] outline-none"
209
209
  ),
210
210
  onClick: () => {
211
211
  E(), r == null || r(), c.href && m(c.href);
@@ -241,14 +241,14 @@ function Wt({ item: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
241
241
  ]
242
242
  }
243
243
  ),
244
- T ? /* @__PURE__ */ e("ul", { className: "ml-4 mt-0.5 flex flex-col gap-0.5 border-l border-[var(--prui-line)] pl-2", children: (t.items ?? []).map((v) => /* @__PURE__ */ e(Ve, { item: v, onNavigate: r, nested: !0, expandAllOn: n, collapsed: a }, v.href ?? v.label)) }) : null
244
+ T ? /* @__PURE__ */ e("ul", { className: "ml-4 mt-0.5 flex flex-col gap-0.5 border-l border-[var(--prui-line)] pl-2", children: (t.items ?? []).map((v) => /* @__PURE__ */ e(_e, { item: v, onNavigate: r, nested: !0, expandAllOn: n, collapsed: a }, v.href ?? v.label)) }) : null
245
245
  ] });
246
246
  }
247
- function Xt({ label: t }) {
247
+ function Gt({ label: t }) {
248
248
  return /* @__PURE__ */ e("li", { className: "px-2.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--prui-dim)]", "data-testid": "nav-subgroup", children: t });
249
249
  }
250
- function Ve({ item: t, onNavigate: r, nested: n, expandAllOn: a, collapsed: o }) {
251
- return t.items && t.items.length > 0 ? /* @__PURE__ */ e(Wt, { item: t, onNavigate: r, expandAllOn: a, collapsed: o }) : t.heading || !t.href && !t.items ? o ? null : /* @__PURE__ */ e(Xt, { label: t.label }) : t.href ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ p(
250
+ function _e({ item: t, onNavigate: r, nested: n, expandAllOn: a, collapsed: o }) {
251
+ return t.items && t.items.length > 0 ? /* @__PURE__ */ e(Wt, { item: t, onNavigate: r, expandAllOn: a, collapsed: o }) : t.heading || !t.href && !t.items ? o ? null : /* @__PURE__ */ e(Gt, { label: t.label }) : t.href ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ p(
252
252
  ht,
253
253
  {
254
254
  to: t.href,
@@ -265,38 +265,38 @@ function Ve({ item: t, onNavigate: r, nested: n, expandAllOn: a, collapsed: o })
265
265
  }
266
266
  ) }) : null;
267
267
  }
268
- function Re({ nav: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
269
- const { t: o } = J();
270
- return /* @__PURE__ */ e("nav", { "aria-label": o.mainNavigation, className: "prui-app-nav", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.map((m) => /* @__PURE__ */ e(Ve, { item: m, onNavigate: r, expandAllOn: n, collapsed: a }, m.href ?? m.label)) }) });
268
+ function Ee({ nav: t, onNavigate: r, expandAllOn: n, collapsed: a }) {
269
+ const { t: o } = X();
270
+ return /* @__PURE__ */ e("nav", { "aria-label": o.mainNavigation, className: "prui-app-nav", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.map((m) => /* @__PURE__ */ e(_e, { item: m, onNavigate: r, expandAllOn: n, collapsed: a }, m.href ?? m.label)) }) });
271
271
  }
272
- function ie({ brand: t }) {
272
+ function oe({ brand: t }) {
273
273
  if (!t) return null;
274
- const r = /* @__PURE__ */ p(Me, { children: [
274
+ const r = /* @__PURE__ */ p(Pe, { children: [
275
275
  t.mark ? /* @__PURE__ */ e("img", { src: t.mark, alt: "", className: "h-6 w-6 rounded-[var(--prui-radius-1)] object-cover" }) : null,
276
276
  /* @__PURE__ */ e("span", { className: "prui-nav-label truncate font-semibold text-[var(--prui-fg)]", children: t.name })
277
277
  ] }), n = "flex items-center gap-2 px-1 py-1 min-w-0";
278
278
  return t.href === null ? /* @__PURE__ */ e("div", { className: n, children: r }) : /* @__PURE__ */ e(ft, { to: t.href ?? "/", className: n, "aria-label": t.name, children: r });
279
279
  }
280
- function Gt({
280
+ function Qt({
281
281
  open: t,
282
282
  onOpenChange: r,
283
283
  entries: n,
284
284
  placeholder: a,
285
285
  onNavigate: o
286
286
  }) {
287
- const { t: m } = J(), [d, T] = l.useState(""), [k, x] = l.useState(0), y = l.useRef(null), M = a ?? m.commandPlaceholder, w = l.useMemo(() => {
287
+ const { t: m } = X(), [d, T] = l.useState(""), [k, x] = l.useState(0), y = l.useRef(null), j = a ?? m.commandPlaceholder, w = l.useMemo(() => {
288
288
  const u = d.trim().toLowerCase();
289
289
  return u ? n.filter((b) => b.label.toLowerCase().includes(u)) : n;
290
290
  }, [n, d]);
291
291
  l.useEffect(() => x(0), [d]);
292
- const { ref: P } = De({
292
+ const { ref: P } = Ae({
293
293
  open: t,
294
294
  onEscape: () => r(!1),
295
295
  initialFocus: y
296
296
  }), g = (u) => {
297
297
  r(!1), u.onSelect ? u.onSelect() : u.href && (o == null || o(u.href));
298
298
  };
299
- return t ? /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e("div", { ref: P, children: /* @__PURE__ */ e(
299
+ return t ? /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e("div", { ref: P, children: /* @__PURE__ */ e(
300
300
  "div",
301
301
  {
302
302
  className: "prui-dialog-overlay fixed inset-0 z-[var(--prui-z-overlay)] flex items-start justify-center pt-24",
@@ -323,7 +323,7 @@ function Gt({
323
323
  "aria-controls": "prui-palette-listbox",
324
324
  "aria-label": "Command palette search",
325
325
  "aria-activedescendant": w[k] ? `palette-option-${k}` : void 0,
326
- placeholder: M,
326
+ placeholder: j,
327
327
  value: d,
328
328
  onChange: (u) => T(u.target.value),
329
329
  onKeyDown: (u) => {
@@ -360,7 +360,7 @@ function Gt({
360
360
  }
361
361
  ) }) }) : null;
362
362
  }
363
- function Qt(t) {
363
+ function Zt(t) {
364
364
  const {
365
365
  brand: r,
366
366
  nav: n = [],
@@ -372,78 +372,82 @@ function Qt(t) {
372
372
  pages: k,
373
373
  pagesConfig: x,
374
374
  expandAllOn: y,
375
- layoutType: M = "A",
375
+ layoutType: j = "A",
376
376
  sidebarHeader: w,
377
377
  sidebarFooter: P,
378
378
  children: g
379
- } = t, { t: u } = J(), b = typeof a == "object" ? a : { enabled: a !== !1 }, R = b.enabled !== !1, E = b.hotkey ?? "/", $ = d.collapsible !== !1, [A, O] = l.useState(d.defaultOpen === !0), [v, i] = l.useState(!0), [S, N] = l.useState(!1), f = Pe(), c = Oe(), h = l.useMemo(
379
+ } = t, { t: u } = X(), b = typeof a == "object" ? a : { enabled: a !== !1 }, R = b.enabled !== !1, E = b.hotkey ?? "/", z = d.collapsible !== !1, [A, O] = l.useState(d.defaultOpen === !0), [v, i] = l.useState(!0), [S, N] = l.useState(!1), f = Oe(), c = De(), h = l.useMemo(
380
380
  () => m === !1 ? null : m === !0 ? {} : m,
381
381
  [m]
382
- ), K = l.useCallback(() => {
382
+ ), B = l.useCallback(() => {
383
383
  h != null && h.onTimeout ? h.onTimeout() : c((h == null ? void 0 : h.loginPath) ?? "/login");
384
- }, [h, c]), L = l.useMemo(() => {
385
- const I = [];
386
- for (const j of n)
387
- if (j.items)
388
- for (const F of j.items)
389
- F.href && I.push({ label: `${j.label} / ${F.label}`, href: F.href, group: j.label });
390
- else j.href && I.push({ label: j.label, href: j.href });
391
- return I;
384
+ }, [h, c]), K = l.useMemo(() => {
385
+ const $ = [];
386
+ for (const M of n)
387
+ if (M.items)
388
+ for (const F of M.items)
389
+ F.href && $.push({ label: `${M.label} / ${F.label}`, href: F.href, group: M.label });
390
+ else M.href && $.push({ label: M.label, href: M.href });
391
+ return $;
392
392
  }, [n]);
393
393
  l.useEffect(() => {
394
394
  if (!R) return;
395
- const I = (j) => {
396
- const F = j.target, q = F && (F.tagName === "INPUT" || F.tagName === "TEXTAREA" || F.isContentEditable);
397
- j.key === E && !q && !j.metaKey && !j.ctrlKey && !j.altKey && (j.preventDefault(), N(!0));
395
+ const $ = (M) => {
396
+ const F = M.target, le = F && (F.tagName === "INPUT" || F.tagName === "TEXTAREA" || F.isContentEditable);
397
+ M.key === E && !le && !M.metaKey && !M.ctrlKey && !M.altKey && (M.preventDefault(), N(!0));
398
398
  };
399
- return document.addEventListener("keydown", I), () => document.removeEventListener("keydown", I);
399
+ return document.addEventListener("keydown", $), () => document.removeEventListener("keydown", $);
400
400
  }, [E, R]);
401
- const V = l.useRef(f.pathname);
401
+ const _ = l.useRef(f.pathname);
402
402
  l.useEffect(() => {
403
- V.current !== f.pathname && (V.current = f.pathname, O(!1));
403
+ _.current !== f.pathname && (_.current = f.pathname, O(!1));
404
404
  }, [f.pathname]);
405
- const Y = l.useRef(null), { ref: re } = De({
405
+ const J = l.useRef(null), { ref: ae } = Ae({
406
406
  open: A,
407
407
  onEscape: () => O(!1),
408
- initialFocus: Y
409
- }), ae = d.width ?? 240, z = !v && M !== "D";
408
+ initialFocus: J
409
+ }), { mounted: ne, shown: I } = Et(A), Y = d.width ?? 240, L = !v && j !== "D";
410
410
  return /* @__PURE__ */ p(
411
411
  "div",
412
412
  {
413
413
  className: "prui-app prui-shell min-h-dvh bg-[var(--prui-background)] text-[var(--prui-fg)]",
414
- "data-layout": M,
415
- "data-collapsed": z ? "true" : void 0,
416
- style: { "--prui-shell-sidebar": z ? "var(--prui-rail-width, 64px)" : `${ae}px` },
414
+ "data-layout": j,
415
+ "data-collapsed": L ? "true" : void 0,
416
+ style: { "--prui-shell-sidebar": L ? "var(--prui-rail-width, 64px)" : `${Y}px` },
417
417
  children: [
418
418
  /* @__PURE__ */ p("aside", { "data-testid": "sidebar", className: "prui-shell-sidebar hidden md:flex md:flex-col md:min-h-0", children: [
419
- /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2 pt-4 scrollbar-thin", children: /* @__PURE__ */ e(Re, { nav: n, expandAllOn: y, collapsed: z }) }),
419
+ /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2 pt-4 scrollbar-thin", children: /* @__PURE__ */ e(Ee, { nav: n, expandAllOn: y, collapsed: L }) }),
420
420
  P ? /* @__PURE__ */ e(
421
421
  "div",
422
422
  {
423
- className: C("border-t border-[var(--prui-line)] p-2", z && "flex justify-center px-1"),
423
+ className: C("border-t border-[var(--prui-line)] p-2", L && "flex justify-center px-1"),
424
424
  "data-testid": "sidebar-footer",
425
425
  children: P
426
426
  }
427
427
  ) : null,
428
- M !== "D" ? /* @__PURE__ */ e("div", { className: "border-t border-[var(--prui-line)] p-2", children: /* @__PURE__ */ e(
429
- B,
428
+ j !== "D" ? /* @__PURE__ */ e("div", { className: "border-t border-[var(--prui-line)] p-2", children: /* @__PURE__ */ e(
429
+ U,
430
430
  {
431
431
  variant: "ghost",
432
432
  size: "sm",
433
433
  className: "w-full justify-center",
434
- "aria-label": z ? u.expandSidebar : u.collapseSidebar,
434
+ "aria-label": L ? u.expandSidebar : u.collapseSidebar,
435
435
  "data-testid": "sidebar-toggle",
436
- onClick: () => i((I) => !I),
437
- children: z ? /* @__PURE__ */ e(bt, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(vt, { className: "h-4 w-4", "aria-hidden": !0 })
436
+ onClick: () => i(($) => !$),
437
+ children: L ? /* @__PURE__ */ e(bt, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(vt, { className: "h-4 w-4", "aria-hidden": !0 })
438
438
  }
439
439
  ) }) : null
440
440
  ] }),
441
- A ? /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ p("div", { ref: re, className: "md:hidden fixed inset-0 z-[var(--prui-z-drawer)]", "data-testid": "mobile-drawer", children: [
441
+ ne ? /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ p("div", { ref: ae, className: "md:hidden fixed inset-0 z-[var(--prui-z-drawer)]", "data-testid": "mobile-drawer", children: [
442
442
  /* @__PURE__ */ e(
443
443
  "div",
444
444
  {
445
- className: "absolute inset-0",
446
- style: { backgroundColor: "var(--prui-scrim)" },
445
+ className: "absolute inset-0 prui-drawer-overlay",
446
+ style: {
447
+ backgroundColor: "var(--prui-scrim)",
448
+ opacity: I ? 1 : 0,
449
+ transition: "opacity var(--prui-duration-slow) var(--prui-ease-out)"
450
+ },
447
451
  onClick: () => O(!1),
448
452
  "data-testid": "drawer-backdrop"
449
453
  }
@@ -451,18 +455,22 @@ function Qt(t) {
451
455
  /* @__PURE__ */ p(
452
456
  "aside",
453
457
  {
454
- className: "absolute left-0 top-0 h-full w-64 overflow-y-auto border-r border-[var(--prui-line)] bg-[var(--prui-surface)] p-2",
458
+ className: "absolute left-0 top-0 h-full w-64 overflow-y-auto border-r border-[var(--prui-line)] bg-[var(--prui-surface)] p-2 prui-drawer-panel",
459
+ style: {
460
+ transform: I ? "translateX(0)" : "translateX(-100%)",
461
+ transition: "transform var(--prui-duration-slow) var(--prui-ease-out)"
462
+ },
455
463
  role: "dialog",
456
464
  "aria-modal": "true",
457
465
  "aria-label": "Navigation",
458
466
  children: [
459
467
  /* @__PURE__ */ p("div", { className: C("mb-2 flex h-10 items-center gap-2 px-1", r ? "justify-between" : "justify-end"), children: [
460
- r ? /* @__PURE__ */ e("div", { className: "min-w-0", onClick: () => O(!1), children: /* @__PURE__ */ e(ie, { brand: r }) }) : null,
468
+ r ? /* @__PURE__ */ e("div", { className: "min-w-0", onClick: () => O(!1), children: /* @__PURE__ */ e(oe, { brand: r }) }) : null,
461
469
  /* @__PURE__ */ e(
462
470
  "button",
463
471
  {
464
472
  type: "button",
465
- ref: Y,
473
+ ref: J,
466
474
  "aria-label": u.closeNavigation,
467
475
  onClick: () => O(!1),
468
476
  className: "rounded-[var(--prui-radius)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] cursor-pointer",
@@ -470,17 +478,17 @@ function Qt(t) {
470
478
  }
471
479
  )
472
480
  ] }),
473
- /* @__PURE__ */ e(Re, { nav: n, onNavigate: () => O(!1), expandAllOn: y, collapsed: !1 })
481
+ /* @__PURE__ */ e(Ee, { nav: n, onNavigate: () => O(!1), expandAllOn: y, collapsed: !1 })
474
482
  ]
475
483
  }
476
484
  )
477
485
  ] }) }) : null,
478
- M === "C" ? /* @__PURE__ */ e(
486
+ j === "C" ? /* @__PURE__ */ e(
479
487
  "div",
480
488
  {
481
489
  "data-testid": "sidebar-header",
482
490
  className: "prui-shell-sidehead hidden h-14 items-center gap-2 border-b border-[var(--prui-line)] bg-[var(--prui-surface)] px-4 md:flex",
483
- children: w ?? /* @__PURE__ */ e(ie, { brand: r })
491
+ children: w ?? /* @__PURE__ */ e(oe, { brand: r })
484
492
  }
485
493
  ) : null,
486
494
  /* @__PURE__ */ p(
@@ -489,8 +497,8 @@ function Qt(t) {
489
497
  "data-testid": "app-header",
490
498
  className: "prui-shell-header sticky top-0 z-[var(--prui-z-header)] grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-4 border-b border-[var(--prui-line)] bg-[var(--prui-surface)] px-4 md:px-6",
491
499
  children: [
492
- $ ? /* @__PURE__ */ e(
493
- B,
500
+ z ? /* @__PURE__ */ e(
501
+ U,
494
502
  {
495
503
  variant: "ghost",
496
504
  size: "icon",
@@ -501,7 +509,7 @@ function Qt(t) {
501
509
  children: /* @__PURE__ */ e(xt, { className: "h-4 w-4", "aria-hidden": !0 })
502
510
  }
503
511
  ) : null,
504
- /* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(ie, { brand: r }) }),
512
+ /* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(oe, { brand: r }) }),
505
513
  R ? /* @__PURE__ */ p(
506
514
  "button",
507
515
  {
@@ -529,27 +537,27 @@ function Qt(t) {
529
537
  "data-testid": "app-content",
530
538
  tabIndex: 0,
531
539
  className: "prui-shell-content min-h-0 flex-1 p-4 outline-none md:p-6",
532
- children: k ? /* @__PURE__ */ e(qt, { mode: k, config: x, children: g }) : g ?? /* @__PURE__ */ e(pt, {})
540
+ children: k ? /* @__PURE__ */ e(Ht, { mode: k, config: x, children: g }) : g ?? /* @__PURE__ */ e(pt, {})
533
541
  }
534
542
  ),
535
543
  h ? /* @__PURE__ */ e(l.Suspense, { fallback: null, children: /* @__PURE__ */ e(
536
- Ht,
544
+ Xt,
537
545
  {
538
546
  timeout: h.sessionTimeout,
539
547
  warningTime: h.warningTime,
540
- onTimeout: K
548
+ onTimeout: B
541
549
  }
542
550
  ) }) : null,
543
- R ? /* @__PURE__ */ e(Gt, { open: S, onOpenChange: N, entries: L, placeholder: b.placeholder, onNavigate: c }) : null
551
+ R ? /* @__PURE__ */ e(Qt, { open: S, onOpenChange: N, entries: K, placeholder: b.placeholder, onNavigate: c }) : null
544
552
  ]
545
553
  }
546
554
  );
547
555
  }
548
- function Rr(t) {
556
+ function Er(t) {
549
557
  const { router: r = "browser", initialEntries: n } = t;
550
- return /* @__PURE__ */ e(r === "memory" ? dt : mt, { initialEntries: n, children: /* @__PURE__ */ e(Qt, { ...t }) });
558
+ return /* @__PURE__ */ e(r === "memory" ? dt : mt, { initialEntries: n, children: /* @__PURE__ */ e(Zt, { ...t }) });
551
559
  }
552
- const Er = {
560
+ const Mr = {
553
561
  name: "App",
554
562
  props: [
555
563
  { name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
@@ -569,20 +577,20 @@ const Er = {
569
577
  { name: "children", type: "ReactNode", default: "Outlet", control: "none" }
570
578
  ]
571
579
  };
572
- function Zt(t) {
580
+ function er(t) {
573
581
  return Array.isArray(t) ? { fields: t } : t;
574
582
  }
575
- function er(t) {
583
+ function tr(t) {
576
584
  if (t)
577
585
  return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
578
586
  }
579
- function Ee(t, r) {
587
+ function Me(t, r) {
580
588
  const n = {};
581
589
  for (const a of t.fields)
582
590
  r && a.name in r ? n[a.name] = r[a.name] : a.defaultValue !== void 0 ? n[a.name] = a.defaultValue : a.type === "boolean" ? n[a.name] = !1 : n[a.name] = "";
583
591
  return n;
584
592
  }
585
- function tr({
593
+ function rr({
586
594
  schema: t,
587
595
  initialValues: r,
588
596
  defaultValues: n,
@@ -593,10 +601,10 @@ function tr({
593
601
  error: T,
594
602
  className: k
595
603
  }) {
596
- const { t: x } = J(), y = l.useMemo(() => Zt(t), [t]), M = r ?? n, [w, P] = l.useState(() => Ee(y, M)), [g, u] = l.useState({}), [b, R] = l.useState(null), [E, $] = l.useState(!1);
604
+ const { t: x } = X(), y = l.useMemo(() => er(t), [t]), j = r ?? n, [w, P] = l.useState(() => Me(y, j)), [g, u] = l.useState({}), [b, R] = l.useState(null), [E, z] = l.useState(!1);
597
605
  l.useEffect(() => {
598
- P(Ee(y, M));
599
- }, [JSON.stringify(y), JSON.stringify(M ?? {})]);
606
+ P(Me(y, j));
607
+ }, [JSON.stringify(y), JSON.stringify(j ?? {})]);
600
608
  const A = (i, S) => {
601
609
  P((N) => ({ ...N, [i]: S })), u((N) => {
602
610
  if (!N[i]) return N;
@@ -619,11 +627,11 @@ function tr({
619
627
  R(null);
620
628
  try {
621
629
  const f = a == null ? void 0 : a({ ...w });
622
- f && typeof f.then == "function" && ($(!0), await f);
630
+ f && typeof f.then == "function" && (z(!0), await f);
623
631
  } catch (f) {
624
632
  R(f instanceof Error ? f.message : String(f));
625
633
  } finally {
626
- $(!1);
634
+ z(!1);
627
635
  }
628
636
  }
629
637
  }, v = d || E;
@@ -635,12 +643,12 @@ function tr({
635
643
  "aria-describedby": S ? `prui-form-${i.name}-error` : void 0
636
644
  };
637
645
  return /* @__PURE__ */ p("div", { className: C("flex flex-col gap-1.5", i.colSpan === 2 && "md:col-span-2", i.className), children: [
638
- /* @__PURE__ */ p(Ut, { htmlFor: N.id, children: [
646
+ /* @__PURE__ */ p(Vt, { htmlFor: N.id, children: [
639
647
  i.label,
640
648
  i.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
641
649
  ] }),
642
650
  i.type === "textarea" ? /* @__PURE__ */ e(
643
- Bt,
651
+ Ut,
644
652
  {
645
653
  ...N,
646
654
  placeholder: i.placeholder,
@@ -649,17 +657,17 @@ function tr({
649
657
  onChange: (f) => A(i.name, f.target.value)
650
658
  }
651
659
  ) : i.type === "select" ? /* @__PURE__ */ e(
652
- $e,
660
+ Fe,
653
661
  {
654
662
  ...N,
655
- options: er(i.options),
663
+ options: tr(i.options),
656
664
  placeholder: i.placeholder,
657
665
  disabled: i.disabled || v,
658
666
  value: String(w[i.name] ?? ""),
659
667
  onChange: (f) => A(i.name, f)
660
668
  }
661
669
  ) : i.type === "date" ? /* @__PURE__ */ e(
662
- oe,
670
+ ce,
663
671
  {
664
672
  ...N,
665
673
  type: "date",
@@ -669,7 +677,7 @@ function tr({
669
677
  onChange: (f) => A(i.name, f.target.value)
670
678
  }
671
679
  ) : i.type === "boolean" ? /* @__PURE__ */ e(
672
- Fe,
680
+ Ie,
673
681
  {
674
682
  ...N,
675
683
  disabled: i.disabled || v,
@@ -677,7 +685,7 @@ function tr({
677
685
  onChange: (f) => A(i.name, f)
678
686
  }
679
687
  ) : /* @__PURE__ */ e(
680
- oe,
688
+ ce,
681
689
  {
682
690
  ...N,
683
691
  type: i.type ?? "text",
@@ -692,8 +700,8 @@ function tr({
692
700
  }) }),
693
701
  T ?? b ? /* @__PURE__ */ e("p", { role: "alert", "data-testid": "form-error", className: "rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]", children: T ?? b }) : null,
694
702
  /* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-2", children: [
695
- o ? /* @__PURE__ */ e(B, { type: "button", variant: "ghost", onClick: o, disabled: v, children: m ?? x.cancel }) : null,
696
- /* @__PURE__ */ e(B, { type: "submit", variant: "primary", loading: v, children: y.submitLabel ?? "Submit" })
703
+ o ? /* @__PURE__ */ e(U, { type: "button", variant: "ghost", onClick: o, disabled: v, children: m ?? x.cancel }) : null,
704
+ /* @__PURE__ */ e(U, { type: "submit", variant: "primary", loading: v, children: y.submitLabel ?? "Submit" })
697
705
  ] })
698
706
  ] });
699
707
  }
@@ -708,26 +716,26 @@ const jr = {
708
716
  { name: "error", type: "string | null", default: "null", control: "text" }
709
717
  ]
710
718
  };
711
- function _e(t) {
719
+ function qe(t) {
712
720
  if (t)
713
721
  return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
714
722
  }
715
- function rr(t, r) {
723
+ function ar(t, r) {
716
724
  return { fields: t.filter((a) => a.formField !== !1 && !a.hidden).filter((a) => a.key !== "id" && a.key !== "actions").map((a) => {
717
725
  var o;
718
726
  return {
719
727
  name: a.key,
720
728
  label: typeof a.label == "string" ? a.label : a.key,
721
- type: ar(a, r),
722
- options: (o = _e(a.filterOptions ?? a.options)) == null ? void 0 : o.map((m) => ({ label: m.label, value: m.value })),
729
+ type: nr(a, r),
730
+ options: (o = qe(a.filterOptions ?? a.options)) == null ? void 0 : o.map((m) => ({ label: m.label, value: m.value })),
723
731
  required: !1
724
732
  };
725
733
  }), submitLabel: r ? "Save" : "Create" };
726
734
  }
727
- function ar(t, r) {
735
+ function nr(t, r) {
728
736
  return t.filter === "select" ? "select" : typeof (r == null ? void 0 : r[t.key]) == "number" || t.filter === "number" || t.filter === "numberrange" || t.filter === "price" ? "number" : t.filter === "date" || t.filter === "daterange" ? "date" : "text";
729
737
  }
730
- function Mr({
738
+ function Pr({
731
739
  name: t,
732
740
  columns: r,
733
741
  list: n,
@@ -739,7 +747,7 @@ function Mr({
739
747
  form: k,
740
748
  formSchema: x,
741
749
  rowKey: y,
742
- searchPlaceholder: M,
750
+ searchPlaceholder: j,
743
751
  pageSize: w,
744
752
  state: P,
745
753
  defaultState: g,
@@ -747,7 +755,7 @@ function Mr({
747
755
  onPageChange: b,
748
756
  onFilterChange: R,
749
757
  onSortChange: E,
750
- onSearchChange: $,
758
+ onSearchChange: z,
751
759
  onPageSizeChange: A,
752
760
  onSelectionChange: O,
753
761
  selectable: v,
@@ -756,7 +764,7 @@ function Mr({
756
764
  searchDebounce: N = 250,
757
765
  className: f
758
766
  }) {
759
- const { t: c } = J(), h = m ?? d, K = T ?? ["create", "edit", "delete"], L = (s) => K.includes(s) && (s === "create" ? !!a : s === "edit" ? !!o : !!h), V = l.useMemo(
767
+ const { t: c } = X(), h = m ?? d, B = T ?? ["create", "edit", "delete"], K = (s) => B.includes(s) && (s === "create" ? !!a : s === "edit" ? !!o : !!h), _ = l.useMemo(
760
768
  () => ({
761
769
  page: 1,
762
770
  pageSize: w ?? (g == null ? void 0 : g.pageSize) ?? 20,
@@ -768,185 +776,185 @@ function Mr({
768
776
  }),
769
777
  // eslint-disable-next-line react-hooks/exhaustive-deps -- defaults are read once
770
778
  []
771
- ), [Y, re] = l.useState(V), ae = l.useMemo(
772
- () => ({ ...Y, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, s]) => s !== void 0)) }),
773
- [Y, P]
774
- ), z = l.useCallback(
779
+ ), [J, ae] = l.useState(_), ne = l.useMemo(
780
+ () => ({ ...J, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, s]) => s !== void 0)) }),
781
+ [J, P]
782
+ ), I = l.useCallback(
775
783
  (s) => {
776
- re((D) => {
777
- const U = { ...D }, X = P;
778
- for (const [G, it] of Object.entries(s))
779
- X && G in X && X[G] !== void 0 || (U[G] = it);
780
- const te = { ...U, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, G]) => G !== void 0)) };
781
- return u == null || u(te), U;
784
+ ae((D) => {
785
+ const V = { ...D }, G = P;
786
+ for (const [Q, it] of Object.entries(s))
787
+ G && Q in G && G[Q] !== void 0 || (V[Q] = it);
788
+ const re = { ...V, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, Q]) => Q !== void 0)) };
789
+ return u == null || u(re), V;
782
790
  });
783
791
  },
784
792
  [P, u]
785
- ), { page: I, pageSize: j, search: F, filters: q, sort: ne, selection: qe, expandedRows: He } = ae, [Je, ce] = l.useState([]), [ue, de] = l.useState(null), [Ye, me] = l.useState([null]), [We, pe] = l.useState(!0), [fe, he] = l.useState(null), [_, be] = l.useState(null), [Xe, W] = l.useState(!1), [ve, ge] = l.useState(!1), [le, Ge] = l.useState(F);
793
+ ), { page: Y, pageSize: L, search: $, filters: M, sort: F, selection: le, expandedRows: He } = ne, [Xe, ue] = l.useState([]), [de, me] = l.useState(null), [Je, pe] = l.useState([null]), [Ye, fe] = l.useState(!0), [he, be] = l.useState(null), [q, ve] = l.useState(null), [We, W] = l.useState(!1), [ge, xe] = l.useState(!1), [se, Ge] = l.useState($);
786
794
  l.useEffect(() => {
787
- const s = setTimeout(() => Ge(F), N);
795
+ const s = setTimeout(() => Ge($), N);
788
796
  return () => clearTimeout(s);
789
- }, [F, N]);
790
- const xe = Ye[I - 1] ?? null, ye = JSON.stringify(q), Q = l.useCallback(async () => {
791
- pe(!0), he(null);
797
+ }, [$, N]);
798
+ const ye = Je[Y - 1] ?? null, we = JSON.stringify(M), Z = l.useCallback(async () => {
799
+ fe(!0), be(null);
792
800
  try {
793
- const s = await n({ search: le, cursor: xe, pageSize: j, sort: ne, filters: q });
794
- ce(s.rows), de(s.nextCursor ?? s.cursor ?? null);
801
+ const s = await n({ search: se, cursor: ye, pageSize: L, sort: F, filters: M });
802
+ ue(s.rows), me(s.nextCursor ?? s.cursor ?? null);
795
803
  } catch (s) {
796
- he(s instanceof Error ? s.message : String(s)), ce([]), de(null);
804
+ be(s instanceof Error ? s.message : String(s)), ue([]), me(null);
797
805
  } finally {
798
- pe(!1);
806
+ fe(!1);
799
807
  }
800
- }, [le, xe, j, ne, ye, n]);
808
+ }, [se, ye, L, F, we, n]);
801
809
  l.useEffect(() => {
802
- Q();
803
- }, [Q]), l.useEffect(() => {
804
- z({ page: 1 }), me([null]);
805
- }, [le, j, ye]);
810
+ Z();
811
+ }, [Z]), l.useEffect(() => {
812
+ I({ page: 1 }), pe([null]);
813
+ }, [se, L, we]);
806
814
  const Qe = l.useMemo(
807
815
  () => r.filter((s) => s.filter).map((s) => ({
808
816
  key: s.key,
809
817
  label: typeof s.label == "string" ? s.label : s.key,
810
818
  type: s.filter === "numberrange" ? "number" : s.filter,
811
- options: _e(s.filterOptions ?? s.options)
819
+ options: qe(s.filterOptions ?? s.options)
812
820
  })),
813
821
  [r]
814
822
  ), Ze = (s, D) => {
815
- const U = { ...q, [s]: D };
816
- z({ filters: U }), R == null || R(U);
823
+ const V = { ...M, [s]: D };
824
+ I({ filters: V }), R == null || R(V);
817
825
  }, et = (s) => {
818
- z({ search: s }), $ == null || $(s);
826
+ I({ search: s }), z == null || z(s);
819
827
  }, tt = (s) => {
820
- z({ sort: s }), E == null || E(s);
828
+ I({ sort: s }), E == null || E(s);
821
829
  }, rt = (s, D) => {
822
830
  if (D === "next") {
823
- const U = ue;
824
- me((X) => {
825
- const te = [...X];
826
- return te[s - 1] = U, te;
831
+ const V = de;
832
+ pe((G) => {
833
+ const re = [...G];
834
+ return re[s - 1] = V, re;
827
835
  });
828
836
  }
829
- z({ page: s }), b == null || b(s);
837
+ I({ page: s }), b == null || b(s);
830
838
  }, at = l.useMemo(
831
839
  () => [
832
840
  ...r.filter((s) => !s.hidden),
833
- ...L("edit") || L("delete") ? [
841
+ ...K("edit") || K("delete") ? [
834
842
  {
835
843
  key: "actions",
836
844
  label: "",
837
845
  align: "right",
838
846
  render: (s) => /* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-1", children: [
839
- L("edit") ? /* @__PURE__ */ e(B, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => {
847
+ K("edit") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => {
840
848
  var D;
841
- return (D = Z.current) == null ? void 0 : D.call(Z, s);
849
+ return (D = ee.current) == null ? void 0 : D.call(ee, s);
842
850
  }, "data-testid": "resource-edit", children: /* @__PURE__ */ e(kt, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) }) : null,
843
- L("delete") ? /* @__PURE__ */ e(B, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: ve, onClick: () => {
851
+ K("delete") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: ge, onClick: () => {
844
852
  var D;
845
- return void ((D = ee.current) == null ? void 0 : D.call(ee, s));
853
+ return void ((D = te.current) == null ? void 0 : D.call(te, s));
846
854
  }, "data-testid": "resource-delete", children: /* @__PURE__ */ e(St, { className: "h-3.5 w-3.5 text-[var(--prui-danger)]", "aria-hidden": !0 }) }) : null
847
855
  ] })
848
856
  }
849
857
  ] : []
850
858
  ],
851
859
  // eslint-disable-next-line react-hooks/exhaustive-deps -- can() depends only on the action functions
852
- [r, a, o, h, ve]
860
+ [r, a, o, h, ge]
853
861
  ), nt = () => {
854
- be(null), W(!0);
855
- }, we = (s) => {
856
- be(s), W(!0);
857
- }, Ne = async (s) => {
858
- if (!(!await Ft({
862
+ ve(null), W(!0);
863
+ }, Ne = (s) => {
864
+ ve(s), W(!0);
865
+ }, ke = async (s) => {
866
+ if (!(!await It({
859
867
  title: `${c.delete} ${H}?`,
860
868
  message: c.deleteConfirmMessage,
861
869
  confirmText: c.delete,
862
870
  cancelText: c.cancel,
863
871
  type: "danger"
864
872
  }) || !h)) {
865
- ge(!0);
873
+ xe(!0);
866
874
  try {
867
- await h(s), await Q();
875
+ await h(s), await Z();
868
876
  } finally {
869
- ge(!1);
877
+ xe(!1);
870
878
  }
871
879
  }
872
- }, Z = l.useRef(we);
873
- Z.current = we;
874
- const ee = l.useRef(Ne);
880
+ }, ee = l.useRef(Ne);
875
881
  ee.current = Ne;
882
+ const te = l.useRef(ke);
883
+ te.current = ke;
876
884
  const lt = l.useCallback(
877
885
  (s, D) => String(y ? y(s, D) : s.id ?? D),
878
886
  [y]
879
- ), ke = x ?? rr(r, _), st = _ ? Object.fromEntries(
880
- ke.fields.map((s) => [s.name, _[s.name] ?? ""])
887
+ ), Se = x ?? ar(r, q), st = q ? Object.fromEntries(
888
+ Se.fields.map((s) => [s.name, q[s.name] ?? ""])
881
889
  ) : void 0, H = t.replace(/s$/, "");
882
890
  return /* @__PURE__ */ p("div", { className: C("prui-resource flex flex-col gap-2", f), "data-testid": "resource", children: [
883
891
  /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("h1", { className: "text-xl font-semibold capitalize text-[var(--prui-fg)]", children: t }) }),
884
892
  /* @__PURE__ */ e(
885
- It,
893
+ Lt,
886
894
  {
887
- searchPlaceholder: M ?? c.searchEntity.replace("{name}", t),
888
- searchValue: F,
895
+ searchPlaceholder: j ?? c.searchEntity.replace("{name}", t),
896
+ searchValue: $,
889
897
  onSearchChange: et,
890
898
  filters: Qe,
891
- filterValues: q,
899
+ filterValues: M,
892
900
  onFilterChange: Ze,
893
- actions: L("create") ? /* @__PURE__ */ p(B, { variant: "primary", size: "sm", onClick: nt, "data-testid": "resource-create", children: [
901
+ actions: K("create") ? /* @__PURE__ */ p(U, { variant: "primary", size: "sm", onClick: nt, "data-testid": "resource-create", children: [
894
902
  /* @__PURE__ */ e(Tt, { className: "h-4 w-4", "aria-hidden": !0 }),
895
903
  c.newEntity.replace("{name}", H)
896
904
  ] }) : void 0
897
905
  }
898
906
  ),
899
- fe ? /* @__PURE__ */ e("div", { role: "alert", "data-testid": "resource-error", className: "rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]", children: fe }) : null,
907
+ he ? /* @__PURE__ */ e("div", { role: "alert", "data-testid": "resource-error", className: "rounded-[var(--prui-radius)] border border-[var(--prui-danger)]/40 bg-[var(--prui-danger)]/10 px-3 py-2 text-sm text-[var(--prui-danger)]", children: he }) : null,
900
908
  /* @__PURE__ */ e(
901
- Lt,
909
+ Kt,
902
910
  {
903
911
  columns: at,
904
- rows: Je,
912
+ rows: Xe,
905
913
  rowKey: lt,
906
- sort: ne,
914
+ sort: F,
907
915
  onSortChange: tt,
908
- loading: We,
916
+ loading: Ye,
909
917
  selectable: v,
910
- selectedRowKeys: qe,
918
+ selectedRowKeys: le,
911
919
  onSelectionChange: (s, D) => {
912
- z({ selection: s }), O == null || O(s, D);
920
+ I({ selection: s }), O == null || O(s, D);
913
921
  },
914
922
  renderExpandedRow: i,
915
923
  expandedRowKeys: He,
916
- onExpandedRowsChange: (s) => z({ expandedRows: s }),
924
+ onExpandedRowsChange: (s) => I({ expandedRows: s }),
917
925
  virtualized: S
918
926
  }
919
927
  ),
920
928
  /* @__PURE__ */ e(
921
- Kt,
929
+ Bt,
922
930
  {
923
- page: I,
924
- pageSize: j,
925
- hasNextPage: ue != null,
926
- hasPreviousPage: I > 1,
931
+ page: Y,
932
+ pageSize: L,
933
+ hasNextPage: de != null,
934
+ hasPreviousPage: Y > 1,
927
935
  onPageChange: rt,
928
936
  onPageSizeChange: (s) => {
929
- z({ pageSize: s }), A == null || A(s);
937
+ I({ pageSize: s }), A == null || A(s);
930
938
  }
931
939
  }
932
940
  ),
933
- /* @__PURE__ */ p(ze, { open: Xe, onClose: () => W(!1), size: "sm", ariaLabel: _ ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H), noPadding: !0, children: [
934
- /* @__PURE__ */ e("div", { className: "px-8 pt-8 pb-2", children: /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", style: { color: "var(--prui-fg)" }, children: _ ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H) }) }),
941
+ /* @__PURE__ */ p($e, { open: We, onClose: () => W(!1), size: "sm", ariaLabel: q ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H), noPadding: !0, children: [
942
+ /* @__PURE__ */ e("div", { className: "px-8 pt-8 pb-2", children: /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", style: { color: "var(--prui-fg)" }, children: q ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H) }) }),
935
943
  /* @__PURE__ */ e("div", { className: "px-8 pb-8", children: k ?? /* @__PURE__ */ e(
936
- tr,
944
+ rr,
937
945
  {
938
- schema: ke,
946
+ schema: Se,
939
947
  initialValues: st,
940
948
  onCancel: () => W(!1),
941
949
  onSubmit: async (s) => {
942
- _ ? await (o == null ? void 0 : o(_, s)) : await (a == null ? void 0 : a(s)), W(!1), await Q();
950
+ q ? await (o == null ? void 0 : o(q, s)) : await (a == null ? void 0 : a(s)), W(!1), await Z();
943
951
  }
944
952
  }
945
953
  ) })
946
954
  ] })
947
955
  ] });
948
956
  }
949
- const Pr = {
957
+ const Or = {
950
958
  name: "Resource",
951
959
  props: [
952
960
  { name: "name", type: "string", default: null, control: "text" },
@@ -975,18 +983,18 @@ const Pr = {
975
983
  { name: "searchDebounce", type: "number (ms)", default: "250", control: "number" }
976
984
  ]
977
985
  };
978
- function Or({ items: t, className: r }) {
986
+ function Dr({ items: t, className: r }) {
979
987
  return /* @__PURE__ */ e("div", { className: C("prui-stat-row grid gap-3 sm:grid-cols-2 lg:grid-cols-4", r), children: t.map((n, a) => {
980
988
  const o = n.icon;
981
- return /* @__PURE__ */ p(Ie, { "data-testid": "stat-card", children: [
982
- /* @__PURE__ */ p(Le, { className: "pb-2", children: [
983
- /* @__PURE__ */ p(Ke, { className: "flex items-center gap-1.5 text-xs", children: [
989
+ return /* @__PURE__ */ p(Le, { "data-testid": "stat-card", children: [
990
+ /* @__PURE__ */ p(Ke, { className: "pb-2", children: [
991
+ /* @__PURE__ */ p(Be, { className: "flex items-center gap-1.5 text-xs", children: [
984
992
  o ? /* @__PURE__ */ e(o, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) : null,
985
993
  n.label
986
994
  ] }),
987
- /* @__PURE__ */ e(Be, { className: "text-2xl", children: n.value })
995
+ /* @__PURE__ */ e(Ue, { className: "text-2xl", children: n.value })
988
996
  ] }),
989
- n.delta ? /* @__PURE__ */ e(Ue, { className: "pb-3", children: /* @__PURE__ */ e(
997
+ n.delta ? /* @__PURE__ */ e(Ve, { className: "pb-3", children: /* @__PURE__ */ e(
990
998
  "span",
991
999
  {
992
1000
  className: C(
@@ -1001,23 +1009,23 @@ function Or({ items: t, className: r }) {
1001
1009
  ] }, `${n.label}-${a}`);
1002
1010
  }) });
1003
1011
  }
1004
- const Dr = {
1012
+ const Ar = {
1005
1013
  name: "StatRow",
1006
1014
  props: [
1007
1015
  { name: "items", type: "StatItem[]", default: null, control: "object" },
1008
1016
  { name: "className", type: "string", default: "undefined", control: "text" }
1009
1017
  ]
1010
1018
  };
1011
- function nr(t) {
1019
+ function lr(t) {
1012
1020
  if (t)
1013
1021
  return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
1014
1022
  }
1015
- function lr({ field: t }) {
1023
+ function sr({ field: t }) {
1016
1024
  const { name: r, type: n, value: a, onChange: o } = t;
1017
1025
  if (!n || !r) return null;
1018
1026
  const m = `prui-settings-${r}`;
1019
1027
  return n === "switch" ? /* @__PURE__ */ e("label", { className: "flex items-center gap-2", htmlFor: m, children: /* @__PURE__ */ e(
1020
- Fe,
1028
+ Ie,
1021
1029
  {
1022
1030
  id: m,
1023
1031
  checked: !!a,
@@ -1025,17 +1033,17 @@ function lr({ field: t }) {
1025
1033
  "aria-label": t.label
1026
1034
  }
1027
1035
  ) }) : n === "select" ? /* @__PURE__ */ e(
1028
- $e,
1036
+ Fe,
1029
1037
  {
1030
1038
  id: m,
1031
1039
  className: "w-56",
1032
- options: nr(t.options) ?? [],
1040
+ options: lr(t.options) ?? [],
1033
1041
  value: String(a ?? ""),
1034
1042
  onChange: (d) => o == null ? void 0 : o(Array.isArray(d) ? d.join(",") : d),
1035
1043
  "aria-label": t.label
1036
1044
  }
1037
1045
  ) : /* @__PURE__ */ e(
1038
- oe,
1046
+ ce,
1039
1047
  {
1040
1048
  id: m,
1041
1049
  type: n === "number" ? "number" : "text",
@@ -1046,7 +1054,7 @@ function lr({ field: t }) {
1046
1054
  }
1047
1055
  );
1048
1056
  }
1049
- function Ar({ title: t = "Settings", sections: r, className: n }) {
1057
+ function zr({ title: t = "Settings", sections: r, className: n }) {
1050
1058
  return /* @__PURE__ */ p("div", { className: C("prui-settings mx-auto flex w-full max-w-4xl flex-col gap-6", n), children: [
1051
1059
  /* @__PURE__ */ e("h1", { className: "text-xl font-semibold text-[var(--prui-fg)]", children: t }),
1052
1060
  /* @__PURE__ */ p("div", { className: "flex flex-col gap-6 md:flex-row", children: [
@@ -1058,30 +1066,30 @@ function Ar({ title: t = "Settings", sections: r, className: n }) {
1058
1066
  children: a.title ?? a.label ?? a.id
1059
1067
  }
1060
1068
  ) }, a.id)) }) }),
1061
- /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: r.map((a) => /* @__PURE__ */ p(Ie, { id: `settings-${a.id}`, "data-testid": "settings-section", children: [
1062
- /* @__PURE__ */ p(Le, { children: [
1063
- /* @__PURE__ */ e(Be, { children: a.title ?? a.label ?? a.id }),
1064
- a.description ? /* @__PURE__ */ e(Ke, { children: a.description }) : null
1069
+ /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: r.map((a) => /* @__PURE__ */ p(Le, { id: `settings-${a.id}`, "data-testid": "settings-section", children: [
1070
+ /* @__PURE__ */ p(Ke, { children: [
1071
+ /* @__PURE__ */ e(Ue, { children: a.title ?? a.label ?? a.id }),
1072
+ a.description ? /* @__PURE__ */ e(Be, { children: a.description }) : null
1065
1073
  ] }),
1066
- /* @__PURE__ */ e(Ue, { children: a.content ?? /* @__PURE__ */ e("dl", { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: (a.fields ?? []).map((o, m) => /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between", children: [
1074
+ /* @__PURE__ */ e(Ve, { children: a.content ?? /* @__PURE__ */ e("dl", { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: (a.fields ?? []).map((o, m) => /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between", children: [
1067
1075
  /* @__PURE__ */ p("div", { className: "min-w-0", children: [
1068
1076
  /* @__PURE__ */ e("dt", { className: "text-sm font-medium text-[var(--prui-fg)]", children: o.label }),
1069
1077
  o.description ? /* @__PURE__ */ e("dd", { className: "text-xs text-[var(--prui-dim)]", children: o.description }) : null
1070
1078
  ] }),
1071
- /* @__PURE__ */ e("div", { className: "shrink-0", children: o.control ?? /* @__PURE__ */ e(lr, { field: o }) })
1079
+ /* @__PURE__ */ e("div", { className: "shrink-0", children: o.control ?? /* @__PURE__ */ e(sr, { field: o }) })
1072
1080
  ] }, `${o.label}-${m}`)) }) })
1073
1081
  ] }, a.id)) })
1074
1082
  ] })
1075
1083
  ] });
1076
1084
  }
1077
- const zr = {
1085
+ const $r = {
1078
1086
  name: "Settings",
1079
1087
  props: [
1080
1088
  { name: "title", type: "string", default: "'Settings'", control: "text" },
1081
1089
  { name: "sections", type: "SettingsSection[]", default: null, control: "object" }
1082
1090
  ]
1083
1091
  }, je = ["mousedown", "keydown", "scroll", "touchstart", "click"];
1084
- function sr({
1092
+ function ir({
1085
1093
  timeout: t = 15,
1086
1094
  warningTime: r = 2,
1087
1095
  onTimeout: n,
@@ -1089,15 +1097,15 @@ function sr({
1089
1097
  title: o = "Session expiring soon",
1090
1098
  message: m = "Your session is about to expire due to inactivity."
1091
1099
  }) {
1092
- const d = Math.max(0, t) * 6e4, T = Math.min(Math.max(0, r) * 6e4, d), [k, x] = l.useState(!1), [y, M] = l.useState(T), w = l.useRef(null), P = l.useRef(null), g = l.useRef(null), u = l.useRef(!1), b = l.useCallback(() => {
1100
+ const d = Math.max(0, t) * 6e4, T = Math.min(Math.max(0, r) * 6e4, d), [k, x] = l.useState(!1), [y, j] = l.useState(T), w = l.useRef(null), P = l.useRef(null), g = l.useRef(null), u = l.useRef(!1), b = l.useCallback(() => {
1093
1101
  for (const i of [w, P, g])
1094
1102
  i.current != null && (clearInterval(i.current), clearTimeout(i.current), i.current = null);
1095
1103
  }, []), R = l.useCallback(() => {
1096
1104
  b(), x(!1), n == null || n();
1097
1105
  }, [b, n]), E = l.useCallback(() => {
1098
1106
  b(), x(!1), u.current = !1, w.current = window.setTimeout(() => {
1099
- u.current = !0, M(T), x(!0), g.current = window.setInterval(() => {
1100
- M((i) => i <= 1e3 ? (R(), 0) : i - 1e3);
1107
+ u.current = !0, j(T), x(!0), g.current = window.setInterval(() => {
1108
+ j((i) => i <= 1e3 ? (R(), 0) : i - 1e3);
1101
1109
  }, 1e3);
1102
1110
  }, d - T), P.current = window.setTimeout(R, d);
1103
1111
  }, [b, R, d, T]);
@@ -1111,14 +1119,14 @@ function sr({
1111
1119
  for (const S of je) document.removeEventListener(S, i);
1112
1120
  };
1113
1121
  }, [E, b]);
1114
- const $ = () => {
1122
+ const z = () => {
1115
1123
  a == null || a(), E();
1116
1124
  }, A = Math.floor(y / 6e4), O = Math.floor(y % 6e4 / 1e3), v = `${A}:${String(O).padStart(2, "0")}`;
1117
1125
  return /* @__PURE__ */ p(
1118
- ze,
1126
+ $e,
1119
1127
  {
1120
1128
  open: k,
1121
- onClose: $,
1129
+ onClose: z,
1122
1130
  size: "sm",
1123
1131
  ariaLabel: o,
1124
1132
  children: [
@@ -1129,14 +1137,14 @@ function sr({
1129
1137
  /* @__PURE__ */ e("div", { className: "py-4 font-mono text-4xl font-bold text-[var(--prui-fg)]", "data-testid": "session-countdown", children: v })
1130
1138
  ] }),
1131
1139
  /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 px-8 pb-8 sm:flex-row", children: [
1132
- /* @__PURE__ */ e(B, { variant: "default", className: "flex-1", onClick: R, "data-testid": "session-logout", children: "Log out now" }),
1133
- /* @__PURE__ */ e(B, { variant: "primary", className: "flex-1", onClick: $, "data-testid": "session-extend", children: "Continue session" })
1140
+ /* @__PURE__ */ e(U, { variant: "default", className: "flex-1", onClick: R, "data-testid": "session-logout", children: "Log out now" }),
1141
+ /* @__PURE__ */ e(U, { variant: "primary", className: "flex-1", onClick: z, "data-testid": "session-extend", children: "Continue session" })
1134
1142
  ] })
1135
1143
  ]
1136
1144
  }
1137
1145
  );
1138
1146
  }
1139
- const ir = {
1147
+ const or = {
1140
1148
  name: "SessionTimeout",
1141
1149
  props: [
1142
1150
  { name: "timeout", type: "number", default: "15", control: "number" },
@@ -1144,12 +1152,12 @@ const ir = {
1144
1152
  { name: "onTimeout", type: "() => void", default: null, control: "none" },
1145
1153
  { name: "onExtend", type: "() => void", default: null, control: "none" }
1146
1154
  ]
1147
- }, or = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1155
+ }, cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1148
1156
  __proto__: null,
1149
- SessionTimeout: sr,
1150
- sessionTimeoutPropsMeta: ir
1157
+ SessionTimeout: ir,
1158
+ sessionTimeoutPropsMeta: or
1151
1159
  }, Symbol.toStringTag, { value: "Module" }));
1152
- function $r({ title: t, description: r, brand: n, width: a = "max-w-sm", footer: o, children: m, className: d }) {
1160
+ function Fr({ title: t, description: r, brand: n, width: a = "max-w-sm", footer: o, children: m, className: d }) {
1153
1161
  return /* @__PURE__ */ e("div", { className: C("prui-auth-shell flex min-h-[100dvh] items-center justify-center bg-[var(--prui-background)] p-4", d), "data-testid": "auth-shell", children: /* @__PURE__ */ p("div", { className: C("w-full", a), children: [
1154
1162
  n ? /* @__PURE__ */ p("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "auth-shell-brand", children: [
1155
1163
  n.mark ? /* @__PURE__ */ e("img", { src: n.mark, alt: "", className: "h-8 w-8 rounded-[var(--prui-radius-1)] object-cover" }) : null,
@@ -1165,7 +1173,7 @@ function $r({ title: t, description: r, brand: n, width: a = "max-w-sm", footer:
1165
1173
  ] })
1166
1174
  ] }) });
1167
1175
  }
1168
- const Fr = {
1176
+ const Ir = {
1169
1177
  name: "AuthShell",
1170
1178
  props: [
1171
1179
  { name: "title", type: "string", default: null, control: "text" },
@@ -1177,23 +1185,23 @@ const Fr = {
1177
1185
  ]
1178
1186
  };
1179
1187
  export {
1180
- Rr as A,
1181
- Gt as C,
1182
- tr as F,
1183
- Mr as R,
1184
- sr as S,
1185
- Qt as a,
1186
- $r as b,
1187
- qt as c,
1188
- Ar as d,
1189
- Re as e,
1190
- Or as f,
1191
- Er as g,
1192
- Fr as h,
1188
+ Er as A,
1189
+ Qt as C,
1190
+ rr as F,
1191
+ Pr as R,
1192
+ ir as S,
1193
+ Zt as a,
1194
+ Fr as b,
1195
+ Ht as c,
1196
+ zr as d,
1197
+ Ee as e,
1198
+ Dr as f,
1199
+ Mr as g,
1200
+ Ir as h,
1193
1201
  jr as i,
1194
- zr as j,
1195
- Dr as k,
1196
- Pr as r,
1197
- ir as s,
1202
+ $r as j,
1203
+ Ar as k,
1204
+ Or as r,
1205
+ or as s,
1198
1206
  Jt as u
1199
1207
  };