@tomny-dev/uzi 0.2.4 → 0.2.5

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 (6) hide show
  1. package/dist/index.cjs +1925 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1145 -881
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +2025 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,17 +1,17 @@
1
- import * as e from "react";
2
- import { createContext as t, useCallback as n, useContext as r, useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
3
- import { Slot as l } from "@radix-ui/react-slot";
4
- import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
5
- import * as p from "@radix-ui/react-avatar";
6
- import * as m from "@radix-ui/react-dialog";
7
- import * as h from "@radix-ui/react-toast";
8
- import * as g from "@radix-ui/react-dropdown-menu";
9
- import * as _ from "@radix-ui/react-select";
1
+ import * as React from "react";
2
+ import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
3
+ import { Slot } from "@radix-ui/react-slot";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ import * as AvatarPrimitive from "@radix-ui/react-avatar";
6
+ import * as DialogPrimitive from "@radix-ui/react-dialog";
7
+ import * as ToastPrimitive from "@radix-ui/react-toast";
8
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
9
+ import * as SelectPrimitive from "@radix-ui/react-select";
10
10
  //#region src/utils/cx.ts
11
- function v(...e) {
12
- return e.filter(Boolean).join(" ");
11
+ function cx(...values) {
12
+ return values.filter(Boolean).join(" ");
13
13
  }
14
- var y = {
14
+ var button_module_default = {
15
15
  button: "uzi-button-module__button__5dzDN",
16
16
  sizeSm: "uzi-button-module__sizeSm__jb544",
17
17
  sizeMd: "uzi-button-module__sizeMd__lIo8M",
@@ -23,7 +23,10 @@ var y = {
23
23
  variantGhost: "uzi-button-module__variantGhost__-OEB8",
24
24
  variantDestructive: "uzi-button-module__variantDestructive__5IeYA",
25
25
  variantLink: "uzi-button-module__variantLink__Olx4I"
26
- }, b = {
26
+ };
27
+ //#endregion
28
+ //#region src/components/button/Button.tsx
29
+ var variantClass = {
27
30
  default: "variantPrimary",
28
31
  primary: "variantPrimary",
29
32
  secondary: "variantSecondary",
@@ -31,31 +34,34 @@ var y = {
31
34
  ghost: "variantGhost",
32
35
  destructive: "variantDestructive",
33
36
  link: "variantLink"
34
- }, x = {
37
+ };
38
+ var sizeClass = {
35
39
  default: "sizeMd",
36
40
  sm: "sizeSm",
37
41
  md: "sizeMd",
38
42
  lg: "sizeLg",
39
43
  icon: "sizeIcon"
40
44
  };
41
- function S({ as: e, variant: t = "default", size: n = "default", className: r, children: i, asChild: a = !1, ...o }) {
42
- let s = v(y.button, y[b[t]], y[x[n]], r);
43
- return a ? /* @__PURE__ */ d(l, {
44
- className: s,
45
- ...o,
46
- children: i
47
- }) : e === "a" ? /* @__PURE__ */ d("a", {
48
- className: s,
49
- ...o,
50
- children: i
51
- }) : /* @__PURE__ */ d("button", {
45
+ function Button({ as, variant = "default", size = "default", className, children, asChild = false, ...rest }) {
46
+ const classes = cx(button_module_default.button, button_module_default[variantClass[variant]], button_module_default[sizeClass[size]], className);
47
+ if (asChild) return /* @__PURE__ */ jsx(Slot, {
48
+ className: classes,
49
+ ...rest,
50
+ children
51
+ });
52
+ if (as === "a") return /* @__PURE__ */ jsx("a", {
53
+ className: classes,
54
+ ...rest,
55
+ children
56
+ });
57
+ return /* @__PURE__ */ jsx("button", {
52
58
  type: "button",
53
- className: s,
54
- ...o,
55
- children: i
59
+ className: classes,
60
+ ...rest,
61
+ children
56
62
  });
57
63
  }
58
- var C = {
64
+ var avatar_module_default = {
59
65
  avatar: "uzi-avatar-module__avatar__yPIOs",
60
66
  "size-sm": "uzi-avatar-module__size-sm__v5riJ",
61
67
  "size-md": "uzi-avatar-module__size-md__g7IQS",
@@ -66,26 +72,26 @@ var C = {
66
72
  };
67
73
  //#endregion
68
74
  //#region src/components/avatar/Avatar.tsx
69
- function w({ className: e, size: t = "md", ...n }) {
70
- let r = t === "sm" ? C["size-sm"] : t === "lg" ? C["size-lg"] : t === "xl" ? C["size-xl"] : C["size-md"];
71
- return /* @__PURE__ */ d(p.Root, {
72
- className: v(C.avatar, r, e),
73
- ...n
75
+ function Avatar({ className, size = "md", ...props }) {
76
+ const sizeClass = size === "sm" ? avatar_module_default["size-sm"] : size === "lg" ? avatar_module_default["size-lg"] : size === "xl" ? avatar_module_default["size-xl"] : avatar_module_default["size-md"];
77
+ return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
78
+ className: cx(avatar_module_default.avatar, sizeClass, className),
79
+ ...props
74
80
  });
75
81
  }
76
- function T({ className: e, ...t }) {
77
- return /* @__PURE__ */ d(p.Image, {
78
- className: v(C.image, e),
79
- ...t
82
+ function AvatarImage({ className, ...props }) {
83
+ return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
84
+ className: cx(avatar_module_default.image, className),
85
+ ...props
80
86
  });
81
87
  }
82
- function E({ className: e, ...t }) {
83
- return /* @__PURE__ */ d(p.Fallback, {
84
- className: v(C.fallback, e),
85
- ...t
88
+ function AvatarFallback({ className, ...props }) {
89
+ return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
90
+ className: cx(avatar_module_default.fallback, className),
91
+ ...props
86
92
  });
87
93
  }
88
- var D = {
94
+ var card_module_default = {
89
95
  card: "uzi-card-module__card__ZPFTz",
90
96
  "tone-default": "uzi-card-module__tone-default__7Ujf9",
91
97
  "tone-muted": "uzi-card-module__tone-muted__RQy5B",
@@ -98,24 +104,25 @@ var D = {
98
104
  };
99
105
  //#endregion
100
106
  //#region src/components/card/Card.tsx
101
- function O({ as: e, tone: t = "default", padding: n = "md", interactive: r = !1, className: i, children: a, ...o }) {
102
- let s = e ?? "div", c = {
107
+ function Card({ as, tone = "default", padding = "md", interactive = false, className, children, ...rest }) {
108
+ const Component = as ?? "div";
109
+ const TONE_CLASS = {
103
110
  default: null,
104
111
  muted: "tone-muted",
105
112
  contrast: "tone-contrast"
106
113
  };
107
- return /* @__PURE__ */ d(s, {
108
- className: v(D.card, c[t] ? D[c[t]] : null, D[{
114
+ return /* @__PURE__ */ jsx(Component, {
115
+ className: cx(card_module_default.card, TONE_CLASS[tone] ? card_module_default[TONE_CLASS[tone]] : null, card_module_default[{
109
116
  none: "padding-none",
110
117
  sm: "padding-sm",
111
118
  md: "padding-md",
112
119
  lg: "padding-lg"
113
- }[n]], r && D.interactive, i),
114
- ...o,
115
- children: a
120
+ }[padding]], interactive && card_module_default.interactive, className),
121
+ ...rest,
122
+ children
116
123
  });
117
124
  }
118
- var k = {
125
+ var pill_module_default = {
119
126
  pill: "uzi-pill-module__pill__uCKcP",
120
127
  "size-sm": "uzi-pill-module__size-sm__JANOQ",
121
128
  "size-md": "uzi-pill-module__size-md__fdsqR",
@@ -128,21 +135,21 @@ var k = {
128
135
  };
129
136
  //#endregion
130
137
  //#region src/components/pill/Pill.tsx
131
- function A({ as: e, tone: t = "neutral", size: n = "md", icon: r, className: i, children: a, ...o }) {
132
- return /* @__PURE__ */ f(e ?? "span", {
133
- className: v(k.pill, k[`tone-${t}`], k[`size-${n}`], i),
134
- ...o,
135
- children: [r ? /* @__PURE__ */ d("span", {
136
- className: k.icon,
138
+ function Pill({ as, tone = "neutral", size = "md", icon, className, children, ...rest }) {
139
+ return /* @__PURE__ */ jsxs(as ?? "span", {
140
+ className: cx(pill_module_default.pill, pill_module_default[`tone-${tone}`], pill_module_default[`size-${size}`], className),
141
+ ...rest,
142
+ children: [icon ? /* @__PURE__ */ jsx("span", {
143
+ className: pill_module_default.icon,
137
144
  "aria-hidden": "true",
138
- children: r
139
- }) : null, /* @__PURE__ */ d("span", {
140
- className: k.content,
141
- children: a
145
+ children: icon
146
+ }) : null, /* @__PURE__ */ jsx("span", {
147
+ className: pill_module_default.content,
148
+ children
142
149
  })]
143
150
  });
144
151
  }
145
- var j = {
152
+ var modal_module_default = {
146
153
  portalLayer: "uzi-modal-module__portalLayer__t7blc",
147
154
  backdrop: "uzi-modal-module__backdrop__IMd3b",
148
155
  backdropFadeIn: "uzi-modal-module__backdropFadeIn__GNJdx",
@@ -165,45 +172,45 @@ var j = {
165
172
  };
166
173
  //#endregion
167
174
  //#region src/components/modal/Modal.tsx
168
- function M({ open: e, onClose: t, className: n, children: r }) {
169
- return /* @__PURE__ */ d(m.Root, {
170
- open: e,
171
- onOpenChange: (e) => {
172
- e || t();
175
+ function ModalOverlay({ open, onClose, className, children }) {
176
+ return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
177
+ open,
178
+ onOpenChange: (nextOpen) => {
179
+ if (!nextOpen) onClose();
173
180
  },
174
- children: /* @__PURE__ */ d(m.Portal, { children: /* @__PURE__ */ f("div", {
175
- className: j.portalLayer,
176
- children: [/* @__PURE__ */ d(m.Overlay, { className: v(j.backdrop, n) }), /* @__PURE__ */ d(m.Content, {
177
- className: j.overlayContent,
178
- children: r
181
+ children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", {
182
+ className: modal_module_default.portalLayer,
183
+ children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cx(modal_module_default.backdrop, className) }), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
184
+ className: modal_module_default.overlayContent,
185
+ children
179
186
  })]
180
187
  }) })
181
188
  });
182
189
  }
183
- function N({ open: e, onClose: t, title: n, subtitle: r, size: i = "md", children: a, footer: o }) {
184
- return /* @__PURE__ */ d(M, {
185
- open: e,
186
- onClose: t,
187
- children: /* @__PURE__ */ f("div", {
188
- className: v(j.modal, j[`size-${i}`]),
190
+ function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
191
+ return /* @__PURE__ */ jsx(ModalOverlay, {
192
+ open,
193
+ onClose,
194
+ children: /* @__PURE__ */ jsxs("div", {
195
+ className: cx(modal_module_default.modal, modal_module_default[`size-${size}`]),
189
196
  children: [
190
- /* @__PURE__ */ f("div", {
191
- className: j.header,
192
- children: [/* @__PURE__ */ f("div", {
193
- className: j.titles,
194
- children: [/* @__PURE__ */ d(m.Title, {
195
- className: j.title,
196
- children: n
197
- }), r ? /* @__PURE__ */ d(m.Description, {
198
- className: j.subtitle,
199
- children: r
197
+ /* @__PURE__ */ jsxs("div", {
198
+ className: modal_module_default.header,
199
+ children: [/* @__PURE__ */ jsxs("div", {
200
+ className: modal_module_default.titles,
201
+ children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
202
+ className: modal_module_default.title,
203
+ children: title
204
+ }), subtitle ? /* @__PURE__ */ jsx(DialogPrimitive.Description, {
205
+ className: modal_module_default.subtitle,
206
+ children: subtitle
200
207
  }) : null]
201
- }), /* @__PURE__ */ d(m.Close, {
202
- asChild: !0,
203
- children: /* @__PURE__ */ d("button", {
204
- className: j.closeButton,
208
+ }), /* @__PURE__ */ jsx(DialogPrimitive.Close, {
209
+ asChild: true,
210
+ children: /* @__PURE__ */ jsx("button", {
211
+ className: modal_module_default.closeButton,
205
212
  "aria-label": "Close",
206
- children: /* @__PURE__ */ f("svg", {
213
+ children: /* @__PURE__ */ jsxs("svg", {
207
214
  width: "14",
208
215
  height: "14",
209
216
  viewBox: "0 0 24 24",
@@ -212,12 +219,12 @@ function N({ open: e, onClose: t, title: n, subtitle: r, size: i = "md", childre
212
219
  strokeWidth: "2.5",
213
220
  strokeLinecap: "round",
214
221
  strokeLinejoin: "round",
215
- children: [/* @__PURE__ */ d("line", {
222
+ children: [/* @__PURE__ */ jsx("line", {
216
223
  x1: "18",
217
224
  y1: "6",
218
225
  x2: "6",
219
226
  y2: "18"
220
- }), /* @__PURE__ */ d("line", {
227
+ }), /* @__PURE__ */ jsx("line", {
221
228
  x1: "6",
222
229
  y1: "6",
223
230
  x2: "18",
@@ -227,19 +234,19 @@ function N({ open: e, onClose: t, title: n, subtitle: r, size: i = "md", childre
227
234
  })
228
235
  })]
229
236
  }),
230
- /* @__PURE__ */ d("div", {
231
- className: j.body,
232
- children: a
237
+ /* @__PURE__ */ jsx("div", {
238
+ className: modal_module_default.body,
239
+ children
233
240
  }),
234
- o && /* @__PURE__ */ d("div", {
235
- className: j.footer,
236
- children: o
241
+ footer && /* @__PURE__ */ jsx("div", {
242
+ className: modal_module_default.footer,
243
+ children: footer
237
244
  })
238
245
  ]
239
246
  })
240
247
  });
241
248
  }
242
- var P = {
249
+ var alert_module_default = {
243
250
  alert: "uzi-alert-module__alert__7Bt6c",
244
251
  success: "uzi-alert-module__success__apdFG",
245
252
  error: "uzi-alert-module__error__KLgi1",
@@ -248,14 +255,14 @@ var P = {
248
255
  };
249
256
  //#endregion
250
257
  //#region src/components/alert/Alert.tsx
251
- function F({ tone: e, children: t, className: n }) {
252
- return /* @__PURE__ */ d("div", {
253
- className: v(P.alert, P[e], n),
258
+ function Alert({ tone, children, className }) {
259
+ return /* @__PURE__ */ jsx("div", {
260
+ className: cx(alert_module_default.alert, alert_module_default[tone], className),
254
261
  role: "alert",
255
- children: t
262
+ children
256
263
  });
257
264
  }
258
- var I = {
265
+ var toast_module_default = {
259
266
  stack: "uzi-toast-module__stack__SRrda",
260
267
  topRight: "uzi-toast-module__topRight__WiZzM",
261
268
  topLeft: "uzi-toast-module__topLeft__SzFS9",
@@ -275,94 +282,133 @@ var I = {
275
282
  controls: "uzi-toast-module__controls__LqA4Q",
276
283
  iconButton: "uzi-toast-module__iconButton__FOsOp",
277
284
  iconButtonError: "uzi-toast-module__iconButtonError__NJsLX"
278
- }, L = {
285
+ };
286
+ //#endregion
287
+ //#region src/components/toast/ToastContext.tsx
288
+ /** Default provider configuration. */
289
+ var DEFAULT_CONFIG = {
279
290
  position: "top-right",
280
291
  maxToasts: 5,
281
292
  defaultDuration: 4e3,
282
- pauseOnHover: !0,
283
- pauseOnFocusLoss: !0
284
- }, R = t(void 0), z = 0, B = () => `toast-${++z}-${Date.now()}`;
285
- function V({ children: e, config: t }) {
286
- let [r, a] = c([]), [s, l] = c(!1), u = o(() => ({
287
- ...L,
288
- ...t
289
- }), [t]), p = n((e, t = {}) => {
290
- let n = B();
291
- return a((r) => {
292
- let i = [...r, {
293
- id: n,
294
- message: e,
295
- type: t.type ?? "info",
296
- duration: t.duration ?? (t.type === "error" ? 6e3 : u.defaultDuration),
297
- dismissible: t.dismissible ?? !0,
298
- copyable: t.copyable ?? !1,
299
- action: t.action
293
+ pauseOnHover: true,
294
+ pauseOnFocusLoss: true
295
+ };
296
+ var ToastContext = createContext(void 0);
297
+ var toastIdCounter = 0;
298
+ var generateToastId = () => `toast-${++toastIdCounter}-${Date.now()}`;
299
+ /**
300
+ * Toast notification context provider.
301
+ *
302
+ * @remarks
303
+ * Wrap your app (or a section) to enable `useToast` calls. Supports configurable placement,
304
+ * maximum visible toasts, and pause behavior on hover or window blur.
305
+ *
306
+ * @param props.children - React subtree that can consume the toast context.
307
+ * @param props.config - Optional provider configuration overrides.
308
+ */
309
+ function ToastProvider({ children, config }) {
310
+ const [toasts, setToasts] = useState([]);
311
+ const [isPaused, setIsPaused] = useState(false);
312
+ const merged = useMemo(() => ({
313
+ ...DEFAULT_CONFIG,
314
+ ...config
315
+ }), [config]);
316
+ const push = useCallback((message, options = {}) => {
317
+ const id = generateToastId();
318
+ setToasts((prev) => {
319
+ const next = [...prev, {
320
+ id,
321
+ message,
322
+ type: options.type ?? "info",
323
+ duration: options.duration ?? (options.type === "error" ? 6e3 : merged.defaultDuration),
324
+ dismissible: options.dismissible ?? true,
325
+ copyable: options.copyable ?? false,
326
+ action: options.action
300
327
  }];
301
- return i.length > u.maxToasts && i.shift(), i;
302
- }), n;
303
- }, [u.defaultDuration, u.maxToasts]), m = n((e, t) => p(e, {
304
- ...t,
328
+ if (next.length > merged.maxToasts) next.shift();
329
+ return next;
330
+ });
331
+ return id;
332
+ }, [merged.defaultDuration, merged.maxToasts]);
333
+ const success = useCallback((message, options) => push(message, {
334
+ ...options,
305
335
  type: "success"
306
- }), [p]), g = n((e, t) => p(e, {
307
- copyable: !0,
308
- ...t,
336
+ }), [push]);
337
+ const error = useCallback((message, options) => push(message, {
338
+ copyable: true,
339
+ ...options,
309
340
  type: "error"
310
- }), [p]), _ = n((e, t) => p(e, {
311
- ...t,
341
+ }), [push]);
342
+ const warning = useCallback((message, options) => push(message, {
343
+ ...options,
312
344
  type: "warning"
313
- }), [p]), v = n((e, t) => p(e, {
314
- ...t,
345
+ }), [push]);
346
+ const info = useCallback((message, options) => push(message, {
347
+ ...options,
315
348
  type: "info"
316
- }), [p]), y = n((e) => {
317
- a((t) => t.filter((t) => t.id !== e));
318
- }, []), b = n(() => a([]), []);
319
- i(() => {
320
- if (!u.pauseOnFocusLoss) return;
321
- let e = () => l(document.visibilityState !== "visible");
322
- return document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
323
- }, [u.pauseOnFocusLoss]);
324
- let x = o(() => ({
325
- toasts: r,
326
- push: p,
327
- success: m,
328
- error: g,
329
- warning: _,
330
- info: v,
331
- dismiss: y,
332
- dismissAll: b
349
+ }), [push]);
350
+ const dismiss = useCallback((id) => {
351
+ setToasts((prev) => prev.filter((t) => t.id !== id));
352
+ }, []);
353
+ const dismissAll = useCallback(() => setToasts([]), []);
354
+ useEffect(() => {
355
+ if (!merged.pauseOnFocusLoss) return;
356
+ const handleVisibility = () => setIsPaused(document.visibilityState !== "visible");
357
+ document.addEventListener("visibilitychange", handleVisibility);
358
+ return () => document.removeEventListener("visibilitychange", handleVisibility);
359
+ }, [merged.pauseOnFocusLoss]);
360
+ const value = useMemo(() => ({
361
+ toasts,
362
+ push,
363
+ success,
364
+ error,
365
+ warning,
366
+ info,
367
+ dismiss,
368
+ dismissAll
333
369
  }), [
334
- r,
335
- p,
336
- m,
337
- g,
338
- _,
339
- v,
340
- y,
341
- b
370
+ toasts,
371
+ push,
372
+ success,
373
+ error,
374
+ warning,
375
+ info,
376
+ dismiss,
377
+ dismissAll
342
378
  ]);
343
- return /* @__PURE__ */ d(R.Provider, {
344
- value: x,
345
- children: /* @__PURE__ */ f(h.Provider, {
379
+ return /* @__PURE__ */ jsx(ToastContext.Provider, {
380
+ value,
381
+ children: /* @__PURE__ */ jsxs(ToastPrimitive.Provider, {
346
382
  swipeDirection: "right",
347
- children: [e, /* @__PURE__ */ d(te, {
348
- toasts: r,
349
- position: u.position,
350
- pauseOnHover: u.pauseOnHover,
351
- isPaused: s,
352
- onDismiss: y,
353
- onPauseChange: l
383
+ children: [children, /* @__PURE__ */ jsx(ToastContainer, {
384
+ toasts,
385
+ position: merged.position,
386
+ pauseOnHover: merged.pauseOnHover,
387
+ isPaused,
388
+ onDismiss: dismiss,
389
+ onPauseChange: setIsPaused
354
390
  })]
355
391
  })
356
392
  });
357
393
  }
358
- function ee() {
359
- let e = r(R);
360
- if (!e) throw Error("useToast must be used within a ToastProvider");
361
- return e;
394
+ /**
395
+ * Hook to access the toast API.
396
+ *
397
+ * @remarks
398
+ * Exposes `push`, intent helpers (`success`, `error`, `warning`, `info`), and dismissal helpers.
399
+ * Must be called within a `ToastProvider`.
400
+ *
401
+ * @throws Error if used outside of a `ToastProvider`.
402
+ */
403
+ function useToast() {
404
+ const ctx = useContext(ToastContext);
405
+ if (!ctx) throw new Error("useToast must be used within a ToastProvider");
406
+ return ctx;
362
407
  }
363
- function te({ toasts: e, position: t, pauseOnHover: n, isPaused: r, onDismiss: i, onPauseChange: a }) {
364
- let o = (() => {
365
- switch (t) {
408
+ /** Renders the positioned toast stack. */
409
+ function ToastContainer({ toasts, position, pauseOnHover, isPaused, onDismiss, onPauseChange }) {
410
+ const posClass = (() => {
411
+ switch (position) {
366
412
  case "top-left": return "topLeft";
367
413
  case "top-center": return "topCenter";
368
414
  case "bottom-right": return "bottomRight";
@@ -371,134 +417,166 @@ function te({ toasts: e, position: t, pauseOnHover: n, isPaused: r, onDismiss: i
371
417
  default: return "topRight";
372
418
  }
373
419
  })();
374
- return /* @__PURE__ */ f(u, { children: [e.map((e) => /* @__PURE__ */ d(ne, {
375
- toast: e,
376
- isPaused: r,
377
- onDismiss: i
378
- }, e.id)), /* @__PURE__ */ d(h.Viewport, {
379
- className: v(I.stack, I[o]),
420
+ return /* @__PURE__ */ jsxs(Fragment, { children: [toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
421
+ toast,
422
+ isPaused,
423
+ onDismiss
424
+ }, toast.id)), /* @__PURE__ */ jsx(ToastPrimitive.Viewport, {
425
+ className: cx(toast_module_default.stack, toast_module_default[posClass]),
380
426
  label: "Notifications",
381
- onMouseEnter: () => n && a(!0),
382
- onMouseLeave: () => n && a(!1)
427
+ onMouseEnter: () => pauseOnHover && onPauseChange(true),
428
+ onMouseLeave: () => pauseOnHover && onPauseChange(false)
383
429
  })] });
384
430
  }
385
- function ne({ toast: e, isPaused: t, onDismiss: r }) {
386
- let [a, o] = c(!0), [l, u] = c("idle"), p = s(null), m = s(null), g = s(0), _ = s(e.duration ?? 0), y = s(!1), b = re(e.type), x = {
387
- "--toast-bg": b.background,
388
- "--toast-border": b.border,
389
- "--toast-accent": b.accent,
390
- "--toast-text": b.text,
391
- "--toast-action-bg": b.actionBg,
392
- "--toast-action-border": b.actionBorder
393
- }, S = () => {
394
- m.current &&= (window.clearTimeout(m.current), null);
395
- }, C = n(() => {
396
- y.current || (y.current = !0, o(!1), S(), window.setTimeout(() => r(e.id), 160));
397
- }, [r, e.id]), w = n((e) => {
398
- if (!e || e <= 0) {
399
- C();
431
+ /** Individual toast item with timers and actions. */
432
+ function ToastItem({ toast, isPaused, onDismiss }) {
433
+ const [open, setOpen] = useState(true);
434
+ const [copyState, setCopyState] = useState("idle");
435
+ const copyTimerRef = useRef(null);
436
+ const timerRef = useRef(null);
437
+ const startRef = useRef(0);
438
+ const remainingRef = useRef(toast.duration ?? 0);
439
+ const closingRef = useRef(false);
440
+ const palette = getPalette(toast.type);
441
+ const styleVars = {
442
+ ["--toast-bg"]: palette.background,
443
+ ["--toast-border"]: palette.border,
444
+ ["--toast-accent"]: palette.accent,
445
+ ["--toast-text"]: palette.text,
446
+ ["--toast-action-bg"]: palette.actionBg,
447
+ ["--toast-action-border"]: palette.actionBorder
448
+ };
449
+ const stopTimer = () => {
450
+ if (timerRef.current) {
451
+ window.clearTimeout(timerRef.current);
452
+ timerRef.current = null;
453
+ }
454
+ };
455
+ const triggerDismiss = useCallback(() => {
456
+ if (closingRef.current) return;
457
+ closingRef.current = true;
458
+ setOpen(false);
459
+ stopTimer();
460
+ window.setTimeout(() => onDismiss(toast.id), 160);
461
+ }, [onDismiss, toast.id]);
462
+ const schedule = useCallback((delay) => {
463
+ if (!delay || delay <= 0) {
464
+ triggerDismiss();
400
465
  return;
401
466
  }
402
- g.current = performance.now(), S(), m.current = window.setTimeout(() => C(), e);
403
- }, [C]);
404
- i(() => {
405
- if (!(!e.duration || e.duration <= 0)) return w(e.duration), S;
406
- }, [w, e.duration]), i(() => {
407
- if (!(!e.duration || e.duration <= 0)) if (t) {
408
- let e = performance.now() - g.current;
409
- _.current = Math.max(0, _.current - e), S();
410
- } else w(_.current);
467
+ startRef.current = performance.now();
468
+ stopTimer();
469
+ timerRef.current = window.setTimeout(() => triggerDismiss(), delay);
470
+ }, [triggerDismiss]);
471
+ useEffect(() => {
472
+ if (!toast.duration || toast.duration <= 0) return void 0;
473
+ schedule(toast.duration);
474
+ return stopTimer;
475
+ }, [schedule, toast.duration]);
476
+ useEffect(() => {
477
+ if (!toast.duration || toast.duration <= 0) return;
478
+ if (isPaused) {
479
+ const elapsed = performance.now() - startRef.current;
480
+ remainingRef.current = Math.max(0, remainingRef.current - elapsed);
481
+ stopTimer();
482
+ } else schedule(remainingRef.current);
411
483
  }, [
412
- t,
413
- w,
414
- e.duration
415
- ]), i(() => () => {
416
- p.current && window.clearTimeout(p.current);
484
+ isPaused,
485
+ schedule,
486
+ toast.duration
487
+ ]);
488
+ useEffect(() => {
489
+ return () => {
490
+ if (copyTimerRef.current) window.clearTimeout(copyTimerRef.current);
491
+ };
417
492
  }, []);
418
- let T = n(async () => {
419
- p.current && window.clearTimeout(p.current);
493
+ const handleCopy = useCallback(async () => {
494
+ if (copyTimerRef.current) window.clearTimeout(copyTimerRef.current);
420
495
  try {
421
- if (!navigator.clipboard) throw Error("Clipboard API unavailable");
422
- await navigator.clipboard.writeText(e.message), u("copied");
496
+ if (!navigator.clipboard) throw new Error("Clipboard API unavailable");
497
+ await navigator.clipboard.writeText(toast.message);
498
+ setCopyState("copied");
423
499
  } catch {
424
- u("failed");
500
+ setCopyState("failed");
425
501
  }
426
- p.current = window.setTimeout(() => u("idle"), 1800);
427
- }, [e.message]), E = ie(e.type);
428
- return /* @__PURE__ */ f(h.Root, {
429
- open: a,
430
- onOpenChange: (e) => {
431
- e || C();
502
+ copyTimerRef.current = window.setTimeout(() => setCopyState("idle"), 1800);
503
+ }, [toast.message]);
504
+ const icon = getIcon(toast.type);
505
+ return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
506
+ open,
507
+ onOpenChange: (nextOpen) => {
508
+ if (!nextOpen) triggerDismiss();
432
509
  },
433
510
  duration: 2147483647,
434
- className: I.toast,
435
- style: x,
511
+ className: toast_module_default.toast,
512
+ style: styleVars,
436
513
  children: [
437
- /* @__PURE__ */ d("span", {
438
- className: I.icon,
439
- "aria-hidden": !0,
440
- children: E
514
+ /* @__PURE__ */ jsx("span", {
515
+ className: toast_module_default.icon,
516
+ "aria-hidden": true,
517
+ children: icon
441
518
  }),
442
- /* @__PURE__ */ f("div", {
443
- className: I.body,
444
- children: [/* @__PURE__ */ d(h.Description, {
445
- className: I.message,
446
- children: e.message
447
- }), e.action && /* @__PURE__ */ d("div", {
448
- className: I.actions,
449
- children: /* @__PURE__ */ d(h.Action, {
450
- asChild: !0,
451
- altText: e.action.label,
452
- children: /* @__PURE__ */ d("button", {
519
+ /* @__PURE__ */ jsxs("div", {
520
+ className: toast_module_default.body,
521
+ children: [/* @__PURE__ */ jsx(ToastPrimitive.Description, {
522
+ className: toast_module_default.message,
523
+ children: toast.message
524
+ }), toast.action && /* @__PURE__ */ jsx("div", {
525
+ className: toast_module_default.actions,
526
+ children: /* @__PURE__ */ jsx(ToastPrimitive.Action, {
527
+ asChild: true,
528
+ altText: toast.action.label,
529
+ children: /* @__PURE__ */ jsx("button", {
453
530
  type: "button",
454
- className: I.actionButton,
531
+ className: toast_module_default.actionButton,
455
532
  onClick: () => {
456
- e.action?.onClick(), C();
533
+ toast.action?.onClick();
534
+ triggerDismiss();
457
535
  },
458
- children: e.action.label
536
+ children: toast.action.label
459
537
  })
460
538
  })
461
539
  })]
462
540
  }),
463
- /* @__PURE__ */ f("div", {
464
- className: I.controls,
465
- children: [e.copyable && /* @__PURE__ */ d("button", {
541
+ /* @__PURE__ */ jsxs("div", {
542
+ className: toast_module_default.controls,
543
+ children: [toast.copyable && /* @__PURE__ */ jsx("button", {
466
544
  type: "button",
467
- className: v(I.iconButton, l === "failed" && I.iconButtonError),
545
+ className: cx(toast_module_default.iconButton, copyState === "failed" && toast_module_default.iconButtonError),
468
546
  "aria-label": "Copy message",
469
- onClick: T,
470
- children: l === "copied" ? /* @__PURE__ */ d("svg", {
547
+ onClick: handleCopy,
548
+ children: copyState === "copied" ? /* @__PURE__ */ jsx("svg", {
471
549
  width: "13",
472
550
  height: "13",
473
551
  viewBox: "0 0 13 13",
474
552
  fill: "none",
475
- "aria-hidden": !0,
476
- children: /* @__PURE__ */ d("path", {
553
+ "aria-hidden": true,
554
+ children: /* @__PURE__ */ jsx("path", {
477
555
  d: "M2 6.5l3 3 6-6",
478
556
  stroke: "currentColor",
479
557
  strokeWidth: "1.5",
480
558
  strokeLinecap: "round",
481
559
  strokeLinejoin: "round"
482
560
  })
483
- }) : l === "failed" ? /* @__PURE__ */ d("svg", {
561
+ }) : copyState === "failed" ? /* @__PURE__ */ jsx("svg", {
484
562
  width: "13",
485
563
  height: "13",
486
564
  viewBox: "0 0 13 13",
487
565
  fill: "none",
488
- "aria-hidden": !0,
489
- children: /* @__PURE__ */ d("path", {
566
+ "aria-hidden": true,
567
+ children: /* @__PURE__ */ jsx("path", {
490
568
  d: "M10 3L3 10M3 3l7 7",
491
569
  stroke: "currentColor",
492
570
  strokeWidth: "1.5",
493
571
  strokeLinecap: "round"
494
572
  })
495
- }) : /* @__PURE__ */ f("svg", {
573
+ }) : /* @__PURE__ */ jsxs("svg", {
496
574
  width: "13",
497
575
  height: "13",
498
576
  viewBox: "0 0 13 13",
499
577
  fill: "none",
500
- "aria-hidden": !0,
501
- children: [/* @__PURE__ */ d("rect", {
578
+ "aria-hidden": true,
579
+ children: [/* @__PURE__ */ jsx("rect", {
502
580
  x: "4.5",
503
581
  y: "1.5",
504
582
  width: "7",
@@ -506,26 +584,26 @@ function ne({ toast: e, isPaused: t, onDismiss: r }) {
506
584
  rx: "1.5",
507
585
  stroke: "currentColor",
508
586
  strokeWidth: "1.25"
509
- }), /* @__PURE__ */ d("path", {
587
+ }), /* @__PURE__ */ jsx("path", {
510
588
  d: "M1.5 5.5v5a1.5 1.5 0 001.5 1.5h5",
511
589
  stroke: "currentColor",
512
590
  strokeWidth: "1.25",
513
591
  strokeLinecap: "round"
514
592
  })]
515
593
  })
516
- }), e.dismissible !== !1 && /* @__PURE__ */ d(h.Close, {
517
- asChild: !0,
518
- children: /* @__PURE__ */ d("button", {
594
+ }), toast.dismissible !== false && /* @__PURE__ */ jsx(ToastPrimitive.Close, {
595
+ asChild: true,
596
+ children: /* @__PURE__ */ jsx("button", {
519
597
  type: "button",
520
- className: I.iconButton,
598
+ className: toast_module_default.iconButton,
521
599
  "aria-label": "Dismiss notification",
522
- children: /* @__PURE__ */ d("svg", {
600
+ children: /* @__PURE__ */ jsx("svg", {
523
601
  width: "13",
524
602
  height: "13",
525
603
  viewBox: "0 0 13 13",
526
604
  fill: "none",
527
- "aria-hidden": !0,
528
- children: /* @__PURE__ */ d("path", {
605
+ "aria-hidden": true,
606
+ children: /* @__PURE__ */ jsx("path", {
529
607
  d: "M10 3L3 10M3 3l7 7",
530
608
  stroke: "currentColor",
531
609
  strokeWidth: "1.5",
@@ -538,8 +616,8 @@ function ne({ toast: e, isPaused: t, onDismiss: r }) {
538
616
  ]
539
617
  });
540
618
  }
541
- function re(e) {
542
- switch (e) {
619
+ function getPalette(type) {
620
+ switch (type) {
543
621
  case "success": return {
544
622
  background: "color-mix(in srgb, var(--success) 12%, var(--popover))",
545
623
  border: "color-mix(in srgb, var(--success) 30%, transparent)",
@@ -574,15 +652,15 @@ function re(e) {
574
652
  };
575
653
  }
576
654
  }
577
- function ie(e) {
578
- switch (e) {
579
- case "success": return /* @__PURE__ */ d("svg", {
655
+ function getIcon(type) {
656
+ switch (type) {
657
+ case "success": return /* @__PURE__ */ jsx("svg", {
580
658
  width: "16",
581
659
  height: "16",
582
660
  viewBox: "0 0 16 16",
583
661
  fill: "none",
584
- "aria-hidden": !0,
585
- children: /* @__PURE__ */ d("path", {
662
+ "aria-hidden": true,
663
+ children: /* @__PURE__ */ jsx("path", {
586
664
  d: "M3 8l3.5 3.5L13 4.5",
587
665
  stroke: "currentColor",
588
666
  strokeWidth: "1.75",
@@ -590,39 +668,39 @@ function ie(e) {
590
668
  strokeLinejoin: "round"
591
669
  })
592
670
  });
593
- case "error": return /* @__PURE__ */ d("svg", {
671
+ case "error": return /* @__PURE__ */ jsx("svg", {
594
672
  width: "16",
595
673
  height: "16",
596
674
  viewBox: "0 0 16 16",
597
675
  fill: "none",
598
- "aria-hidden": !0,
599
- children: /* @__PURE__ */ d("path", {
676
+ "aria-hidden": true,
677
+ children: /* @__PURE__ */ jsx("path", {
600
678
  d: "M4 4l8 8M12 4l-8 8",
601
679
  stroke: "currentColor",
602
680
  strokeWidth: "1.75",
603
681
  strokeLinecap: "round"
604
682
  })
605
683
  });
606
- case "warning": return /* @__PURE__ */ d("svg", {
684
+ case "warning": return /* @__PURE__ */ jsx("svg", {
607
685
  width: "16",
608
686
  height: "16",
609
687
  viewBox: "0 0 16 16",
610
688
  fill: "none",
611
- "aria-hidden": !0,
612
- children: /* @__PURE__ */ d("path", {
689
+ "aria-hidden": true,
690
+ children: /* @__PURE__ */ jsx("path", {
613
691
  d: "M8 3v6M8 11.5v1",
614
692
  stroke: "currentColor",
615
693
  strokeWidth: "1.75",
616
694
  strokeLinecap: "round"
617
695
  })
618
696
  });
619
- default: return /* @__PURE__ */ d("svg", {
697
+ default: return /* @__PURE__ */ jsx("svg", {
620
698
  width: "16",
621
699
  height: "16",
622
700
  viewBox: "0 0 16 16",
623
701
  fill: "none",
624
- "aria-hidden": !0,
625
- children: /* @__PURE__ */ d("path", {
702
+ "aria-hidden": true,
703
+ children: /* @__PURE__ */ jsx("path", {
626
704
  d: "M8 7v5M8 4.5v.5",
627
705
  stroke: "currentColor",
628
706
  strokeWidth: "1.75",
@@ -631,27 +709,40 @@ function ie(e) {
631
709
  });
632
710
  }
633
711
  }
634
- var ae = { input: "uzi-input-module__input__-ipHD" }, H = e.forwardRef(({ className: e, type: t, ...n }, r) => /* @__PURE__ */ d("input", {
635
- ref: r,
636
- type: t,
637
- className: v(ae.input, e),
638
- ...n
639
- }));
640
- H.displayName = "Input";
641
- var oe = { label: "uzi-label-module__label__gKflt" }, U = e.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ d("label", {
642
- ref: n,
643
- className: v(oe.label, e),
644
- ...t
645
- }));
646
- U.displayName = "Label";
647
- var se = { checkbox: "uzi-checkbox-module__checkbox__zAB1y" }, W = e.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ d("input", {
648
- ref: n,
649
- type: "checkbox",
650
- className: v(se.checkbox, e),
651
- ...t
712
+ var input_module_default = { input: "uzi-input-module__input__-ipHD" };
713
+ //#endregion
714
+ //#region src/components/input/Input.tsx
715
+ var Input = React.forwardRef(({ className, type, ...props }, ref) => {
716
+ return /* @__PURE__ */ jsx("input", {
717
+ ref,
718
+ type,
719
+ className: cx(input_module_default.input, className),
720
+ ...props
721
+ });
722
+ });
723
+ Input.displayName = "Input";
724
+ var label_module_default = { label: "uzi-label-module__label__gKflt" };
725
+ //#endregion
726
+ //#region src/components/label/Label.tsx
727
+ var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("label", {
728
+ ref,
729
+ className: cx(label_module_default.label, className),
730
+ ...props
652
731
  }));
653
- W.displayName = "Checkbox";
654
- var G = {
732
+ Label.displayName = "Label";
733
+ var checkbox_module_default = { checkbox: "uzi-checkbox-module__checkbox__zAB1y" };
734
+ //#endregion
735
+ //#region src/components/checkbox/Checkbox.tsx
736
+ var Checkbox = React.forwardRef(({ className, ...props }, ref) => {
737
+ return /* @__PURE__ */ jsx("input", {
738
+ ref,
739
+ type: "checkbox",
740
+ className: cx(checkbox_module_default.checkbox, className),
741
+ ...props
742
+ });
743
+ });
744
+ Checkbox.displayName = "Checkbox";
745
+ var multi_select_module_default = {
655
746
  wrapper: "uzi-multi-select-module__wrapper__Izj2x",
656
747
  wrapperFullWidth: "uzi-multi-select-module__wrapperFullWidth__eH8pf",
657
748
  trigger: "uzi-multi-select-module__trigger__r3816",
@@ -669,54 +760,62 @@ var G = {
669
760
  indicator: "uzi-multi-select-module__indicator__NO-WE",
670
761
  indicatorSelected: "uzi-multi-select-module__indicatorSelected__9sEAy",
671
762
  indicatorDisabled: "uzi-multi-select-module__indicatorDisabled__vqdiH"
672
- }, ce = e.forwardRef(({ options: t, value: n, onChange: r, placeholder: i = "Select options", fullWidth: a = !0, maxVisibleValues: o = 2, className: s, disabled: c = !1, name: l, "aria-label": p, "aria-labelledby": m }, h) => {
673
- let _ = e.useMemo(() => new Set(n), [n]), y = e.useMemo(() => t.filter((e) => _.has(e.value)), [t, _]), b = e.useCallback((e) => {
674
- if (_.has(e)) {
675
- r(n.filter((t) => t !== e));
763
+ };
764
+ //#endregion
765
+ //#region src/components/multi-select/MultiSelect.tsx
766
+ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
767
+ const selectedSet = React.useMemo(() => new Set(value), [value]);
768
+ const selectedOptions = React.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
769
+ const toggleValue = React.useCallback((nextValue) => {
770
+ if (selectedSet.has(nextValue)) {
771
+ onChange(value.filter((entry) => entry !== nextValue));
676
772
  return;
677
773
  }
678
- r([...n, e]);
774
+ onChange([...value, nextValue]);
679
775
  }, [
680
- r,
681
- _,
682
- n
683
- ]), x = Math.max(1, o), S = y.slice(0, x), C = Math.max(0, y.length - S.length);
684
- return /* @__PURE__ */ d(g.Root, {
685
- modal: !1,
686
- children: /* @__PURE__ */ f("div", {
687
- className: v(G.wrapper, a && G.wrapperFullWidth, s),
776
+ onChange,
777
+ selectedSet,
778
+ value
779
+ ]);
780
+ const visibleCount = Math.max(1, maxVisibleValues);
781
+ const visibleOptions = selectedOptions.slice(0, visibleCount);
782
+ const overflowCount = Math.max(0, selectedOptions.length - visibleOptions.length);
783
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, {
784
+ modal: false,
785
+ children: /* @__PURE__ */ jsxs("div", {
786
+ className: cx(multi_select_module_default.wrapper, fullWidth && multi_select_module_default.wrapperFullWidth, className),
688
787
  children: [
689
- /* @__PURE__ */ d(g.Trigger, {
690
- asChild: !0,
691
- children: /* @__PURE__ */ f("button", {
692
- ref: h,
788
+ /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
789
+ asChild: true,
790
+ children: /* @__PURE__ */ jsxs("button", {
791
+ ref,
693
792
  type: "button",
694
- className: G.trigger,
695
- "aria-label": p,
696
- "aria-labelledby": m,
697
- disabled: c,
698
- children: [/* @__PURE__ */ d("span", {
699
- className: G.value,
700
- children: y.length === 0 ? /* @__PURE__ */ d("span", {
701
- className: G.placeholder,
702
- children: i
703
- }) : /* @__PURE__ */ f(u, { children: [S.map((e) => /* @__PURE__ */ d("span", {
704
- className: G.chip,
705
- children: e.label
706
- }, e.value)), C > 0 ? /* @__PURE__ */ f("span", {
707
- className: v(G.chip, G.chipSummary),
708
- children: ["+", C]
793
+ className: multi_select_module_default.trigger,
794
+ "aria-label": ariaLabel,
795
+ "aria-labelledby": ariaLabelledBy,
796
+ disabled,
797
+ children: [/* @__PURE__ */ jsx("span", {
798
+ className: multi_select_module_default.value,
799
+ children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", {
800
+ className: multi_select_module_default.placeholder,
801
+ children: placeholder
802
+ }) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ jsx("span", {
803
+ className: multi_select_module_default.chip,
804
+ children: option.label
805
+ }, option.value)), overflowCount > 0 ? /* @__PURE__ */ jsxs("span", {
806
+ className: cx(multi_select_module_default.chip, multi_select_module_default.chipSummary),
807
+ children: ["+", overflowCount]
709
808
  }) : null] })
710
- }), /* @__PURE__ */ d("span", {
711
- className: G.chevron,
809
+ }), /* @__PURE__ */ jsx("span", {
810
+ className: multi_select_module_default.chevron,
712
811
  "aria-hidden": "true",
713
- children: /* @__PURE__ */ d("svg", {
812
+ children: /* @__PURE__ */ jsx("svg", {
714
813
  viewBox: "0 0 10 10",
715
814
  fill: "none",
716
815
  xmlns: "http://www.w3.org/2000/svg",
717
816
  width: "10",
718
817
  height: "10",
719
- children: /* @__PURE__ */ d("path", {
818
+ children: /* @__PURE__ */ jsx("path", {
720
819
  d: "M2 3.5L5 6.5L8 3.5",
721
820
  stroke: "currentColor",
722
821
  strokeWidth: "1.5",
@@ -727,35 +826,35 @@ var G = {
727
826
  })]
728
827
  })
729
828
  }),
730
- l ? n.map((e) => /* @__PURE__ */ d("input", {
829
+ name ? value.map((entry) => /* @__PURE__ */ jsx("input", {
731
830
  type: "hidden",
732
- name: l,
733
- value: e
734
- }, e)) : null,
735
- /* @__PURE__ */ d(g.Portal, { children: /* @__PURE__ */ d(g.Content, {
736
- className: G.menu,
831
+ name,
832
+ value: entry
833
+ }, entry)) : null,
834
+ /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
835
+ className: multi_select_module_default.menu,
737
836
  sideOffset: 4,
738
837
  align: "start",
739
- children: t.map((e) => {
740
- let t = _.has(e.value);
741
- return /* @__PURE__ */ f(g.CheckboxItem, {
742
- className: v(G.option, t && G.optionSelected, e.disabled && G.optionDisabled),
743
- checked: t,
744
- disabled: e.disabled,
745
- onCheckedChange: () => b(e.value),
746
- onSelect: (e) => e.preventDefault(),
747
- children: [/* @__PURE__ */ d("span", {
748
- className: v(G.indicator, t && G.indicatorSelected, e.disabled && G.indicatorDisabled),
838
+ children: options.map((option) => {
839
+ const selected = selectedSet.has(option.value);
840
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
841
+ className: cx(multi_select_module_default.option, selected && multi_select_module_default.optionSelected, option.disabled && multi_select_module_default.optionDisabled),
842
+ checked: selected,
843
+ disabled: option.disabled,
844
+ onCheckedChange: () => toggleValue(option.value),
845
+ onSelect: (event) => event.preventDefault(),
846
+ children: [/* @__PURE__ */ jsx("span", {
847
+ className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
749
848
  "aria-hidden": "true",
750
- children: /* @__PURE__ */ d(g.ItemIndicator, {
751
- forceMount: !0,
752
- children: /* @__PURE__ */ d("svg", {
849
+ children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
850
+ forceMount: true,
851
+ children: /* @__PURE__ */ jsx("svg", {
753
852
  viewBox: "0 0 16 16",
754
853
  width: "16",
755
854
  height: "16",
756
855
  fill: "none",
757
856
  xmlns: "http://www.w3.org/2000/svg",
758
- children: /* @__PURE__ */ d("path", {
857
+ children: /* @__PURE__ */ jsx("path", {
759
858
  d: "M3.5 8.5 6.5 11.5 12.5 4.5",
760
859
  stroke: "currentColor",
761
860
  strokeWidth: "1.8",
@@ -764,19 +863,19 @@ var G = {
764
863
  })
765
864
  })
766
865
  })
767
- }), /* @__PURE__ */ d("span", {
768
- className: G.optionLabel,
769
- children: e.label
866
+ }), /* @__PURE__ */ jsx("span", {
867
+ className: multi_select_module_default.optionLabel,
868
+ children: option.label
770
869
  })]
771
- }, e.value);
870
+ }, option.value);
772
871
  })
773
872
  }) })
774
873
  ]
775
874
  })
776
875
  });
777
876
  });
778
- ce.displayName = "MultiSelect";
779
- var K = {
877
+ MultiSelect.displayName = "MultiSelect";
878
+ var select_module_default = {
780
879
  wrapper: "uzi-select-module__wrapper__7szq0",
781
880
  wrapperFullWidth: "uzi-select-module__wrapperFullWidth__IyOIG",
782
881
  trigger: "uzi-select-module__trigger__ldh8w",
@@ -788,116 +887,128 @@ var K = {
788
887
  item: "uzi-select-module__item__6uM6-",
789
888
  indicator: "uzi-select-module__indicator__ZHcg5",
790
889
  indicatorIcon: "uzi-select-module__indicatorIcon__kOV2G"
791
- }, le = "__uzi_select_empty__", q = e.forwardRef(({ options: e, value: t, onChange: n, placeholder: r, allowEmptyOption: i = !1, fullWidth: a = !0, className: o, id: s, name: c, disabled: l, required: u, autoComplete: p, form: m, title: h, "aria-label": g, "aria-labelledby": y, onBlur: b, onFocus: x }, S) => /* @__PURE__ */ d("div", {
792
- className: v(K.wrapper, a && K.wrapperFullWidth, o),
793
- children: /* @__PURE__ */ f(_.Root, {
794
- value: t,
795
- onValueChange: (e) => n(e === le ? "" : e),
796
- name: c,
797
- disabled: l,
798
- required: u,
799
- autoComplete: p,
800
- form: m,
801
- children: [/* @__PURE__ */ f(_.Trigger, {
802
- ref: S,
803
- id: s,
804
- className: K.trigger,
805
- title: h,
806
- "aria-label": g,
807
- "aria-labelledby": y,
808
- onBlur: b,
809
- onFocus: x,
810
- children: [/* @__PURE__ */ d(_.Value, {
811
- className: K.value,
812
- placeholder: r
813
- }), /* @__PURE__ */ d(_.Icon, {
814
- className: K.chevron,
815
- "aria-hidden": "true",
816
- children: /* @__PURE__ */ d("svg", {
817
- viewBox: "0 0 10 10",
818
- fill: "none",
819
- xmlns: "http://www.w3.org/2000/svg",
820
- width: "10",
821
- height: "10",
822
- children: /* @__PURE__ */ d("path", {
823
- d: "M2 3.5L5 6.5L8 3.5",
824
- stroke: "currentColor",
825
- strokeWidth: "1.5",
826
- strokeLinecap: "round",
827
- strokeLinejoin: "round"
890
+ };
891
+ //#endregion
892
+ //#region src/components/select/Select.tsx
893
+ var EMPTY_OPTION_VALUE = "__uzi_select_empty__";
894
+ var Select = React.forwardRef(({ options, value, onChange, placeholder, allowEmptyOption = false, fullWidth = true, className, id, name, disabled, required, autoComplete, form, title, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onBlur, onFocus }, ref) => {
895
+ return /* @__PURE__ */ jsx("div", {
896
+ className: cx(select_module_default.wrapper, fullWidth && select_module_default.wrapperFullWidth, className),
897
+ children: /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
898
+ value,
899
+ onValueChange: (nextValue) => onChange(nextValue === EMPTY_OPTION_VALUE ? "" : nextValue),
900
+ name,
901
+ disabled,
902
+ required,
903
+ autoComplete,
904
+ form,
905
+ children: [/* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
906
+ ref,
907
+ id,
908
+ className: select_module_default.trigger,
909
+ title,
910
+ "aria-label": ariaLabel,
911
+ "aria-labelledby": ariaLabelledBy,
912
+ onBlur,
913
+ onFocus,
914
+ children: [/* @__PURE__ */ jsx(SelectPrimitive.Value, {
915
+ className: select_module_default.value,
916
+ placeholder
917
+ }), /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
918
+ className: select_module_default.chevron,
919
+ "aria-hidden": "true",
920
+ children: /* @__PURE__ */ jsx("svg", {
921
+ viewBox: "0 0 10 10",
922
+ fill: "none",
923
+ xmlns: "http://www.w3.org/2000/svg",
924
+ width: "10",
925
+ height: "10",
926
+ children: /* @__PURE__ */ jsx("path", {
927
+ d: "M2 3.5L5 6.5L8 3.5",
928
+ stroke: "currentColor",
929
+ strokeWidth: "1.5",
930
+ strokeLinecap: "round",
931
+ strokeLinejoin: "round"
932
+ })
828
933
  })
934
+ })]
935
+ }), /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
936
+ className: select_module_default.content,
937
+ position: "popper",
938
+ sideOffset: 4,
939
+ align: "start",
940
+ children: /* @__PURE__ */ jsxs(SelectPrimitive.Viewport, {
941
+ className: select_module_default.viewport,
942
+ children: [placeholder && allowEmptyOption ? /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
943
+ value: EMPTY_OPTION_VALUE,
944
+ className: select_module_default.item,
945
+ children: [/* @__PURE__ */ jsx("span", {
946
+ className: select_module_default.indicator,
947
+ children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
948
+ viewBox: "0 0 16 16",
949
+ width: "16",
950
+ height: "16",
951
+ "aria-hidden": "true",
952
+ className: select_module_default.indicatorIcon,
953
+ children: /* @__PURE__ */ jsx("path", {
954
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
955
+ fill: "none",
956
+ stroke: "currentColor",
957
+ strokeWidth: "1.8",
958
+ strokeLinecap: "round",
959
+ strokeLinejoin: "round"
960
+ })
961
+ }) })
962
+ }), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: placeholder })]
963
+ }) : null, options.map((opt) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
964
+ value: opt.value,
965
+ disabled: opt.disabled,
966
+ className: select_module_default.item,
967
+ children: [/* @__PURE__ */ jsx("span", {
968
+ className: select_module_default.indicator,
969
+ children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
970
+ viewBox: "0 0 16 16",
971
+ width: "16",
972
+ height: "16",
973
+ "aria-hidden": "true",
974
+ className: select_module_default.indicatorIcon,
975
+ children: /* @__PURE__ */ jsx("path", {
976
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
977
+ fill: "none",
978
+ stroke: "currentColor",
979
+ strokeWidth: "1.8",
980
+ strokeLinecap: "round",
981
+ strokeLinejoin: "round"
982
+ })
983
+ }) })
984
+ }), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: opt.label })]
985
+ }, opt.value))]
829
986
  })
830
- })]
831
- }), /* @__PURE__ */ d(_.Portal, { children: /* @__PURE__ */ d(_.Content, {
832
- className: K.content,
833
- position: "popper",
834
- sideOffset: 4,
835
- align: "start",
836
- children: /* @__PURE__ */ f(_.Viewport, {
837
- className: K.viewport,
838
- children: [r && i ? /* @__PURE__ */ f(_.Item, {
839
- value: le,
840
- className: K.item,
841
- children: [/* @__PURE__ */ d("span", {
842
- className: K.indicator,
843
- children: /* @__PURE__ */ d(_.ItemIndicator, { children: /* @__PURE__ */ d("svg", {
844
- viewBox: "0 0 16 16",
845
- width: "16",
846
- height: "16",
847
- "aria-hidden": "true",
848
- className: K.indicatorIcon,
849
- children: /* @__PURE__ */ d("path", {
850
- d: "M3.5 8.5 6.5 11.5 12.5 4.5",
851
- fill: "none",
852
- stroke: "currentColor",
853
- strokeWidth: "1.8",
854
- strokeLinecap: "round",
855
- strokeLinejoin: "round"
856
- })
857
- }) })
858
- }), /* @__PURE__ */ d(_.ItemText, { children: r })]
859
- }) : null, e.map((e) => /* @__PURE__ */ f(_.Item, {
860
- value: e.value,
861
- disabled: e.disabled,
862
- className: K.item,
863
- children: [/* @__PURE__ */ d("span", {
864
- className: K.indicator,
865
- children: /* @__PURE__ */ d(_.ItemIndicator, { children: /* @__PURE__ */ d("svg", {
866
- viewBox: "0 0 16 16",
867
- width: "16",
868
- height: "16",
869
- "aria-hidden": "true",
870
- className: K.indicatorIcon,
871
- children: /* @__PURE__ */ d("path", {
872
- d: "M3.5 8.5 6.5 11.5 12.5 4.5",
873
- fill: "none",
874
- stroke: "currentColor",
875
- strokeWidth: "1.8",
876
- strokeLinecap: "round",
877
- strokeLinejoin: "round"
878
- })
879
- }) })
880
- }), /* @__PURE__ */ d(_.ItemText, { children: e.label })]
881
- }, e.value))]
882
- })
883
- }) })]
884
- })
885
- }));
886
- q.displayName = "Select";
987
+ }) })]
988
+ })
989
+ });
990
+ });
991
+ Select.displayName = "Select";
887
992
  //#endregion
888
993
  //#region src/components/dropdown/Dropdown.tsx
889
- var ue = e.forwardRef(({ options: e, value: t, onChange: n, placeholder: r = "All", allowClear: i = !0, ...a }, o) => /* @__PURE__ */ d(q, {
890
- ref: o,
891
- options: e,
892
- value: t,
893
- onChange: n,
894
- placeholder: r,
895
- allowEmptyOption: i,
896
- fullWidth: !1,
897
- ...a
898
- }));
899
- ue.displayName = "Dropdown";
900
- var J = {
994
+ /**
995
+ * @deprecated Use Select for value selection and DropdownMenu for action menus.
996
+ * Dropdown remains as a compatibility alias during migration.
997
+ */
998
+ var Dropdown = React.forwardRef(({ options, value, onChange, placeholder = "All", allowClear = true, ...rest }, ref) => {
999
+ return /* @__PURE__ */ jsx(Select, {
1000
+ ref,
1001
+ options,
1002
+ value,
1003
+ onChange,
1004
+ placeholder,
1005
+ allowEmptyOption: allowClear,
1006
+ fullWidth: false,
1007
+ ...rest
1008
+ });
1009
+ });
1010
+ Dropdown.displayName = "Dropdown";
1011
+ var dropdown_menu_module_default = {
901
1012
  content: "uzi-dropdown-menu-module__content__n-ElH",
902
1013
  menuFadeIn: "uzi-dropdown-menu-module__menuFadeIn__ITxMo",
903
1014
  item: "uzi-dropdown-menu-module__item__tBNtW",
@@ -912,51 +1023,51 @@ var J = {
912
1023
  };
913
1024
  //#endregion
914
1025
  //#region src/components/dropdown-menu/DropdownMenu.tsx
915
- function de(e) {
916
- return /* @__PURE__ */ d(g.Root, { ...e });
1026
+ function DropdownMenu(props) {
1027
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...props });
917
1028
  }
918
- function fe(e) {
919
- return /* @__PURE__ */ d(g.Trigger, { ...e });
1029
+ function DropdownMenuTrigger(props) {
1030
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...props });
920
1031
  }
921
- function pe(e) {
922
- return /* @__PURE__ */ d(g.Group, { ...e });
1032
+ function DropdownMenuGroup(props) {
1033
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { ...props });
923
1034
  }
924
- function me(e) {
925
- return /* @__PURE__ */ d(g.Portal, { ...e });
1035
+ function DropdownMenuPortal(props) {
1036
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { ...props });
926
1037
  }
927
- function he(e) {
928
- return /* @__PURE__ */ d(g.Sub, { ...e });
1038
+ function DropdownMenuSub(props) {
1039
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { ...props });
929
1040
  }
930
- function ge(e) {
931
- return /* @__PURE__ */ d(g.RadioGroup, { ...e });
1041
+ function DropdownMenuRadioGroup(props) {
1042
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { ...props });
932
1043
  }
933
- function _e({ className: e, sideOffset: t = 4, ...n }) {
934
- return /* @__PURE__ */ d(g.Portal, { children: /* @__PURE__ */ d(g.Content, {
935
- sideOffset: t,
936
- className: v(J.content, e),
937
- ...n
1044
+ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
1045
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
1046
+ sideOffset,
1047
+ className: cx(dropdown_menu_module_default.content, className),
1048
+ ...props
938
1049
  }) });
939
1050
  }
940
- function ve({ className: e, inset: t, variant: n = "default", ...r }) {
941
- return /* @__PURE__ */ d(g.Item, {
942
- "data-inset": t ? "true" : void 0,
943
- className: v(J.item, n === "destructive" && J.itemDestructive, e),
944
- ...r
1051
+ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
1052
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
1053
+ "data-inset": inset ? "true" : void 0,
1054
+ className: cx(dropdown_menu_module_default.item, variant === "destructive" && dropdown_menu_module_default.itemDestructive, className),
1055
+ ...props
945
1056
  });
946
1057
  }
947
- function ye({ className: e, children: t, ...n }) {
948
- return /* @__PURE__ */ f(g.CheckboxItem, {
949
- className: v(J.item, J.insetItem, e),
950
- ...n,
951
- children: [/* @__PURE__ */ d("span", {
952
- className: J.indicator,
953
- children: /* @__PURE__ */ d(g.ItemIndicator, { children: /* @__PURE__ */ d("svg", {
1058
+ function DropdownMenuCheckboxItem({ className, children, ...props }) {
1059
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
1060
+ className: cx(dropdown_menu_module_default.item, dropdown_menu_module_default.insetItem, className),
1061
+ ...props,
1062
+ children: [/* @__PURE__ */ jsx("span", {
1063
+ className: dropdown_menu_module_default.indicator,
1064
+ children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
954
1065
  viewBox: "0 0 16 16",
955
1066
  width: "16",
956
1067
  height: "16",
957
1068
  "aria-hidden": "true",
958
- className: J.indicatorIcon,
959
- children: /* @__PURE__ */ d("path", {
1069
+ className: dropdown_menu_module_default.indicatorIcon,
1070
+ children: /* @__PURE__ */ jsx("path", {
960
1071
  d: "M3.5 8.5 6.5 11.5 12.5 4.5",
961
1072
  fill: "none",
962
1073
  stroke: "currentColor",
@@ -965,44 +1076,44 @@ function ye({ className: e, children: t, ...n }) {
965
1076
  strokeLinejoin: "round"
966
1077
  })
967
1078
  }) })
968
- }), t]
1079
+ }), children]
969
1080
  });
970
1081
  }
971
- function be({ className: e, children: t, ...n }) {
972
- return /* @__PURE__ */ f(g.RadioItem, {
973
- className: v(J.item, J.insetItem, e),
974
- ...n,
975
- children: [/* @__PURE__ */ d("span", {
976
- className: J.indicator,
977
- children: /* @__PURE__ */ d(g.ItemIndicator, { children: /* @__PURE__ */ d("span", { className: J.radioDot }) })
978
- }), t]
1082
+ function DropdownMenuRadioItem({ className, children, ...props }) {
1083
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
1084
+ className: cx(dropdown_menu_module_default.item, dropdown_menu_module_default.insetItem, className),
1085
+ ...props,
1086
+ children: [/* @__PURE__ */ jsx("span", {
1087
+ className: dropdown_menu_module_default.indicator,
1088
+ children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: dropdown_menu_module_default.radioDot }) })
1089
+ }), children]
979
1090
  });
980
1091
  }
981
- function xe({ className: e, inset: t, ...n }) {
982
- return /* @__PURE__ */ d(g.Label, {
983
- "data-inset": t ? "true" : void 0,
984
- className: v(J.label, e),
985
- ...n
1092
+ function DropdownMenuLabel({ className, inset, ...props }) {
1093
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
1094
+ "data-inset": inset ? "true" : void 0,
1095
+ className: cx(dropdown_menu_module_default.label, className),
1096
+ ...props
986
1097
  });
987
1098
  }
988
- function Se({ className: e, ...t }) {
989
- return /* @__PURE__ */ d(g.Separator, {
990
- className: v(J.separator, e),
991
- ...t
1099
+ function DropdownMenuSeparator({ className, ...props }) {
1100
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
1101
+ className: cx(dropdown_menu_module_default.separator, className),
1102
+ ...props
992
1103
  });
993
1104
  }
994
- function Ce({ className: e, inset: t, children: n, ...r }) {
995
- return /* @__PURE__ */ f(g.SubTrigger, {
996
- "data-inset": t ? "true" : void 0,
997
- className: v(J.item, e),
998
- ...r,
999
- children: [n, /* @__PURE__ */ d("svg", {
1105
+ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
1106
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
1107
+ "data-inset": inset ? "true" : void 0,
1108
+ className: cx(dropdown_menu_module_default.item, className),
1109
+ ...props,
1110
+ children: [children, /* @__PURE__ */ jsx("svg", {
1000
1111
  viewBox: "0 0 16 16",
1001
1112
  width: "16",
1002
1113
  height: "16",
1003
1114
  "aria-hidden": "true",
1004
- className: J.chevron,
1005
- children: /* @__PURE__ */ d("path", {
1115
+ className: dropdown_menu_module_default.chevron,
1116
+ children: /* @__PURE__ */ jsx("path", {
1006
1117
  d: "M6 3.5 10.5 8 6 12.5",
1007
1118
  fill: "none",
1008
1119
  stroke: "currentColor",
@@ -1013,114 +1124,146 @@ function Ce({ className: e, inset: t, children: n, ...r }) {
1013
1124
  })]
1014
1125
  });
1015
1126
  }
1016
- function we({ className: e, ...t }) {
1017
- return /* @__PURE__ */ d(g.SubContent, {
1018
- className: v(J.content, e),
1019
- ...t
1127
+ function DropdownMenuSubContent({ className, ...props }) {
1128
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
1129
+ className: cx(dropdown_menu_module_default.content, className),
1130
+ ...props
1020
1131
  });
1021
1132
  }
1022
1133
  //#endregion
1023
1134
  //#region src/theme/constants.ts
1024
- var Te = [
1135
+ var UZI_THEMES = [
1025
1136
  "light",
1026
1137
  "dark",
1027
1138
  "system"
1028
- ], Ee = [
1139
+ ];
1140
+ var UZI_ACCENTS = [
1029
1141
  "blue",
1030
1142
  "cyan",
1031
1143
  "violet",
1032
1144
  "emerald",
1033
1145
  "amber",
1034
1146
  "rose"
1035
- ], De = "uzi-theme", Oe = "uzi-accent", ke = De, Ae = Oe, je = "data-uzi-theme", Me = "data-uzi-accent", Ne = t(void 0);
1036
- function Pe(e) {
1037
- return Te.includes(e);
1147
+ ];
1148
+ var THEME_STORAGE_KEY$1 = "uzi-theme";
1149
+ var ACCENT_STORAGE_KEY$1 = "uzi-accent";
1150
+ //#endregion
1151
+ //#region src/theme/ThemeProvider.tsx
1152
+ var THEME_STORAGE_KEY = THEME_STORAGE_KEY$1;
1153
+ var ACCENT_STORAGE_KEY = ACCENT_STORAGE_KEY$1;
1154
+ var THEME_ATTRIBUTE = "data-uzi-theme";
1155
+ var ACCENT_ATTRIBUTE = "data-uzi-accent";
1156
+ var ThemeContext = createContext(void 0);
1157
+ function isTheme(value) {
1158
+ return UZI_THEMES.includes(value);
1038
1159
  }
1039
- function Fe(e) {
1040
- return Ee.includes(e);
1160
+ function isAccent(value) {
1161
+ return UZI_ACCENTS.includes(value);
1041
1162
  }
1042
- function Ie() {
1043
- return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
1163
+ function getSystemTheme() {
1164
+ if (typeof window === "undefined") return "light";
1165
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
1044
1166
  }
1045
- function Le({ children: e, theme: t, defaultTheme: r = "system", accent: a, defaultAccent: s = "blue", onThemeChange: l, onAccentChange: u, storageKey: f = ke, accentStorageKey: p = Ae, disableStorage: m = !1, toastConfig: h }) {
1046
- let [g, _] = c(r), [v, y] = c(s), [b, x] = c("light");
1047
- i(() => {
1048
- if (x(Ie()), !m) {
1049
- let e = window.localStorage.getItem(f);
1050
- Pe(e) && _(e);
1051
- let t = window.localStorage.getItem(p);
1052
- Fe(t) && y(t);
1167
+ function ThemeProvider({ children, theme, defaultTheme = "system", accent, defaultAccent = "blue", onThemeChange, onAccentChange, storageKey = THEME_STORAGE_KEY, accentStorageKey = ACCENT_STORAGE_KEY, disableStorage = false, toastConfig }) {
1168
+ const [internalTheme, setInternalTheme] = useState(defaultTheme);
1169
+ const [internalAccent, setInternalAccent] = useState(defaultAccent);
1170
+ const [systemTheme, setSystemTheme] = useState("light");
1171
+ useEffect(() => {
1172
+ setSystemTheme(getSystemTheme());
1173
+ if (!disableStorage) {
1174
+ const storedTheme = window.localStorage.getItem(storageKey);
1175
+ if (isTheme(storedTheme)) setInternalTheme(storedTheme);
1176
+ const storedAccent = window.localStorage.getItem(accentStorageKey);
1177
+ if (isAccent(storedAccent)) setInternalAccent(storedAccent);
1053
1178
  }
1054
1179
  }, [
1055
- m,
1056
- f,
1057
- p
1180
+ disableStorage,
1181
+ storageKey,
1182
+ accentStorageKey
1058
1183
  ]);
1059
- let S = t !== void 0, C = a !== void 0, w = S ? t : g, T = C ? a : v, E = w === "system" ? b : w;
1060
- i(() => {
1061
- if (typeof window > "u") return;
1062
- let e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => x(e.matches ? "dark" : "light");
1063
- return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
1064
- }, []), i(() => {
1065
- if (typeof document > "u") return;
1066
- let e = document.documentElement;
1067
- e.setAttribute(je, E), e.setAttribute(Me, T), e.style.colorScheme = E, e.classList.toggle("dark", E === "dark");
1068
- }, [T, E]);
1069
- let D = n((e) => {
1070
- S || _(e), !m && typeof window < "u" && window.localStorage.setItem(f, e), l?.(e);
1184
+ const isThemeControlled = theme !== void 0;
1185
+ const isAccentControlled = accent !== void 0;
1186
+ const currentTheme = isThemeControlled ? theme : internalTheme;
1187
+ const currentAccent = isAccentControlled ? accent : internalAccent;
1188
+ const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
1189
+ useEffect(() => {
1190
+ if (typeof window === "undefined") return;
1191
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
1192
+ const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
1193
+ handleChange();
1194
+ mediaQuery.addEventListener("change", handleChange);
1195
+ return () => mediaQuery.removeEventListener("change", handleChange);
1196
+ }, []);
1197
+ useEffect(() => {
1198
+ if (typeof document === "undefined") return;
1199
+ const root = document.documentElement;
1200
+ root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
1201
+ root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);
1202
+ root.style.colorScheme = resolvedTheme;
1203
+ root.classList.toggle("dark", resolvedTheme === "dark");
1204
+ }, [currentAccent, resolvedTheme]);
1205
+ const setTheme = useCallback((nextTheme) => {
1206
+ if (!isThemeControlled) setInternalTheme(nextTheme);
1207
+ if (!disableStorage && typeof window !== "undefined") window.localStorage.setItem(storageKey, nextTheme);
1208
+ onThemeChange?.(nextTheme);
1071
1209
  }, [
1072
- m,
1073
- S,
1074
- l,
1075
- f
1076
- ]), O = n((e) => {
1077
- C || y(e), !m && typeof window < "u" && window.localStorage.setItem(p, e), u?.(e);
1210
+ disableStorage,
1211
+ isThemeControlled,
1212
+ onThemeChange,
1213
+ storageKey
1214
+ ]);
1215
+ const setAccent = useCallback((nextAccent) => {
1216
+ if (!isAccentControlled) setInternalAccent(nextAccent);
1217
+ if (!disableStorage && typeof window !== "undefined") window.localStorage.setItem(accentStorageKey, nextAccent);
1218
+ onAccentChange?.(nextAccent);
1078
1219
  }, [
1079
- p,
1080
- m,
1081
- C,
1082
- u
1083
- ]), k = n(() => {
1084
- D(E === "dark" ? "light" : "dark");
1085
- }, [E, D]), A = o(() => ({
1086
- theme: w,
1087
- resolvedTheme: E,
1088
- accent: T,
1089
- setTheme: D,
1090
- setAccent: O,
1091
- toggleTheme: k
1220
+ accentStorageKey,
1221
+ disableStorage,
1222
+ isAccentControlled,
1223
+ onAccentChange
1224
+ ]);
1225
+ const toggleTheme = useCallback(() => {
1226
+ setTheme(resolvedTheme === "dark" ? "light" : "dark");
1227
+ }, [resolvedTheme, setTheme]);
1228
+ const value = useMemo(() => ({
1229
+ theme: currentTheme,
1230
+ resolvedTheme,
1231
+ accent: currentAccent,
1232
+ setTheme,
1233
+ setAccent,
1234
+ toggleTheme
1092
1235
  }), [
1093
- T,
1094
- w,
1095
- E,
1096
- O,
1097
- D,
1098
- k
1236
+ currentAccent,
1237
+ currentTheme,
1238
+ resolvedTheme,
1239
+ setAccent,
1240
+ setTheme,
1241
+ toggleTheme
1099
1242
  ]);
1100
- return /* @__PURE__ */ d(Ne.Provider, {
1101
- value: A,
1102
- children: /* @__PURE__ */ d(V, {
1103
- config: h,
1104
- children: e
1243
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, {
1244
+ value,
1245
+ children: /* @__PURE__ */ jsx(ToastProvider, {
1246
+ config: toastConfig,
1247
+ children
1105
1248
  })
1106
1249
  });
1107
1250
  }
1108
- function Re() {
1109
- let e = r(Ne);
1110
- if (!e) throw Error("useTheme must be used within a ThemeProvider");
1111
- return e;
1251
+ function useTheme() {
1252
+ const context = useContext(ThemeContext);
1253
+ if (!context) throw new Error("useTheme must be used within a ThemeProvider");
1254
+ return context;
1112
1255
  }
1113
- var ze = { withLabel: "uzi-theme-toggle-button-module__withLabel__KqtDj" };
1256
+ var theme_toggle_button_module_default = { withLabel: "uzi-theme-toggle-button-module__withLabel__KqtDj" };
1114
1257
  //#endregion
1115
1258
  //#region src/components/theme-toggle-button/ThemeToggleButton.tsx
1116
- function Be() {
1117
- return /* @__PURE__ */ d("svg", {
1259
+ function MoonIcon() {
1260
+ return /* @__PURE__ */ jsx("svg", {
1118
1261
  viewBox: "0 0 24 24",
1119
1262
  "aria-hidden": "true",
1120
1263
  width: "16",
1121
1264
  height: "16",
1122
1265
  fill: "none",
1123
- children: /* @__PURE__ */ d("path", {
1266
+ children: /* @__PURE__ */ jsx("path", {
1124
1267
  d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
1125
1268
  stroke: "currentColor",
1126
1269
  strokeWidth: "1.8",
@@ -1129,20 +1272,20 @@ function Be() {
1129
1272
  })
1130
1273
  });
1131
1274
  }
1132
- function Ve() {
1133
- return /* @__PURE__ */ f("svg", {
1275
+ function SunIcon() {
1276
+ return /* @__PURE__ */ jsxs("svg", {
1134
1277
  viewBox: "0 0 24 24",
1135
1278
  "aria-hidden": "true",
1136
1279
  width: "16",
1137
1280
  height: "16",
1138
1281
  fill: "none",
1139
- children: [/* @__PURE__ */ d("circle", {
1282
+ children: [/* @__PURE__ */ jsx("circle", {
1140
1283
  cx: "12",
1141
1284
  cy: "12",
1142
1285
  r: "4",
1143
1286
  stroke: "currentColor",
1144
1287
  strokeWidth: "1.8"
1145
- }), /* @__PURE__ */ d("path", {
1288
+ }), /* @__PURE__ */ jsx("path", {
1146
1289
  d: "M12 2.75v2.5M12 18.75v2.5M21.25 12h-2.5M5.25 12h-2.5M18.54 5.46l-1.77 1.77M7.23 16.77l-1.77 1.77M18.54 18.54l-1.77-1.77M7.23 7.23 5.46 5.46",
1147
1290
  stroke: "currentColor",
1148
1291
  strokeWidth: "1.8",
@@ -1150,23 +1293,25 @@ function Ve() {
1150
1293
  })]
1151
1294
  });
1152
1295
  }
1153
- function He({ showLabel: e = !1, lightLabel: t = "Light mode", darkLabel: n = "Dark mode", className: r, onClick: i, ...a }) {
1154
- let { resolvedTheme: o, toggleTheme: s } = Re(), c = o === "dark" ? t : n;
1155
- return /* @__PURE__ */ f(S, {
1296
+ function ThemeToggleButton({ showLabel = false, lightLabel = "Light mode", darkLabel = "Dark mode", className, onClick, ...rest }) {
1297
+ const { resolvedTheme, toggleTheme } = useTheme();
1298
+ const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
1299
+ return /* @__PURE__ */ jsxs(Button, {
1156
1300
  type: "button",
1157
1301
  variant: "ghost",
1158
- size: e ? "sm" : "icon",
1159
- className: v(e && ze.withLabel, r),
1160
- "aria-label": `Switch to ${c.toLowerCase()}`,
1161
- title: `Switch to ${c.toLowerCase()}`,
1162
- onClick: (e) => {
1163
- i?.(e), e.defaultPrevented || s();
1302
+ size: showLabel ? "sm" : "icon",
1303
+ className: cx(showLabel && theme_toggle_button_module_default.withLabel, className),
1304
+ "aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
1305
+ title: `Switch to ${nextThemeLabel.toLowerCase()}`,
1306
+ onClick: (event) => {
1307
+ onClick?.(event);
1308
+ if (!event.defaultPrevented) toggleTheme();
1164
1309
  },
1165
- ...a,
1166
- children: [d(o === "dark" ? Ve : Be, {}), e && /* @__PURE__ */ d("span", { children: c })]
1310
+ ...rest,
1311
+ children: [resolvedTheme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}), showLabel && /* @__PURE__ */ jsx("span", { children: nextThemeLabel })]
1167
1312
  });
1168
1313
  }
1169
- var Y = {
1314
+ var top_bar_module_default = {
1170
1315
  topBar: "uzi-top-bar-module__topBar__MJ-7S",
1171
1316
  topBarStatic: "uzi-top-bar-module__topBarStatic__JvEwt",
1172
1317
  topBarInner: "uzi-top-bar-module__topBarInner__PBbi8",
@@ -1179,51 +1324,52 @@ var Y = {
1179
1324
  };
1180
1325
  //#endregion
1181
1326
  //#region src/components/top-bar/TopBar.tsx
1182
- function Ue({ leading: e, brand: t, brandHref: n, brandingLocation: r = "left", start: i, center: a, actions: o, showThemeToggle: s = !1, themeToggleProps: c, className: l, innerClassName: u, isSticky: p, sticky: m = !0, children: h, ...g }) {
1183
- let _ = p ?? m, y = t ? n ? /* @__PURE__ */ d("a", {
1184
- href: n,
1185
- className: Y.topBarBrand,
1186
- children: /* @__PURE__ */ d("span", {
1187
- className: Y.topBarBrandContent,
1188
- children: t
1327
+ function TopBar({ leading, brand, brandHref, brandingLocation = "left", start, center, actions, showThemeToggle = false, themeToggleProps, className, innerClassName, isSticky, sticky = true, children, ...rest }) {
1328
+ const shouldStick = isSticky ?? sticky;
1329
+ const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx("a", {
1330
+ href: brandHref,
1331
+ className: top_bar_module_default.topBarBrand,
1332
+ children: /* @__PURE__ */ jsx("span", {
1333
+ className: top_bar_module_default.topBarBrandContent,
1334
+ children: brand
1189
1335
  })
1190
- }) : /* @__PURE__ */ d("div", {
1191
- className: Y.topBarBrand,
1192
- children: /* @__PURE__ */ d("span", {
1193
- className: Y.topBarBrandContent,
1194
- children: t
1336
+ }) : /* @__PURE__ */ jsx("div", {
1337
+ className: top_bar_module_default.topBarBrand,
1338
+ children: /* @__PURE__ */ jsx("span", {
1339
+ className: top_bar_module_default.topBarBrandContent,
1340
+ children: brand
1195
1341
  })
1196
- }) : null;
1197
- return /* @__PURE__ */ d("header", {
1198
- className: v(Y.topBar, !_ && Y.topBarStatic, l),
1199
- ...g,
1200
- children: /* @__PURE__ */ f("div", {
1201
- className: v(Y.topBarInner, u),
1342
+ });
1343
+ return /* @__PURE__ */ jsx("header", {
1344
+ className: cx(top_bar_module_default.topBar, !shouldStick && top_bar_module_default.topBarStatic, className),
1345
+ ...rest,
1346
+ children: /* @__PURE__ */ jsxs("div", {
1347
+ className: cx(top_bar_module_default.topBarInner, innerClassName),
1202
1348
  children: [
1203
- /* @__PURE__ */ f("div", {
1204
- className: Y.topBarStart,
1349
+ /* @__PURE__ */ jsxs("div", {
1350
+ className: top_bar_module_default.topBarStart,
1205
1351
  children: [
1206
- e,
1207
- r === "left" && y,
1208
- i
1352
+ leading,
1353
+ brandingLocation === "left" && brandNode,
1354
+ start
1209
1355
  ]
1210
1356
  }),
1211
- y && r === "center" || a || h ? /* @__PURE__ */ d("div", {
1212
- className: Y.topBarCenter,
1213
- children: /* @__PURE__ */ f("div", {
1214
- className: Y.topBarCenterGroup,
1215
- children: [r === "center" && y, a ?? h]
1357
+ brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx("div", {
1358
+ className: top_bar_module_default.topBarCenter,
1359
+ children: /* @__PURE__ */ jsxs("div", {
1360
+ className: top_bar_module_default.topBarCenterGroup,
1361
+ children: [brandingLocation === "center" && brandNode, center ?? children]
1216
1362
  })
1217
1363
  }) : null,
1218
- /* @__PURE__ */ f("div", {
1219
- className: Y.topBarActions,
1220
- children: [s && /* @__PURE__ */ d(He, { ...c }), o]
1364
+ /* @__PURE__ */ jsxs("div", {
1365
+ className: top_bar_module_default.topBarActions,
1366
+ children: [showThemeToggle && /* @__PURE__ */ jsx(ThemeToggleButton, { ...themeToggleProps }), actions]
1221
1367
  })
1222
1368
  ]
1223
1369
  })
1224
1370
  });
1225
1371
  }
1226
- var X = {
1372
+ var app_shell_module_default = {
1227
1373
  appShell: "uzi-app-shell-module__appShell__S0cVI",
1228
1374
  appShellAnimated: "uzi-app-shell-module__appShellAnimated__-CRIl",
1229
1375
  appShellOpen: "uzi-app-shell-module__appShellOpen__1rZUl",
@@ -1238,62 +1384,112 @@ var X = {
1238
1384
  appShellMain: "uzi-app-shell-module__appShellMain__eHP2r",
1239
1385
  appShellBackdrop: "uzi-app-shell-module__appShellBackdrop__y31xs",
1240
1386
  appShellSidebarOpen: "uzi-app-shell-module__appShellSidebarOpen__Z5AIo"
1241
- }, We = 960;
1242
- function Ge() {
1243
- return typeof window > "u" ? !1 : window.innerWidth >= We;
1387
+ };
1388
+ //#endregion
1389
+ //#region src/components/app-shell/AppShell.tsx
1390
+ var DESKTOP_BREAKPOINT = 960;
1391
+ function getIsDesktop() {
1392
+ if (typeof window === "undefined") return false;
1393
+ return window.innerWidth >= DESKTOP_BREAKPOINT;
1244
1394
  }
1245
- function Ke({ children: e, sidebar: t, brand: n, brandHref: r, topbarStart: o, topbarEnd: l, showThemeToggle: u = !1, themeToggleProps: p, topBarBrandingLocation: m = "left", className: h, sidebarClassName: g, topbarClassName: _, mainClassName: y, sidebarWidth: b, closeSidebarOnChangeKey: x, hamburgerLabel: S = "Toggle navigation", onSidebarToggle: C }) {
1246
- let [w, T] = c(!1), [E, D] = c(!1), [O, k] = c(!1), A = s(!1), j = s(x), M = s(null), N = s(null), P = s(null), F = a();
1247
- i(() => {
1248
- let e = Ge();
1249
- T(e), D(e), A.current = e;
1250
- let t = window.requestAnimationFrame(() => {
1251
- k(!0);
1252
- }), n = () => {
1253
- let e = Ge();
1254
- T(e), e !== A.current && (D(e), A.current = e);
1395
+ /**
1396
+ * Responsive application shell with a collapsible sidebar and sticky top bar.
1397
+ *
1398
+ * - Sidebar opens by default on desktop, collapses on mobile.
1399
+ * - Closes on outside click/scroll/touch when in mobile mode.
1400
+ * - Provides optional hook to close the sidebar when a prop value changes
1401
+ * (e.g., route transitions).
1402
+ */
1403
+ function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, showThemeToggle = false, themeToggleProps, topBarBrandingLocation = "left", className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel = "Toggle navigation", onSidebarToggle }) {
1404
+ const [isDesktop, setIsDesktop] = useState(false);
1405
+ const [sidebarOpen, setSidebarOpen] = useState(false);
1406
+ const [transitionsReady, setTransitionsReady] = useState(false);
1407
+ const prevIsDesktopRef = useRef(false);
1408
+ const closeKeyRef = useRef(closeSidebarOnChangeKey);
1409
+ const sidebarRef = useRef(null);
1410
+ const hamburgerRef = useRef(null);
1411
+ const mainRef = useRef(null);
1412
+ const sidebarId = useId();
1413
+ useEffect(() => {
1414
+ const desktop = getIsDesktop();
1415
+ setIsDesktop(desktop);
1416
+ setSidebarOpen(desktop);
1417
+ prevIsDesktopRef.current = desktop;
1418
+ const transitionFrame = window.requestAnimationFrame(() => {
1419
+ setTransitionsReady(true);
1420
+ });
1421
+ const handleResize = () => {
1422
+ const nowDesktop = getIsDesktop();
1423
+ setIsDesktop(nowDesktop);
1424
+ if (nowDesktop !== prevIsDesktopRef.current) {
1425
+ setSidebarOpen(nowDesktop);
1426
+ prevIsDesktopRef.current = nowDesktop;
1427
+ }
1255
1428
  };
1256
- return window.addEventListener("resize", n), () => {
1257
- window.cancelAnimationFrame(t), window.removeEventListener("resize", n);
1429
+ window.addEventListener("resize", handleResize);
1430
+ return () => {
1431
+ window.cancelAnimationFrame(transitionFrame);
1432
+ window.removeEventListener("resize", handleResize);
1433
+ };
1434
+ }, []);
1435
+ useEffect(() => {
1436
+ if (isDesktop || !sidebarOpen) return;
1437
+ const mainElement = mainRef.current;
1438
+ const closeSidebar = () => setSidebarOpen(false);
1439
+ const onPointerDown = (e) => {
1440
+ const target = e.target;
1441
+ if (!target) return;
1442
+ if (sidebarRef.current?.contains(target)) return;
1443
+ if (hamburgerRef.current?.contains(target)) return;
1444
+ closeSidebar();
1258
1445
  };
1259
- }, []), i(() => {
1260
- if (w || !E) return;
1261
- let e = P.current, t = () => D(!1), n = (e) => {
1262
- let n = e.target;
1263
- n && (M.current?.contains(n) || N.current?.contains(n) || t());
1264
- }, r = window.setTimeout(() => {
1265
- document.addEventListener("pointerdown", n), window.addEventListener("scroll", t, { passive: !0 }), e?.addEventListener("scroll", t, { passive: !0 }), document.addEventListener("touchmove", t, { passive: !0 });
1446
+ const timeoutId = window.setTimeout(() => {
1447
+ document.addEventListener("pointerdown", onPointerDown);
1448
+ window.addEventListener("scroll", closeSidebar, { passive: true });
1449
+ mainElement?.addEventListener("scroll", closeSidebar, { passive: true });
1450
+ document.addEventListener("touchmove", closeSidebar, { passive: true });
1266
1451
  }, 10);
1267
1452
  return () => {
1268
- window.clearTimeout(r), document.removeEventListener("pointerdown", n), window.removeEventListener("scroll", t), e?.removeEventListener("scroll", t), document.removeEventListener("touchmove", t);
1453
+ window.clearTimeout(timeoutId);
1454
+ document.removeEventListener("pointerdown", onPointerDown);
1455
+ window.removeEventListener("scroll", closeSidebar);
1456
+ mainElement?.removeEventListener("scroll", closeSidebar);
1457
+ document.removeEventListener("touchmove", closeSidebar);
1269
1458
  };
1270
- }, [E, w]), i(() => {
1271
- !w && j.current !== x && D(!1), j.current = x;
1272
- }, [x, w]), i(() => {
1273
- C?.(E);
1274
- }, [E, C]);
1275
- let I = () => D((e) => !e), L = b === void 0 ? void 0 : typeof b == "number" ? `${b}px` : b, R = L ? { "--app-shell-sidebar-width": L } : void 0, z = v(X.appShell, O && X.appShellAnimated, E ? X.appShellOpen : X.appShellCollapsed, h), B = v(X.appShellSidebar, E && X.appShellSidebarOpen, g);
1276
- return /* @__PURE__ */ f("div", {
1277
- className: z,
1278
- style: R,
1279
- "data-app-shell": !0,
1280
- "data-desktop": w ? "true" : "false",
1281
- "data-sidebar-open": E ? "true" : "false",
1459
+ }, [sidebarOpen, isDesktop]);
1460
+ useEffect(() => {
1461
+ if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) setSidebarOpen(false);
1462
+ closeKeyRef.current = closeSidebarOnChangeKey;
1463
+ }, [closeSidebarOnChangeKey, isDesktop]);
1464
+ useEffect(() => {
1465
+ onSidebarToggle?.(sidebarOpen);
1466
+ }, [sidebarOpen, onSidebarToggle]);
1467
+ const toggleSidebar = () => setSidebarOpen((open) => !open);
1468
+ const sidebarWidthValue = sidebarWidth === void 0 ? void 0 : typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
1469
+ const shellStyle = sidebarWidthValue ? { ["--app-shell-sidebar-width"]: sidebarWidthValue } : void 0;
1470
+ const shellClasses = cx(app_shell_module_default.appShell, transitionsReady && app_shell_module_default.appShellAnimated, sidebarOpen ? app_shell_module_default.appShellOpen : app_shell_module_default.appShellCollapsed, className);
1471
+ const sidebarClasses = cx(app_shell_module_default.appShellSidebar, sidebarOpen && app_shell_module_default.appShellSidebarOpen, sidebarClassName);
1472
+ return /* @__PURE__ */ jsxs("div", {
1473
+ className: shellClasses,
1474
+ style: shellStyle,
1475
+ "data-app-shell": true,
1476
+ "data-desktop": isDesktop ? "true" : "false",
1477
+ "data-sidebar-open": sidebarOpen ? "true" : "false",
1282
1478
  children: [
1283
- /* @__PURE__ */ d(Ue, {
1284
- className: v(X.appShellTopbar, _),
1285
- leading: /* @__PURE__ */ d("button", {
1286
- ref: N,
1479
+ /* @__PURE__ */ jsx(TopBar, {
1480
+ className: cx(app_shell_module_default.appShellTopbar, topbarClassName),
1481
+ leading: /* @__PURE__ */ jsx("button", {
1482
+ ref: hamburgerRef,
1287
1483
  type: "button",
1288
- className: X.appShellHamburger,
1289
- onClick: I,
1290
- "aria-label": S,
1291
- "aria-expanded": E,
1292
- "aria-controls": F,
1293
- children: /* @__PURE__ */ d("svg", {
1484
+ className: app_shell_module_default.appShellHamburger,
1485
+ onClick: toggleSidebar,
1486
+ "aria-label": hamburgerLabel,
1487
+ "aria-expanded": sidebarOpen,
1488
+ "aria-controls": sidebarId,
1489
+ children: /* @__PURE__ */ jsx("svg", {
1294
1490
  viewBox: "0 0 24 24",
1295
1491
  "aria-hidden": "true",
1296
- children: /* @__PURE__ */ d("path", {
1492
+ children: /* @__PURE__ */ jsx("path", {
1297
1493
  d: "M3 6h18M3 12h18M3 18h18",
1298
1494
  stroke: "currentColor",
1299
1495
  strokeWidth: "2.5",
@@ -1301,36 +1497,36 @@ function Ke({ children: e, sidebar: t, brand: n, brandHref: r, topbarStart: o, t
1301
1497
  })
1302
1498
  })
1303
1499
  }),
1304
- brand: n,
1305
- brandHref: r,
1306
- brandingLocation: m,
1307
- start: o,
1308
- actions: l,
1309
- showThemeToggle: u,
1310
- themeToggleProps: p
1500
+ brand,
1501
+ brandHref,
1502
+ brandingLocation: topBarBrandingLocation,
1503
+ start: topbarStart,
1504
+ actions: topbarEnd,
1505
+ showThemeToggle,
1506
+ themeToggleProps
1311
1507
  }),
1312
- !w && E && /* @__PURE__ */ d("div", {
1313
- className: X.appShellBackdrop,
1314
- onClick: () => D(!1),
1315
- onTouchStart: () => D(!1),
1508
+ !isDesktop && sidebarOpen && /* @__PURE__ */ jsx("div", {
1509
+ className: app_shell_module_default.appShellBackdrop,
1510
+ onClick: () => setSidebarOpen(false),
1511
+ onTouchStart: () => setSidebarOpen(false),
1316
1512
  "aria-hidden": "true"
1317
1513
  }),
1318
- /* @__PURE__ */ d("aside", {
1319
- ref: M,
1320
- id: F,
1321
- className: B,
1514
+ /* @__PURE__ */ jsx("aside", {
1515
+ ref: sidebarRef,
1516
+ id: sidebarId,
1517
+ className: sidebarClasses,
1322
1518
  "aria-label": "Sidebar navigation",
1323
- children: t
1519
+ children: sidebar
1324
1520
  }),
1325
- /* @__PURE__ */ d("main", {
1326
- ref: P,
1327
- className: v(X.appShellMain, y),
1328
- children: e
1521
+ /* @__PURE__ */ jsx("main", {
1522
+ ref: mainRef,
1523
+ className: cx(app_shell_module_default.appShellMain, mainClassName),
1524
+ children
1329
1525
  })
1330
1526
  ]
1331
1527
  });
1332
1528
  }
1333
- var Z = {
1529
+ var sidebar_nav_module_default = {
1334
1530
  sidebarNav: "uzi-sidebar-nav-module__sidebarNav__eUI5c",
1335
1531
  sidebarNavCollapsed: "uzi-sidebar-nav-module__sidebarNavCollapsed__xTM9s",
1336
1532
  header: "uzi-sidebar-nav-module__header__Y4NLy",
@@ -1349,124 +1545,173 @@ var Z = {
1349
1545
  label: "uzi-sidebar-nav-module__label__A-nt6",
1350
1546
  description: "uzi-sidebar-nav-module__description__Xf3Si",
1351
1547
  badge: "uzi-sidebar-nav-module__badge__-hnFd"
1352
- }, qe = (e, t) => e.active === void 0 ? !e.href || !t ? !1 : e.href === "/" ? t === "/" : t.startsWith(e.href) : e.active, Je = (e, t) => {
1353
- if (e.active !== void 0) return e.active;
1354
- if (!e.href || !t) return !1;
1355
- if (e.href === "/") return t === "/";
1356
- let n = e.href.endsWith("/") ? e.href.slice(0, -1) : e.href;
1357
- return n === t || t.startsWith(`${n}/`);
1358
- }, Ye = (e, t) => e === "/" ? t === "/" : t.startsWith(e), Xe = (e, t) => e === "/" ? t === "/" : (e.endsWith("/") ? e.slice(0, -1) : e) === t, Ze = (e) => e.endsWith("/") ? e.length - 1 : e.length, Qe = (e, t) => {
1359
- let n = /* @__PURE__ */ new Set();
1360
- if (!t) return n;
1361
- let r = e.filter((e) => e.disabled || !e.href ? !1 : e.exact ? Xe(e.href, t) : Ye(e.href, t));
1362
- if (r.length === 0) return n;
1363
- let i = 0;
1364
- for (let e of r) {
1365
- if (!e.href) continue;
1366
- let t = Ze(e.href);
1367
- t > i && (i = t);
1548
+ };
1549
+ //#endregion
1550
+ //#region src/components/sidebar-nav/SidebarNav.tsx
1551
+ var isActivePrefix = (item, path) => {
1552
+ if (item.active !== void 0) return item.active;
1553
+ if (!item.href) return false;
1554
+ if (!path) return false;
1555
+ if (item.href === "/") return path === "/";
1556
+ return path.startsWith(item.href);
1557
+ };
1558
+ var isActiveExact = (item, path) => {
1559
+ if (item.active !== void 0) return item.active;
1560
+ if (!item.href) return false;
1561
+ if (!path) return false;
1562
+ if (item.href === "/") return path === "/";
1563
+ const normalizedHref = item.href.endsWith("/") ? item.href.slice(0, -1) : item.href;
1564
+ return normalizedHref === path || path.startsWith(`${normalizedHref}/`);
1565
+ };
1566
+ var isNaturalPrefixMatch = (href, path) => {
1567
+ if (href === "/") return path === "/";
1568
+ return path.startsWith(href);
1569
+ };
1570
+ var isNaturalExactMatch = (href, path) => {
1571
+ if (href === "/") return path === "/";
1572
+ return (href.endsWith("/") ? href.slice(0, -1) : href) === path;
1573
+ };
1574
+ var hrefLength = (href) => href.endsWith("/") ? href.length - 1 : href.length;
1575
+ var findMostSpecific = (items, currentPath) => {
1576
+ const result = /* @__PURE__ */ new Set();
1577
+ if (!currentPath) return result;
1578
+ const matchingItems = items.filter((item) => {
1579
+ if (item.disabled || !item.href) return false;
1580
+ return item.exact ? isNaturalExactMatch(item.href, currentPath) : isNaturalPrefixMatch(item.href, currentPath);
1581
+ });
1582
+ if (matchingItems.length === 0) return result;
1583
+ let maxLen = 0;
1584
+ for (const item of matchingItems) {
1585
+ if (!item.href) continue;
1586
+ const len = hrefLength(item.href);
1587
+ if (len > maxLen) maxLen = len;
1588
+ }
1589
+ for (const item of matchingItems) {
1590
+ if (!item.href) continue;
1591
+ if (hrefLength(item.href) === maxLen) result.add(item.href);
1368
1592
  }
1369
- for (let e of r) e.href && Ze(e.href) === i && n.add(e.href);
1370
- return n;
1593
+ return result;
1371
1594
  };
1372
- function $e({ items: e = [], sections: t, currentPath: n, getIsActive: r, matchStrategy: i = "prefix", onItemClick: a, header: s, footer: c, ariaLabel: l = "Sidebar navigation", collapsed: u = !1, iconSize: p, className: m, itemClassName: h, sectionClassName: g }) {
1373
- let _ = o(() => t?.length ? t : [{
1374
- id: "default",
1375
- items: e
1376
- }], [t, e]), y = o(() => _.flatMap((e) => e.items), [_]), b = o(() => {
1377
- if (i === "most-specific") {
1378
- let e = Qe(y, n);
1379
- return (t) => t.active === void 0 ? t.href ? e.has(t.href) : !1 : t.active;
1380
- } else return (e, t) => e.active === void 0 ? e.exact ? Je(e, t) : qe(e, t) : e.active;
1595
+ function SidebarNav({ items = [], sections, currentPath, getIsActive, matchStrategy = "prefix", onItemClick, header, footer, ariaLabel = "Sidebar navigation", collapsed = false, iconSize, className, itemClassName, sectionClassName }) {
1596
+ const resolvedSections = useMemo(() => {
1597
+ return sections?.length ? sections : [{
1598
+ id: "default",
1599
+ items
1600
+ }];
1601
+ }, [sections, items]);
1602
+ const allItems = useMemo(() => resolvedSections.flatMap((section) => section.items), [resolvedSections]);
1603
+ const defaultIsActiveFn = useMemo(() => {
1604
+ if (matchStrategy === "most-specific") {
1605
+ const mostSpecificHrefs = findMostSpecific(allItems, currentPath);
1606
+ return (item) => {
1607
+ if (item.active !== void 0) return item.active;
1608
+ if (!item.href) return false;
1609
+ return mostSpecificHrefs.has(item.href);
1610
+ };
1611
+ } else return (item, path) => {
1612
+ if (item.active !== void 0) return item.active;
1613
+ if (item.exact) return isActiveExact(item, path);
1614
+ return isActivePrefix(item, path);
1615
+ };
1381
1616
  }, [
1382
- i,
1383
- y,
1384
- n
1385
- ]), x = r ?? b, S = p === void 0 ? void 0 : { "--sidebar-nav-icon-size": typeof p == "number" ? `${p}px` : p };
1386
- return /* @__PURE__ */ f("nav", {
1387
- className: v(Z.sidebarNav, u && Z.sidebarNavCollapsed, m),
1388
- "aria-label": l,
1389
- style: S,
1617
+ matchStrategy,
1618
+ allItems,
1619
+ currentPath
1620
+ ]);
1621
+ const resolvedGetIsActive = getIsActive ?? defaultIsActiveFn;
1622
+ const style = iconSize !== void 0 ? { ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize } : void 0;
1623
+ return /* @__PURE__ */ jsxs("nav", {
1624
+ className: cx(sidebar_nav_module_default.sidebarNav, collapsed && sidebar_nav_module_default.sidebarNavCollapsed, className),
1625
+ "aria-label": ariaLabel,
1626
+ style,
1390
1627
  children: [
1391
- s ? /* @__PURE__ */ d("div", {
1392
- className: Z.header,
1393
- children: s
1628
+ header ? /* @__PURE__ */ jsx("div", {
1629
+ className: sidebar_nav_module_default.header,
1630
+ children: header
1394
1631
  }) : null,
1395
- /* @__PURE__ */ d("div", {
1396
- className: Z.sections,
1397
- children: _.map((e, t) => /* @__PURE__ */ f("div", {
1398
- className: v(Z.section, g),
1399
- children: [e.label && !u ? /* @__PURE__ */ d("div", {
1400
- className: Z.sectionLabel,
1401
- children: e.label
1402
- }) : null, /* @__PURE__ */ d("div", {
1403
- className: Z.sectionItems,
1404
- children: e.items.map((r, i) => /* @__PURE__ */ d(et, {
1405
- item: r,
1406
- active: x(r, n),
1407
- collapsed: u,
1408
- itemClassName: h,
1409
- onItemClick: a
1410
- }, `${e.id ?? t}-${r.href ?? r.title ?? i}`))
1632
+ /* @__PURE__ */ jsx("div", {
1633
+ className: sidebar_nav_module_default.sections,
1634
+ children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", {
1635
+ className: cx(sidebar_nav_module_default.section, sectionClassName),
1636
+ children: [section.label && !collapsed ? /* @__PURE__ */ jsx("div", {
1637
+ className: sidebar_nav_module_default.sectionLabel,
1638
+ children: section.label
1639
+ }) : null, /* @__PURE__ */ jsx("div", {
1640
+ className: sidebar_nav_module_default.sectionItems,
1641
+ children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx(SidebarNavEntry, {
1642
+ item,
1643
+ active: resolvedGetIsActive(item, currentPath),
1644
+ collapsed,
1645
+ itemClassName,
1646
+ onItemClick
1647
+ }, `${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`))
1411
1648
  })]
1412
- }, e.id ?? `section-${t}`))
1649
+ }, section.id ?? `section-${sectionIndex}`))
1413
1650
  }),
1414
- c ? /* @__PURE__ */ d("div", {
1415
- className: Z.footer,
1416
- children: c
1651
+ footer ? /* @__PURE__ */ jsx("div", {
1652
+ className: sidebar_nav_module_default.footer,
1653
+ children: footer
1417
1654
  }) : null
1418
1655
  ]
1419
1656
  });
1420
1657
  }
1421
- function et({ item: e, active: t, collapsed: n, itemClassName: r, onItemClick: i }) {
1422
- let a = e.rel ?? (e.target === "_blank" ? "noreferrer" : void 0), o = e.title ?? (typeof e.label == "string" ? e.label : void 0), s = v(Z.item, t && Z.itemActive, n && Z.itemCollapsed, e.disabled && Z.itemDisabled, r), c = /* @__PURE__ */ f(u, { children: [e.icon && /* @__PURE__ */ d("span", {
1423
- className: Z.icon,
1424
- children: e.icon
1425
- }), n ? null : /* @__PURE__ */ f("span", {
1426
- className: Z.itemBody,
1427
- children: [/* @__PURE__ */ f("span", {
1428
- className: Z.labelRow,
1429
- children: [/* @__PURE__ */ d("span", {
1430
- className: Z.label,
1431
- children: e.label
1432
- }), e.badge && /* @__PURE__ */ d("span", {
1433
- className: Z.badge,
1434
- children: e.badge
1658
+ function SidebarNavEntry({ item, active, collapsed, itemClassName, onItemClick }) {
1659
+ const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
1660
+ const title = item.title ?? (typeof item.label === "string" ? item.label : void 0);
1661
+ const classes = cx(sidebar_nav_module_default.item, active && sidebar_nav_module_default.itemActive, collapsed && sidebar_nav_module_default.itemCollapsed, item.disabled && sidebar_nav_module_default.itemDisabled, itemClassName);
1662
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx("span", {
1663
+ className: sidebar_nav_module_default.icon,
1664
+ children: item.icon
1665
+ }), !collapsed ? /* @__PURE__ */ jsxs("span", {
1666
+ className: sidebar_nav_module_default.itemBody,
1667
+ children: [/* @__PURE__ */ jsxs("span", {
1668
+ className: sidebar_nav_module_default.labelRow,
1669
+ children: [/* @__PURE__ */ jsx("span", {
1670
+ className: sidebar_nav_module_default.label,
1671
+ children: item.label
1672
+ }), item.badge && /* @__PURE__ */ jsx("span", {
1673
+ className: sidebar_nav_module_default.badge,
1674
+ children: item.badge
1435
1675
  })]
1436
- }), e.description ? /* @__PURE__ */ d("span", {
1437
- className: Z.description,
1438
- children: e.description
1676
+ }), item.description ? /* @__PURE__ */ jsx("span", {
1677
+ className: sidebar_nav_module_default.description,
1678
+ children: item.description
1439
1679
  }) : null]
1440
- })] }), l = () => {
1441
- e.disabled || (e.onClick?.(), i?.(e));
1680
+ }) : null] });
1681
+ const handleClick = () => {
1682
+ if (item.disabled) return;
1683
+ item.onClick?.();
1684
+ onItemClick?.(item);
1442
1685
  };
1443
- return e.href ? e.disabled ? /* @__PURE__ */ d("div", {
1444
- className: s,
1445
- "aria-current": t ? "page" : void 0,
1446
- "aria-disabled": "true",
1447
- title: n ? o : void 0,
1448
- children: c
1449
- }) : /* @__PURE__ */ d("a", {
1450
- className: s,
1451
- href: e.href,
1452
- target: e.target,
1453
- rel: a,
1454
- "aria-current": t ? "page" : void 0,
1455
- title: n ? o : void 0,
1456
- onClick: l,
1457
- children: c
1458
- }) : /* @__PURE__ */ d("button", {
1686
+ if (!item.href) return /* @__PURE__ */ jsx("button", {
1459
1687
  type: "button",
1460
- className: s,
1461
- "aria-current": t ? "page" : void 0,
1462
- "aria-disabled": e.disabled ? "true" : void 0,
1463
- disabled: e.disabled,
1464
- title: n ? o : void 0,
1465
- onClick: l,
1466
- children: c
1688
+ className: classes,
1689
+ "aria-current": active ? "page" : void 0,
1690
+ "aria-disabled": item.disabled ? "true" : void 0,
1691
+ disabled: item.disabled,
1692
+ title: collapsed ? title : void 0,
1693
+ onClick: handleClick,
1694
+ children: content
1695
+ });
1696
+ if (item.disabled) return /* @__PURE__ */ jsx("div", {
1697
+ className: classes,
1698
+ "aria-current": active ? "page" : void 0,
1699
+ "aria-disabled": "true",
1700
+ title: collapsed ? title : void 0,
1701
+ children: content
1702
+ });
1703
+ return /* @__PURE__ */ jsx("a", {
1704
+ className: classes,
1705
+ href: item.href,
1706
+ target: item.target,
1707
+ rel,
1708
+ "aria-current": active ? "page" : void 0,
1709
+ title: collapsed ? title : void 0,
1710
+ onClick: handleClick,
1711
+ children: content
1467
1712
  });
1468
1713
  }
1469
- var tt = {
1714
+ var skeleton_module_default = {
1470
1715
  skeleton: "uzi-skeleton-module__skeleton__fula5",
1471
1716
  "skeleton-pulse": "uzi-skeleton-module__skeleton-pulse__Yp45W",
1472
1717
  "radius-sm": "uzi-skeleton-module__radius-sm__FdccD",
@@ -1476,19 +1721,19 @@ var tt = {
1476
1721
  };
1477
1722
  //#endregion
1478
1723
  //#region src/components/skeleton/Skeleton.tsx
1479
- function nt({ width: e, height: t, radius: n = "md", className: r, style: i, ...a }) {
1480
- return /* @__PURE__ */ d("div", {
1481
- className: v(tt.skeleton, tt[`radius-${n}`], r),
1724
+ function Skeleton({ width, height, radius = "md", className, style, ...rest }) {
1725
+ return /* @__PURE__ */ jsx("div", {
1726
+ className: cx(skeleton_module_default.skeleton, skeleton_module_default[`radius-${radius}`], className),
1482
1727
  style: {
1483
- width: e,
1484
- height: t,
1485
- ...i
1728
+ width,
1729
+ height,
1730
+ ...style
1486
1731
  },
1487
1732
  "aria-hidden": "true",
1488
- ...a
1733
+ ...rest
1489
1734
  });
1490
1735
  }
1491
- var Q = {
1736
+ var progress_module_default = {
1492
1737
  track: "uzi-progress-module__track__gM0oV",
1493
1738
  fill: "uzi-progress-module__fill__aLAbp",
1494
1739
  "tone-default": "uzi-progress-module__tone-default__fhf7o",
@@ -1498,97 +1743,116 @@ var Q = {
1498
1743
  };
1499
1744
  //#endregion
1500
1745
  //#region src/components/progress/Progress.tsx
1501
- function rt({ value: e, tone: t = "default", className: n, "aria-label": r, ...i }) {
1502
- let a = Math.max(0, Math.min(100, e));
1503
- return /* @__PURE__ */ d("div", {
1504
- className: v(Q.track, n),
1746
+ function Progress({ value, tone = "default", className, "aria-label": ariaLabel, ...rest }) {
1747
+ const clamped = Math.max(0, Math.min(100, value));
1748
+ return /* @__PURE__ */ jsx("div", {
1749
+ className: cx(progress_module_default.track, className),
1505
1750
  role: "progressbar",
1506
- "aria-valuenow": a,
1751
+ "aria-valuenow": clamped,
1507
1752
  "aria-valuemin": 0,
1508
1753
  "aria-valuemax": 100,
1509
- "aria-label": r,
1510
- ...i,
1511
- children: /* @__PURE__ */ d("div", {
1512
- className: v(Q.fill, Q[`tone-${t}`]),
1513
- style: { width: `${a}%` }
1754
+ "aria-label": ariaLabel,
1755
+ ...rest,
1756
+ children: /* @__PURE__ */ jsx("div", {
1757
+ className: cx(progress_module_default.fill, progress_module_default[`tone-${tone}`]),
1758
+ style: { width: `${clamped}%` }
1514
1759
  })
1515
1760
  });
1516
1761
  }
1517
- var $ = {
1762
+ var segmented_toggle_module_default = {
1518
1763
  track: "uzi-segmented-toggle-module__track__M4fjm",
1519
1764
  option: "uzi-segmented-toggle-module__option__7cEZJ",
1520
1765
  label: "uzi-segmented-toggle-module__label__bDAIv"
1521
1766
  };
1522
1767
  //#endregion
1523
1768
  //#region src/components/segmented-toggle/SegmentedToggle.tsx
1524
- function it({ options: t, value: n, onChange: r, "aria-label": i, "aria-labelledby": a, className: o }) {
1525
- let s = e.useRef([]), c = t.findIndex((e) => e.value === n), l = t.findIndex((e) => !e.disabled), u = -1;
1526
- for (let e = t.length - 1; e >= 0; --e) if (!t[e]?.disabled) {
1527
- u = e;
1769
+ function SegmentedToggle({ options, value, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className }) {
1770
+ const itemRefs = React.useRef([]);
1771
+ const selectedIndex = options.findIndex((opt) => opt.value === value);
1772
+ const fallbackIndex = options.findIndex((opt) => !opt.disabled);
1773
+ let lastEnabledIndex = -1;
1774
+ for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index]?.disabled) {
1775
+ lastEnabledIndex = index;
1528
1776
  break;
1529
1777
  }
1530
- let f = c >= 0 && !t[c]?.disabled ? c : l, p = (e) => {
1531
- s.current[e]?.focus();
1532
- }, m = (e, n) => {
1533
- if (t.length === 0) return -1;
1534
- let r = e;
1535
- for (let e = 0; e < t.length; e += 1) if (r = (r + n + t.length) % t.length, !t[r]?.disabled) return r;
1536
- return e;
1537
- }, h = (e) => {
1538
- let i = t[e];
1539
- !i || i.disabled || i.value === n || r(i.value);
1540
- }, g = (e, t) => {
1541
- switch (e.key) {
1778
+ const tabbableIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : fallbackIndex;
1779
+ const focusItem = (index) => {
1780
+ itemRefs.current[index]?.focus();
1781
+ };
1782
+ const findEnabledIndex = (startIndex, direction) => {
1783
+ if (options.length === 0) return -1;
1784
+ let nextIndex = startIndex;
1785
+ for (let i = 0; i < options.length; i += 1) {
1786
+ nextIndex = (nextIndex + direction + options.length) % options.length;
1787
+ if (!options[nextIndex]?.disabled) return nextIndex;
1788
+ }
1789
+ return startIndex;
1790
+ };
1791
+ const selectIndex = (index) => {
1792
+ const nextOption = options[index];
1793
+ if (!nextOption || nextOption.disabled || nextOption.value === value) return;
1794
+ onChange(nextOption.value);
1795
+ };
1796
+ const handleKeyDown = (event, index) => {
1797
+ switch (event.key) {
1542
1798
  case "ArrowRight":
1543
1799
  case "ArrowDown": {
1544
- e.preventDefault();
1545
- let n = m(t, 1);
1546
- p(n), h(n);
1800
+ event.preventDefault();
1801
+ const nextIndex = findEnabledIndex(index, 1);
1802
+ focusItem(nextIndex);
1803
+ selectIndex(nextIndex);
1547
1804
  break;
1548
1805
  }
1549
1806
  case "ArrowLeft":
1550
1807
  case "ArrowUp": {
1551
- e.preventDefault();
1552
- let n = m(t, -1);
1553
- p(n), h(n);
1808
+ event.preventDefault();
1809
+ const nextIndex = findEnabledIndex(index, -1);
1810
+ focusItem(nextIndex);
1811
+ selectIndex(nextIndex);
1554
1812
  break;
1555
1813
  }
1556
1814
  case "Home":
1557
- e.preventDefault(), p(l), l >= 0 && h(l);
1815
+ event.preventDefault();
1816
+ focusItem(fallbackIndex);
1817
+ if (fallbackIndex >= 0) selectIndex(fallbackIndex);
1558
1818
  break;
1559
1819
  case "End":
1560
- e.preventDefault(), u >= 0 && (p(u), h(u));
1820
+ event.preventDefault();
1821
+ if (lastEnabledIndex >= 0) {
1822
+ focusItem(lastEnabledIndex);
1823
+ selectIndex(lastEnabledIndex);
1824
+ }
1561
1825
  break;
1562
1826
  default: break;
1563
1827
  }
1564
1828
  };
1565
- return /* @__PURE__ */ d("div", {
1566
- className: v($.track, o),
1829
+ return /* @__PURE__ */ jsx("div", {
1830
+ className: cx(segmented_toggle_module_default.track, className),
1567
1831
  role: "radiogroup",
1568
- "aria-label": i,
1569
- "aria-labelledby": a,
1570
- children: t.map((e, t) => /* @__PURE__ */ d("button", {
1571
- ref: (e) => {
1572
- s.current[t] = e;
1832
+ "aria-label": ariaLabel,
1833
+ "aria-labelledby": ariaLabelledBy,
1834
+ children: options.map((opt, index) => /* @__PURE__ */ jsx("button", {
1835
+ ref: (node) => {
1836
+ itemRefs.current[index] = node;
1573
1837
  },
1574
1838
  type: "button",
1575
1839
  role: "radio",
1576
- "aria-checked": e.value === n,
1577
- disabled: e.disabled,
1578
- tabIndex: e.disabled ? -1 : t === f ? 0 : -1,
1840
+ "aria-checked": opt.value === value,
1841
+ disabled: opt.disabled,
1842
+ tabIndex: opt.disabled ? -1 : index === tabbableIndex ? 0 : -1,
1579
1843
  onClick: () => {
1580
- e.value !== n && r(e.value);
1844
+ if (opt.value !== value) onChange(opt.value);
1581
1845
  },
1582
- onKeyDown: (e) => g(e, t),
1583
- className: v($.option),
1584
- children: /* @__PURE__ */ d("span", {
1585
- className: $.label,
1586
- children: e.label
1846
+ onKeyDown: (event) => handleKeyDown(event, index),
1847
+ className: cx(segmented_toggle_module_default.option),
1848
+ children: /* @__PURE__ */ jsx("span", {
1849
+ className: segmented_toggle_module_default.label,
1850
+ children: opt.label
1587
1851
  })
1588
- }, e.value))
1852
+ }, opt.value))
1589
1853
  });
1590
1854
  }
1591
1855
  //#endregion
1592
- export { F as Alert, Ke as AppShell, w as Avatar, E as AvatarFallback, T as AvatarImage, S as Button, O as Card, W as Checkbox, ue as Dropdown, de as DropdownMenu, ye as DropdownMenuCheckboxItem, _e as DropdownMenuContent, pe as DropdownMenuGroup, ve as DropdownMenuItem, xe as DropdownMenuLabel, me as DropdownMenuPortal, ge as DropdownMenuRadioGroup, be as DropdownMenuRadioItem, Se as DropdownMenuSeparator, he as DropdownMenuSub, we as DropdownMenuSubContent, Ce as DropdownMenuSubTrigger, fe as DropdownMenuTrigger, H as Input, U as Label, N as Modal, M as ModalOverlay, ce as MultiSelect, A as Pill, rt as Progress, it as SegmentedToggle, q as Select, $e as SidebarNav, nt as Skeleton, Le as ThemeProvider, He as ThemeToggleButton, V as ToastProvider, Ue as TopBar, v as cx, Re as useTheme, ee as useToast };
1856
+ export { Alert, AppShell, Avatar, AvatarFallback, AvatarImage, Button, Card, Checkbox, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Label, Modal, ModalOverlay, MultiSelect, Pill, Progress, SegmentedToggle, Select, SidebarNav, Skeleton, ThemeProvider, ThemeToggleButton, ToastProvider, TopBar, cx, useTheme, useToast };
1593
1857
 
1594
1858
  //# sourceMappingURL=index.js.map