@minimalstuff/ui 1.3.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/index.d.ts +82 -66
  3. package/dist/minimalstuff-ui.css +1 -1
  4. package/dist/minimalstuff-ui.js +672 -435
  5. package/package.json +41 -36
package/dist/minimalstuff-ui.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
2
- import r, { Fragment as i, createElement as a, useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
2
+ import r, { createElement as i, useCallback as a, useEffect as o, useId as s, useRef as c, useState as l, useSyncExternalStore as u } from "react";
3
3
  import { createPortal as d } from "react-dom";
4
4
  //#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
5
5
  function f(e) {
@@ -16,101 +16,146 @@ function p() {
16
16
  return r;
17
17
  }
18
18
  //#endregion
19
- //#region src/components/button/button.tsx
19
+ //#region src/components/shared/radius.ts
20
20
  var m = {
21
- primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 border-transparent",
22
- secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 border-transparent",
23
- ghost: "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700/50 border-transparent",
24
- outline: "bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800/50",
25
- subtle: "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-600/50 border-transparent",
26
- danger: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 border-transparent"
21
+ none: "rounded-none",
22
+ sm: "rounded-sm",
23
+ md: "rounded-md",
24
+ lg: "rounded-lg",
25
+ xl: "rounded-xl",
26
+ full: "rounded-full"
27
27
  }, h = {
28
+ primary: {
29
+ solid: "border-transparent bg-blue-600 text-white enabled:hover:bg-blue-700 enabled:active:bg-blue-800 dark:bg-blue-500 dark:enabled:hover:bg-blue-600 dark:enabled:active:bg-blue-700",
30
+ outline: "border-blue-300 bg-transparent text-blue-700 enabled:hover:bg-blue-50 enabled:active:bg-blue-100 dark:border-blue-800 dark:text-blue-400 dark:enabled:hover:bg-blue-950/40 dark:enabled:active:bg-blue-950/60",
31
+ ghost: "border-transparent bg-transparent text-blue-700 enabled:hover:bg-blue-50 enabled:active:bg-blue-100 dark:text-blue-400 dark:enabled:hover:bg-blue-950/40 dark:enabled:active:bg-blue-950/60",
32
+ subtle: "border-transparent bg-blue-50 text-blue-700 enabled:hover:bg-blue-100 enabled:active:bg-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:enabled:hover:bg-blue-500/20 dark:enabled:active:bg-blue-500/30",
33
+ focusOutline: "focus-visible:outline-blue-500"
34
+ },
35
+ neutral: {
36
+ solid: "border-transparent bg-gray-200 text-gray-900 enabled:hover:bg-gray-300 enabled:active:bg-gray-400 dark:bg-gray-600 dark:text-gray-100 dark:enabled:hover:bg-gray-500 dark:enabled:active:bg-gray-400",
37
+ outline: "border-gray-300 bg-transparent text-gray-700 enabled:hover:bg-gray-50 enabled:active:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:enabled:hover:bg-gray-800/50 dark:enabled:active:bg-gray-800/80",
38
+ ghost: "border-transparent bg-transparent text-gray-700 enabled:hover:bg-gray-100 enabled:active:bg-gray-200 dark:text-gray-300 dark:enabled:hover:bg-gray-700/50 dark:enabled:active:bg-gray-700/80",
39
+ subtle: "border-transparent bg-gray-100 text-gray-700 enabled:hover:bg-gray-200 enabled:active:bg-gray-300 dark:bg-gray-700/50 dark:text-gray-300 dark:enabled:hover:bg-gray-600/50 dark:enabled:active:bg-gray-600/80",
40
+ focusOutline: "focus-visible:outline-gray-400"
41
+ },
42
+ danger: {
43
+ solid: "border-transparent bg-red-600 text-white enabled:hover:bg-red-700 enabled:active:bg-red-800 dark:bg-red-500 dark:enabled:hover:bg-red-600 dark:enabled:active:bg-red-700",
44
+ outline: "border-red-300 bg-transparent text-red-700 enabled:hover:bg-red-50 enabled:active:bg-red-100 dark:border-red-800 dark:text-red-400 dark:enabled:hover:bg-red-950/40 dark:enabled:active:bg-red-950/60",
45
+ ghost: "border-transparent bg-transparent text-red-700 enabled:hover:bg-red-50 enabled:active:bg-red-100 dark:text-red-400 dark:enabled:hover:bg-red-950/40 dark:enabled:active:bg-red-950/60",
46
+ subtle: "border-transparent bg-red-50 text-red-700 enabled:hover:bg-red-100 enabled:active:bg-red-200 dark:bg-red-500/10 dark:text-red-400 dark:enabled:hover:bg-red-500/20 dark:enabled:active:bg-red-500/30",
47
+ focusOutline: "focus-visible:outline-red-500"
48
+ },
49
+ success: {
50
+ solid: "border-transparent bg-green-600 text-white enabled:hover:bg-green-700 enabled:active:bg-green-800 dark:bg-green-500 dark:enabled:hover:bg-green-600 dark:enabled:active:bg-green-700",
51
+ outline: "border-green-300 bg-transparent text-green-700 enabled:hover:bg-green-50 enabled:active:bg-green-100 dark:border-green-800 dark:text-green-400 dark:enabled:hover:bg-green-950/40 dark:enabled:active:bg-green-950/60",
52
+ ghost: "border-transparent bg-transparent text-green-700 enabled:hover:bg-green-50 enabled:active:bg-green-100 dark:text-green-400 dark:enabled:hover:bg-green-950/40 dark:enabled:active:bg-green-950/60",
53
+ subtle: "border-transparent bg-green-50 text-green-700 enabled:hover:bg-green-100 enabled:active:bg-green-200 dark:bg-green-500/10 dark:text-green-400 dark:enabled:hover:bg-green-500/20 dark:enabled:active:bg-green-500/30",
54
+ focusOutline: "focus-visible:outline-green-500"
55
+ }
56
+ }, g = "cursor-pointer inline-flex items-center justify-center transition-[color,background-color,border-color,transform] duration-200 enabled:active:duration-75 enabled:active:scale-[0.95] outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", _ = {
28
57
  xs: "px-2 py-1 text-xs",
29
58
  sm: "px-3 py-1.5 text-sm",
30
59
  md: "px-4 py-2 text-sm",
31
60
  lg: "px-4 py-3 text-base"
32
- }, g = ({ variant: e = "primary", size: r = "md", children: i, className: a, fullWidth: o = !1, loading: s = !1, disabled: c, ...l }) => /* @__PURE__ */ n("button", {
33
- type: "button",
34
- className: p("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", m[e], h[r], o && "w-full", a),
35
- disabled: c ?? s,
36
- ...l,
37
- children: [s && /* @__PURE__ */ t("span", {
38
- className: "i-svg-spinners-3-dots-fade w-4 h-4",
39
- "aria-hidden": "true"
40
- }), i]
41
- }), _ = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
42
- function v({ current: e, min: t, max: r, showMin: i, showMax: a }) {
43
- let o = t !== void 0 && e <= t, s = r !== void 0 && e >= r, c = r !== void 0 && e > r;
61
+ }, v = {
62
+ xs: "w-3.5 h-3.5",
63
+ sm: "w-4 h-4",
64
+ md: "w-4 h-4",
65
+ lg: "w-5 h-5"
66
+ }, y = ({ variant: e = "solid", color: r = "primary", size: i = "md", radius: a = "md", children: o, className: s, fullWidth: c = !1, loading: l = !1, startIcon: u, endIcon: d, disabled: f, ...y }) => {
67
+ let b = h[r], x = v[i];
68
+ return /* @__PURE__ */ n("button", {
69
+ type: "button",
70
+ className: p(g, "gap-2 font-medium", e !== "unstyled" && [
71
+ "border",
72
+ m[a],
73
+ b[e],
74
+ b.focusOutline
75
+ ], _[i], c && "w-full", s),
76
+ disabled: f ?? l,
77
+ "aria-busy": l || void 0,
78
+ ...y,
79
+ children: [
80
+ l && /* @__PURE__ */ t("span", {
81
+ className: p("i-svg-spinners-3-dots-fade", x),
82
+ "aria-hidden": "true"
83
+ }),
84
+ !l && u && /* @__PURE__ */ t("span", {
85
+ className: p(u, x),
86
+ "aria-hidden": "true"
87
+ }),
88
+ o,
89
+ !l && d && /* @__PURE__ */ t("span", {
90
+ className: p(d, x),
91
+ "aria-hidden": "true"
92
+ })
93
+ ]
94
+ });
95
+ }, b = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
96
+ function x(e) {
97
+ return e === "overLimit" ? "text-red-600 dark:text-red-400" : e === "atLimit" ? "text-amber-600 dark:text-amber-400" : "";
98
+ }
99
+ function S({ current: e, min: r, max: i, showMin: a, showMax: o }) {
100
+ let s = a === !0 || o === !0, c = r !== void 0 && e <= r ? "atLimit" : "ok", l = i !== void 0 && e > i ? "overLimit" : i !== void 0 && e >= i ? "atLimit" : "ok", u = s ? `${e}/${r} min` : `${e} (min ${r})`, d = s ? `${e}/${i} max` : `${e}/${i}`;
44
101
  return /* @__PURE__ */ n("div", {
45
- className: _,
102
+ className: b,
46
103
  children: [
47
- i && t !== void 0 && /* @__PURE__ */ n("span", {
48
- className: o ? "text-amber-600 dark:text-amber-400" : "",
49
- children: [
50
- e,
51
- "/",
52
- t,
53
- " min"
54
- ]
104
+ a && r !== void 0 && /* @__PURE__ */ t("span", {
105
+ className: x(c),
106
+ children: u
55
107
  }),
56
- i && a && " · ",
57
- a && r !== void 0 && /* @__PURE__ */ n("span", {
58
- className: c ? "text-red-600 dark:text-red-400" : s ? "text-amber-600 dark:text-amber-400" : "",
59
- children: [
60
- e,
61
- "/",
62
- r,
63
- " max"
64
- ]
108
+ a && o && " · ",
109
+ o && i !== void 0 && /* @__PURE__ */ t("span", {
110
+ className: x(l),
111
+ children: d
65
112
  }),
66
- !i && !a && r !== void 0 && /* @__PURE__ */ n("span", {
67
- className: c ? "text-red-600 dark:text-red-400" : s ? "text-amber-600 dark:text-amber-400" : "",
68
- children: [
69
- e,
70
- "/",
71
- r
72
- ]
113
+ !a && !o && i !== void 0 && /* @__PURE__ */ t("span", {
114
+ className: x(l),
115
+ children: d
73
116
  }),
74
- !i && !a && t !== void 0 && r === void 0 && /* @__PURE__ */ n("span", {
75
- className: o ? "text-amber-600 dark:text-amber-400" : "",
76
- children: [
77
- e,
78
- " (min ",
79
- t,
80
- ")"
81
- ]
117
+ !a && !o && r !== void 0 && i === void 0 && /* @__PURE__ */ t("span", {
118
+ className: x(c),
119
+ children: u
82
120
  })
83
121
  ]
84
122
  });
85
123
  }
86
124
  //#endregion
125
+ //#region src/components/shared/surface_tokens.ts
126
+ var C = "border-gray-300 dark:border-gray-600", w = "bg-white dark:bg-gray-800", T = "border-gray-200 dark:border-gray-700", E = "bg-white dark:bg-gray-900", D = "bg-blue-600 dark:bg-blue-500", O = "text-sm font-medium text-gray-700 dark:text-gray-300", ee = "border-red-500 dark:border-red-400";
127
+ //#endregion
87
128
  //#region src/components/checkbox/checkbox.tsx
88
- function y({ label: e, description: r, error: i, className: a, wrapperClassName: o, checked: s, defaultChecked: l = !1, onChange: d, id: f = "checkbox", ...m }) {
89
- let h = `${f}-${c()}`, [g, _] = u(l), v = s !== void 0, y = v ? s : g, b = [r && `${h}-description`, i && `${h}-error`].filter(Boolean).join(" ") || void 0;
129
+ function k({ label: e, description: r, error: i, radius: a = "sm", unstyled: o = !1, className: c, wrapperClassName: u, checked: d, defaultChecked: f = !1, onChange: h, id: g = "checkbox", ..._ }) {
130
+ let v = `${g}-${s()}`, [y, b] = l(f), x = d !== void 0, S = x ? d : y, C = [r && `${v}-description`, i && `${v}-error`].filter(Boolean).join(" ") || void 0;
90
131
  return /* @__PURE__ */ n("div", {
91
- className: p("w-full", o),
132
+ className: p("w-full", u),
92
133
  children: [
93
134
  /* @__PURE__ */ n("label", {
94
- htmlFor: h,
95
- className: p("flex items-start gap-3 cursor-pointer", m.disabled && "cursor-not-allowed opacity-50"),
135
+ htmlFor: v,
136
+ className: p("flex items-start gap-3 cursor-pointer", _.disabled && "cursor-not-allowed opacity-50"),
96
137
  children: [/* @__PURE__ */ n("span", {
97
138
  className: p("relative shrink-0 rounded", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900", i ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
98
139
  children: [/* @__PURE__ */ t("input", {
99
140
  type: "checkbox",
100
- id: h,
141
+ id: v,
101
142
  className: "sr-only",
102
- checked: s,
103
- defaultChecked: l,
143
+ checked: S,
104
144
  onChange: (e) => {
105
- v || _(e.target.checked), d?.(e);
145
+ x || b(e.target.checked), h?.(e);
106
146
  },
107
147
  "aria-invalid": !!i,
108
- "aria-describedby": b,
109
- ...m
148
+ "aria-describedby": C,
149
+ ..._
110
150
  }), /* @__PURE__ */ t("span", {
111
- className: p("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200", y ? "border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800", i && "border-red-500 dark:border-red-400", a),
151
+ className: p("flex h-5 w-5 items-center justify-center transition-all duration-200", !o && [
152
+ m[a],
153
+ "border-2",
154
+ S ? p("border-blue-600 dark:border-blue-500", "bg-blue-600 dark:bg-blue-500") : p("border-gray-300 dark:border-gray-600", "bg-white dark:bg-gray-800"),
155
+ i && "border-red-500 dark:border-red-400"
156
+ ], c),
112
157
  "aria-hidden": !0,
113
- children: y && /* @__PURE__ */ t("svg", {
158
+ children: S && /* @__PURE__ */ t("svg", {
114
159
  className: "h-3 w-3 text-white",
115
160
  viewBox: "0 0 12 12",
116
161
  fill: "none",
@@ -122,25 +167,25 @@ function y({ label: e, description: r, error: i, className: a, wrapperClassName:
122
167
  })
123
168
  })]
124
169
  }), typeof e == "string" ? /* @__PURE__ */ n("span", {
125
- className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
126
- children: [e, m.required && /* @__PURE__ */ t("span", {
170
+ className: p(O, "select-none"),
171
+ children: [e, _.required && /* @__PURE__ */ t("span", {
127
172
  className: "text-red-500 dark:text-red-400 ml-1",
128
173
  children: "*"
129
174
  })]
130
175
  }) : e]
131
176
  }),
132
177
  r && (typeof r == "string" ? /* @__PURE__ */ t("p", {
133
- id: `${h}-description`,
134
- className: "text-xs text-gray-500 dark:text-gray-400 mt-1 ml-8",
178
+ id: `${v}-description`,
179
+ className: p("text-xs text-gray-500 dark:text-gray-400", "mt-1 ml-8"),
135
180
  children: r
136
181
  }) : /* @__PURE__ */ t("span", {
137
- id: `${h}-description`,
138
- className: "block text-xs text-gray-500 dark:text-gray-400 mt-1 ml-8",
182
+ id: `${v}-description`,
183
+ className: p("text-xs text-gray-500 dark:text-gray-400", "block mt-1 ml-8"),
139
184
  children: r
140
185
  })),
141
186
  i && /* @__PURE__ */ t("p", {
142
- id: `${h}-error`,
143
- className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-8",
187
+ id: `${v}-error`,
188
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-1 ml-8"),
144
189
  role: "alert",
145
190
  children: i
146
191
  })
@@ -149,216 +194,304 @@ function y({ label: e, description: r, error: i, className: a, wrapperClassName:
149
194
  }
150
195
  //#endregion
151
196
  //#region src/hooks/use_client_only/use_client_only.tsx
152
- var b = () => {
153
- let [e, t] = u(!1);
154
- return s(() => {
197
+ var A = () => {
198
+ let [e, t] = l(!1);
199
+ return o(() => {
155
200
  requestAnimationFrame(() => {
156
201
  t(!0);
157
202
  });
158
203
  }, []), e;
159
- }, x = (e) => (n) => b() ? /* @__PURE__ */ t(e, { ...n }) : null;
204
+ }, j = (e) => (n) => A() ? /* @__PURE__ */ t(e, { ...n }) : null;
160
205
  //#endregion
161
206
  //#region src/components/client_only/client_only.tsx
162
- function S({ children: e, fallback: t }) {
163
- return b() ? a(i, { children: e }) : t ?? null;
207
+ function te({ children: n, fallback: r }) {
208
+ return A() ? /* @__PURE__ */ t(e, { children: n }) : r ?? null;
164
209
  }
165
210
  //#endregion
166
211
  //#region src/components/icon_button/icon_button.tsx
167
- var C = {
168
- default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
169
- ghost: "text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50",
170
- danger: "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20",
171
- outline: "text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-white/50 dark:hover:bg-gray-800/50",
172
- subtle: "text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50/50 dark:hover:bg-gray-800/30"
173
- }, ee = {
212
+ var M = {
174
213
  sm: "p-1",
175
214
  md: "p-2",
176
215
  lg: "p-3"
177
- }, w = {
216
+ }, ne = {
178
217
  sm: "w-4 h-4",
179
218
  md: "w-5 h-5",
180
219
  lg: "w-6 h-6"
181
- }, T = ({ icon: e, "aria-label": r, variant: i = "default", size: a = "md", className: o, children: s, ref: c, ...l }) => /* @__PURE__ */ n("button", {
182
- ref: c,
183
- type: "button",
184
- "aria-label": r,
185
- className: p("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", C[i], ee[a], o),
186
- ...l,
187
- children: [/* @__PURE__ */ t("div", { className: p(e, w[a], s && "mr-1") }), s]
188
- }), E = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
189
- function te({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, className: s, wrapperClassName: l, value: d, defaultValue: f, onChange: m, id: h = "input", ...g }) {
190
- let _ = `${h}-${c()}`, [y, b] = u(typeof f == "string" ? f.length : 0), x = typeof d == "string" ? d.length : d === void 0 ? y : 0, S = i && (a !== void 0 || o !== void 0);
220
+ }, N = ({ icon: e, "aria-label": r, variant: i = "outline", color: a = "neutral", size: o = "md", radius: s = "md", className: c, children: l, ref: u, ...d }) => {
221
+ let f = h[a];
222
+ return /* @__PURE__ */ n("button", {
223
+ ref: u,
224
+ type: "button",
225
+ "aria-label": r,
226
+ className: p(g, i !== "unstyled" && [
227
+ "border",
228
+ m[s],
229
+ f[i],
230
+ f.focusOutline
231
+ ], M[o], c),
232
+ ...d,
233
+ children: [/* @__PURE__ */ t("div", { className: p(e, ne[o], l && "mr-1") }), l]
234
+ });
235
+ }, P = `w-full border ${C} ${w} text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed`;
236
+ function re({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, radius: c = "md", unstyled: u = !1, className: d, wrapperClassName: f, value: h, defaultValue: g, onChange: _, id: v = "input", ...y }) {
237
+ let b = `${v}-${s()}`, [x, C] = l(typeof g == "string" ? g.length : 0), w = typeof h == "string" ? h.length : h === void 0 ? x : 0, T = i && (a !== void 0 || o !== void 0), E = (e) => {
238
+ h === void 0 && C(e.target.value.length), _?.(e);
239
+ };
191
240
  return /* @__PURE__ */ n("div", {
192
- className: p("w-full", l),
241
+ className: p("w-full", f),
193
242
  children: [
194
243
  typeof e == "string" ? /* @__PURE__ */ n("label", {
195
- className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
196
- htmlFor: _,
197
- children: [e, g.required && /* @__PURE__ */ t("span", {
244
+ className: p(O, "block mb-1"),
245
+ htmlFor: b,
246
+ children: [e, y.required && /* @__PURE__ */ t("span", {
198
247
  className: "text-red-500 dark:text-red-400 ml-1",
199
248
  children: "*"
200
249
  })]
201
250
  }) : e,
202
251
  /* @__PURE__ */ t("input", {
203
- id: _,
204
- className: p(E, "px-3 py-2 text-sm", r && "border-red-500 dark:border-red-400 focus:ring-red-500", s),
205
- value: d,
206
- defaultValue: f,
252
+ id: b,
253
+ className: p("w-full disabled:opacity-50 disabled:cursor-not-allowed", !u && [
254
+ P,
255
+ m[c],
256
+ "px-3 py-2 text-sm"
257
+ ], !u && r && p("border-red-500 dark:border-red-400", "focus:ring-red-500"), d),
258
+ ...h === void 0 ? { defaultValue: g } : { value: h },
207
259
  minLength: a,
208
260
  maxLength: o,
209
- onChange: (e) => {
210
- d === void 0 && b(e.target.value.length), m?.(e);
211
- },
212
- ...g
261
+ onChange: E,
262
+ "aria-invalid": !!r,
263
+ "aria-describedby": r ? `${b}-error` : void 0,
264
+ ...y
213
265
  }),
214
- S && /* @__PURE__ */ t(v, {
215
- current: x,
266
+ T && /* @__PURE__ */ t(S, {
267
+ current: w,
216
268
  min: a,
217
269
  max: o,
218
270
  showMin: a !== void 0,
219
271
  showMax: o !== void 0
220
272
  }),
221
273
  r && /* @__PURE__ */ t("p", {
222
- className: "text-xs text-red-600 dark:text-red-400 mt-1",
274
+ id: `${b}-error`,
275
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-1"),
276
+ role: "alert",
223
277
  children: r
224
278
  })
225
279
  ]
226
280
  });
227
281
  }
228
282
  //#endregion
229
- //#region src/hooks/use_run_after_animation/use_run_after_animation.ts
230
- function D(e) {
231
- return o((t) => {
232
- let n = setTimeout(t, e);
233
- return () => clearTimeout(n);
234
- }, [e]);
283
+ //#region node_modules/.pnpm/react-call@2.0.2_react-dom@19.2.7_react@19.2.7__react@19.2.7_vite@8.1.4_@types+node@24.10.13__rgzvvugtb5vw5jjlcj3i7hooxi/node_modules/react-call/dist/main.js
284
+ var ie = [];
285
+ function F() {
286
+ let e = 0, t = [], n = null, r = /* @__PURE__ */ new Set(), i = () => {
287
+ for (let e of r) e(t);
288
+ };
289
+ return {
290
+ add: (n) => {
291
+ t = [...t, {
292
+ ...n,
293
+ key: String(e++)
294
+ }], i();
295
+ },
296
+ set: (e, n) => {
297
+ t = t.map((t) => e && t.promise !== e ? t : n(t)), i();
298
+ },
299
+ remove: (e) => {
300
+ t = t.filter((t) => !e.has(t.promise)), i();
301
+ },
302
+ subscribe: (i) => (r.add(i), () => {
303
+ r.delete(i), r.size || (e = 0, t = [], n = null);
304
+ }),
305
+ getSnapshot: () => t,
306
+ getServerSnapshot: () => ie,
307
+ getListenersSize: () => r.size,
308
+ getUpsertPromise: () => n,
309
+ setUpsertPromise: (e) => {
310
+ n = e;
311
+ }
312
+ };
313
+ }
314
+ var I = /* @__PURE__ */ new Map();
315
+ function L(e, t = 0) {
316
+ let n = { current: F() }, r = (e) => (r) => {
317
+ let i = /* @__PURE__ */ new Set();
318
+ n.current.set(e, (e) => (e.resolve(r), i.add(e.promise), {
319
+ ...e,
320
+ ended: !0
321
+ })), globalThis.setTimeout(() => n.current.remove(i), t);
322
+ }, a = () => {
323
+ let e = n.current.getListenersSize();
324
+ if (!e) throw Error("No <Root> found!");
325
+ if (e > 1) throw Error("Multiple instances of <Root> found!");
326
+ }, o = (e) => {
327
+ a();
328
+ let t, i = new Promise((e) => {
329
+ t = e;
330
+ });
331
+ return n.current.add({
332
+ props: e,
333
+ end: r(i),
334
+ ended: !1,
335
+ promise: i,
336
+ resolve: t
337
+ }), i;
338
+ }, s = (e) => {
339
+ a();
340
+ let t = n.current.getUpsertPromise();
341
+ if (t) return n.current.set(t, (t) => ({
342
+ ...t,
343
+ props: e
344
+ })), t;
345
+ let i, o = new Promise((e) => {
346
+ i = e;
347
+ });
348
+ return n.current.setUpsertPromise(o), n.current.add({
349
+ props: e,
350
+ end: (e) => {
351
+ n.current.setUpsertPromise(null), r(o)(e);
352
+ },
353
+ ended: !1,
354
+ promise: o,
355
+ resolve: i
356
+ }), o;
357
+ }, c = (...e) => {
358
+ let t = e.length === 2, i = t ? e[0] : null, a = t ? e[1] : e[0];
359
+ return (!t || i === n.current.getUpsertPromise()) && n.current.setUpsertPromise(null), r(i)(a);
360
+ }, l = (...e) => {
361
+ let t = e.length === 2;
362
+ n.current.set(t ? e[0] : null, (n) => ({
363
+ ...n,
364
+ props: {
365
+ ...n.props,
366
+ ...t ? e[1] : e[0]
367
+ }
368
+ }));
369
+ }, d = function(t) {
370
+ return u(n.current.subscribe, n.current.getSnapshot, n.current.getServerSnapshot).map(({ props: n, key: r, end: a, ended: o }, s, c) => /* @__PURE__ */ i(e, {
371
+ ...n,
372
+ key: r,
373
+ call: {
374
+ key: r,
375
+ end: a,
376
+ ended: o,
377
+ root: t,
378
+ index: s,
379
+ stackSize: c.length
380
+ }
381
+ }));
382
+ }, f = Object.assign(d, {
383
+ Root: d,
384
+ call: o,
385
+ upsert: s,
386
+ end: c,
387
+ update: l
388
+ });
389
+ if (process.env.NODE_ENV !== "production") {
390
+ Object.defineProperty(f, "name", {
391
+ value: "Root",
392
+ configurable: !0
393
+ });
394
+ let e, t = !1;
395
+ Object.defineProperty(f, "displayName", {
396
+ configurable: !0,
397
+ enumerable: !0,
398
+ get: () => e,
399
+ set: (r) => {
400
+ if (t || (e = r, !r)) return;
401
+ t = !0;
402
+ let i = I.get(r);
403
+ i ? n.current = i : I.set(r, n.current);
404
+ }
405
+ });
406
+ }
407
+ return f;
235
408
  }
236
409
  //#endregion
237
- //#region src/components/modal/modal.tsx
238
- var ne = 200, re = {
410
+ //#region src/components/modal/modal_shell.tsx
411
+ var ae = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", oe = {
239
412
  sm: "max-w-md",
240
413
  md: "max-w-lg",
241
414
  lg: "max-w-2xl",
242
415
  xl: "max-w-4xl"
243
416
  };
244
- function O({ isOpen: e = !1, onClose: r, title: i, children: a, footer: o, size: c = "md", className: l }) {
245
- let [f, m] = u(!1), [h, g] = u(!1), [_, v] = u(!1), y = D(ne);
246
- s(() => {
247
- if (e && !h) {
248
- document.body.style.overflow = "hidden";
249
- let e = setTimeout(() => {
250
- g(!0), m(!1), requestAnimationFrame(() => {
251
- requestAnimationFrame(() => v(!0));
252
- });
253
- }, 0);
254
- return () => clearTimeout(e);
255
- }
256
- if (!e && h) {
257
- let e = setTimeout(() => {
258
- m(!0), v(!1);
259
- }, 0), t = y(() => {
260
- g(!1), m(!1), document.body.style.overflow = "";
261
- });
262
- return () => {
263
- clearTimeout(e), t();
264
- };
265
- }
266
- }, [
267
- e,
268
- h,
269
- y
270
- ]), s(() => {
271
- if (!e || f) return;
417
+ function R({ isEnded: e, onDismiss: r, title: i, children: a, footer: u, size: f = "md", radius: h = "xl", className: g }) {
418
+ let [_, v] = l(!1), y = c(null), b = c(null), x = s();
419
+ o(() => {
420
+ document.body.style.overflow = "hidden", b.current = document.activeElement, y.current?.focus();
421
+ let e = requestAnimationFrame(() => {
422
+ requestAnimationFrame(() => v(!0));
423
+ });
424
+ return () => {
425
+ cancelAnimationFrame(e), document.body.style.overflow = "";
426
+ };
427
+ }, []), o(() => {
428
+ e && b.current?.focus();
429
+ }, [e]), o(() => {
430
+ if (e) return;
272
431
  let t = (e) => {
273
- e.key === "Escape" && r?.();
432
+ if (e.key === "Escape") {
433
+ r();
434
+ return;
435
+ }
436
+ if (e.key !== "Tab") return;
437
+ let t = y.current;
438
+ if (!t) return;
439
+ let n = Array.from(t.querySelectorAll(ae));
440
+ if (n.length === 0) return;
441
+ let i = n[0], a = n[n.length - 1];
442
+ e.shiftKey && document.activeElement === i ? (e.preventDefault(), a.focus()) : !e.shiftKey && document.activeElement === a && (e.preventDefault(), i.focus());
274
443
  };
275
444
  return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
276
- }, [
277
- e,
278
- f,
279
- r
280
- ]);
281
- let b = () => {
282
- f || r?.();
283
- };
284
- if (!h) return null;
285
- let x = _ && !f;
445
+ }, [e, r]);
446
+ let S = () => {
447
+ e || r();
448
+ }, C = _ && !e;
286
449
  return d(/* @__PURE__ */ n("div", {
287
- className: p("fixed inset-0 z-50 flex items-start justify-center", "p-2 sm:py-[3rem] lg:py-[5rem]", "transition-all duration-200", x ? "opacity-100" : "opacity-0"),
288
- onClick: b,
450
+ className: p("fixed inset-0 z-50 flex items-start justify-center", "p-2 sm:py-[3rem] lg:py-[5rem]", "transition-opacity duration-200 ease-out", C ? "opacity-100" : "opacity-0"),
451
+ onClick: S,
289
452
  children: [/* @__PURE__ */ t("div", {
290
- className: p("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", x ? "opacity-100" : "opacity-0"),
453
+ className: p("fixed inset-0 bg-black/60 backdrop-blur-md", "transition-opacity duration-200 ease-out", C ? "opacity-100" : "opacity-0"),
291
454
  "aria-hidden": "true"
292
455
  }), /* @__PURE__ */ n("div", {
293
- className: p("relative w-full", re[c], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[calc(100vh-4rem)] sm:max-h-[calc(100vh-10rem)] overflow-hidden flex flex-col", "transition-all duration-200", x ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
456
+ ref: y,
457
+ role: "dialog",
458
+ "aria-modal": "true",
459
+ "aria-labelledby": i ? x : void 0,
460
+ tabIndex: -1,
461
+ className: p("relative w-full", oe[f], E, "shadow-2xl", m[h], "max-h-[calc(100vh-4rem)] sm:max-h-[calc(100vh-10rem)] overflow-hidden flex flex-col", "transition-all duration-200 ease-out", "focus:outline-none", C ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-1"),
294
462
  onClick: (e) => e.stopPropagation(),
295
463
  children: [
296
464
  i && /* @__PURE__ */ n("div", {
297
- className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0",
465
+ className: "flex items-center justify-between gap-4 px-6 pt-5 pb-4 flex-shrink-0",
298
466
  children: [/* @__PURE__ */ t("h2", {
299
- className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
467
+ id: x,
468
+ className: "text-base font-medium tracking-tight text-gray-900 dark:text-gray-100",
300
469
  children: i
301
- }), /* @__PURE__ */ t(T, {
470
+ }), /* @__PURE__ */ t(N, {
302
471
  icon: "i-mdi-close",
303
- onClick: r?.bind(null),
472
+ onClick: r,
304
473
  "aria-label": "Close",
305
- variant: "ghost",
306
- className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
474
+ variant: "subtle",
475
+ size: "sm",
476
+ radius: "full",
477
+ className: "-mr-1"
307
478
  })]
308
479
  }),
309
480
  /* @__PURE__ */ t("div", {
310
- className: p("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400 min-h-0", l),
481
+ className: p("flex-1 overflow-y-auto px-6 pb-6 text-sm leading-relaxed text-gray-600 dark:text-gray-400 min-h-0", !i && "pt-6", g),
311
482
  children: a
312
483
  }),
313
- o && /* @__PURE__ */ t("div", {
314
- className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0",
315
- children: o
484
+ u && /* @__PURE__ */ t("div", {
485
+ className: p("flex items-center justify-end gap-3 px-6 py-4 border-t flex-shrink-0", "border-gray-100 dark:border-gray-800"),
486
+ children: u
316
487
  })
317
488
  ]
318
489
  })]
319
490
  }), document.body);
320
491
  }
321
492
  //#endregion
322
- //#region src/components/modal/confirm_modal.tsx
323
- function k({ isOpen: r, onClose: i, onConfirm: a, title: o, children: s, confirmLabel: c, cancelLabel: l, confirmColor: d, loading: f = !1 }) {
324
- let [p, m] = u(!1), h = async () => {
325
- m(!0);
326
- try {
327
- await a();
328
- } finally {
329
- m(!1);
330
- }
331
- }, _ = f || p;
332
- return /* @__PURE__ */ t(O, {
333
- isOpen: r,
334
- onClose: i,
335
- title: o,
336
- size: "sm",
337
- footer: /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(g, {
338
- variant: "secondary",
339
- onClick: i,
340
- disabled: _,
341
- size: "sm",
342
- children: l ?? "Cancel"
343
- }), /* @__PURE__ */ t(g, {
344
- variant: (d ?? "blue") === "red" ? "danger" : "primary",
345
- onClick: () => {
346
- h();
347
- },
348
- loading: _,
349
- disabled: _,
350
- size: "sm",
351
- children: c ?? "Confirm"
352
- })] }),
353
- children: s && /* @__PURE__ */ t("div", {
354
- className: "text-sm text-gray-600 dark:text-gray-300",
355
- children: s
356
- })
357
- });
358
- }
359
- //#endregion
360
- //#region node_modules/.pnpm/zustand@5.0.12_@types+react@19.2.14_react@19.2.5_use-sync-external-store@1.6.0_react@19.2.5_/node_modules/zustand/esm/vanilla.mjs
361
- var A = (e) => {
493
+ //#region node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7_use-sync-external-store@1.6.0_react@19.2.7_/node_modules/zustand/esm/vanilla.mjs
494
+ var z = (e) => {
362
495
  let t, n = /* @__PURE__ */ new Set(), r = (e, r) => {
363
496
  let i = typeof e == "function" ? e(t) : e;
364
497
  if (!Object.is(i, t)) {
@@ -372,112 +505,216 @@ var A = (e) => {
372
505
  subscribe: (e) => (n.add(e), () => n.delete(e))
373
506
  }, o = t = e(r, i, a);
374
507
  return a;
375
- }, ie = ((e) => e ? A(e) : A), j = (e) => e;
376
- function M(e, t = j) {
508
+ }, se = ((e) => e ? z(e) : z), ce = (e) => e;
509
+ function le(e, t = ce) {
377
510
  let n = r.useSyncExternalStore(e.subscribe, r.useCallback(() => t(e.getState()), [e, t]), r.useCallback(() => t(e.getInitialState()), [e, t]));
378
511
  return r.useDebugValue(n), n;
379
512
  }
380
- var N = (e) => {
381
- let t = ie(e), n = (e) => M(t, e);
513
+ var B = (e) => {
514
+ let t = se(e), n = (e) => le(t, e);
382
515
  return Object.assign(n, t), n;
383
- }, P = ((e) => e ? N(e) : N), F = P((e) => ({
516
+ }, V = ((e) => e ? B(e) : B), H = V((e) => ({
384
517
  globalHotkeysEnabled: !0,
385
518
  setGlobalHotkeysEnabled: (t) => e({ globalHotkeysEnabled: t })
386
- })), I = 200, L = () => Math.random().toString(36).substring(7), R = P((e, t) => ({
387
- modals: [],
388
- closingIds: /* @__PURE__ */ new Set(),
389
- open: (n) => {
390
- let r = L(), i = t(), a = i.modals.length === 0;
391
- return e({ modals: [...i.modals, {
392
- ...n,
393
- id: r,
394
- type: "standard"
395
- }] }), a && F.getState().setGlobalHotkeysEnabled(!1), r;
396
- },
397
- openConfirm: (n) => {
398
- let r = L(), i = t(), a = i.modals.length === 0;
399
- return e({ modals: [...i.modals, {
400
- ...n,
401
- id: r,
402
- type: "confirm"
403
- }] }), a && F.getState().setGlobalHotkeysEnabled(!1), r;
404
- },
405
- close: (n) => {
406
- if (!t().modals.find((e) => e.id === n)) return;
407
- let r = t().modals.length === 1;
408
- e((e) => ({ closingIds: new Set(e.closingIds).add(n) })), setTimeout(() => {
409
- e((e) => {
410
- let t = new Set(e.closingIds);
411
- t.delete(n);
412
- let i = e.modals.filter((e) => e.id !== n);
413
- return r && i.length === 0 && F.getState().setGlobalHotkeysEnabled(!0), {
414
- modals: i,
415
- closingIds: t
416
- };
417
- });
418
- }, I);
419
- },
420
- closeAll: () => {
421
- let n = t().modals;
422
- n.length !== 0 && (e({ closingIds: new Set(n.map((e) => e.id)) }), setTimeout(() => {
423
- e({
424
- modals: [],
425
- closingIds: /* @__PURE__ */ new Set()
426
- }), F.getState().setGlobalHotkeysEnabled(!0);
427
- }, I));
428
- },
429
- isOpen: (e) => t().modals.some((t) => t.id === e)
430
- }));
519
+ })), U = 0;
520
+ function W() {
521
+ o(() => (U += 1, U === 1 && H.getState().setGlobalHotkeysEnabled(!1), () => {
522
+ --U, U === 0 && H.getState().setGlobalHotkeysEnabled(!0);
523
+ }), []);
524
+ }
431
525
  //#endregion
432
- //#region src/components/modal_provider/modal_provider.tsx
433
- function z() {
434
- let n = R((e) => e.modals), r = R((e) => e.closingIds), i = R((e) => e.isOpen), a = R((e) => e.close);
435
- return /* @__PURE__ */ t(e, { children: n.map((e) => {
436
- let n = i(e.id) && !r.has(e.id);
437
- return e.type === "confirm" ? /* @__PURE__ */ t(k, {
438
- isOpen: n,
439
- onClose: () => a(e.id),
440
- onConfirm: async () => {
441
- await e.onConfirm(), a(e.id);
526
+ //#region src/components/modal/confirm_modal.tsx
527
+ var ue = {
528
+ red: "danger",
529
+ blue: "primary",
530
+ green: "success"
531
+ }, de = {
532
+ red: "i-mdi-alert-circle",
533
+ blue: "i-mdi-help-circle",
534
+ green: "i-mdi-check-circle"
535
+ }, fe = {
536
+ red: "bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400",
537
+ blue: "bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400",
538
+ green: "bg-green-50 text-green-600 dark:bg-green-500/10 dark:text-green-400"
539
+ };
540
+ function pe({ title: e, color: r }) {
541
+ return /* @__PURE__ */ n("div", {
542
+ className: "flex items-center gap-3",
543
+ children: [/* @__PURE__ */ t("span", {
544
+ className: p("flex h-9 w-9 shrink-0 items-center justify-center rounded-full", fe[r]),
545
+ "aria-hidden": "true",
546
+ children: /* @__PURE__ */ t("span", { className: p(de[r], "h-5 w-5") })
547
+ }), e]
548
+ });
549
+ }
550
+ var G = L(({ call: r, title: i, children: a, confirmLabel: o, cancelLabel: s, confirmColor: c, radius: u, onConfirm: d }) => {
551
+ W();
552
+ let [f, p] = l(!1), m = () => r.end(!1), h = async () => {
553
+ if (!d) {
554
+ r.end(!0);
555
+ return;
556
+ }
557
+ p(!0);
558
+ try {
559
+ await d(), r.end(!0);
560
+ } finally {
561
+ p(!1);
562
+ }
563
+ }, g = f, _ = o ?? "Confirm", v = s ?? "Cancel", b = c ?? "blue";
564
+ return /* @__PURE__ */ t(R, {
565
+ isEnded: r.ended,
566
+ onDismiss: m,
567
+ title: /* @__PURE__ */ t(pe, {
568
+ title: i,
569
+ color: b
570
+ }),
571
+ size: "sm",
572
+ radius: u,
573
+ footer: /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(y, {
574
+ variant: "outline",
575
+ color: "neutral",
576
+ onClick: m,
577
+ disabled: g,
578
+ size: "sm",
579
+ children: v
580
+ }), /* @__PURE__ */ t(y, {
581
+ color: ue[b],
582
+ onClick: () => {
583
+ h();
442
584
  },
443
- title: e.title,
444
- confirmLabel: e.confirmLabel,
445
- cancelLabel: e.cancelLabel,
446
- confirmColor: e.confirmColor,
447
- children: e.children
448
- }, e.id) : /* @__PURE__ */ t(O, {
449
- isOpen: n,
450
- onClose: () => a(e.id),
451
- title: e.title,
452
- size: e.size,
453
- children: e.children
454
- }, e.id);
455
- }) });
585
+ loading: g,
586
+ disabled: g,
587
+ size: "sm",
588
+ children: _
589
+ })] }),
590
+ children: a
591
+ });
592
+ }, 200), K = L(({ call: e, title: n, children: r, footer: i, size: a, radius: o, className: s }) => (W(), /* @__PURE__ */ t(R, {
593
+ isEnded: e.ended,
594
+ onDismiss: () => e.end(),
595
+ title: n,
596
+ footer: i,
597
+ size: a,
598
+ radius: o,
599
+ className: s,
600
+ children: r
601
+ })), 200);
602
+ //#endregion
603
+ //#region src/components/modal_provider/modal_provider.tsx
604
+ function me() {
605
+ return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(K, {}), /* @__PURE__ */ t(G, {})] });
606
+ }
607
+ //#endregion
608
+ //#region src/components/radio_options/radio_options.tsx
609
+ function he({ options: e, orientation: r = "vertical", value: i, defaultValue: a, onChange: o, name: c, label: u, error: d, required: f, disabled: h, radius: g = "lg", unstyled: _ = !1, className: v, wrapperClassName: y, id: b = "radio", ...x }) {
610
+ let S = `${b}-${s()}`, w = c ?? S, [T, E] = l(a ?? ""), D = i !== void 0, O = D ? i : T, k = e.map((e) => typeof e == "string" ? {
611
+ value: e,
612
+ label: e
613
+ } : e), A = `${S}-error`, j = (e) => {
614
+ D || E(e), o?.(e);
615
+ };
616
+ return /* @__PURE__ */ n("fieldset", {
617
+ className: p("m-0 border-0 p-0", y),
618
+ disabled: h,
619
+ "aria-describedby": d ? A : void 0,
620
+ "aria-required": f,
621
+ ...x,
622
+ children: [
623
+ u && /* @__PURE__ */ n("legend", {
624
+ className: p("text-sm font-medium text-gray-700 dark:text-gray-300", "mb-2", v),
625
+ children: [u, f && /* @__PURE__ */ t("span", {
626
+ className: "text-red-500 dark:text-red-400 ml-1",
627
+ children: "*"
628
+ })]
629
+ }),
630
+ /* @__PURE__ */ t("div", {
631
+ className: p(r === "horizontal" ? "flex flex-row gap-2" : "flex flex-col gap-2"),
632
+ children: k.map((e, i) => {
633
+ let a = `${S}-${i}`, o = `${S}-${i}-desc`, s = O === e.value, c = h ?? e.disabled;
634
+ return /* @__PURE__ */ n("label", {
635
+ htmlFor: a,
636
+ className: p("flex cursor-pointer items-start gap-3 transition-colors duration-150", r === "horizontal" && "flex-1", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2", "focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900", d ? "focus-within:ring-red-500" : "focus-within:ring-blue-500", !_ && [
637
+ m[g],
638
+ "border px-3 py-2.5",
639
+ s ? d ? p("border-red-500 dark:border-red-400", "bg-red-50 dark:bg-red-950/20") : "border-blue-500 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/25" : d ? "border-red-300 bg-white dark:border-red-800/50 dark:bg-gray-800/50" : p("border-gray-200 dark:border-gray-700", "bg-gray-50 hover:border-gray-300 hover:bg-white dark:bg-gray-800/50 dark:hover:border-gray-600 dark:hover:bg-gray-800")
640
+ ], c && "cursor-not-allowed opacity-50"),
641
+ children: [
642
+ /* @__PURE__ */ t("input", {
643
+ type: "radio",
644
+ id: a,
645
+ name: w,
646
+ value: e.value,
647
+ checked: s,
648
+ onChange: () => j(e.value),
649
+ disabled: c,
650
+ required: f && i === 0,
651
+ "aria-invalid": d ? !0 : void 0,
652
+ "aria-describedby": e.description ? o : void 0,
653
+ className: "sr-only"
654
+ }),
655
+ /* @__PURE__ */ t("span", {
656
+ className: p("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-150", s ? d ? ee : "border-blue-600 dark:border-blue-500" : d ? "border-red-400 dark:border-red-600" : C),
657
+ "aria-hidden": !0,
658
+ children: s && /* @__PURE__ */ t("span", { className: p("h-2 w-2 rounded-full", d ? "bg-red-500 dark:bg-red-400" : "bg-blue-600 dark:bg-blue-500") })
659
+ }),
660
+ /* @__PURE__ */ n("span", {
661
+ className: "flex min-w-0 flex-col",
662
+ children: [/* @__PURE__ */ n("span", {
663
+ className: "flex items-center gap-1.5",
664
+ children: [e.icon && /* @__PURE__ */ t("span", {
665
+ className: p(e.icon, "h-4 w-4 shrink-0", s ? d ? "text-red-600 dark:text-red-400" : "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"),
666
+ "aria-hidden": !0
667
+ }), /* @__PURE__ */ t("span", {
668
+ className: p("select-none text-sm font-medium", s ? d ? "text-red-700 dark:text-red-300" : "text-blue-700 dark:text-blue-300" : "text-gray-700 dark:text-gray-300"),
669
+ children: e.label
670
+ })]
671
+ }), e.description && /* @__PURE__ */ t("span", {
672
+ id: o,
673
+ className: p("text-xs text-gray-500 dark:text-gray-400", "mt-0.5"),
674
+ children: e.description
675
+ })]
676
+ })
677
+ ]
678
+ }, e.value);
679
+ })
680
+ }),
681
+ d && /* @__PURE__ */ t("p", {
682
+ id: A,
683
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-2"),
684
+ role: "alert",
685
+ children: d
686
+ })
687
+ ]
688
+ });
456
689
  }
457
690
  //#endregion
458
691
  //#region src/components/select/select.tsx
459
- function B({ options: e, label: r, error: i, placeholder: a, className: o, wrapperClassName: s, value: l, defaultValue: u, onChange: d, id: f = "select", ...m }) {
460
- let h = `${f}-${c()}`;
692
+ function ge({ options: e, label: r, error: i, placeholder: a, radius: o = "md", unstyled: c = !1, className: l, wrapperClassName: u, value: d, defaultValue: f, onChange: h, id: g = "select", ..._ }) {
693
+ let v = `${g}-${s()}`;
461
694
  return /* @__PURE__ */ n("div", {
462
- className: p("w-full", s),
695
+ className: p("w-full", u),
463
696
  children: [
464
697
  typeof r == "string" ? /* @__PURE__ */ n("label", {
465
- className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
466
- htmlFor: h,
467
- children: [r, m.required && /* @__PURE__ */ t("span", {
698
+ className: p(O, "block mb-1"),
699
+ htmlFor: v,
700
+ children: [r, _.required && /* @__PURE__ */ t("span", {
468
701
  className: "text-red-500 dark:text-red-400 ml-1",
469
702
  children: "*"
470
703
  })]
471
704
  }) : r,
472
705
  /* @__PURE__ */ n("select", {
473
- id: h,
474
- className: p(E, "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat", "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]", i && "border-red-500 dark:border-red-400 focus:ring-red-500", o),
475
- value: l,
476
- defaultValue: u,
477
- onChange: d,
706
+ id: v,
707
+ className: p("w-full disabled:opacity-50 disabled:cursor-not-allowed", !c && [
708
+ P,
709
+ m[o],
710
+ "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat",
711
+ "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]"
712
+ ], !c && i && p("border-red-500 dark:border-red-400", "focus:ring-red-500"), l),
713
+ ...d === void 0 ? { defaultValue: f } : { value: d },
714
+ onChange: h,
478
715
  "aria-invalid": !!i,
479
- "aria-describedby": i ? `${h}-error` : void 0,
480
- ...m,
716
+ "aria-describedby": i ? `${v}-error` : void 0,
717
+ ..._,
481
718
  children: [a !== void 0 && /* @__PURE__ */ t("option", {
482
719
  value: "",
483
720
  children: a
@@ -487,8 +724,8 @@ function B({ options: e, label: r, error: i, placeholder: a, className: o, wrapp
487
724
  }, e.value))]
488
725
  }),
489
726
  i && /* @__PURE__ */ t("p", {
490
- id: `${h}-error`,
491
- className: "text-xs text-red-600 dark:text-red-400 mt-1",
727
+ id: `${v}-error`,
728
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-1"),
492
729
  role: "alert",
493
730
  children: i
494
731
  })
@@ -497,23 +734,22 @@ function B({ options: e, label: r, error: i, placeholder: a, className: o, wrapp
497
734
  }
498
735
  //#endregion
499
736
  //#region src/components/switch/switch.tsx
500
- function V({ label: r, description: i, error: a, className: o, wrapperClassName: s, checked: l, defaultChecked: d = !1, onChange: f, id: m = "switch", ...h }) {
501
- let g = `${m}-${c()}`, [_, v] = u(d), y = l !== void 0, b = y ? l : _, x = [i && `${g}-description`, a && `${g}-error`].filter(Boolean).join(" ") || void 0;
737
+ function _e({ label: r, description: i, error: a, className: o, wrapperClassName: c, checked: u, defaultChecked: d = !1, onChange: f, id: m = "switch", ...h }) {
738
+ let g = `${m}-${s()}`, [_, v] = l(d), y = u !== void 0, b = y ? u : _, x = [i && `${g}-description`, a && `${g}-error`].filter(Boolean).join(" ") || void 0;
502
739
  return /* @__PURE__ */ n("div", {
503
- className: p("w-full", s),
740
+ className: p("w-full", c),
504
741
  children: [
505
742
  /* @__PURE__ */ n("label", {
506
743
  htmlFor: g,
507
744
  className: p("flex items-center gap-3 cursor-pointer", h.disabled && "cursor-not-allowed opacity-50"),
508
745
  children: [/* @__PURE__ */ n("span", {
509
- className: p("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50", b ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", a && "ring-2 ring-red-500 dark:ring-red-400", o),
746
+ className: p("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50", b ? D : "bg-gray-200 dark:bg-gray-600", a && "ring-2 ring-red-500 dark:ring-red-400", o),
510
747
  children: [/* @__PURE__ */ t("input", {
511
748
  type: "checkbox",
512
749
  role: "switch",
513
750
  id: g,
514
751
  className: "sr-only",
515
- checked: l,
516
- defaultChecked: d,
752
+ checked: b,
517
753
  onChange: (e) => {
518
754
  y || v(e.target.checked), f?.(e);
519
755
  },
@@ -525,7 +761,7 @@ function V({ label: r, description: i, error: a, className: o, wrapperClassName:
525
761
  "aria-hidden": !0
526
762
  })]
527
763
  }), r && /* @__PURE__ */ t(e, { children: typeof r == "string" ? /* @__PURE__ */ n("span", {
528
- className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
764
+ className: p("text-sm font-medium text-gray-700 dark:text-gray-300", "select-none"),
529
765
  children: [r, h.required && /* @__PURE__ */ t("span", {
530
766
  className: "text-red-500 dark:text-red-400 ml-1",
531
767
  children: "*"
@@ -537,16 +773,16 @@ function V({ label: r, description: i, error: a, className: o, wrapperClassName:
537
773
  }),
538
774
  i && (typeof i == "string" ? /* @__PURE__ */ t("p", {
539
775
  id: `${g}-description`,
540
- className: "text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14",
776
+ className: p("text-xs text-gray-500 dark:text-gray-400", "mt-1 ml-14"),
541
777
  children: i
542
778
  }) : /* @__PURE__ */ t("span", {
543
779
  id: `${g}-description`,
544
- className: "block text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14",
780
+ className: p("text-xs text-gray-500 dark:text-gray-400", "block mt-1 ml-14"),
545
781
  children: i
546
782
  })),
547
783
  a && /* @__PURE__ */ t("p", {
548
784
  id: `${g}-error`,
549
- className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-14",
785
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-1 ml-14"),
550
786
  role: "alert",
551
787
  children: a
552
788
  })
@@ -555,132 +791,142 @@ function V({ label: r, description: i, error: a, className: o, wrapperClassName:
555
791
  }
556
792
  //#endregion
557
793
  //#region src/components/tabs/tabs.tsx
558
- function H({ items: e, defaultIndex: r = 0, className: i, tabListClassName: a, panelClassName: o, onChange: s }) {
559
- let [c, l] = u(r), d = (t) => {
560
- e[t]?.disabled || (l(t), s?.(t));
561
- }, f = e[c];
794
+ function ve({ items: e, defaultIndex: r = 0, radius: i = "md", className: a, tabListClassName: o, panelClassName: u, onChange: d }) {
795
+ let [f, h] = l(r), g = s(), _ = c([]), v = (t) => {
796
+ e[t]?.disabled || (h(t), d?.(t));
797
+ }, y = (e) => {
798
+ _.current[e]?.focus(), v(e);
799
+ }, b = (t) => {
800
+ let n = e.map((e, t) => t).filter((t) => !e[t]?.disabled);
801
+ if (n.length === 0) return;
802
+ let r = n.indexOf(f);
803
+ t.key === "ArrowRight" ? (t.preventDefault(), y(n[(r + 1) % n.length])) : t.key === "ArrowLeft" ? (t.preventDefault(), y(n[(r - 1 + n.length) % n.length])) : t.key === "Home" ? (t.preventDefault(), y(n[0])) : t.key === "End" && (t.preventDefault(), y(n[n.length - 1]));
804
+ }, x = e[f];
562
805
  return /* @__PURE__ */ n("div", {
563
- className: p("w-full", i),
806
+ className: p("w-full", a),
564
807
  children: [/* @__PURE__ */ t("div", {
565
808
  role: "tablist",
566
- className: p("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", a),
809
+ className: p("flex gap-1 p-1 bg-gray-100 dark:bg-gray-800/50 border", T, m[i], o),
567
810
  children: e.map((e, r) => /* @__PURE__ */ n("button", {
811
+ ref: (e) => {
812
+ _.current[r] = e;
813
+ },
814
+ id: `${g}-tab-${r}`,
568
815
  role: "tab",
569
816
  type: "button",
570
- "aria-selected": c === r,
817
+ "aria-selected": f === r,
571
818
  "aria-disabled": e.disabled,
819
+ "aria-controls": `${g}-panel-${r}`,
820
+ tabIndex: f === r ? 0 : -1,
572
821
  disabled: e.disabled,
573
- onClick: () => d(r),
574
- className: p("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", c === r ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : p("text-gray-600 dark:text-gray-400 border border-transparent", e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
575
- children: [e.icon && /* @__PURE__ */ t("span", { className: p("w-4 h-4 block shrink-0", e.icon, c === r ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), e.title]
822
+ onClick: () => v(r),
823
+ onKeyDown: b,
824
+ className: p("flex items-center gap-2 px-4 py-2.5 text-sm font-medium", m[i], f === r ? p("bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border", T) : p("text-gray-600 dark:text-gray-400 border border-transparent", e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
825
+ children: [e.icon && /* @__PURE__ */ t("span", { className: p("w-4 h-4 block shrink-0", e.icon, f === r ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), e.title]
576
826
  }, r))
577
827
  }), /* @__PURE__ */ t("div", {
578
828
  role: "tabpanel",
579
- className: p("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", o),
829
+ id: `${g}-panel-${f}`,
830
+ "aria-labelledby": `${g}-tab-${f}`,
831
+ tabIndex: 0,
832
+ className: p("mt-3 border bg-white dark:bg-gray-800/50 p-4 overflow-hidden focus:outline-none", T, m[i], u),
580
833
  children: /* @__PURE__ */ t("div", {
581
834
  className: "tabs-panel-inner",
582
- children: f?.content
583
- }, c)
835
+ children: x?.content
836
+ }, f)
584
837
  })]
585
838
  });
586
839
  }
587
840
  //#endregion
588
841
  //#region src/components/textarea/textarea.tsx
589
- function ae({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, className: s, wrapperClassName: l, value: d, defaultValue: f, onChange: m, id: h = "textarea", ...g }) {
590
- let _ = `${h}-${c()}`, [y, b] = u(typeof f == "string" ? f.length : 0), x = typeof d == "string" ? d.length : d === void 0 ? y : 0, S = i && (a !== void 0 || o !== void 0);
842
+ function ye({ label: e, error: r, showCharCount: i = !1, minLength: a, maxLength: o, radius: c = "md", unstyled: u = !1, className: d, wrapperClassName: f, value: h, defaultValue: g, onChange: _, id: v = "textarea", ...y }) {
843
+ let b = `${v}-${s()}`, [x, C] = l(typeof g == "string" ? g.length : 0), w = typeof h == "string" ? h.length : h === void 0 ? x : 0, T = i && (a !== void 0 || o !== void 0), E = (e) => {
844
+ h === void 0 && C(e.target.value.length), _?.(e);
845
+ };
591
846
  return /* @__PURE__ */ n("div", {
592
- className: p("w-full", l),
847
+ className: p("w-full", f),
593
848
  children: [
594
849
  typeof e == "string" ? /* @__PURE__ */ n("label", {
595
- className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
596
- htmlFor: _,
597
- children: [e, g.required && /* @__PURE__ */ t("span", {
850
+ className: p(O, "block mb-1"),
851
+ htmlFor: b,
852
+ children: [e, y.required && /* @__PURE__ */ t("span", {
598
853
  className: "text-red-500 dark:text-red-400 ml-1",
599
854
  children: "*"
600
855
  })]
601
856
  }) : e,
602
857
  /* @__PURE__ */ t("textarea", {
603
- id: _,
604
- className: p(E, "px-3 py-2 text-sm min-h-[80px] resize-y", r && "border-red-500 dark:border-red-400 focus:ring-red-500", s),
605
- value: d,
606
- defaultValue: f,
858
+ id: b,
859
+ className: p("w-full min-h-[80px] resize-y disabled:opacity-50 disabled:cursor-not-allowed", !u && [
860
+ P,
861
+ m[c],
862
+ "px-3 py-2 text-sm"
863
+ ], !u && r && p("border-red-500 dark:border-red-400", "focus:ring-red-500"), d),
864
+ ...h === void 0 ? { defaultValue: g } : { value: h },
607
865
  minLength: a,
608
866
  maxLength: o,
609
- onChange: (e) => {
610
- d === void 0 && b(e.target.value.length), m?.(e);
611
- },
612
- ...g
867
+ onChange: E,
868
+ "aria-invalid": !!r,
869
+ "aria-describedby": r ? `${b}-error` : void 0,
870
+ ...y
613
871
  }),
614
- S && /* @__PURE__ */ t(v, {
615
- current: x,
872
+ T && /* @__PURE__ */ t(S, {
873
+ current: w,
616
874
  min: a,
617
875
  max: o,
618
876
  showMin: a !== void 0,
619
877
  showMax: o !== void 0
620
878
  }),
621
879
  r && /* @__PURE__ */ t("p", {
622
- className: "text-xs text-red-600 dark:text-red-400 mt-1",
880
+ id: `${b}-error`,
881
+ className: p("text-xs text-red-600 dark:text-red-400", "mt-1"),
882
+ role: "alert",
623
883
  children: r
624
884
  })
625
885
  ]
626
886
  });
627
887
  }
628
888
  //#endregion
629
- //#region src/hooks/use_is_client/use_is_client.tsx
630
- var U = () => {
631
- let [e, t] = u(!1);
632
- return s(() => {
633
- requestAnimationFrame(() => {
634
- t(!0);
635
- });
636
- }, []), e;
637
- }, W = "theme", G = /* @__PURE__ */ new Set(), K = null;
638
- function q(e) {
889
+ //#region src/stores/theme_store/theme_store.ts
890
+ var q = "theme";
891
+ function J(e) {
639
892
  return e === "light" || e === "dark" || e === "system";
640
893
  }
641
- function J() {
894
+ function Y() {
642
895
  return globalThis.window !== void 0 && globalThis.document !== void 0;
643
896
  }
644
- function Y(e) {
645
- for (let t of G) t(e);
646
- }
647
- function oe() {
648
- if (!J() || K) return;
649
- let e = globalThis.matchMedia("(prefers-color-scheme: dark)"), t = (e) => {
650
- if (e.key !== W) return;
651
- let t = q(e.newValue) ? e.newValue : "system";
652
- X(t), Y(t);
653
- }, n = () => {
654
- Z() === "system" && (X("system"), Y("system"));
655
- }, r = typeof e.addEventListener == "function" && typeof e.removeEventListener == "function";
656
- globalThis.addEventListener("storage", t), r && e.addEventListener("change", n), K = () => {
657
- globalThis.removeEventListener("storage", t), r && e.removeEventListener("change", n), K = null;
658
- };
659
- }
660
- function se() {
661
- G.size === 0 && K && K();
662
- }
663
897
  function X(e) {
664
- let t = document.documentElement;
665
- e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? t.classList.add("dark") : t.classList.remove("dark") : e === "dark" ? t.classList.add("dark") : t.classList.remove("dark");
666
- }
667
- function Z() {
668
- if (!J()) return "system";
669
- let e = globalThis.localStorage.getItem(W);
670
- return q(e) ? e : "system";
671
- }
672
- function Q(e) {
673
- J() && (X(e), globalThis.localStorage.setItem(W, e), Y(e));
898
+ let t = window.matchMedia("(prefers-color-scheme: dark)").matches, n = e === "dark" || e === "system" && t;
899
+ document.documentElement.classList.toggle("dark", n);
674
900
  }
675
- function $(e) {
676
- return G.add(e), oe(), () => {
677
- G.delete(e), se();
678
- };
901
+ function be() {
902
+ if (!Y()) return "system";
903
+ let e = globalThis.localStorage.getItem(q);
904
+ return J(e) ? e : "system";
679
905
  }
906
+ var Z = V((e) => ({
907
+ theme: be(),
908
+ setTheme: (t) => {
909
+ X(t), Y() && globalThis.localStorage.setItem(q, t), e({ theme: t });
910
+ }
911
+ }));
912
+ Y() && (globalThis.addEventListener("storage", (e) => {
913
+ if (e.key !== q) return;
914
+ let t = J(e.newValue) ? e.newValue : "system";
915
+ X(t), Z.setState({ theme: t });
916
+ }), globalThis.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
917
+ Z.getState().theme === "system" && X("system");
918
+ }));
680
919
  //#endregion
681
- //#region src/lib/theme_transition.ts
682
- var ce = 750, le = "ease-in-out";
683
- async function ue({ theme: e, element: t, transitionDuration: n = ce, transitionEasing: r = le, applyThemeCallback: i }) {
920
+ //#region src/hooks/use_is_client/use_is_client.tsx
921
+ var Q = () => {
922
+ let [e, t] = l(!1);
923
+ return o(() => {
924
+ requestAnimationFrame(() => {
925
+ t(!0);
926
+ });
927
+ }, []), e;
928
+ }, xe = 750, Se = "ease-in-out";
929
+ async function Ce({ theme: e, element: t, transitionDuration: n = xe, transitionEasing: r = Se, applyThemeCallback: i }) {
684
930
  if (!document.startViewTransition || globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches) {
685
931
  i(e);
686
932
  return;
@@ -694,64 +940,55 @@ async function ue({ theme: e, element: t, transitionDuration: n = ce, transition
694
940
  pseudoElement: "::view-transition-new(root)"
695
941
  });
696
942
  }
697
- function de(e) {
943
+ function $(e) {
698
944
  return e === "light" ? "dark" : e === "dark" ? "system" : "light";
699
945
  }
700
946
  //#endregion
701
947
  //#region src/components/theme_toggle/theme_toggle.tsx
702
- function fe(e) {
703
- return /* @__PURE__ */ t("div", {
704
- className: p({
705
- light: "i-tabler-sun text-yellow-500",
706
- dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
707
- system: "i-tabler-device-desktop text-blue-500"
708
- }[e], "w-5 h-5"),
709
- style: {
710
- width: 20,
711
- height: 20
712
- }
713
- });
714
- }
715
- function pe({ isTransitionEnabled: e = !0, transitionDuration: n, transitionEasing: r }) {
716
- let [i, a] = u("system"), c = U(), d = l(null);
717
- s(() => {
718
- let e = Z();
719
- return requestAnimationFrame(() => {
720
- a(e), Q(e);
721
- }), $((e) => {
722
- a(e);
723
- });
724
- }, []);
725
- let f = o(async () => {
726
- let t = de(i), a = d.current;
727
- a && e ? await ue({
948
+ var we = {
949
+ light: "i-tabler-sun text-yellow-500",
950
+ dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
951
+ system: "i-tabler-device-desktop text-blue-500"
952
+ }, Te = "i-tabler-device-desktop text-gray-400";
953
+ function Ee({ isTransitionEnabled: e = !0, transitionDuration: n, transitionEasing: r, size: i = "md", radius: s }) {
954
+ let l = Z((e) => e.theme), u = Z((e) => e.setTheme), d = Q(), f = c(null);
955
+ o(() => {
956
+ u(Z.getState().theme);
957
+ }, [u]);
958
+ let p = a(async () => {
959
+ let t = $(l), i = f.current;
960
+ i && e ? await Ce({
728
961
  theme: t,
729
- element: a,
962
+ element: i,
730
963
  transitionDuration: n,
731
964
  transitionEasing: r,
732
- applyThemeCallback: Q
733
- }) : Q(t);
965
+ applyThemeCallback: u
966
+ }) : u(t);
734
967
  }, [
735
- i,
968
+ l,
736
969
  e,
737
970
  n,
738
- r
971
+ r,
972
+ u
739
973
  ]);
740
- return /* @__PURE__ */ t("button", {
741
- ref: d,
974
+ return /* @__PURE__ */ t(N, {
975
+ ref: f,
976
+ icon: d ? we[l] : Te,
977
+ "aria-label": `Thème actuel: ${l}`,
978
+ size: i,
979
+ radius: s,
742
980
  onClick: () => {
743
- f();
744
- },
745
- className: "p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer",
746
- "aria-label": `Thème actuel: ${i}`,
747
- children: c ? fe(i) : /* @__PURE__ */ t("div", {
748
- className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
749
- style: {
750
- width: "20px",
751
- height: "20px"
752
- }
753
- })
981
+ p();
982
+ }
754
983
  });
755
984
  }
756
985
  //#endregion
757
- export { E as BASE_INPUT_STYLES, g as Button, v as CharacterCount, y as Checkbox, S as ClientOnly, k as ConfirmModal, T as IconButton, te as Input, O as Modal, z as ModalProvider, B as Select, V as Switch, H as Tabs, ae as Textarea, pe as ThemeToggle, X as applyTheme, $ as followThemeState, Z as getCurrentTheme, Q as setCurrentTheme, b as useClientOnly, F as useGlobalHotkeysStore, U as useIsClient, R as useModalStore, D as useRunAfterAnimation, x as withClientOnly };
986
+ //#region src/hooks/use_run_after_animation/use_run_after_animation.ts
987
+ function De(e) {
988
+ return a((t) => {
989
+ let n = setTimeout(t, e);
990
+ return () => clearTimeout(n);
991
+ }, [e]);
992
+ }
993
+ //#endregion
994
+ export { P as BASE_INPUT_STYLES, y as Button, S as CharacterCount, k as Checkbox, te as ClientOnly, G as ConfirmModal, N as IconButton, re as Input, K as Modal, me as ModalProvider, he as RadioOptions, ge as Select, _e as Switch, ve as Tabs, ye as Textarea, Ee as ThemeToggle, A as useClientOnly, W as useDisableHotkeysWhileMounted, H as useGlobalHotkeysStore, Q as useIsClient, De as useRunAfterAnimation, Z as useThemeStore, j as withClientOnly };