@skiddph/prui 0.7.0 → 0.9.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.
Files changed (79) hide show
  1. package/dist/app/resource.d.ts +44 -1
  2. package/dist/app.js +1 -1
  3. package/dist/chunks/auth-shell-DQJ4UmUv.js +1208 -0
  4. package/dist/chunks/data-table-toolbar-B-5J2Ozl.js +736 -0
  5. package/dist/core/accordion.d.ts +16 -0
  6. package/dist/core/accordion.js +108 -0
  7. package/dist/core/alert.d.ts +20 -0
  8. package/dist/core/alert.js +63 -0
  9. package/dist/core/anchor.d.ts +35 -0
  10. package/dist/core/anchor.js +39 -0
  11. package/dist/core/breadcrumb.d.ts +30 -0
  12. package/dist/core/breadcrumb.js +67 -0
  13. package/dist/core/button.d.ts +8 -1
  14. package/dist/core/button.js +23 -18
  15. package/dist/core/calendar.d.ts +29 -0
  16. package/dist/core/calendar.js +180 -0
  17. package/dist/core/card.d.ts +5 -1
  18. package/dist/core/card.js +33 -29
  19. package/dist/core/checkbox.d.ts +19 -0
  20. package/dist/core/checkbox.js +55 -0
  21. package/dist/core/combobox.d.ts +32 -0
  22. package/dist/core/combobox.js +193 -0
  23. package/dist/core/date-picker.d.ts +62 -0
  24. package/dist/core/date-picker.js +314 -0
  25. package/dist/core/dialog.d.ts +15 -0
  26. package/dist/core/dialog.js +77 -60
  27. package/dist/core/drawer.d.ts +34 -0
  28. package/dist/core/drawer.js +129 -0
  29. package/dist/core/dropdown.d.ts +8 -4
  30. package/dist/core/dropdown.js +136 -51
  31. package/dist/core/file-upload.d.ts +28 -0
  32. package/dist/core/file-upload.js +111 -0
  33. package/dist/core/index.d.ts +23 -1
  34. package/dist/core/list-nav.d.ts +27 -0
  35. package/dist/core/list-nav.js +51 -0
  36. package/dist/core/modal.d.ts +14 -5
  37. package/dist/core/modal.js +163 -156
  38. package/dist/core/overlay.d.ts +93 -0
  39. package/dist/core/overlay.js +189 -0
  40. package/dist/core/popover.d.ts +29 -0
  41. package/dist/core/popover.js +124 -0
  42. package/dist/core/progress.d.ts +21 -0
  43. package/dist/core/progress.js +59 -0
  44. package/dist/core/radio.d.ts +20 -0
  45. package/dist/core/radio.js +115 -0
  46. package/dist/core/select.d.ts +6 -0
  47. package/dist/core/select.js +187 -98
  48. package/dist/core/skeleton.d.ts +20 -0
  49. package/dist/core/skeleton.js +41 -0
  50. package/dist/core/spinner.d.ts +15 -0
  51. package/dist/core/spinner.js +41 -0
  52. package/dist/core/tabs.js +82 -53
  53. package/dist/core/time-picker.d.ts +68 -0
  54. package/dist/core/time-picker.js +305 -0
  55. package/dist/core/timeline.d.ts +22 -0
  56. package/dist/core/timeline.js +57 -0
  57. package/dist/core/toast.d.ts +36 -0
  58. package/dist/core/toast.js +123 -0
  59. package/dist/core/tooltip.d.ts +23 -0
  60. package/dist/core/tooltip.js +96 -0
  61. package/dist/core/tree-view.d.ts +34 -0
  62. package/dist/core/tree-view.js +133 -0
  63. package/dist/core.js +160 -62
  64. package/dist/data-table/data-table.d.ts +22 -1
  65. package/dist/data-table.js +1 -1
  66. package/dist/forms/form.d.ts +8 -0
  67. package/dist/forms.js +213 -200
  68. package/dist/i18n/index.d.ts +89 -0
  69. package/dist/i18n.js +105 -0
  70. package/dist/index.d.ts +1 -0
  71. package/dist/index.js +263 -155
  72. package/dist/prui-utilities.css +1 -1
  73. package/dist/prui.css +111 -4
  74. package/dist/theme/base.css +110 -3
  75. package/dist/theme/index.d.ts +27 -0
  76. package/dist/theme.js +86 -58
  77. package/package.json +9 -2
  78. package/dist/chunks/auth-shell-BG5vx9eG.js +0 -1054
  79. package/dist/chunks/data-table-toolbar-BUy2EWPy.js +0 -581
