@skiddph/prui 0.10.1 → 0.11.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 f, 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 ke, 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 Se } from "../core/list-nav.js";
11
- import { resolveThemeName as Ot, themeMode as Dt, readPersistedTheme as At, applyTheme as Te, 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 ie } 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: a, children: n }) {
35
- const r = t === "auth" || t === "auth+utility", o = t === "utility" || t === "auth+utility", m = [
36
- ...r ? Vt : [],
37
- ...o ? _t : []
34
+ function Ht({ mode: t, config: r, children: n }) {
35
+ const a = t === "auth" || t === "auth+utility", o = t === "utility" || t === "auth+utility", m = [
36
+ ...a ? _t : [],
37
+ ...o ? qt : []
38
38
  ], [d, T] = l.useState(null);
39
39
  return l.useEffect(() => {
40
40
  let k = !1;
@@ -43,32 +43,32 @@ function qt({ mode: t, config: a, children: n }) {
43
43
  }), () => {
44
44
  k = !0;
45
45
  };
46
- }, []), d ? /* @__PURE__ */ f(ct, { children: [
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(ke, { path: k, element: /* @__PURE__ */ e(y, { ...(a == null ? void 0 : a[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
- r ? /* @__PURE__ */ e(ke, { 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 a = t !== !1, n = typeof t == "object" ? t : {}, r = n.persist !== !1, o = Ot(n.default ?? "control"), m = Dt(o), [d, T] = l.useState(() => (r ? 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), Te({ theme: x.theme, mode: x.mode, storageKey: r ? "prui:theme" : null });
61
+ T(x), Re({ theme: x.theme, mode: x.mode, storageKey: a ? "prui:theme" : null });
62
62
  },
63
- [r]
63
+ [a]
64
64
  );
65
65
  return l.useEffect(() => {
66
- Te({ theme: d.theme, mode: d.mode, storageKey: r ? "prui:theme" : null });
67
- }, [d, r]), { enabled: a, state: d, setTheme: k };
66
+ Re({ theme: d.theme, mode: d.mode, storageKey: a ? "prui:theme" : null });
67
+ }, [d, a]), { enabled: r, state: d, setTheme: k };
68
68
  }
69
69
  function Yt({ config: t }) {
70
- const { enabled: a, state: n, setTheme: r } = Jt(t), { t: o } = J();
71
- return a ? /* @__PURE__ */ e(
70
+ const { enabled: r, state: n, setTheme: a } = Jt(t), { t: o } = X();
71
+ return r ? /* @__PURE__ */ e(
72
72
  Rt,
73
73
  {
74
74
  align: "end",
@@ -83,36 +83,36 @@ 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(), r({ 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, a) {
96
- return a === "/" ? t === "/" : t === a || t.startsWith(a + "/");
95
+ function ie(t, r) {
96
+ return r === "/" ? t === "/" : t === r || t.startsWith(r + "/");
97
97
  }
98
- function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
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());
115
- }, [y]), r) {
115
+ }, [y]), a) {
116
116
  const v = [];
117
117
  for (const c of t.items ?? [])
118
118
  if ((O = c.items) != null && O.length) {
@@ -123,40 +123,40 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
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();
139
- }, p = (c) => {
138
+ (_ = Array.from(h)[c]) == null || _.focus();
139
+ }, f = (c) => {
140
140
  const h = i.length;
141
141
  switch (c.key) {
142
142
  case "ArrowDown":
143
- c.preventDefault(), N(Se(b, 1, h));
143
+ c.preventDefault(), N(Ce(b, 1, h));
144
144
  break;
145
145
  case "ArrowUp":
146
- c.preventDefault(), N(Se(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();
156
156
  break;
157
157
  }
158
158
  };
159
- return /* @__PURE__ */ f("li", { "data-testid": "nav-group", children: [
159
+ return /* @__PURE__ */ p("li", { "data-testid": "nav-group", children: [
160
160
  /* @__PURE__ */ e(
161
161
  "button",
162
162
  {
@@ -178,18 +178,18 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
178
178
  }
179
179
  ),
180
180
  y && w ? ot(
181
- /* @__PURE__ */ f(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
- /* @__PURE__ */ f(
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,
191
191
  tabIndex: -1,
192
- onKeyDown: p,
192
+ onKeyDown: f,
193
193
  "data-testid": "rail-flyout",
194
194
  className: "fixed z-[calc(var(--prui-z-flyout)+1)] flex w-56 max-h-80 flex-col overflow-y-auto rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] py-1.5 shadow-[var(--prui-shadow-lg)] outline-none",
195
195
  style: { top: w.top, left: w.left },
@@ -205,10 +205,10 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
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
- E(), a == null || a(), c.href && m(c.href);
211
+ E(), r == null || r(), c.href && m(c.href);
212
212
  },
213
213
  children: c.label
214
214
  },
@@ -223,8 +223,8 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
223
223
  ) : null
224
224
  ] });
225
225
  }
226
- return /* @__PURE__ */ f("li", { "data-testid": "nav-group", children: [
227
- /* @__PURE__ */ f(
226
+ return /* @__PURE__ */ p("li", { "data-testid": "nav-group", children: [
227
+ /* @__PURE__ */ p(
228
228
  "button",
229
229
  {
230
230
  type: "button",
@@ -241,18 +241,18 @@ function Wt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
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: a, nested: !0, expandAllOn: n, collapsed: r }, 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: a, nested: n, expandAllOn: r, collapsed: o }) {
251
- return t.items && t.items.length > 0 ? /* @__PURE__ */ e(Wt, { item: t, onNavigate: a, expandAllOn: r, collapsed: o }) : t.heading || !t.href && !t.items ? o ? null : /* @__PURE__ */ e(Xt, { label: t.label }) : t.href ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ f(
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,
255
- onClick: a,
255
+ onClick: r,
256
256
  className: ({ isActive: m }) => C(
257
257
  "flex items-center gap-2 rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm",
258
258
  n && "pl-2.5",
@@ -265,46 +265,46 @@ function Ve({ item: t, onNavigate: a, nested: n, expandAllOn: r, collapsed: o })
265
265
  }
266
266
  ) }) : null;
267
267
  }
268
- function Ce({ nav: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
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: a, expandAllOn: n, collapsed: r }, 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 Re({ brand: t }) {
272
+ function oe({ brand: t }) {
273
273
  if (!t) return null;
274
- const a = /* @__PURE__ */ f(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
- return t.href === null ? /* @__PURE__ */ e("div", { className: n, children: a }) : /* @__PURE__ */ e(ft, { to: t.href ?? "/", className: n, "aria-label": t.name, children: a });
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
- onOpenChange: a,
282
+ onOpenChange: r,
283
283
  entries: n,
284
- placeholder: r,
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 = r ?? 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
- onEscape: () => a(!1),
294
+ onEscape: () => r(!1),
295
295
  initialFocus: y
296
296
  }), g = (u) => {
297
- a(!1), u.onSelect ? u.onSelect() : u.href && (o == null || o(u.href));
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",
303
303
  style: { backgroundColor: "var(--prui-scrim)" },
304
304
  onMouseDown: (u) => {
305
- u.target === u.currentTarget && a(!1);
305
+ u.target === u.currentTarget && r(!1);
306
306
  },
307
- children: /* @__PURE__ */ f(
307
+ children: /* @__PURE__ */ p(
308
308
  "div",
309
309
  {
310
310
  role: "dialog",
@@ -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) => {
@@ -335,7 +335,7 @@ function Gt({
335
335
  className: "w-full bg-transparent px-4 py-3 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)] outline-none border-b border-[var(--prui-line)] rounded-t-[var(--prui-radius)]"
336
336
  }
337
337
  ),
338
- /* @__PURE__ */ e("ul", { id: "prui-palette-listbox", role: "listbox", "aria-label": "Commands", className: "max-h-64 overflow-auto p-1", children: w.length === 0 ? /* @__PURE__ */ e("li", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: m.commandNoMatches }) : w.map((u, b) => /* @__PURE__ */ f(
338
+ /* @__PURE__ */ e("ul", { id: "prui-palette-listbox", role: "listbox", "aria-label": "Commands", className: "max-h-64 overflow-auto p-1", children: w.length === 0 ? /* @__PURE__ */ e("li", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", role: "option", "aria-selected": "false", "aria-disabled": "true", children: m.commandNoMatches }) : w.map((u, b) => /* @__PURE__ */ p(
339
339
  "li",
340
340
  {
341
341
  id: `palette-option-${b}`,
@@ -360,11 +360,11 @@ function Gt({
360
360
  }
361
361
  ) }) }) : null;
362
362
  }
363
- function Qt(t) {
363
+ function Zt(t) {
364
364
  const {
365
- brand: a,
365
+ brand: r,
366
366
  nav: n = [],
367
- search: r = !0,
367
+ search: a = !0,
368
368
  theme: o = !0,
369
369
  auth: m = !1,
370
370
  sidebar: d = {},
@@ -372,122 +372,133 @@ 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 r == "object" ? r : { enabled: r !== !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), p = 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(p.pathname);
401
+ const _ = l.useRef(f.pathname);
402
402
  l.useEffect(() => {
403
- V.current !== p.pathname && (V.current = p.pathname, O(!1));
404
- }, [p.pathname]);
405
- const Y = l.useRef(null), { ref: re } = De({
403
+ _.current !== f.pathname && (_.current = f.pathname, O(!1));
404
+ }, [f.pathname]);
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";
410
- return /* @__PURE__ */ f(
408
+ initialFocus: J
409
+ }), { mounted: ne, shown: I } = Et(A), Y = d.width ?? 240, L = !v && j !== "D";
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
- /* @__PURE__ */ f("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(Ce, { nav: n, expandAllOn: y, collapsed: z }) }),
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(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__ */ f("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
  }
450
454
  ),
451
- /* @__PURE__ */ f(
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
- /* @__PURE__ */ e("div", { className: "mb-2 flex h-10 items-center justify-end px-1", children: /* @__PURE__ */ e(
460
- "button",
461
- {
462
- type: "button",
463
- ref: Y,
464
- "aria-label": u.closeNavigation,
465
- onClick: () => O(!1),
466
- className: "rounded-[var(--prui-radius)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] cursor-pointer",
467
- children: /* @__PURE__ */ e(gt, { className: "h-4 w-4", "aria-hidden": !0 })
468
- }
469
- ) }),
470
- /* @__PURE__ */ e(Ce, { nav: n, onNavigate: () => O(!1), expandAllOn: y, collapsed: !1 })
467
+ /* @__PURE__ */ p("div", { className: C("mb-2 flex h-10 items-center gap-2 px-1", r ? "justify-between" : "justify-end"), children: [
468
+ r ? /* @__PURE__ */ e("div", { className: "min-w-0", onClick: () => O(!1), children: /* @__PURE__ */ e(oe, { brand: r }) }) : null,
469
+ /* @__PURE__ */ e(
470
+ "button",
471
+ {
472
+ type: "button",
473
+ ref: J,
474
+ "aria-label": u.closeNavigation,
475
+ onClick: () => O(!1),
476
+ className: "rounded-[var(--prui-radius)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] cursor-pointer",
477
+ children: /* @__PURE__ */ e(gt, { className: "h-4 w-4", "aria-hidden": !0 })
478
+ }
479
+ )
480
+ ] }),
481
+ /* @__PURE__ */ e(Ee, { nav: n, onNavigate: () => O(!1), expandAllOn: y, collapsed: !1 })
471
482
  ]
472
483
  }
473
484
  )
474
485
  ] }) }) : null,
475
- M === "C" ? /* @__PURE__ */ e(
486
+ j === "C" ? /* @__PURE__ */ e(
476
487
  "div",
477
488
  {
478
489
  "data-testid": "sidebar-header",
479
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",
480
- children: w ?? /* @__PURE__ */ e(Re, { brand: a })
491
+ children: w ?? /* @__PURE__ */ e(oe, { brand: r })
481
492
  }
482
493
  ) : null,
483
- /* @__PURE__ */ f(
494
+ /* @__PURE__ */ p(
484
495
  "header",
485
496
  {
486
497
  "data-testid": "app-header",
487
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",
488
499
  children: [
489
- $ ? /* @__PURE__ */ e(
490
- B,
500
+ z ? /* @__PURE__ */ e(
501
+ U,
491
502
  {
492
503
  variant: "ghost",
493
504
  size: "icon",
@@ -498,8 +509,8 @@ function Qt(t) {
498
509
  children: /* @__PURE__ */ e(xt, { className: "h-4 w-4", "aria-hidden": !0 })
499
510
  }
500
511
  ) : null,
501
- /* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(Re, { brand: a }) }),
502
- R ? /* @__PURE__ */ f(
512
+ /* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(oe, { brand: r }) }),
513
+ R ? /* @__PURE__ */ p(
503
514
  "button",
504
515
  {
505
516
  type: "button",
@@ -513,7 +524,7 @@ function Qt(t) {
513
524
  ]
514
525
  }
515
526
  ) : null,
516
- /* @__PURE__ */ f("div", { className: "flex items-center gap-2 justify-self-end", children: [
527
+ /* @__PURE__ */ p("div", { className: "flex items-center gap-2 justify-self-end", children: [
517
528
  T,
518
529
  /* @__PURE__ */ e(Yt, { config: o })
519
530
  ] })
@@ -526,27 +537,27 @@ function Qt(t) {
526
537
  "data-testid": "app-content",
527
538
  tabIndex: 0,
528
539
  className: "prui-shell-content min-h-0 flex-1 p-4 outline-none md:p-6",
529
- 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, {})
530
541
  }
531
542
  ),
532
543
  h ? /* @__PURE__ */ e(l.Suspense, { fallback: null, children: /* @__PURE__ */ e(
533
- Ht,
544
+ Xt,
534
545
  {
535
546
  timeout: h.sessionTimeout,
536
547
  warningTime: h.warningTime,
537
- onTimeout: K
548
+ onTimeout: B
538
549
  }
539
550
  ) }) : null,
540
- 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
541
552
  ]
542
553
  }
543
554
  );
544
555
  }
545
- function Rr(t) {
546
- const { router: a = "browser", initialEntries: n } = t;
547
- return /* @__PURE__ */ e(a === "memory" ? dt : mt, { initialEntries: n, children: /* @__PURE__ */ e(Qt, { ...t }) });
556
+ function Er(t) {
557
+ const { router: r = "browser", initialEntries: n } = t;
558
+ return /* @__PURE__ */ e(r === "memory" ? dt : mt, { initialEntries: n, children: /* @__PURE__ */ e(Zt, { ...t }) });
548
559
  }
549
- const Er = {
560
+ const Mr = {
550
561
  name: "App",
551
562
  props: [
552
563
  { name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
@@ -566,131 +577,131 @@ const Er = {
566
577
  { name: "children", type: "ReactNode", default: "Outlet", control: "none" }
567
578
  ]
568
579
  };
569
- function Zt(t) {
580
+ function er(t) {
570
581
  return Array.isArray(t) ? { fields: t } : t;
571
582
  }
572
- function er(t) {
583
+ function tr(t) {
573
584
  if (t)
574
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
585
+ return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
575
586
  }
576
- function Ee(t, a) {
587
+ function Me(t, r) {
577
588
  const n = {};
578
- for (const r of t.fields)
579
- a && r.name in a ? n[r.name] = a[r.name] : r.defaultValue !== void 0 ? n[r.name] = r.defaultValue : r.type === "boolean" ? n[r.name] = !1 : n[r.name] = "";
589
+ for (const a of t.fields)
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] = "";
580
591
  return n;
581
592
  }
582
- function tr({
593
+ function rr({
583
594
  schema: t,
584
- initialValues: a,
595
+ initialValues: r,
585
596
  defaultValues: n,
586
- onSubmit: r,
597
+ onSubmit: a,
587
598
  onCancel: o,
588
599
  cancelLabel: m,
589
600
  submitting: d = !1,
590
601
  error: T,
591
602
  className: k
592
603
  }) {
593
- const { t: x } = J(), y = l.useMemo(() => Zt(t), [t]), M = a ?? 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);
594
605
  l.useEffect(() => {
595
- P(Ee(y, M));
596
- }, [JSON.stringify(y), JSON.stringify(M ?? {})]);
606
+ P(Me(y, j));
607
+ }, [JSON.stringify(y), JSON.stringify(j ?? {})]);
597
608
  const A = (i, S) => {
598
609
  P((N) => ({ ...N, [i]: S })), u((N) => {
599
610
  if (!N[i]) return N;
600
- const p = { ...N };
601
- return delete p[i], p;
611
+ const f = { ...N };
612
+ return delete f[i], f;
602
613
  });
603
614
  }, O = async (i) => {
604
615
  var N;
605
616
  i.preventDefault();
606
617
  const S = {};
607
- for (const p of y.fields) {
608
- if (p.required) {
609
- const h = w[p.name];
610
- (h === "" || h == null || Array.isArray(h) && h.length === 0) && (S[p.name] = x.requiredField.replace("{label}", p.label));
618
+ for (const f of y.fields) {
619
+ if (f.required) {
620
+ const h = w[f.name];
621
+ (h === "" || h == null || Array.isArray(h) && h.length === 0) && (S[f.name] = x.requiredField.replace("{label}", f.label));
611
622
  }
612
- const c = (N = p.validate) == null ? void 0 : N.call(p, w[p.name], w);
613
- c && (S[p.name] = c);
623
+ const c = (N = f.validate) == null ? void 0 : N.call(f, w[f.name], w);
624
+ c && (S[f.name] = c);
614
625
  }
615
626
  if (u(S), !(Object.keys(S).length > 0)) {
616
627
  R(null);
617
628
  try {
618
- const p = r == null ? void 0 : r({ ...w });
619
- p && typeof p.then == "function" && ($(!0), await p);
620
- } catch (p) {
621
- R(p instanceof Error ? p.message : String(p));
629
+ const f = a == null ? void 0 : a({ ...w });
630
+ f && typeof f.then == "function" && (z(!0), await f);
631
+ } catch (f) {
632
+ R(f instanceof Error ? f.message : String(f));
622
633
  } finally {
623
- $(!1);
634
+ z(!1);
624
635
  }
625
636
  }
626
637
  }, v = d || E;
627
- return /* @__PURE__ */ f("form", { onSubmit: O, className: C("prui-form flex flex-col gap-4", k), noValidate: !0, children: [
638
+ return /* @__PURE__ */ p("form", { onSubmit: O, className: C("prui-form flex flex-col gap-4", k), noValidate: !0, children: [
628
639
  /* @__PURE__ */ e("div", { className: C("grid gap-4", y.columns === 2 && "md:grid-cols-2"), children: y.fields.map((i) => {
629
640
  const S = g[i.name], N = {
630
641
  id: `prui-form-${i.name}`,
631
642
  "aria-invalid": S ? !0 : void 0,
632
643
  "aria-describedby": S ? `prui-form-${i.name}-error` : void 0
633
644
  };
634
- return /* @__PURE__ */ f("div", { className: C("flex flex-col gap-1.5", i.colSpan === 2 && "md:col-span-2", i.className), children: [
635
- /* @__PURE__ */ f(Ut, { htmlFor: N.id, children: [
645
+ return /* @__PURE__ */ p("div", { className: C("flex flex-col gap-1.5", i.colSpan === 2 && "md:col-span-2", i.className), children: [
646
+ /* @__PURE__ */ p(Vt, { htmlFor: N.id, children: [
636
647
  i.label,
637
648
  i.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
638
649
  ] }),
639
650
  i.type === "textarea" ? /* @__PURE__ */ e(
640
- Bt,
651
+ Ut,
641
652
  {
642
653
  ...N,
643
654
  placeholder: i.placeholder,
644
655
  disabled: i.disabled || v,
645
656
  value: String(w[i.name] ?? ""),
646
- onChange: (p) => A(i.name, p.target.value)
657
+ onChange: (f) => A(i.name, f.target.value)
647
658
  }
648
659
  ) : i.type === "select" ? /* @__PURE__ */ e(
649
- $e,
660
+ Fe,
650
661
  {
651
662
  ...N,
652
- options: er(i.options),
663
+ options: tr(i.options),
653
664
  placeholder: i.placeholder,
654
665
  disabled: i.disabled || v,
655
666
  value: String(w[i.name] ?? ""),
656
- onChange: (p) => A(i.name, p)
667
+ onChange: (f) => A(i.name, f)
657
668
  }
658
669
  ) : i.type === "date" ? /* @__PURE__ */ e(
659
- ie,
670
+ ce,
660
671
  {
661
672
  ...N,
662
673
  type: "date",
663
674
  placeholder: i.placeholder,
664
675
  disabled: i.disabled || v,
665
676
  value: String(w[i.name] ?? ""),
666
- onChange: (p) => A(i.name, p.target.value)
677
+ onChange: (f) => A(i.name, f.target.value)
667
678
  }
668
679
  ) : i.type === "boolean" ? /* @__PURE__ */ e(
669
- Fe,
680
+ Ie,
670
681
  {
671
682
  ...N,
672
683
  disabled: i.disabled || v,
673
684
  checked: !!w[i.name],
674
- onChange: (p) => A(i.name, p)
685
+ onChange: (f) => A(i.name, f)
675
686
  }
676
687
  ) : /* @__PURE__ */ e(
677
- ie,
688
+ ce,
678
689
  {
679
690
  ...N,
680
691
  type: i.type ?? "text",
681
692
  placeholder: i.placeholder,
682
693
  disabled: i.disabled || v,
683
694
  value: String(w[i.name] ?? ""),
684
- onChange: (p) => A(i.name, i.type === "number" ? p.target.value === "" ? "" : Number(p.target.value) : p.target.value)
695
+ onChange: (f) => A(i.name, i.type === "number" ? f.target.value === "" ? "" : Number(f.target.value) : f.target.value)
685
696
  }
686
697
  ),
687
698
  S ? /* @__PURE__ */ e("p", { id: `prui-form-${i.name}-error`, role: "alert", className: "text-xs text-[var(--prui-danger)]", children: S }) : null
688
699
  ] }, i.name);
689
700
  }) }),
690
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,
691
- /* @__PURE__ */ f("div", { className: "flex items-center justify-end gap-2", children: [
692
- o ? /* @__PURE__ */ e(B, { type: "button", variant: "ghost", onClick: o, disabled: v, children: m ?? x.cancel }) : null,
693
- /* @__PURE__ */ e(B, { type: "submit", variant: "primary", loading: v, children: y.submitLabel ?? "Submit" })
702
+ /* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-2", children: [
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" })
694
705
  ] })
695
706
  ] });
696
707
  }
@@ -705,30 +716,30 @@ const jr = {
705
716
  { name: "error", type: "string | null", default: "null", control: "text" }
706
717
  ]
707
718
  };
708
- function _e(t) {
719
+ function qe(t) {
709
720
  if (t)
710
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
721
+ return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
711
722
  }
712
- function rr(t, a) {
713
- return { fields: t.filter((r) => r.formField !== !1 && !r.hidden).filter((r) => r.key !== "id" && r.key !== "actions").map((r) => {
723
+ function ar(t, r) {
724
+ return { fields: t.filter((a) => a.formField !== !1 && !a.hidden).filter((a) => a.key !== "id" && a.key !== "actions").map((a) => {
714
725
  var o;
715
726
  return {
716
- name: r.key,
717
- label: typeof r.label == "string" ? r.label : r.key,
718
- type: ar(r, a),
719
- options: (o = _e(r.filterOptions ?? r.options)) == null ? void 0 : o.map((m) => ({ label: m.label, value: m.value })),
727
+ name: a.key,
728
+ label: typeof a.label == "string" ? a.label : a.key,
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 })),
720
731
  required: !1
721
732
  };
722
- }), submitLabel: a ? "Save" : "Create" };
733
+ }), submitLabel: r ? "Save" : "Create" };
723
734
  }
724
- function ar(t, a) {
725
- return t.filter === "select" ? "select" : typeof (a == null ? void 0 : a[t.key]) == "number" || t.filter === "number" || t.filter === "numberrange" || t.filter === "price" ? "number" : t.filter === "date" || t.filter === "daterange" ? "date" : "text";
735
+ function nr(t, r) {
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";
726
737
  }
727
- function Mr({
738
+ function Pr({
728
739
  name: t,
729
- columns: a,
740
+ columns: r,
730
741
  list: n,
731
- create: r,
742
+ create: a,
732
743
  update: o,
733
744
  remove: m,
734
745
  delete: d,
@@ -736,7 +747,7 @@ function Mr({
736
747
  form: k,
737
748
  formSchema: x,
738
749
  rowKey: y,
739
- searchPlaceholder: M,
750
+ searchPlaceholder: j,
740
751
  pageSize: w,
741
752
  state: P,
742
753
  defaultState: g,
@@ -744,16 +755,16 @@ function Mr({
744
755
  onPageChange: b,
745
756
  onFilterChange: R,
746
757
  onSortChange: E,
747
- onSearchChange: $,
758
+ onSearchChange: z,
748
759
  onPageSizeChange: A,
749
760
  onSelectionChange: O,
750
761
  selectable: v,
751
762
  renderExpandedRow: i,
752
763
  virtualized: S,
753
764
  searchDebounce: N = 250,
754
- className: p
765
+ className: f
755
766
  }) {
756
- const { t: c } = J(), h = m ?? d, K = T ?? ["create", "edit", "delete"], L = (s) => K.includes(s) && (s === "create" ? !!r : 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(
757
768
  () => ({
758
769
  page: 1,
759
770
  pageSize: w ?? (g == null ? void 0 : g.pageSize) ?? 20,
@@ -765,185 +776,185 @@ function Mr({
765
776
  }),
766
777
  // eslint-disable-next-line react-hooks/exhaustive-deps -- defaults are read once
767
778
  []
768
- ), [Y, re] = l.useState(V), ae = l.useMemo(
769
- () => ({ ...Y, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, s]) => s !== void 0)) }),
770
- [Y, P]
771
- ), 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(
772
783
  (s) => {
773
- re((D) => {
774
- const U = { ...D }, X = P;
775
- for (const [G, it] of Object.entries(s))
776
- X && G in X && X[G] !== void 0 || (U[G] = it);
777
- const te = { ...U, ...Object.fromEntries(Object.entries(P ?? {}).filter(([, G]) => G !== void 0)) };
778
- 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;
779
790
  });
780
791
  },
781
792
  [P, u]
782
- ), { page: I, pageSize: j, search: F, filters: q, sort: ne, selection: qe, expandedRows: He } = ae, [Je, oe] = l.useState([]), [ce, ue] = l.useState(null), [Ye, de] = l.useState([null]), [We, me] = l.useState(!0), [pe, fe] = l.useState(null), [_, he] = l.useState(null), [Xe, W] = l.useState(!1), [be, ve] = 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($);
783
794
  l.useEffect(() => {
784
- const s = setTimeout(() => Ge(F), N);
795
+ const s = setTimeout(() => Ge($), N);
785
796
  return () => clearTimeout(s);
786
- }, [F, N]);
787
- const ge = Ye[I - 1] ?? null, xe = JSON.stringify(q), Q = l.useCallback(async () => {
788
- me(!0), fe(null);
797
+ }, [$, N]);
798
+ const ye = Je[Y - 1] ?? null, we = JSON.stringify(M), Z = l.useCallback(async () => {
799
+ fe(!0), be(null);
789
800
  try {
790
- const s = await n({ search: le, cursor: ge, pageSize: j, sort: ne, filters: q });
791
- oe(s.rows), ue(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);
792
803
  } catch (s) {
793
- fe(s instanceof Error ? s.message : String(s)), oe([]), ue(null);
804
+ be(s instanceof Error ? s.message : String(s)), ue([]), me(null);
794
805
  } finally {
795
- me(!1);
806
+ fe(!1);
796
807
  }
797
- }, [le, ge, j, ne, xe, n]);
808
+ }, [se, ye, L, F, we, n]);
798
809
  l.useEffect(() => {
799
- Q();
800
- }, [Q]), l.useEffect(() => {
801
- z({ page: 1 }), de([null]);
802
- }, [le, j, xe]);
810
+ Z();
811
+ }, [Z]), l.useEffect(() => {
812
+ I({ page: 1 }), pe([null]);
813
+ }, [se, L, we]);
803
814
  const Qe = l.useMemo(
804
- () => a.filter((s) => s.filter).map((s) => ({
815
+ () => r.filter((s) => s.filter).map((s) => ({
805
816
  key: s.key,
806
817
  label: typeof s.label == "string" ? s.label : s.key,
807
818
  type: s.filter === "numberrange" ? "number" : s.filter,
808
- options: _e(s.filterOptions ?? s.options)
819
+ options: qe(s.filterOptions ?? s.options)
809
820
  })),
810
- [a]
821
+ [r]
811
822
  ), Ze = (s, D) => {
812
- const U = { ...q, [s]: D };
813
- z({ filters: U }), R == null || R(U);
823
+ const V = { ...M, [s]: D };
824
+ I({ filters: V }), R == null || R(V);
814
825
  }, et = (s) => {
815
- z({ search: s }), $ == null || $(s);
826
+ I({ search: s }), z == null || z(s);
816
827
  }, tt = (s) => {
817
- z({ sort: s }), E == null || E(s);
828
+ I({ sort: s }), E == null || E(s);
818
829
  }, rt = (s, D) => {
819
830
  if (D === "next") {
820
- const U = ce;
821
- de((X) => {
822
- const te = [...X];
823
- return te[s - 1] = U, te;
831
+ const V = de;
832
+ pe((G) => {
833
+ const re = [...G];
834
+ return re[s - 1] = V, re;
824
835
  });
825
836
  }
826
- z({ page: s }), b == null || b(s);
837
+ I({ page: s }), b == null || b(s);
827
838
  }, at = l.useMemo(
828
839
  () => [
829
- ...a.filter((s) => !s.hidden),
830
- ...L("edit") || L("delete") ? [
840
+ ...r.filter((s) => !s.hidden),
841
+ ...K("edit") || K("delete") ? [
831
842
  {
832
843
  key: "actions",
833
844
  label: "",
834
845
  align: "right",
835
- render: (s) => /* @__PURE__ */ f("div", { className: "flex items-center justify-end gap-1", children: [
836
- L("edit") ? /* @__PURE__ */ e(B, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => {
846
+ render: (s) => /* @__PURE__ */ p("div", { className: "flex items-center justify-end gap-1", children: [
847
+ K("edit") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => {
837
848
  var D;
838
- return (D = Z.current) == null ? void 0 : D.call(Z, s);
849
+ return (D = ee.current) == null ? void 0 : D.call(ee, s);
839
850
  }, "data-testid": "resource-edit", children: /* @__PURE__ */ e(kt, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) }) : null,
840
- L("delete") ? /* @__PURE__ */ e(B, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: be, onClick: () => {
851
+ K("delete") ? /* @__PURE__ */ e(U, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: ge, onClick: () => {
841
852
  var D;
842
- 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));
843
854
  }, "data-testid": "resource-delete", children: /* @__PURE__ */ e(St, { className: "h-3.5 w-3.5 text-[var(--prui-danger)]", "aria-hidden": !0 }) }) : null
844
855
  ] })
845
856
  }
846
857
  ] : []
847
858
  ],
848
859
  // eslint-disable-next-line react-hooks/exhaustive-deps -- can() depends only on the action functions
849
- [a, r, o, h, be]
860
+ [r, a, o, h, ge]
850
861
  ), nt = () => {
851
- he(null), W(!0);
852
- }, ye = (s) => {
853
- he(s), W(!0);
854
- }, we = async (s) => {
855
- if (!(!await Ft({
862
+ ve(null), W(!0);
863
+ }, Ne = (s) => {
864
+ ve(s), W(!0);
865
+ }, ke = async (s) => {
866
+ if (!(!await It({
856
867
  title: `${c.delete} ${H}?`,
857
868
  message: c.deleteConfirmMessage,
858
869
  confirmText: c.delete,
859
870
  cancelText: c.cancel,
860
871
  type: "danger"
861
872
  }) || !h)) {
862
- ve(!0);
873
+ xe(!0);
863
874
  try {
864
- await h(s), await Q();
875
+ await h(s), await Z();
865
876
  } finally {
866
- ve(!1);
877
+ xe(!1);
867
878
  }
868
879
  }
869
- }, Z = l.useRef(ye);
870
- Z.current = ye;
871
- const ee = l.useRef(we);
872
- ee.current = we;
880
+ }, ee = l.useRef(Ne);
881
+ ee.current = Ne;
882
+ const te = l.useRef(ke);
883
+ te.current = ke;
873
884
  const lt = l.useCallback(
874
885
  (s, D) => String(y ? y(s, D) : s.id ?? D),
875
886
  [y]
876
- ), Ne = x ?? rr(a, _), st = _ ? Object.fromEntries(
877
- Ne.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] ?? ""])
878
889
  ) : void 0, H = t.replace(/s$/, "");
879
- return /* @__PURE__ */ f("div", { className: C("prui-resource flex flex-col gap-2", p), "data-testid": "resource", children: [
890
+ return /* @__PURE__ */ p("div", { className: C("prui-resource flex flex-col gap-2", f), "data-testid": "resource", children: [
880
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 }) }),
881
892
  /* @__PURE__ */ e(
882
- It,
893
+ Lt,
883
894
  {
884
- searchPlaceholder: M ?? c.searchEntity.replace("{name}", t),
885
- searchValue: F,
895
+ searchPlaceholder: j ?? c.searchEntity.replace("{name}", t),
896
+ searchValue: $,
886
897
  onSearchChange: et,
887
898
  filters: Qe,
888
- filterValues: q,
899
+ filterValues: M,
889
900
  onFilterChange: Ze,
890
- actions: L("create") ? /* @__PURE__ */ f(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: [
891
902
  /* @__PURE__ */ e(Tt, { className: "h-4 w-4", "aria-hidden": !0 }),
892
903
  c.newEntity.replace("{name}", H)
893
904
  ] }) : void 0
894
905
  }
895
906
  ),
896
- pe ? /* @__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: pe }) : 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,
897
908
  /* @__PURE__ */ e(
898
- Lt,
909
+ Kt,
899
910
  {
900
911
  columns: at,
901
- rows: Je,
912
+ rows: Xe,
902
913
  rowKey: lt,
903
- sort: ne,
914
+ sort: F,
904
915
  onSortChange: tt,
905
- loading: We,
916
+ loading: Ye,
906
917
  selectable: v,
907
- selectedRowKeys: qe,
918
+ selectedRowKeys: le,
908
919
  onSelectionChange: (s, D) => {
909
- z({ selection: s }), O == null || O(s, D);
920
+ I({ selection: s }), O == null || O(s, D);
910
921
  },
911
922
  renderExpandedRow: i,
912
923
  expandedRowKeys: He,
913
- onExpandedRowsChange: (s) => z({ expandedRows: s }),
924
+ onExpandedRowsChange: (s) => I({ expandedRows: s }),
914
925
  virtualized: S
915
926
  }
916
927
  ),
917
928
  /* @__PURE__ */ e(
918
- Kt,
929
+ Bt,
919
930
  {
920
- page: I,
921
- pageSize: j,
922
- hasNextPage: ce != null,
923
- hasPreviousPage: I > 1,
931
+ page: Y,
932
+ pageSize: L,
933
+ hasNextPage: de != null,
934
+ hasPreviousPage: Y > 1,
924
935
  onPageChange: rt,
925
936
  onPageSizeChange: (s) => {
926
- z({ pageSize: s }), A == null || A(s);
937
+ I({ pageSize: s }), A == null || A(s);
927
938
  }
928
939
  }
929
940
  ),
930
- /* @__PURE__ */ f(ze, { open: Xe, onClose: () => W(!1), size: "sm", ariaLabel: _ ? c.editEntity.replace("{name}", H) : c.newEntity.replace("{name}", H), noPadding: !0, children: [
931
- /* @__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) }) }),
932
943
  /* @__PURE__ */ e("div", { className: "px-8 pb-8", children: k ?? /* @__PURE__ */ e(
933
- tr,
944
+ rr,
934
945
  {
935
- schema: Ne,
946
+ schema: Se,
936
947
  initialValues: st,
937
948
  onCancel: () => W(!1),
938
949
  onSubmit: async (s) => {
939
- _ ? await (o == null ? void 0 : o(_, s)) : await (r == null ? void 0 : r(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();
940
951
  }
941
952
  }
942
953
  ) })
943
954
  ] })
944
955
  ] });
945
956
  }
946
- const Pr = {
957
+ const Or = {
947
958
  name: "Resource",
948
959
  props: [
949
960
  { name: "name", type: "string", default: null, control: "text" },
@@ -972,18 +983,18 @@ const Pr = {
972
983
  { name: "searchDebounce", type: "number (ms)", default: "250", control: "number" }
973
984
  ]
974
985
  };
975
- function Or({ items: t, className: a }) {
976
- return /* @__PURE__ */ e("div", { className: C("prui-stat-row grid gap-3 sm:grid-cols-2 lg:grid-cols-4", a), children: t.map((n, r) => {
986
+ function Dr({ items: t, className: r }) {
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) => {
977
988
  const o = n.icon;
978
- return /* @__PURE__ */ f(Ie, { "data-testid": "stat-card", children: [
979
- /* @__PURE__ */ f(Le, { className: "pb-2", children: [
980
- /* @__PURE__ */ f(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: [
981
992
  o ? /* @__PURE__ */ e(o, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) : null,
982
993
  n.label
983
994
  ] }),
984
- /* @__PURE__ */ e(Be, { className: "text-2xl", children: n.value })
995
+ /* @__PURE__ */ e(Ue, { className: "text-2xl", children: n.value })
985
996
  ] }),
986
- n.delta ? /* @__PURE__ */ e(Ue, { className: "pb-3", children: /* @__PURE__ */ e(
997
+ n.delta ? /* @__PURE__ */ e(Ve, { className: "pb-3", children: /* @__PURE__ */ e(
987
998
  "span",
988
999
  {
989
1000
  className: C(
@@ -995,106 +1006,106 @@ function Or({ items: t, className: a }) {
995
1006
  children: n.delta
996
1007
  }
997
1008
  ) }) : null
998
- ] }, `${n.label}-${r}`);
1009
+ ] }, `${n.label}-${a}`);
999
1010
  }) });
1000
1011
  }
1001
- const Dr = {
1012
+ const Ar = {
1002
1013
  name: "StatRow",
1003
1014
  props: [
1004
1015
  { name: "items", type: "StatItem[]", default: null, control: "object" },
1005
1016
  { name: "className", type: "string", default: "undefined", control: "text" }
1006
1017
  ]
1007
1018
  };
1008
- function nr(t) {
1019
+ function lr(t) {
1009
1020
  if (t)
1010
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
1021
+ return t.map((r) => typeof r == "string" || typeof r == "number" ? { label: String(r), value: String(r) } : r);
1011
1022
  }
1012
- function lr({ field: t }) {
1013
- const { name: a, type: n, value: r, onChange: o } = t;
1014
- if (!n || !a) return null;
1015
- const m = `prui-settings-${a}`;
1023
+ function sr({ field: t }) {
1024
+ const { name: r, type: n, value: a, onChange: o } = t;
1025
+ if (!n || !r) return null;
1026
+ const m = `prui-settings-${r}`;
1016
1027
  return n === "switch" ? /* @__PURE__ */ e("label", { className: "flex items-center gap-2", htmlFor: m, children: /* @__PURE__ */ e(
1017
- Fe,
1028
+ Ie,
1018
1029
  {
1019
1030
  id: m,
1020
- checked: !!r,
1031
+ checked: !!a,
1021
1032
  onChange: (d) => o == null ? void 0 : o(d),
1022
1033
  "aria-label": t.label
1023
1034
  }
1024
1035
  ) }) : n === "select" ? /* @__PURE__ */ e(
1025
- $e,
1036
+ Fe,
1026
1037
  {
1027
1038
  id: m,
1028
1039
  className: "w-56",
1029
- options: nr(t.options) ?? [],
1030
- value: String(r ?? ""),
1040
+ options: lr(t.options) ?? [],
1041
+ value: String(a ?? ""),
1031
1042
  onChange: (d) => o == null ? void 0 : o(Array.isArray(d) ? d.join(",") : d),
1032
1043
  "aria-label": t.label
1033
1044
  }
1034
1045
  ) : /* @__PURE__ */ e(
1035
- ie,
1046
+ ce,
1036
1047
  {
1037
1048
  id: m,
1038
1049
  type: n === "number" ? "number" : "text",
1039
1050
  className: "h-8 w-56",
1040
- value: String(r ?? ""),
1051
+ value: String(a ?? ""),
1041
1052
  onChange: (d) => o == null ? void 0 : o(n === "number" ? d.target.value === "" ? "" : Number(d.target.value) : d.target.value),
1042
1053
  "aria-label": t.label
1043
1054
  }
1044
1055
  );
1045
1056
  }
1046
- function Ar({ title: t = "Settings", sections: a, className: n }) {
1047
- return /* @__PURE__ */ f("div", { className: C("prui-settings mx-auto flex w-full max-w-4xl flex-col gap-6", n), children: [
1057
+ function zr({ title: t = "Settings", sections: r, className: n }) {
1058
+ return /* @__PURE__ */ p("div", { className: C("prui-settings mx-auto flex w-full max-w-4xl flex-col gap-6", n), children: [
1048
1059
  /* @__PURE__ */ e("h1", { className: "text-xl font-semibold text-[var(--prui-fg)]", children: t }),
1049
- /* @__PURE__ */ f("div", { className: "flex flex-col gap-6 md:flex-row", children: [
1050
- /* @__PURE__ */ e("nav", { "aria-label": "Settings sections", className: "md:w-56 md:shrink-0", children: /* @__PURE__ */ e("ul", { className: "flex flex-row flex-wrap gap-1 md:flex-col", children: a.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
1060
+ /* @__PURE__ */ p("div", { className: "flex flex-col gap-6 md:flex-row", children: [
1061
+ /* @__PURE__ */ e("nav", { "aria-label": "Settings sections", className: "md:w-56 md:shrink-0", children: /* @__PURE__ */ e("ul", { className: "flex flex-row flex-wrap gap-1 md:flex-col", children: r.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
1051
1062
  "a",
1052
1063
  {
1053
- href: `#settings-${r.id}`,
1064
+ href: `#settings-${a.id}`,
1054
1065
  className: "block rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)]",
1055
- children: r.title ?? r.label ?? r.id
1066
+ children: a.title ?? a.label ?? a.id
1056
1067
  }
1057
- ) }, r.id)) }) }),
1058
- /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: a.map((r) => /* @__PURE__ */ f(Ie, { id: `settings-${r.id}`, "data-testid": "settings-section", children: [
1059
- /* @__PURE__ */ f(Le, { children: [
1060
- /* @__PURE__ */ e(Be, { children: r.title ?? r.label ?? r.id }),
1061
- r.description ? /* @__PURE__ */ e(Ke, { children: r.description }) : null
1068
+ ) }, a.id)) }) }),
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
1062
1073
  ] }),
1063
- /* @__PURE__ */ e(Ue, { children: r.content ?? /* @__PURE__ */ e("dl", { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: (r.fields ?? []).map((o, m) => /* @__PURE__ */ f("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: [
1064
- /* @__PURE__ */ f("div", { className: "min-w-0", 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: [
1075
+ /* @__PURE__ */ p("div", { className: "min-w-0", children: [
1065
1076
  /* @__PURE__ */ e("dt", { className: "text-sm font-medium text-[var(--prui-fg)]", children: o.label }),
1066
1077
  o.description ? /* @__PURE__ */ e("dd", { className: "text-xs text-[var(--prui-dim)]", children: o.description }) : null
1067
1078
  ] }),
1068
- /* @__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 }) })
1069
1080
  ] }, `${o.label}-${m}`)) }) })
1070
- ] }, r.id)) })
1081
+ ] }, a.id)) })
1071
1082
  ] })
1072
1083
  ] });
1073
1084
  }
1074
- const zr = {
1085
+ const $r = {
1075
1086
  name: "Settings",
1076
1087
  props: [
1077
1088
  { name: "title", type: "string", default: "'Settings'", control: "text" },
1078
1089
  { name: "sections", type: "SettingsSection[]", default: null, control: "object" }
1079
1090
  ]
1080
1091
  }, je = ["mousedown", "keydown", "scroll", "touchstart", "click"];
1081
- function sr({
1092
+ function ir({
1082
1093
  timeout: t = 15,
1083
- warningTime: a = 2,
1094
+ warningTime: r = 2,
1084
1095
  onTimeout: n,
1085
- onExtend: r,
1096
+ onExtend: a,
1086
1097
  title: o = "Session expiring soon",
1087
1098
  message: m = "Your session is about to expire due to inactivity."
1088
1099
  }) {
1089
- const d = Math.max(0, t) * 6e4, T = Math.min(Math.max(0, a) * 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(() => {
1090
1101
  for (const i of [w, P, g])
1091
1102
  i.current != null && (clearInterval(i.current), clearTimeout(i.current), i.current = null);
1092
1103
  }, []), R = l.useCallback(() => {
1093
1104
  b(), x(!1), n == null || n();
1094
1105
  }, [b, n]), E = l.useCallback(() => {
1095
1106
  b(), x(!1), u.current = !1, w.current = window.setTimeout(() => {
1096
- u.current = !0, M(T), x(!0), g.current = window.setInterval(() => {
1097
- 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);
1098
1109
  }, 1e3);
1099
1110
  }, d - T), P.current = window.setTimeout(R, d);
1100
1111
  }, [b, R, d, T]);
@@ -1108,32 +1119,32 @@ function sr({
1108
1119
  for (const S of je) document.removeEventListener(S, i);
1109
1120
  };
1110
1121
  }, [E, b]);
1111
- const $ = () => {
1112
- r == null || r(), E();
1122
+ const z = () => {
1123
+ a == null || a(), E();
1113
1124
  }, A = Math.floor(y / 6e4), O = Math.floor(y % 6e4 / 1e3), v = `${A}:${String(O).padStart(2, "0")}`;
1114
- return /* @__PURE__ */ f(
1115
- ze,
1125
+ return /* @__PURE__ */ p(
1126
+ $e,
1116
1127
  {
1117
1128
  open: k,
1118
- onClose: $,
1129
+ onClose: z,
1119
1130
  size: "sm",
1120
1131
  ariaLabel: o,
1121
1132
  children: [
1122
- /* @__PURE__ */ f("div", { className: "flex flex-col items-center gap-1 px-8 pb-2 pt-8 text-center", children: [
1133
+ /* @__PURE__ */ p("div", { className: "flex flex-col items-center gap-1 px-8 pb-2 pt-8 text-center", children: [
1123
1134
  /* @__PURE__ */ e("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--prui-warn)]/15", children: /* @__PURE__ */ e(Ct, { className: "h-6 w-6 text-[var(--prui-warn)]", "aria-hidden": !0 }) }),
1124
1135
  /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: o }),
1125
1136
  /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: m }),
1126
1137
  /* @__PURE__ */ e("div", { className: "py-4 font-mono text-4xl font-bold text-[var(--prui-fg)]", "data-testid": "session-countdown", children: v })
1127
1138
  ] }),
1128
- /* @__PURE__ */ f("div", { className: "flex flex-col gap-2 px-8 pb-8 sm:flex-row", children: [
1129
- /* @__PURE__ */ e(B, { variant: "default", className: "flex-1", onClick: R, "data-testid": "session-logout", children: "Log out now" }),
1130
- /* @__PURE__ */ e(B, { variant: "primary", className: "flex-1", onClick: $, "data-testid": "session-extend", children: "Continue session" })
1139
+ /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 px-8 pb-8 sm:flex-row", children: [
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" })
1131
1142
  ] })
1132
1143
  ]
1133
1144
  }
1134
1145
  );
1135
1146
  }
1136
- const ir = {
1147
+ const or = {
1137
1148
  name: "SessionTimeout",
1138
1149
  props: [
1139
1150
  { name: "timeout", type: "number", default: "15", control: "number" },
@@ -1141,28 +1152,28 @@ const ir = {
1141
1152
  { name: "onTimeout", type: "() => void", default: null, control: "none" },
1142
1153
  { name: "onExtend", type: "() => void", default: null, control: "none" }
1143
1154
  ]
1144
- }, or = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1155
+ }, cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1145
1156
  __proto__: null,
1146
- SessionTimeout: sr,
1147
- sessionTimeoutPropsMeta: ir
1157
+ SessionTimeout: ir,
1158
+ sessionTimeoutPropsMeta: or
1148
1159
  }, Symbol.toStringTag, { value: "Module" }));
1149
- function $r({ title: t, description: a, brand: n, width: r = "max-w-sm", footer: o, children: m, className: d }) {
1150
- 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__ */ f("div", { className: C("w-full", r), children: [
1151
- n ? /* @__PURE__ */ f("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "auth-shell-brand", children: [
1160
+ function Fr({ title: t, description: r, brand: n, width: a = "max-w-sm", footer: o, children: m, className: d }) {
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: [
1162
+ n ? /* @__PURE__ */ p("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "auth-shell-brand", children: [
1152
1163
  n.mark ? /* @__PURE__ */ e("img", { src: n.mark, alt: "", className: "h-8 w-8 rounded-[var(--prui-radius-1)] object-cover" }) : null,
1153
1164
  /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: n.name })
1154
1165
  ] }) : null,
1155
- /* @__PURE__ */ f("div", { className: "rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-6", children: [
1156
- /* @__PURE__ */ f("div", { className: "mb-4 flex flex-col gap-1 text-center", children: [
1166
+ /* @__PURE__ */ p("div", { className: "rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-6", children: [
1167
+ /* @__PURE__ */ p("div", { className: "mb-4 flex flex-col gap-1 text-center", children: [
1157
1168
  /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: t }),
1158
- a ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: a }) : null
1169
+ r ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: r }) : null
1159
1170
  ] }),
1160
1171
  m,
1161
1172
  o ? /* @__PURE__ */ e("div", { className: "mt-4 text-center text-sm text-[var(--prui-dim)]", children: o }) : null
1162
1173
  ] })
1163
1174
  ] }) });
1164
1175
  }
1165
- const Fr = {
1176
+ const Ir = {
1166
1177
  name: "AuthShell",
1167
1178
  props: [
1168
1179
  { name: "title", type: "string", default: null, control: "text" },
@@ -1174,23 +1185,23 @@ const Fr = {
1174
1185
  ]
1175
1186
  };
1176
1187
  export {
1177
- Rr as A,
1178
- Gt as C,
1179
- tr as F,
1180
- Mr as R,
1181
- sr as S,
1182
- Qt as a,
1183
- $r as b,
1184
- qt as c,
1185
- Ar as d,
1186
- Ce as e,
1187
- Or as f,
1188
- Er as g,
1189
- 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,
1190
1201
  jr as i,
1191
- zr as j,
1192
- Dr as k,
1193
- Pr as r,
1194
- ir as s,
1202
+ $r as j,
1203
+ Ar as k,
1204
+ Or as r,
1205
+ or as s,
1195
1206
  Jt as u
1196
1207
  };