@@ -1,1054 +0,0 @@
1
- import { jsx as e, jsxs as u, Fragment as ce } from "react/jsx-runtime";
2
- import * as s from "react";
3
- import { createPortal as Ae } from "react-dom";
4
- import { Routes as De, Route as ae, Navigate as Le, MemoryRouter as Fe, BrowserRouter as Ie, useLocation as me, useNavigate as pe, Outlet as Be, Link as Ke, NavLink as Ue } from "react-router-dom";
5
- import { ChevronsRight as ne, ChevronsLeft as le, X as _e, Menu as qe, Search as Ve, Palette as He, ChevronDown as Je, Pencil as Ye, Trash2 as We, Plus as Xe, Clock as Ge } from "lucide-react";
6
- import { cn as C } from "../core/cn.js";
7
- import { Dropdown as Qe } from "../core/dropdown.js";
8
- import { Button as D } from "../core/button.js";
9
- import { resolveThemeName as Ze, themeMode as et, readPersistedTheme as tt, applyTheme as se, listThemes as rt, clearAppliedTokens as at } from "../theme.js";
10
- import { Modal as fe, confirmModal as nt } from "../core/modal.js";
11
- import { b as lt, D as st, a as it } from "./data-table-toolbar-BUy2EWPy.js";
12
- import { Textarea as ot, Input as X } from "../core/input.js";
13
- import { Label as dt } from "../core/label.js";
14
- import { Select as he } from "../core/select.js";
15
- import { Switch as be } from "../core/switch.js";
16
- import { Card as ve, CardHeader as ge, CardDescription as xe, CardTitle as ye, CardContent as Ne } from "../core/card.js";
17
- const ut = [
18
- { path: "/login", name: "login" },
19
- { path: "/register", name: "register" },
20
- { path: "/forgot-password", name: "forgotPassword" },
21
- { path: "/reset-password", name: "resetPassword" },
22
- { path: "/otp", name: "otp" },
23
- { path: "/logout", name: "logout" }
24
- ], ct = [
25
- { path: "/404", name: "notFound" },
26
- { path: "/error", name: "error" },
27
- { path: "/profile", name: "profile" },
28
- { path: "/settings", name: "settings" },
29
- { path: "/admin-setup", name: "adminSetup" }
30
- ];
31
- function mt({ mode: t, config: a, children: n }) {
32
- const r = t === "auth" || t === "auth+utility", l = t === "utility" || t === "auth+utility", h = [
33
- ...r ? ut : [],
34
- ...l ? ct : []
35
- ], [p, y] = s.useState(null);
36
- return s.useEffect(() => {
37
- let w = !1;
38
- return import("../pages.js").then((f) => {
39
- w || y(f.PagesRegistry);
40
- }), () => {
41
- w = !0;
42
- };
43
- }, []), p ? /* @__PURE__ */ u(De, { children: [
44
- h.map(({ path: w, name: f }) => {
45
- const S = p[f];
46
- return S ? /* @__PURE__ */ e(ae, { path: w, element: /* @__PURE__ */ e(S, { ...(a == null ? void 0 : a[f]) ?? {} }) }, w) : null;
47
- }),
48
- n,
49
- r ? /* @__PURE__ */ e(ae, { path: "*", element: /* @__PURE__ */ e(Le, { to: "/login", replace: !0 }) }) : null
50
- ] }) : /* @__PURE__ */ e("div", { className: "p-8 text-center text-sm text-[var(--prui-dim)]", children: "Loading…" });
51
- }
52
- const pt = s.lazy(
53
- () => Promise.resolve().then(() => Rt).then((t) => ({ default: t.SessionTimeout }))
54
- );
55
- function ft(t) {
56
- const a = t !== !1, n = typeof t == "object" ? t : {}, r = n.persist !== !1, l = Ze(n.default ?? "control"), h = et(l), [p, y] = s.useState(() => (r ? tt() : null) ?? { theme: l, mode: h }), w = s.useCallback(
57
- (f) => {
58
- y(f), se({ theme: f.theme, mode: f.mode, storageKey: r ? "prui:theme" : null });
59
- },
60
- [r]
61
- );
62
- return s.useEffect(() => {
63
- se({ theme: p.theme, mode: p.mode, storageKey: r ? "prui:theme" : null });
64
- }, [p, r]), { enabled: a, state: p, setTheme: w };
65
- }
66
- function ht({ config: t }) {
67
- const { enabled: a, state: n, setTheme: r } = ft(t);
68
- return a ? /* @__PURE__ */ e(
69
- Qe,
70
- {
71
- align: "end",
72
- trigger: /* @__PURE__ */ e(
73
- "button",
74
- {
75
- type: "button",
76
- "aria-label": "Switch theme",
77
- title: `Theme: ${n.theme}`,
78
- "data-testid": "theme-toggle",
79
- className: "inline-flex h-8 w-8 items-center justify-center rounded-[var(--prui-radius)] text-[var(--prui-dim)] hover:bg-[var(--prui-raise)] hover:text-[var(--prui-fg)] cursor-pointer",
80
- children: /* @__PURE__ */ e(He, { className: "h-4 w-4", "aria-hidden": !0 })
81
- }
82
- ),
83
- items: rt().map((l) => ({
84
- label: `${l}${l === n.theme ? " (active)" : ""}`,
85
- onSelect: () => {
86
- at(), r({ theme: l, mode: l === "daylight" ? "light" : "dark" });
87
- }
88
- }))
89
- }
90
- ) : null;
91
- }
92
- function W(t, a) {
93
- return a === "/" ? t === "/" : t === a || t.startsWith(a + "/");
94
- }
95
- function bt({ item: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
96
- var P;
97
- const { pathname: l } = me(), h = pe(), p = (t.items ?? []).some(
98
- (m) => m.href ? W(l, m.href) : (m.items ?? []).some((T) => T.href && W(l, T.href))
99
- ), [y, w] = s.useState(p || n !== void 0 && l === n);
100
- s.useEffect(() => {
101
- p && w(!0);
102
- }, [p]);
103
- const f = t.icon, [S, i] = s.useState(!1), [v, O] = s.useState(null), M = s.useRef(null);
104
- if (s.useEffect(() => {
105
- if (!S) return;
106
- const m = (T) => {
107
- T.key === "Escape" && i(!1);
108
- };
109
- return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
110
- }, [S]), r) {
111
- const m = [];
112
- for (const b of t.items ?? [])
113
- if ((P = b.items) != null && P.length) {
114
- b.items.some((x) => x.href) && m.push({ heading: b.label });
115
- for (const x of b.items) x.href && m.push({ label: x.label, href: x.href });
116
- } else b.href && m.push({ label: b.label, href: b.href });
117
- const T = () => {
118
- var x;
119
- const b = (x = M.current) == null ? void 0 : x.getBoundingClientRect();
120
- if (b) {
121
- const R = Math.min(m.length * 32 + 40, 320);
122
- O({
123
- left: b.right + 8,
124
- top: Math.max(8, Math.min(b.top, window.innerHeight - R - 8))
125
- });
126
- }
127
- i((R) => !R);
128
- };
129
- return /* @__PURE__ */ u("li", { "data-testid": "nav-group", children: [
130
- /* @__PURE__ */ e(
131
- "button",
132
- {
133
- ref: M,
134
- type: "button",
135
- title: t.label,
136
- "aria-haspopup": "menu",
137
- "aria-expanded": S,
138
- onClick: T,
139
- "data-testid": "rail-group-trigger",
140
- className: C(
141
- "flex w-full items-center justify-center rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm cursor-pointer",
142
- p || S ? "text-[var(--prui-brand)]" : "text-[var(--prui-dim)] hover:text-[var(--prui-fg)]"
143
- ),
144
- children: f ? /* @__PURE__ */ e(f, { className: "h-4 w-4 shrink-0", "aria-hidden": !0 }) : /* @__PURE__ */ e("span", { className: "prui-nav-mono text-[10px] font-semibold", children: t.label.slice(0, 2).toUpperCase() })
145
- }
146
- ),
147
- S && v ? Ae(
148
- /* @__PURE__ */ u(ce, { children: [
149
- /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[60]", onClick: () => i(!1), "data-testid": "rail-flyout-backdrop" }),
150
- /* @__PURE__ */ u(
151
- "div",
152
- {
153
- role: "menu",
154
- "aria-label": t.label,
155
- "data-testid": "rail-flyout",
156
- className: "fixed z-[61] 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-xl",
157
- style: { top: v.top, left: v.left },
158
- children: [
159
- /* @__PURE__ */ e("div", { className: "px-3 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--prui-dim)]", children: t.label }),
160
- m.map(
161
- (b, x) => b.heading ? /* @__PURE__ */ e("div", { className: "px-3 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--prui-dim)]", children: b.heading }, `h-${x}`) : /* @__PURE__ */ e(
162
- "button",
163
- {
164
- type: "button",
165
- role: "menuitem",
166
- "data-testid": "rail-flyout-item",
167
- className: C(
168
- "flex cursor-pointer items-center rounded-[calc(var(--prui-radius)-1px)] px-3 py-1.5 text-left text-sm",
169
- b.href && W(l, b.href) ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)]" : "text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]"
170
- ),
171
- onClick: () => {
172
- i(!1), a == null || a(), b.href && h(b.href);
173
- },
174
- children: b.label
175
- },
176
- b.href
177
- )
178
- )
179
- ]
180
- }
181
- )
182
- ] }),
183
- document.body
184
- ) : null
185
- ] });
186
- }
187
- return /* @__PURE__ */ u("li", { "data-testid": "nav-group", children: [
188
- /* @__PURE__ */ u(
189
- "button",
190
- {
191
- type: "button",
192
- "aria-expanded": y,
193
- onClick: () => w((m) => !m),
194
- className: C(
195
- "flex w-full items-center gap-2 rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm cursor-pointer",
196
- p ? "text-[var(--prui-fg)]" : "text-[var(--prui-dim)] hover:text-[var(--prui-fg)]"
197
- ),
198
- children: [
199
- f ? /* @__PURE__ */ e(f, { className: "h-4 w-4 shrink-0", "aria-hidden": !0 }) : /* @__PURE__ */ e("span", { className: C("prui-nav-mono text-[10px] font-semibold"), children: t.label.slice(0, 2).toUpperCase() }),
200
- /* @__PURE__ */ e("span", { className: C("flex-1 text-left truncate", "prui-nav-label"), children: t.label }),
201
- /* @__PURE__ */ e(Je, { className: C("prui-nav-chevron h-4 w-4 transition-transform", !y && "-rotate-90"), "aria-hidden": !0 })
202
- ]
203
- }
204
- ),
205
- y ? /* @__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((m) => /* @__PURE__ */ e(we, { item: m, onNavigate: a, nested: !0, expandAllOn: n, collapsed: r }, m.href ?? m.label)) }) : null
206
- ] });
207
- }
208
- function vt({ label: t }) {
209
- 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 });
210
- }
211
- function we({ item: t, onNavigate: a, nested: n, expandAllOn: r, collapsed: l }) {
212
- return t.items && t.items.length > 0 ? /* @__PURE__ */ e(bt, { item: t, onNavigate: a, expandAllOn: r, collapsed: l }) : t.heading || !t.href && !t.items ? l ? null : /* @__PURE__ */ e(vt, { label: t.label }) : t.href ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ u(
213
- Ue,
214
- {
215
- to: t.href,
216
- onClick: a,
217
- className: ({ isActive: h }) => C(
218
- "flex items-center gap-2 rounded-[var(--prui-radius)] px-2.5 py-1.5 text-sm",
219
- n && "pl-2.5",
220
- h ? "bg-[var(--prui-brand)]/15 text-[var(--prui-brand)] font-medium" : "text-[var(--prui-dim)] hover:text-[var(--prui-fg)] hover:bg-[var(--prui-raise)]"
221
- ),
222
- children: [
223
- t.icon && !n ? /* @__PURE__ */ e(t.icon, { className: "h-4 w-4 shrink-0", "aria-hidden": !0 }) : l ? /* @__PURE__ */ e("span", { className: C("prui-nav-mono text-[10px] font-semibold"), children: t.label.slice(0, 2).toUpperCase() }) : null,
224
- /* @__PURE__ */ e("span", { className: C("truncate", l && n && "prui-nav-label", "prui-nav-label"), children: t.label })
225
- ]
226
- }
227
- ) }) : null;
228
- }
229
- function ie({ nav: t, onNavigate: a, expandAllOn: n, collapsed: r }) {
230
- return /* @__PURE__ */ e("nav", { "aria-label": "Main", className: "prui-app-nav", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.map((l) => /* @__PURE__ */ e(we, { item: l, onNavigate: a, expandAllOn: n, collapsed: r }, l.href ?? l.label)) }) });
231
- }
232
- function oe({ brand: t }) {
233
- if (!t) return null;
234
- const a = /* @__PURE__ */ u(ce, { children: [
235
- t.mark ? /* @__PURE__ */ e("img", { src: t.mark, alt: "", className: "h-6 w-6 rounded-[var(--prui-radius-1)] object-cover" }) : null,
236
- /* @__PURE__ */ e("span", { className: "prui-nav-label truncate font-semibold text-[var(--prui-fg)]", children: t.name })
237
- ] }), n = "flex items-center gap-2 px-1 py-1 min-w-0";
238
- return t.href === null ? /* @__PURE__ */ e("div", { className: n, children: a }) : /* @__PURE__ */ e(Ke, { to: t.href ?? "/", className: n, "aria-label": t.name, children: a });
239
- }
240
- function gt({
241
- open: t,
242
- onOpenChange: a,
243
- entries: n,
244
- placeholder: r = "Type a command or search...",
245
- onNavigate: l
246
- }) {
247
- const [h, p] = s.useState(""), [y, w] = s.useState(0), f = s.useMemo(() => {
248
- const i = h.trim().toLowerCase();
249
- return i ? n.filter((v) => v.label.toLowerCase().includes(i)) : n;
250
- }, [n, h]);
251
- if (s.useEffect(() => w(0), [h]), !t) return null;
252
- const S = (i) => {
253
- a(!1), i.onSelect ? i.onSelect() : i.href && (l == null || l(i.href));
254
- };
255
- return /* @__PURE__ */ e(
256
- "div",
257
- {
258
- className: "fixed inset-0 z-50 flex items-start justify-center pt-24",
259
- style: { backgroundColor: "rgba(0,0,0,0.55)" },
260
- onMouseDown: (i) => {
261
- i.target === i.currentTarget && a(!1);
262
- },
263
- children: /* @__PURE__ */ u(
264
- "div",
265
- {
266
- role: "dialog",
267
- "aria-modal": "true",
268
- "aria-label": "Command palette",
269
- "data-testid": "command-palette",
270
- className: "w-full max-w-md rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] shadow-xl",
271
- children: [
272
- /* @__PURE__ */ e(
273
- "input",
274
- {
275
- autoFocus: !0,
276
- type: "text",
277
- role: "combobox",
278
- "aria-expanded": "true",
279
- "aria-label": "Command palette search",
280
- "aria-activedescendant": f[y] ? `palette-option-${y}` : void 0,
281
- placeholder: r,
282
- value: h,
283
- onChange: (i) => p(i.target.value),
284
- onKeyDown: (i) => {
285
- if (i.key === "Escape" && a(!1), i.key === "ArrowDown" && (i.preventDefault(), w((v) => Math.min(v + 1, f.length - 1))), i.key === "ArrowUp" && (i.preventDefault(), w((v) => Math.max(v - 1, 0))), i.key === "Enter") {
286
- const v = f[y];
287
- v && (a(!1), v.onSelect ? v.onSelect() : v.href && (l == null || l(v.href)));
288
- }
289
- },
290
- 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)]"
291
- }
292
- ),
293
- /* @__PURE__ */ e("ul", { role: "listbox", className: "max-h-64 overflow-auto p-1", children: f.length === 0 ? /* @__PURE__ */ e("li", { className: "px-3 py-2 text-sm text-[var(--prui-dim)]", children: "No matches." }) : f.map((i, v) => /* @__PURE__ */ u(
294
- "li",
295
- {
296
- id: `palette-option-${v}`,
297
- role: "option",
298
- "aria-selected": v === y,
299
- onMouseEnter: () => w(v),
300
- onClick: () => S(i),
301
- className: C(
302
- "cursor-pointer rounded-[calc(var(--prui-radius)-1px)] px-3 py-2 text-sm text-[var(--prui-fg)]",
303
- v === y && "bg-[var(--prui-raise)]"
304
- ),
305
- children: [
306
- i.group ? /* @__PURE__ */ e("span", { className: "mr-2 text-xs text-[var(--prui-dim)]", children: i.group }) : null,
307
- i.label
308
- ]
309
- },
310
- `${i.label}-${v}`
311
- )) })
312
- ]
313
- }
314
- )
315
- }
316
- );
317
- }
318
- function xt(t) {
319
- const {
320
- brand: a,
321
- nav: n = [],
322
- search: r = !0,
323
- theme: l = !0,
324
- auth: h = !1,
325
- sidebar: p = {},
326
- header: y,
327
- pages: w,
328
- pagesConfig: f,
329
- expandAllOn: S,
330
- layoutType: i = "A",
331
- sidebarHeader: v,
332
- sidebarFooter: O,
333
- children: M
334
- } = t, P = typeof r == "object" ? r : { enabled: r !== !1 }, m = P.enabled !== !1, T = P.hotkey ?? "/", b = p.collapsible !== !1, [x, R] = s.useState(p.defaultOpen === !0), [j, o] = s.useState(!0), [g, N] = s.useState(!1), c = me(), L = pe(), k = s.useMemo(
335
- () => h === !1 ? null : h === !0 ? {} : h,
336
- [h]
337
- ), _ = s.useCallback(() => {
338
- k != null && k.onTimeout ? k.onTimeout() : L((k == null ? void 0 : k.loginPath) ?? "/login");
339
- }, [k, L]), B = s.useMemo(() => {
340
- const $ = [];
341
- for (const E of n)
342
- if (E.items)
343
- for (const z of E.items)
344
- z.href && $.push({ label: `${E.label} / ${z.label}`, href: z.href, group: E.label });
345
- else E.href && $.push({ label: E.label, href: E.href });
346
- return $;
347
- }, [n]);
348
- s.useEffect(() => {
349
- if (!m) return;
350
- const $ = (E) => {
351
- const z = E.target, V = z && (z.tagName === "INPUT" || z.tagName === "TEXTAREA" || z.isContentEditable);
352
- E.key === T && !V && !E.metaKey && !E.ctrlKey && !E.altKey && (E.preventDefault(), N(!0));
353
- };
354
- return document.addEventListener("keydown", $), () => document.removeEventListener("keydown", $);
355
- }, [T, m]);
356
- const q = s.useRef(c.pathname);
357
- s.useEffect(() => {
358
- q.current !== c.pathname && (q.current = c.pathname, R(!1));
359
- }, [c.pathname]), s.useEffect(() => {
360
- if (!x) return;
361
- const $ = document.body.style.overflow;
362
- return document.body.style.overflow = "hidden", () => {
363
- document.body.style.overflow = $;
364
- };
365
- }, [x]);
366
- const K = p.width ?? 240, A = !j && i !== "D";
367
- return /* @__PURE__ */ u(
368
- "div",
369
- {
370
- className: "prui-app prui-shell min-h-dvh bg-[var(--prui-background)] text-[var(--prui-fg)]",
371
- "data-layout": i,
372
- "data-collapsed": A ? "true" : void 0,
373
- style: { "--prui-shell-sidebar": A ? "var(--prui-rail-width, 64px)" : `${K}px` },
374
- children: [
375
- /* @__PURE__ */ u("aside", { "data-testid": "sidebar", className: "prui-shell-sidebar hidden md:flex md:flex-col md:min-h-0", children: [
376
- /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2 pt-4 scrollbar-thin", children: /* @__PURE__ */ e(ie, { nav: n, expandAllOn: S, collapsed: A }) }),
377
- O ? /* @__PURE__ */ e(
378
- "div",
379
- {
380
- className: C("border-t border-[var(--prui-line)] p-2", A && "flex justify-center px-1"),
381
- "data-testid": "sidebar-footer",
382
- children: O
383
- }
384
- ) : null,
385
- i !== "D" ? /* @__PURE__ */ e("div", { className: "border-t border-[var(--prui-line)] p-2", children: /* @__PURE__ */ e(
386
- D,
387
- {
388
- variant: "ghost",
389
- size: "sm",
390
- className: "w-full justify-center",
391
- "aria-label": A ? "Expand sidebar" : "Collapse sidebar",
392
- "data-testid": "sidebar-toggle",
393
- onClick: () => o(($) => !$),
394
- children: A ? /* @__PURE__ */ e(ne, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(le, { className: "h-4 w-4", "aria-hidden": !0 })
395
- }
396
- ) }) : null
397
- ] }),
398
- x ? /* @__PURE__ */ u("div", { className: "md:hidden fixed inset-0 z-40", "data-testid": "mobile-drawer", children: [
399
- /* @__PURE__ */ e(
400
- "div",
401
- {
402
- className: "absolute inset-0",
403
- style: { backgroundColor: "rgba(0,0,0,0.55)" },
404
- onClick: () => R(!1),
405
- "data-testid": "drawer-backdrop"
406
- }
407
- ),
408
- /* @__PURE__ */ u(
409
- "aside",
410
- {
411
- 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",
412
- role: "dialog",
413
- "aria-modal": "true",
414
- "aria-label": "Navigation",
415
- children: [
416
- /* @__PURE__ */ e("div", { className: "mb-2 flex h-10 items-center justify-end px-1", children: /* @__PURE__ */ e(
417
- "button",
418
- {
419
- type: "button",
420
- "aria-label": "Close navigation",
421
- onClick: () => R(!1),
422
- className: "rounded-[var(--prui-radius)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] cursor-pointer",
423
- children: /* @__PURE__ */ e(_e, { className: "h-4 w-4", "aria-hidden": !0 })
424
- }
425
- ) }),
426
- /* @__PURE__ */ e(ie, { nav: n, onNavigate: () => R(!1), expandAllOn: S, collapsed: !1 })
427
- ]
428
- }
429
- )
430
- ] }) : null,
431
- i === "C" ? /* @__PURE__ */ e(
432
- "div",
433
- {
434
- "data-testid": "sidebar-header",
435
- 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",
436
- children: v ?? /* @__PURE__ */ e(oe, { brand: a })
437
- }
438
- ) : null,
439
- /* @__PURE__ */ u(
440
- "header",
441
- {
442
- "data-testid": "app-header",
443
- className: "prui-shell-header sticky top-0 z-30 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",
444
- children: [
445
- b ? /* @__PURE__ */ e(
446
- D,
447
- {
448
- variant: "ghost",
449
- size: "icon",
450
- "aria-label": "Open navigation",
451
- className: "md:hidden",
452
- onClick: () => R(!0),
453
- "data-testid": "drawer-toggle",
454
- children: /* @__PURE__ */ e(qe, { className: "h-4 w-4", "aria-hidden": !0 })
455
- }
456
- ) : null,
457
- b && i !== "D" ? /* @__PURE__ */ e(
458
- D,
459
- {
460
- variant: "ghost",
461
- size: "icon",
462
- "aria-label": A ? "Show sidebar rail" : "Hide sidebar rail",
463
- className: "md:hidden",
464
- onClick: () => o(($) => !$),
465
- "data-testid": "rail-toggle-mobile",
466
- children: A ? /* @__PURE__ */ e(ne, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(le, { className: "h-4 w-4", "aria-hidden": !0 })
467
- }
468
- ) : null,
469
- /* @__PURE__ */ e("div", { className: "min-w-0 justify-self-start", children: /* @__PURE__ */ e(oe, { brand: a }) }),
470
- m ? /* @__PURE__ */ u(
471
- "button",
472
- {
473
- type: "button",
474
- onClick: () => N(!0),
475
- "data-testid": "search-trigger",
476
- className: "hidden h-8 w-[min(420px,34vw)] items-center gap-2 rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-background)] px-3.5 text-sm text-[var(--prui-dim)] hover:border-[var(--prui-dim)] cursor-pointer md:flex",
477
- children: [
478
- /* @__PURE__ */ e(Ve, { className: "h-4 w-4", "aria-hidden": !0 }),
479
- /* @__PURE__ */ e("span", { className: "flex-1 text-left", children: P.placeholder ?? "Search..." }),
480
- /* @__PURE__ */ e("kbd", { className: "ml-auto rounded-[var(--prui-radius-1)] border border-[var(--prui-line)] bg-[var(--prui-raise)] px-1.5 py-0.5 text-xs", children: T })
481
- ]
482
- }
483
- ) : null,
484
- /* @__PURE__ */ u("div", { className: "flex items-center gap-2 justify-self-end", children: [
485
- y,
486
- /* @__PURE__ */ e(ht, { config: l })
487
- ] })
488
- ]
489
- }
490
- ),
491
- /* @__PURE__ */ e("main", { "data-testid": "app-content", className: "prui-shell-content min-h-0 flex-1 p-4 md:p-6", children: w ? /* @__PURE__ */ e(mt, { mode: w, config: f, children: M }) : M ?? /* @__PURE__ */ e(Be, {}) }),
492
- k ? /* @__PURE__ */ e(s.Suspense, { fallback: null, children: /* @__PURE__ */ e(
493
- pt,
494
- {
495
- timeout: k.sessionTimeout,
496
- warningTime: k.warningTime,
497
- onTimeout: _
498
- }
499
- ) }) : null,
500
- m ? /* @__PURE__ */ e(gt, { open: g, onOpenChange: N, entries: B, placeholder: P.placeholder, onNavigate: L }) : null
501
- ]
502
- }
503
- );
504
- }
505
- function Vt(t) {
506
- const { router: a = "browser", initialEntries: n } = t;
507
- return /* @__PURE__ */ e(a === "memory" ? Fe : Ie, { initialEntries: n, children: /* @__PURE__ */ e(xt, { ...t }) });
508
- }
509
- const Ht = {
510
- name: "App",
511
- props: [
512
- { name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
513
- { name: "nav", type: "NavItem[]", default: "[]", control: "object" },
514
- { name: "search", type: "boolean | { enabled?, hotkey?, placeholder? }", default: "true", control: "boolean" },
515
- { name: "theme", type: "boolean | { default?: ThemeName | 'dark' | 'light', persist? }", default: "true", control: "boolean" },
516
- { name: "auth", type: "boolean | { sessionTimeout?, warningTime?, onTimeout?, loginPath? }", default: "false", control: "boolean" },
517
- { name: "sidebar", type: "{ width?, collapsible?, defaultOpen? }", default: "{}", control: "object" },
518
- { name: "router", type: "'browser' | 'memory'", default: "'browser'", control: "select", options: ["browser", "memory", "react-router"] },
519
- { name: "initialEntries", type: "string[]", default: "undefined", control: "object" },
520
- { name: "pages", type: "'auth' | 'utility' | 'auth+utility'", default: "undefined", control: "select", options: ["auth", "utility", "auth+utility"] },
521
- { name: "expandAllOn", type: "string (pathname)", default: "undefined", control: "text" },
522
- { name: "layoutType", type: "'A' | 'B' | 'C' | 'D'", default: "'A'", control: "select", options: ["A", "B", "C", "D"] },
523
- { name: "sidebarHeader", type: "ReactNode (layout C sidebar header)", default: "brand", control: "none" },
524
- { name: "sidebarFooter", type: "ReactNode", default: null, control: "none" },
525
- { name: "header", type: "ReactNode", default: null, control: "none" },
526
- { name: "children", type: "ReactNode", default: "Outlet", control: "none" }
527
- ]
528
- };
529
- function yt(t) {
530
- return Array.isArray(t) ? { fields: t } : t;
531
- }
532
- function Nt(t) {
533
- if (t)
534
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
535
- }
536
- function de(t, a) {
537
- const n = {};
538
- for (const r of t.fields)
539
- 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] = "";
540
- return n;
541
- }
542
- function wt({
543
- schema: t,
544
- initialValues: a,
545
- defaultValues: n,
546
- onSubmit: r,
547
- onCancel: l,
548
- cancelLabel: h = "Cancel",
549
- submitting: p = !1,
550
- error: y,
551
- className: w
552
- }) {
553
- const f = s.useMemo(() => yt(t), [t]), S = a ?? n, [i, v] = s.useState(() => de(f, S)), [O, M] = s.useState({}), [P, m] = s.useState(null), [T, b] = s.useState(!1);
554
- s.useEffect(() => {
555
- v(de(f, S));
556
- }, [JSON.stringify(f), JSON.stringify(S ?? {})]);
557
- const x = (o, g) => {
558
- v((N) => ({ ...N, [o]: g })), M((N) => {
559
- if (!N[o]) return N;
560
- const c = { ...N };
561
- return delete c[o], c;
562
- });
563
- }, R = async (o) => {
564
- var N;
565
- o.preventDefault();
566
- const g = {};
567
- for (const c of f.fields) {
568
- if (c.required) {
569
- const k = i[c.name];
570
- (k === "" || k == null || Array.isArray(k) && k.length === 0) && (g[c.name] = c.name === void 0 ? "Required" : `${c.label} is required.`);
571
- }
572
- const L = (N = c.validate) == null ? void 0 : N.call(c, i[c.name], i);
573
- L && (g[c.name] = L);
574
- }
575
- if (M(g), !(Object.keys(g).length > 0)) {
576
- m(null);
577
- try {
578
- const c = r == null ? void 0 : r({ ...i });
579
- c && typeof c.then == "function" && (b(!0), await c);
580
- } catch (c) {
581
- m(c instanceof Error ? c.message : String(c));
582
- } finally {
583
- b(!1);
584
- }
585
- }
586
- }, j = p || T;
587
- return /* @__PURE__ */ u("form", { onSubmit: R, className: C("prui-form flex flex-col gap-4", w), noValidate: !0, children: [
588
- /* @__PURE__ */ e("div", { className: C("grid gap-4", f.columns === 2 && "md:grid-cols-2"), children: f.fields.map((o) => {
589
- const g = O[o.name], N = {
590
- id: `prui-form-${o.name}`,
591
- "aria-invalid": g ? !0 : void 0,
592
- "aria-describedby": g ? `prui-form-${o.name}-error` : void 0
593
- };
594
- return /* @__PURE__ */ u("div", { className: C("flex flex-col gap-1.5", o.colSpan === 2 && "md:col-span-2", o.className), children: [
595
- /* @__PURE__ */ u(dt, { htmlFor: N.id, children: [
596
- o.label,
597
- o.required ? /* @__PURE__ */ e("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
598
- ] }),
599
- o.type === "textarea" ? /* @__PURE__ */ e(
600
- ot,
601
- {
602
- ...N,
603
- placeholder: o.placeholder,
604
- disabled: o.disabled || j,
605
- value: String(i[o.name] ?? ""),
606
- onChange: (c) => x(o.name, c.target.value)
607
- }
608
- ) : o.type === "select" ? /* @__PURE__ */ e(
609
- he,
610
- {
611
- ...N,
612
- options: Nt(o.options),
613
- placeholder: o.placeholder,
614
- disabled: o.disabled || j,
615
- value: String(i[o.name] ?? ""),
616
- onChange: (c) => x(o.name, c)
617
- }
618
- ) : o.type === "date" ? /* @__PURE__ */ e(
619
- X,
620
- {
621
- ...N,
622
- type: "date",
623
- placeholder: o.placeholder,
624
- disabled: o.disabled || j,
625
- value: String(i[o.name] ?? ""),
626
- onChange: (c) => x(o.name, c.target.value)
627
- }
628
- ) : o.type === "boolean" ? /* @__PURE__ */ e(
629
- be,
630
- {
631
- ...N,
632
- disabled: o.disabled || j,
633
- checked: !!i[o.name],
634
- onChange: (c) => x(o.name, c)
635
- }
636
- ) : /* @__PURE__ */ e(
637
- X,
638
- {
639
- ...N,
640
- type: o.type ?? "text",
641
- placeholder: o.placeholder,
642
- disabled: o.disabled || j,
643
- value: String(i[o.name] ?? ""),
644
- onChange: (c) => x(o.name, o.type === "number" ? c.target.value === "" ? "" : Number(c.target.value) : c.target.value)
645
- }
646
- ),
647
- g ? /* @__PURE__ */ e("p", { id: `prui-form-${o.name}-error`, role: "alert", className: "text-xs text-[var(--prui-danger)]", children: g }) : null
648
- ] }, o.name);
649
- }) }),
650
- y ?? P ? /* @__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: y ?? P }) : null,
651
- /* @__PURE__ */ u("div", { className: "flex items-center justify-end gap-2", children: [
652
- l ? /* @__PURE__ */ e(D, { type: "button", variant: "ghost", onClick: l, disabled: j, children: h }) : null,
653
- /* @__PURE__ */ e(D, { type: "submit", variant: "primary", loading: j, children: f.submitLabel ?? "Submit" })
654
- ] })
655
- ] });
656
- }
657
- const Jt = {
658
- name: "Form",
659
- props: [
660
- { name: "schema", type: "FormSchema", default: null, control: "object" },
661
- { name: "initialValues", type: "Record<string, unknown>", default: "{}", control: "object" },
662
- { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
663
- { name: "onCancel", type: "() => void", default: null, control: "none" },
664
- { name: "submitting", type: "boolean", default: "false", control: "boolean" },
665
- { name: "error", type: "string | null", default: "null", control: "text" }
666
- ]
667
- };
668
- function Se(t) {
669
- if (t)
670
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
671
- }
672
- function St(t, a) {
673
- return { fields: t.filter((r) => r.formField !== !1 && !r.hidden).filter((r) => r.key !== "id" && r.key !== "actions").map((r) => {
674
- var l;
675
- return {
676
- name: r.key,
677
- label: typeof r.label == "string" ? r.label : r.key,
678
- type: kt(r, a),
679
- options: (l = Se(r.filterOptions ?? r.options)) == null ? void 0 : l.map((h) => ({ label: h.label, value: h.value })),
680
- required: !1
681
- };
682
- }), submitLabel: a ? "Save" : "Create" };
683
- }
684
- function kt(t, a) {
685
- 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";
686
- }
687
- function Yt({
688
- name: t,
689
- columns: a,
690
- list: n,
691
- create: r,
692
- update: l,
693
- remove: h,
694
- delete: p,
695
- actions: y,
696
- form: w,
697
- formSchema: f,
698
- rowKey: S,
699
- searchPlaceholder: i,
700
- pageSize: v = 20,
701
- className: O
702
- }) {
703
- const M = h ?? p, P = y ?? ["create", "edit", "delete"], m = (d) => P.includes(d) && (d === "create" ? !!r : d === "edit" ? !!l : !!M), [T, b] = s.useState([]), [x, R] = s.useState(null), [j, o] = s.useState(1), [g, N] = s.useState(v), [c, L] = s.useState([null]), [k, _] = s.useState(""), [B, q] = s.useState({}), [K, A] = s.useState(null), [$, E] = s.useState(!0), [z, V] = s.useState(null), [F, G] = s.useState(null), [ke, U] = s.useState(!1), [Ce, Q] = s.useState(!1), Z = c[j - 1] ?? null, ee = JSON.stringify(B), H = s.useCallback(async () => {
704
- E(!0), V(null);
705
- try {
706
- const d = await n({ search: k, cursor: Z, pageSize: g, sort: K, filters: B });
707
- b(d.rows), R(d.nextCursor ?? d.cursor ?? null);
708
- } catch (d) {
709
- V(d instanceof Error ? d.message : String(d)), b([]), R(null);
710
- } finally {
711
- E(!1);
712
- }
713
- }, [k, Z, g, K, ee, n]);
714
- s.useEffect(() => {
715
- H();
716
- }, [H]), s.useEffect(() => {
717
- o(1), L([null]);
718
- }, [k, g, ee]);
719
- const Te = a.filter((d) => d.filter).map((d) => ({
720
- key: d.key,
721
- label: typeof d.label == "string" ? d.label : d.key,
722
- type: d.filter === "numberrange" ? "number" : d.filter,
723
- options: Se(d.filterOptions ?? d.options)
724
- })), Ee = (d, J) => {
725
- q((Y) => ({ ...Y, [d]: J }));
726
- }, Pe = () => {
727
- G(null), U(!0);
728
- }, Re = (d) => {
729
- G(d), U(!0);
730
- }, Me = async (d) => {
731
- if (!(!await nt({
732
- title: `Delete ${I}?`,
733
- message: "This action cannot be undone.",
734
- confirmText: "Delete",
735
- cancelText: "Cancel",
736
- type: "danger"
737
- }) || !M)) {
738
- Q(!0);
739
- try {
740
- await M(d), await H();
741
- } finally {
742
- Q(!1);
743
- }
744
- }
745
- }, je = (d, J) => {
746
- if (J === "next") {
747
- const Y = x;
748
- L((ze) => {
749
- const re = [...ze];
750
- return re[d - 1] = Y, re;
751
- });
752
- }
753
- o(d);
754
- }, $e = [
755
- ...a.filter((d) => !d.hidden),
756
- ...m("edit") || m("delete") ? [
757
- {
758
- key: "actions",
759
- label: "",
760
- align: "right",
761
- render: (d) => /* @__PURE__ */ u("div", { className: "flex items-center justify-end gap-1", children: [
762
- m("edit") ? /* @__PURE__ */ e(D, { variant: "ghost", size: "icon", "aria-label": "Edit", onClick: () => Re(d), "data-testid": "resource-edit", children: /* @__PURE__ */ e(Ye, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) }) : null,
763
- m("delete") ? /* @__PURE__ */ e(D, { variant: "ghost", size: "icon", "aria-label": "Delete", disabled: Ce, onClick: () => void Me(d), "data-testid": "resource-delete", children: /* @__PURE__ */ e(We, { className: "h-3.5 w-3.5 text-[var(--prui-danger)]", "aria-hidden": !0 }) }) : null
764
- ] })
765
- }
766
- ] : []
767
- ], te = f ?? St(a, F), Oe = F ? Object.fromEntries(
768
- te.fields.map((d) => [d.name, F[d.name] ?? ""])
769
- ) : void 0, I = t.replace(/s$/, "");
770
- return /* @__PURE__ */ u("div", { className: C("prui-resource flex flex-col gap-2", O), "data-testid": "resource", children: [
771
- /* @__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 }) }),
772
- /* @__PURE__ */ e(
773
- lt,
774
- {
775
- searchPlaceholder: i ?? `Search ${t}...`,
776
- searchValue: k,
777
- onSearchChange: _,
778
- filters: Te,
779
- filterValues: B,
780
- onFilterChange: Ee,
781
- actions: m("create") ? /* @__PURE__ */ u(D, { variant: "primary", size: "sm", onClick: Pe, "data-testid": "resource-create", children: [
782
- /* @__PURE__ */ e(Xe, { className: "h-4 w-4", "aria-hidden": !0 }),
783
- "New ",
784
- I
785
- ] }) : void 0
786
- }
787
- ),
788
- z ? /* @__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: z }) : null,
789
- /* @__PURE__ */ e(st, { columns: $e, rows: T, rowKey: S, sort: K, onSortChange: A, loading: $ }),
790
- /* @__PURE__ */ e(
791
- it,
792
- {
793
- page: j,
794
- pageSize: g,
795
- hasNextPage: x != null,
796
- hasPreviousPage: j > 1,
797
- onPageChange: je,
798
- onPageSizeChange: (d) => N(d)
799
- }
800
- ),
801
- /* @__PURE__ */ u(fe, { open: ke, onClose: () => U(!1), size: "sm", ariaLabel: F ? `Edit ${I}` : `New ${I}`, noPadding: !0, children: [
802
- /* @__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: F ? `Edit ${I}` : `New ${I}` }) }),
803
- /* @__PURE__ */ e("div", { className: "px-8 pb-8", children: w ?? /* @__PURE__ */ e(
804
- wt,
805
- {
806
- schema: te,
807
- initialValues: Oe,
808
- onCancel: () => U(!1),
809
- onSubmit: async (d) => {
810
- F ? await (l == null ? void 0 : l(F, d)) : await (r == null ? void 0 : r(d)), U(!1), await H();
811
- }
812
- }
813
- ) })
814
- ] })
815
- ] });
816
- }
817
- const Wt = {
818
- name: "Resource",
819
- props: [
820
- { name: "name", type: "string", default: null, control: "text" },
821
- { name: "columns", type: "ResourceColumn<T>[]", default: null, control: "object" },
822
- { name: "list", type: "(query) => Promise<{rows, cursor}>", default: null, control: "none" },
823
- { name: "create", type: "(values) => Promise<void>", default: null, control: "none" },
824
- { name: "update", type: "(row, values) => Promise<void>", default: null, control: "none" },
825
- { name: "remove", type: "(row) => Promise<void>", default: null, control: "none" },
826
- { name: "delete", type: "(row) => Promise<void>", default: "alias of remove", control: "none" },
827
- { name: "actions", type: "('create' | 'edit' | 'delete')[]", default: "all provided", control: "multiselect", options: ["create", "edit", "delete"] },
828
- { name: "form", type: "ReactNode", default: "built-in schema form", control: "none" },
829
- { name: "formSchema", type: "FormSchema", default: "derived from columns", control: "object" },
830
- { name: "pageSize", type: "number", default: "20", control: "number" }
831
- ]
832
- };
833
- function Xt({ items: t, className: a }) {
834
- 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) => {
835
- const l = n.icon;
836
- return /* @__PURE__ */ u(ve, { "data-testid": "stat-card", children: [
837
- /* @__PURE__ */ u(ge, { className: "pb-2", children: [
838
- /* @__PURE__ */ u(xe, { className: "flex items-center gap-1.5 text-xs", children: [
839
- l ? /* @__PURE__ */ e(l, { className: "h-3.5 w-3.5", "aria-hidden": !0 }) : null,
840
- n.label
841
- ] }),
842
- /* @__PURE__ */ e(ye, { className: "text-2xl", children: n.value })
843
- ] }),
844
- n.delta ? /* @__PURE__ */ e(Ne, { className: "pb-3", children: /* @__PURE__ */ e(
845
- "span",
846
- {
847
- className: C(
848
- "text-xs font-medium",
849
- n.trend === "up" && "text-[var(--prui-ok)]",
850
- n.trend === "down" && "text-[var(--prui-danger)]",
851
- (!n.trend || n.trend === "flat") && "text-[var(--prui-dim)]"
852
- ),
853
- children: n.delta
854
- }
855
- ) }) : null
856
- ] }, `${n.label}-${r}`);
857
- }) });
858
- }
859
- const Gt = {
860
- name: "StatRow",
861
- props: [
862
- { name: "items", type: "StatItem[]", default: null, control: "object" },
863
- { name: "className", type: "string", default: "undefined", control: "text" }
864
- ]
865
- };
866
- function Ct(t) {
867
- if (t)
868
- return t.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a);
869
- }
870
- function Tt({ field: t }) {
871
- const { name: a, type: n, value: r, onChange: l } = t;
872
- if (!n || !a) return null;
873
- const h = `prui-settings-${a}`;
874
- return n === "switch" ? /* @__PURE__ */ e("label", { className: "flex items-center gap-2", htmlFor: h, children: /* @__PURE__ */ e(
875
- be,
876
- {
877
- id: h,
878
- checked: !!r,
879
- onChange: (p) => l == null ? void 0 : l(p),
880
- "aria-label": t.label
881
- }
882
- ) }) : n === "select" ? /* @__PURE__ */ e(
883
- he,
884
- {
885
- id: h,
886
- className: "w-56",
887
- options: Ct(t.options) ?? [],
888
- value: String(r ?? ""),
889
- onChange: (p) => l == null ? void 0 : l(p),
890
- "aria-label": t.label
891
- }
892
- ) : /* @__PURE__ */ e(
893
- X,
894
- {
895
- id: h,
896
- type: n === "number" ? "number" : "text",
897
- className: "h-8 w-56",
898
- value: String(r ?? ""),
899
- onChange: (p) => l == null ? void 0 : l(n === "number" ? p.target.value === "" ? "" : Number(p.target.value) : p.target.value),
900
- "aria-label": t.label
901
- }
902
- );
903
- }
904
- function Qt({ title: t = "Settings", sections: a, className: n }) {
905
- return /* @__PURE__ */ u("div", { className: C("prui-settings mx-auto flex w-full max-w-4xl flex-col gap-6", n), children: [
906
- /* @__PURE__ */ e("h1", { className: "text-xl font-semibold text-[var(--prui-fg)]", children: t }),
907
- /* @__PURE__ */ u("div", { className: "flex flex-col gap-6 md:flex-row", children: [
908
- /* @__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(
909
- "a",
910
- {
911
- href: `#settings-${r.id}`,
912
- 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)]",
913
- children: r.title ?? r.label ?? r.id
914
- }
915
- ) }, r.id)) }) }),
916
- /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: a.map((r) => /* @__PURE__ */ u(ve, { id: `settings-${r.id}`, "data-testid": "settings-section", children: [
917
- /* @__PURE__ */ u(ge, { children: [
918
- /* @__PURE__ */ e(ye, { children: r.title ?? r.label ?? r.id }),
919
- r.description ? /* @__PURE__ */ e(xe, { children: r.description }) : null
920
- ] }),
921
- /* @__PURE__ */ e(Ne, { children: r.content ?? /* @__PURE__ */ e("dl", { className: "flex flex-col divide-y divide-[var(--prui-line)]", children: (r.fields ?? []).map((l, h) => /* @__PURE__ */ u("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: [
922
- /* @__PURE__ */ u("div", { className: "min-w-0", children: [
923
- /* @__PURE__ */ e("dt", { className: "text-sm font-medium text-[var(--prui-fg)]", children: l.label }),
924
- l.description ? /* @__PURE__ */ e("dd", { className: "text-xs text-[var(--prui-dim)]", children: l.description }) : null
925
- ] }),
926
- /* @__PURE__ */ e("div", { className: "shrink-0", children: l.control ?? /* @__PURE__ */ e(Tt, { field: l }) })
927
- ] }, `${l.label}-${h}`)) }) })
928
- ] }, r.id)) })
929
- ] })
930
- ] });
931
- }
932
- const Zt = {
933
- name: "Settings",
934
- props: [
935
- { name: "title", type: "string", default: "'Settings'", control: "text" },
936
- { name: "sections", type: "SettingsSection[]", default: null, control: "object" }
937
- ]
938
- }, ue = ["mousedown", "keydown", "scroll", "touchstart", "click"];
939
- function Et({
940
- timeout: t = 15,
941
- warningTime: a = 2,
942
- onTimeout: n,
943
- onExtend: r,
944
- title: l = "Session expiring soon",
945
- message: h = "Your session is about to expire due to inactivity."
946
- }) {
947
- const p = Math.max(0, t) * 6e4, y = Math.min(Math.max(0, a) * 6e4, p), [w, f] = s.useState(!1), [S, i] = s.useState(y), v = s.useRef(null), O = s.useRef(null), M = s.useRef(null), P = s.useRef(!1), m = s.useCallback(() => {
948
- for (const g of [v, O, M])
949
- g.current != null && (clearInterval(g.current), clearTimeout(g.current), g.current = null);
950
- }, []), T = s.useCallback(() => {
951
- m(), f(!1), n == null || n();
952
- }, [m, n]), b = s.useCallback(() => {
953
- m(), f(!1), P.current = !1, v.current = window.setTimeout(() => {
954
- P.current = !0, i(y), f(!0), M.current = window.setInterval(() => {
955
- i((g) => g <= 1e3 ? (T(), 0) : g - 1e3);
956
- }, 1e3);
957
- }, p - y), O.current = window.setTimeout(T, p);
958
- }, [m, T, p, y]);
959
- s.useEffect(() => {
960
- const g = () => {
961
- P.current || b();
962
- };
963
- for (const N of ue) document.addEventListener(N, g, { passive: !0 });
964
- return b(), () => {
965
- m();
966
- for (const N of ue) document.removeEventListener(N, g);
967
- };
968
- }, [b, m]);
969
- const x = () => {
970
- r == null || r(), b();
971
- }, R = Math.floor(S / 6e4), j = Math.floor(S % 6e4 / 1e3), o = `${R}:${String(j).padStart(2, "0")}`;
972
- return /* @__PURE__ */ u(
973
- fe,
974
- {
975
- open: w,
976
- onClose: x,
977
- size: "sm",
978
- ariaLabel: l,
979
- children: [
980
- /* @__PURE__ */ u("div", { className: "flex flex-col items-center gap-1 px-8 pb-2 pt-8 text-center", children: [
981
- /* @__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(Ge, { className: "h-6 w-6 text-[var(--prui-warn)]", "aria-hidden": !0 }) }),
982
- /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: l }),
983
- /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: h }),
984
- /* @__PURE__ */ e("div", { className: "py-4 font-mono text-4xl font-bold text-[var(--prui-fg)]", "data-testid": "session-countdown", children: o })
985
- ] }),
986
- /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 px-8 pb-8 sm:flex-row", children: [
987
- /* @__PURE__ */ e(D, { variant: "default", className: "flex-1", onClick: T, "data-testid": "session-logout", children: "Log out now" }),
988
- /* @__PURE__ */ e(D, { variant: "primary", className: "flex-1", onClick: x, "data-testid": "session-extend", children: "Continue session" })
989
- ] })
990
- ]
991
- }
992
- );
993
- }
994
- const Pt = {
995
- name: "SessionTimeout",
996
- props: [
997
- { name: "timeout", type: "number", default: "15", control: "number" },
998
- { name: "warningTime", type: "number", default: "2", control: "number" },
999
- { name: "onTimeout", type: "() => void", default: null, control: "none" },
1000
- { name: "onExtend", type: "() => void", default: null, control: "none" }
1001
- ]
1002
- }, Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
1003
- __proto__: null,
1004
- SessionTimeout: Et,
1005
- sessionTimeoutPropsMeta: Pt
1006
- }, Symbol.toStringTag, { value: "Module" }));
1007
- function er({ title: t, description: a, brand: n, width: r = "max-w-sm", footer: l, children: h, className: p }) {
1008
- return /* @__PURE__ */ e("div", { className: C("prui-auth-shell flex min-h-[100dvh] items-center justify-center bg-[var(--prui-background)] p-4", p), "data-testid": "auth-shell", children: /* @__PURE__ */ u("div", { className: C("w-full", r), children: [
1009
- n ? /* @__PURE__ */ u("div", { className: "mb-6 flex items-center justify-center gap-2", "data-testid": "auth-shell-brand", children: [
1010
- n.mark ? /* @__PURE__ */ e("img", { src: n.mark, alt: "", className: "h-8 w-8 rounded-[var(--prui-radius-1)] object-cover" }) : null,
1011
- /* @__PURE__ */ e("span", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: n.name })
1012
- ] }) : null,
1013
- /* @__PURE__ */ u("div", { className: "rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-6", children: [
1014
- /* @__PURE__ */ u("div", { className: "mb-4 flex flex-col gap-1 text-center", children: [
1015
- /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-[var(--prui-fg)]", children: t }),
1016
- a ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--prui-dim)]", children: a }) : null
1017
- ] }),
1018
- h,
1019
- l ? /* @__PURE__ */ e("div", { className: "mt-4 text-center text-sm text-[var(--prui-dim)]", children: l }) : null
1020
- ] })
1021
- ] }) });
1022
- }
1023
- const tr = {
1024
- name: "AuthShell",
1025
- props: [
1026
- { name: "title", type: "string", default: null, control: "text" },
1027
- { name: "description", type: "ReactNode", default: null, control: "text" },
1028
- { name: "brand", type: "{ name, mark?, href? }", default: "undefined", control: "object" },
1029
- { name: "width", type: "string", default: "'max-w-sm'", control: "text" },
1030
- { name: "footer", type: "ReactNode", default: null, control: "none" },
1031
- { name: "children", type: "ReactNode", default: null, control: "none" }
1032
- ]
1033
- };
1034
- export {
1035
- Vt as A,
1036
- gt as C,
1037
- wt as F,
1038
- Yt as R,
1039
- Et as S,
1040
- xt as a,
1041
- er as b,
1042
- mt as c,
1043
- Qt as d,
1044
- ie as e,
1045
- Xt as f,
1046
- Ht as g,
1047
- tr as h,
1048
- Jt as i,
1049
- Zt as j,
1050
- Gt as k,
1051
- Wt as r,
1052
- Pt as s,
1053
- ft as u
1054
- };