@minimalstuff/ui 1.2.1 → 1.2.3

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 (4) hide show
  1. package/dist/index.d.ts +8 -12
  2. package/dist/minimalstuff-ui.css +1 -1
  3. package/dist/minimalstuff-ui.js +471 -433
  4. package/package.json +53 -74
package/dist/minimalstuff-ui.js CHANGED
@@ -1,113 +1,116 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import React, { Fragment as Fragment$1, createElement, useCallback, useEffect, useId, useRef, useState } from "react";
3
- import { createPortal } from "react-dom";
4
- function r(i) {
5
- var M, N, P = "";
6
- if (typeof i == "string" || typeof i == "number") P += i;
7
- else if (typeof i == "object") if (Array.isArray(i)) {
8
- var F = i.length;
9
- for (M = 0; M < F; M++) i[M] && (N = r(i[M])) && (P && (P += " "), P += N);
10
- } else for (N in i) i[N] && (P && (P += " "), P += N);
11
- return P;
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";
3
+ import { createPortal as d } from "react-dom";
4
+ //#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
5
+ function f(e) {
6
+ var t, n, r = "";
7
+ if (typeof e == "string" || typeof e == "number") r += e;
8
+ else if (typeof e == "object") if (Array.isArray(e)) {
9
+ var i = e.length;
10
+ for (t = 0; t < i; t++) e[t] && (n = f(e[t])) && (r && (r += " "), r += n);
11
+ } else for (n in e) e[n] && (r && (r += " "), r += n);
12
+ return r;
12
13
  }
13
- function clsx() {
14
- for (var i, M, N = 0, P = "", F = arguments.length; N < F; N++) (i = arguments[N]) && (M = r(i)) && (P && (P += " "), P += M);
15
- return P;
14
+ function p() {
15
+ for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = f(e)) && (r && (r += " "), r += t);
16
+ return r;
16
17
  }
17
- var clsx_default = clsx, VARIANT_CLASSES$1 = {
18
+ //#endregion
19
+ //#region src/components/button/button.tsx
20
+ var m = {
18
21
  primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 border-transparent",
19
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",
20
23
  ghost: "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700/50 border-transparent",
21
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",
22
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",
23
26
  danger: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 border-transparent"
24
- }, SIZE_CLASSES$2 = {
27
+ }, h = {
25
28
  xs: "px-2 py-1 text-xs",
26
29
  sm: "px-3 py-1.5 text-sm",
27
30
  md: "px-4 py-2 text-sm",
28
31
  lg: "px-4 py-3 text-base"
29
- };
30
- const Button = ({ variant: i = "primary", size: P = "md", children: F, className: I, fullWidth: L = !1, loading: R = !1, disabled: z, ...B }) => /* @__PURE__ */ jsxs("button", {
32
+ }, g = ({ variant: e = "primary", size: r = "md", children: i, className: a, fullWidth: o = !1, loading: s = !1, disabled: c, ...l }) => /* @__PURE__ */ n("button", {
31
33
  type: "button",
32
- className: clsx_default("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", VARIANT_CLASSES$1[i], SIZE_CLASSES$2[P], L && "w-full", I),
33
- disabled: z ?? R,
34
- ...B,
35
- children: [R && /* @__PURE__ */ jsx("span", {
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", {
36
38
  className: "i-svg-spinners-3-dots-fade w-4 h-4",
37
39
  "aria-hidden": "true"
38
- }), F]
39
- });
40
- var CHARACTER_COUNT_STYLES = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
41
- function CharacterCount({ current: i, min: M, max: P, showMin: F, showMax: I }) {
42
- let L = M !== void 0 && i <= M, R = P !== void 0 && i >= P, z = P !== void 0 && i > P;
43
- return /* @__PURE__ */ jsxs("div", {
44
- className: CHARACTER_COUNT_STYLES,
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;
44
+ return /* @__PURE__ */ n("div", {
45
+ className: _,
45
46
  children: [
46
- F && M !== void 0 && /* @__PURE__ */ jsxs("span", {
47
- className: L ? "text-amber-600 dark:text-amber-400" : "",
47
+ i && t !== void 0 && /* @__PURE__ */ n("span", {
48
+ className: o ? "text-amber-600 dark:text-amber-400" : "",
48
49
  children: [
49
- i,
50
+ e,
50
51
  "/",
51
- M,
52
+ t,
52
53
  " min"
53
54
  ]
54
55
  }),
55
- F && I && " · ",
56
- I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
57
- className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
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" : "",
58
59
  children: [
59
- i,
60
+ e,
60
61
  "/",
61
- P,
62
+ r,
62
63
  " max"
63
64
  ]
64
65
  }),
65
- !F && !I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
66
- className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
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" : "",
67
68
  children: [
68
- i,
69
+ e,
69
70
  "/",
70
- P
71
+ r
71
72
  ]
72
73
  }),
73
- !F && !I && M !== void 0 && P === void 0 && /* @__PURE__ */ jsxs("span", {
74
- className: L ? "text-amber-600 dark:text-amber-400" : "",
74
+ !i && !a && t !== void 0 && r === void 0 && /* @__PURE__ */ n("span", {
75
+ className: o ? "text-amber-600 dark:text-amber-400" : "",
75
76
  children: [
76
- i,
77
+ e,
77
78
  " (min ",
78
- M,
79
+ t,
79
80
  ")"
80
81
  ]
81
82
  })
82
83
  ]
83
84
  });
84
85
  }
85
- function Checkbox({ label: i, description: P, error: F, className: I, wrapperClassName: L, checked: R, defaultChecked: B = !1, onChange: H, id: U = "checkbox", ...W }) {
86
- let K = `${U}-${useId()}`, [q, J] = useState(B), Y = R !== void 0, X = Y ? R : q, Z = [P && `${K}-description`, F && `${K}-error`].filter(Boolean).join(" ") || void 0;
87
- return /* @__PURE__ */ jsxs("div", {
88
- className: clsx_default("w-full", L),
86
+ //#endregion
87
+ //#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;
90
+ return /* @__PURE__ */ n("div", {
91
+ className: p("w-full", o),
89
92
  children: [
90
- /* @__PURE__ */ jsxs("label", {
91
- htmlFor: K,
92
- className: clsx_default("flex items-start gap-3 cursor-pointer", W.disabled && "cursor-not-allowed opacity-50"),
93
- children: [/* @__PURE__ */ jsxs("span", {
94
- className: clsx_default("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", F ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
95
- children: [/* @__PURE__ */ jsx("input", {
93
+ /* @__PURE__ */ n("label", {
94
+ htmlFor: h,
95
+ className: p("flex items-start gap-3 cursor-pointer", m.disabled && "cursor-not-allowed opacity-50"),
96
+ children: [/* @__PURE__ */ n("span", {
97
+ 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
+ children: [/* @__PURE__ */ t("input", {
96
99
  type: "checkbox",
97
- id: K,
100
+ id: h,
98
101
  className: "sr-only",
99
- checked: R,
100
- defaultChecked: B,
101
- onChange: (i) => {
102
- Y || J(i.target.checked), H?.(i);
102
+ checked: s,
103
+ defaultChecked: l,
104
+ onChange: (e) => {
105
+ v || _(e.target.checked), d?.(e);
103
106
  },
104
- "aria-invalid": !!F,
105
- "aria-describedby": Z,
106
- ...W
107
- }), /* @__PURE__ */ jsx("span", {
108
- className: clsx_default("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200", X ? "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", F && "border-red-500 dark:border-red-400", I),
107
+ "aria-invalid": !!i,
108
+ "aria-describedby": b,
109
+ ...m
110
+ }), /* @__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),
109
112
  "aria-hidden": !0,
110
- children: X && /* @__PURE__ */ jsx("svg", {
113
+ children: y && /* @__PURE__ */ t("svg", {
111
114
  className: "h-3 w-3 text-white",
112
115
  viewBox: "0 0 12 12",
113
116
  fill: "none",
@@ -115,568 +118,602 @@ function Checkbox({ label: i, description: P, error: F, className: I, wrapperCla
115
118
  strokeWidth: "2.5",
116
119
  strokeLinecap: "round",
117
120
  strokeLinejoin: "round",
118
- children: /* @__PURE__ */ jsx("polyline", { points: "2 6 5 9 10 3" })
121
+ children: /* @__PURE__ */ t("polyline", { points: "2 6 5 9 10 3" })
119
122
  })
120
123
  })]
121
- }), typeof i == "string" ? /* @__PURE__ */ jsxs("span", {
124
+ }), typeof e == "string" ? /* @__PURE__ */ n("span", {
122
125
  className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
123
- children: [i, W.required && /* @__PURE__ */ jsx("span", {
126
+ children: [e, m.required && /* @__PURE__ */ t("span", {
124
127
  className: "text-red-500 dark:text-red-400 ml-1",
125
128
  children: "*"
126
129
  })]
127
- }) : i]
130
+ }) : e]
128
131
  }),
129
- P && (typeof P == "string" ? /* @__PURE__ */ jsx("p", {
130
- id: `${K}-description`,
132
+ r && (typeof r == "string" ? /* @__PURE__ */ t("p", {
133
+ id: `${h}-description`,
131
134
  className: "text-xs text-gray-500 dark:text-gray-400 mt-1 ml-8",
132
- children: P
133
- }) : /* @__PURE__ */ jsx("span", {
134
- id: `${K}-description`,
135
+ children: r
136
+ }) : /* @__PURE__ */ t("span", {
137
+ id: `${h}-description`,
135
138
  className: "block text-xs text-gray-500 dark:text-gray-400 mt-1 ml-8",
136
- children: P
139
+ children: r
137
140
  })),
138
- F && /* @__PURE__ */ jsx("p", {
139
- id: `${K}-error`,
141
+ i && /* @__PURE__ */ t("p", {
142
+ id: `${h}-error`,
140
143
  className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-8",
141
144
  role: "alert",
142
- children: F
145
+ children: i
143
146
  })
144
147
  ]
145
148
  });
146
149
  }
147
- const useClientOnly = () => {
148
- let [i, M] = useState(!1);
149
- return useEffect(() => {
150
+ //#endregion
151
+ //#region src/hooks/use_client_only/use_client_only.tsx
152
+ var b = () => {
153
+ let [e, t] = u(!1);
154
+ return s(() => {
150
155
  requestAnimationFrame(() => {
151
- M(!0);
156
+ t(!0);
152
157
  });
153
- }, []), i;
154
- }, withClientOnly = (i) => (N) => useClientOnly() ? /* @__PURE__ */ jsx(i, { ...N }) : null;
155
- function ClientOnly({ children: i, fallback: M }) {
156
- return useClientOnly() ? createElement(Fragment$1, { children: i }) : M ?? null;
158
+ }, []), e;
159
+ }, x = (e) => (n) => b() ? /* @__PURE__ */ t(e, { ...n }) : null;
160
+ //#endregion
161
+ //#region src/components/client_only/client_only.tsx
162
+ function S({ children: e, fallback: t }) {
163
+ return b() ? a(i, { children: e }) : t ?? null;
157
164
  }
158
- var VARIANT_CLASSES = {
165
+ //#endregion
166
+ //#region src/components/icon_button/icon_button.tsx
167
+ var C = {
159
168
  default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
160
169
  ghost: "text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50",
161
170
  danger: "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20",
162
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",
163
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"
164
- }, SIZE_CLASSES$1 = {
173
+ }, w = {
165
174
  sm: "p-1",
166
175
  md: "p-2",
167
176
  lg: "p-3"
168
- }, ICON_SIZE_CLASSES = {
177
+ }, T = {
169
178
  sm: "w-4 h-4",
170
179
  md: "w-5 h-5",
171
180
  lg: "w-6 h-6"
172
- };
173
- const IconButton = ({ icon: i, "aria-label": P, variant: F = "default", size: I = "md", className: L, children: R, ref: z, ...B }) => /* @__PURE__ */ jsxs("button", {
174
- ref: z,
181
+ }, E = ({ icon: e, "aria-label": r, variant: i = "default", size: a = "md", className: o, children: s, ref: c, ...l }) => /* @__PURE__ */ n("button", {
182
+ ref: c,
175
183
  type: "button",
176
- "aria-label": P,
177
- className: clsx_default("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", VARIANT_CLASSES[F], SIZE_CLASSES$1[I], L),
178
- ...B,
179
- children: [/* @__PURE__ */ jsx("div", { className: clsx_default(i, ICON_SIZE_CLASSES[I], R && "mr-1") }), R]
180
- }), BASE_INPUT_STYLES = "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";
181
- function Input({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: B, value: H, defaultValue: U, onChange: W, id: K = "input", ...q }) {
182
- let J = `${K}-${useId()}`, [Y, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? Y : 0, $ = F && (I !== void 0 || L !== void 0);
183
- return /* @__PURE__ */ jsxs("div", {
184
- className: clsx_default("w-full", B),
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], w[a], o),
186
+ ...l,
187
+ children: [/* @__PURE__ */ t("div", { className: p(e, T[a], s && "mr-1") }), s]
188
+ }), D = "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 O({ 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);
191
+ return /* @__PURE__ */ n("div", {
192
+ className: p("w-full", l),
185
193
  children: [
186
- typeof i == "string" ? /* @__PURE__ */ jsxs("label", {
194
+ typeof e == "string" ? /* @__PURE__ */ n("label", {
187
195
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
188
- htmlFor: J,
189
- children: [i, q.required && /* @__PURE__ */ jsx("span", {
196
+ htmlFor: _,
197
+ children: [e, g.required && /* @__PURE__ */ t("span", {
190
198
  className: "text-red-500 dark:text-red-400 ml-1",
191
199
  children: "*"
192
200
  })]
193
- }) : i,
194
- /* @__PURE__ */ jsx("input", {
195
- id: J,
196
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
197
- value: H,
198
- defaultValue: U,
199
- minLength: I,
200
- maxLength: L,
201
- onChange: (i) => {
202
- H === void 0 && Z(i.target.value.length), W?.(i);
201
+ }) : e,
202
+ /* @__PURE__ */ t("input", {
203
+ id: _,
204
+ className: p(D, "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,
207
+ minLength: a,
208
+ maxLength: o,
209
+ onChange: (e) => {
210
+ d === void 0 && b(e.target.value.length), m?.(e);
203
211
  },
204
- ...q
212
+ ...g
205
213
  }),
206
- $ && /* @__PURE__ */ jsx(CharacterCount, {
207
- current: Q,
208
- min: I,
209
- max: L,
210
- showMin: I !== void 0,
211
- showMax: L !== void 0
214
+ S && /* @__PURE__ */ t(v, {
215
+ current: x,
216
+ min: a,
217
+ max: o,
218
+ showMin: a !== void 0,
219
+ showMax: o !== void 0
212
220
  }),
213
- P && /* @__PURE__ */ jsx("p", {
221
+ r && /* @__PURE__ */ t("p", {
214
222
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
215
- children: P
223
+ children: r
216
224
  })
217
225
  ]
218
226
  });
219
227
  }
220
- function useRunAfterAnimation(i) {
221
- return useCallback((M) => {
222
- let N = setTimeout(M, i);
223
- return () => clearTimeout(N);
224
- }, [i]);
228
+ //#endregion
229
+ //#region src/hooks/use_run_after_animation/use_run_after_animation.ts
230
+ function k(e) {
231
+ return o((t) => {
232
+ let n = setTimeout(t, e);
233
+ return () => clearTimeout(n);
234
+ }, [e]);
225
235
  }
226
- var ANIMATION_DURATION_MS$1 = 200, SIZE_CLASSES = {
236
+ //#endregion
237
+ //#region src/components/modal/modal.tsx
238
+ var A = 200, j = {
227
239
  sm: "max-w-md",
228
240
  md: "max-w-lg",
229
241
  lg: "max-w-2xl",
230
242
  xl: "max-w-4xl"
231
243
  };
232
- function Modal({ isOpen: i = !1, onClose: P, title: F, children: I, footer: L, size: z = "md", className: B }) {
233
- let [U, W] = useState(!1), [K, q] = useState(!1), [J, Y] = useState(!1), X = useRunAfterAnimation(ANIMATION_DURATION_MS$1);
234
- useEffect(() => {
235
- if (i && !K) {
244
+ function M({ 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 = k(A);
246
+ s(() => {
247
+ if (e && !h) {
236
248
  document.body.style.overflow = "hidden";
237
- let i = setTimeout(() => {
238
- q(!0), W(!1), requestAnimationFrame(() => {
239
- requestAnimationFrame(() => Y(!0));
249
+ let e = setTimeout(() => {
250
+ g(!0), m(!1), requestAnimationFrame(() => {
251
+ requestAnimationFrame(() => v(!0));
240
252
  });
241
253
  }, 0);
242
- return () => clearTimeout(i);
254
+ return () => clearTimeout(e);
243
255
  }
244
- if (!i && K) {
245
- let i = setTimeout(() => {
246
- W(!0), Y(!1);
247
- }, 0), M = X(() => {
248
- q(!1), W(!1), document.body.style.overflow = "";
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 = "";
249
261
  });
250
262
  return () => {
251
- clearTimeout(i), M();
263
+ clearTimeout(e), t();
252
264
  };
253
265
  }
254
266
  }, [
255
- i,
256
- K,
257
- X
258
- ]), useEffect(() => {
259
- if (!i || U) return;
260
- let M = (i) => {
261
- i.key === "Escape" && P?.();
267
+ e,
268
+ h,
269
+ y
270
+ ]), s(() => {
271
+ if (!e || f) return;
272
+ let t = (e) => {
273
+ e.key === "Escape" && r?.();
262
274
  };
263
- return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
275
+ return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
264
276
  }, [
265
- i,
266
- U,
267
- P
277
+ e,
278
+ f,
279
+ r
268
280
  ]);
269
- let Z = () => {
270
- U || P?.();
281
+ let b = () => {
282
+ f || r?.();
271
283
  };
272
- if (!K) return null;
273
- let Q = J && !U;
274
- return createPortal(/* @__PURE__ */ jsxs("div", {
275
- className: clsx_default("fixed inset-0 z-50 flex items-start justify-center", "p-2 sm:py-[3rem] lg:py-[5rem]", "transition-all duration-200", Q ? "opacity-100" : "opacity-0"),
276
- onClick: Z,
277
- children: [/* @__PURE__ */ jsx("div", {
278
- className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", Q ? "opacity-100" : "opacity-0"),
284
+ if (!h) return null;
285
+ let x = _ && !f;
286
+ 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,
289
+ 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"),
279
291
  "aria-hidden": "true"
280
- }), /* @__PURE__ */ jsxs("div", {
281
- className: clsx_default("relative w-full", SIZE_CLASSES[z], "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", Q ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
282
- onClick: (i) => i.stopPropagation(),
292
+ }), /* @__PURE__ */ n("div", {
293
+ className: p("relative w-full", j[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"),
294
+ onClick: (e) => e.stopPropagation(),
283
295
  children: [
284
- F && /* @__PURE__ */ jsxs("div", {
296
+ i && /* @__PURE__ */ n("div", {
285
297
  className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0",
286
- children: [/* @__PURE__ */ jsx("h2", {
298
+ children: [/* @__PURE__ */ t("h2", {
287
299
  className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
288
- children: F
289
- }), /* @__PURE__ */ jsx(IconButton, {
300
+ children: i
301
+ }), /* @__PURE__ */ t(E, {
290
302
  icon: "i-mdi-close",
291
- onClick: P?.bind(null),
303
+ onClick: r?.bind(null),
292
304
  "aria-label": "Close",
293
305
  variant: "ghost",
294
306
  className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
295
307
  })]
296
308
  }),
297
- /* @__PURE__ */ jsx("div", {
298
- className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400 min-h-0", B),
299
- children: I
309
+ /* @__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),
311
+ children: a
300
312
  }),
301
- L && /* @__PURE__ */ jsx("div", {
313
+ o && /* @__PURE__ */ t("div", {
302
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",
303
- children: L
315
+ children: o
304
316
  })
305
317
  ]
306
318
  })]
307
319
  }), document.body);
308
320
  }
309
- function ConfirmModal({ isOpen: P, onClose: F, onConfirm: I, title: L, children: R, confirmLabel: z, cancelLabel: B, confirmColor: H, loading: U = !1 }) {
310
- let [W, G] = useState(!1), K = async () => {
311
- G(!0);
321
+ //#endregion
322
+ //#region src/components/modal/confirm_modal.tsx
323
+ function N({ 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);
312
326
  try {
313
- await I();
327
+ await a();
314
328
  } finally {
315
- G(!1);
329
+ m(!1);
316
330
  }
317
- }, q = U || W;
318
- return /* @__PURE__ */ jsx(Modal, {
319
- isOpen: P,
320
- onClose: F,
321
- title: L,
331
+ }, _ = f || p;
332
+ return /* @__PURE__ */ t(M, {
333
+ isOpen: r,
334
+ onClose: i,
335
+ title: o,
322
336
  size: "sm",
323
- footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
337
+ footer: /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(g, {
324
338
  variant: "secondary",
325
- onClick: F,
326
- disabled: q,
339
+ onClick: i,
340
+ disabled: _,
327
341
  size: "sm",
328
- children: B ?? "Cancel"
329
- }), /* @__PURE__ */ jsx(Button, {
330
- variant: (H ?? "blue") === "red" ? "danger" : "primary",
331
- onClick: K,
332
- loading: q,
333
- disabled: q,
342
+ children: l ?? "Cancel"
343
+ }), /* @__PURE__ */ t(g, {
344
+ variant: (d ?? "blue") === "red" ? "danger" : "primary",
345
+ onClick: () => {
346
+ h();
347
+ },
348
+ loading: _,
349
+ disabled: _,
334
350
  size: "sm",
335
- children: z ?? "Confirm"
351
+ children: c ?? "Confirm"
336
352
  })] }),
337
- children: R && /* @__PURE__ */ jsx("div", {
353
+ children: s && /* @__PURE__ */ t("div", {
338
354
  className: "text-sm text-gray-600 dark:text-gray-300",
339
- children: R
355
+ children: s
340
356
  })
341
357
  });
342
358
  }
343
- var createStoreImpl = (i) => {
344
- let M, N = /* @__PURE__ */ new Set(), P = (i, P) => {
345
- let F = typeof i == "function" ? i(M) : i;
346
- if (!Object.is(F, M)) {
347
- let i = M;
348
- M = P ?? (typeof F != "object" || !F) ? F : Object.assign({}, M, F), N.forEach((N) => N(M, i));
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 P = (e) => {
362
+ let t, n = /* @__PURE__ */ new Set(), r = (e, r) => {
363
+ let i = typeof e == "function" ? e(t) : e;
364
+ if (!Object.is(i, t)) {
365
+ let e = t;
366
+ t = r ?? (typeof i != "object" || !i) ? i : Object.assign({}, t, i), n.forEach((n) => n(t, e));
349
367
  }
350
- }, F = () => M, I = {
351
- setState: P,
352
- getState: F,
353
- getInitialState: () => L,
354
- subscribe: (i) => (N.add(i), () => N.delete(i))
355
- }, L = M = i(P, F, I);
356
- return I;
357
- }, createStore = ((i) => i ? createStoreImpl(i) : createStoreImpl), identity = (i) => i;
358
- function useStore(i, M = identity) {
359
- let N = React.useSyncExternalStore(i.subscribe, React.useCallback(() => M(i.getState()), [i, M]), React.useCallback(() => M(i.getInitialState()), [i, M]));
360
- return React.useDebugValue(N), N;
368
+ }, i = () => t, a = {
369
+ setState: r,
370
+ getState: i,
371
+ getInitialState: () => o,
372
+ subscribe: (e) => (n.add(e), () => n.delete(e))
373
+ }, o = t = e(r, i, a);
374
+ return a;
375
+ }, F = ((e) => e ? P(e) : P), I = (e) => e;
376
+ function L(e, t = I) {
377
+ let n = r.useSyncExternalStore(e.subscribe, r.useCallback(() => t(e.getState()), [e, t]), r.useCallback(() => t(e.getInitialState()), [e, t]));
378
+ return r.useDebugValue(n), n;
361
379
  }
362
- var createImpl = (i) => {
363
- let M = createStore(i), N = (i) => useStore(M, i);
364
- return Object.assign(N, M), N;
365
- }, create = ((i) => i ? createImpl(i) : createImpl);
366
- const useGlobalHotkeysStore = create((i) => ({
380
+ var R = (e) => {
381
+ let t = F(e), n = (e) => L(t, e);
382
+ return Object.assign(n, t), n;
383
+ }, z = ((e) => e ? R(e) : R), B = z((e) => ({
367
384
  globalHotkeysEnabled: !0,
368
- setGlobalHotkeysEnabled: (M) => i({ globalHotkeysEnabled: M })
369
- }));
370
- var ANIMATION_DURATION_MS = 200, generateId = () => Math.random().toString(36).substring(7);
371
- const useModalStore = create((i, M) => ({
385
+ setGlobalHotkeysEnabled: (t) => e({ globalHotkeysEnabled: t })
386
+ })), V = 200, H = () => Math.random().toString(36).substring(7), U = z((e, t) => ({
372
387
  modals: [],
373
388
  closingIds: /* @__PURE__ */ new Set(),
374
- open: (N) => {
375
- let P = generateId(), F = M(), I = F.modals.length === 0;
376
- return i({ modals: [...F.modals, {
377
- ...N,
378
- id: P,
389
+ open: (n) => {
390
+ let r = H(), i = t(), a = i.modals.length === 0;
391
+ return e({ modals: [...i.modals, {
392
+ ...n,
393
+ id: r,
379
394
  type: "standard"
380
- }] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
395
+ }] }), a && B.getState().setGlobalHotkeysEnabled(!1), r;
381
396
  },
382
- openConfirm: (N) => {
383
- let P = generateId(), F = M(), I = F.modals.length === 0;
384
- return i({ modals: [...F.modals, {
385
- ...N,
386
- id: P,
397
+ openConfirm: (n) => {
398
+ let r = H(), i = t(), a = i.modals.length === 0;
399
+ return e({ modals: [...i.modals, {
400
+ ...n,
401
+ id: r,
387
402
  type: "confirm"
388
- }] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
403
+ }] }), a && B.getState().setGlobalHotkeysEnabled(!1), r;
389
404
  },
390
- close: (N) => {
391
- if (!M().modals.find((i) => i.id === N)) return;
392
- let P = M().modals.length === 1;
393
- i((i) => ({ closingIds: new Set(i.closingIds).add(N) })), setTimeout(() => {
394
- i((i) => {
395
- let M = new Set(i.closingIds);
396
- M.delete(N);
397
- let F = i.modals.filter((i) => i.id !== N);
398
- return P && F.length === 0 && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0), {
399
- modals: F,
400
- closingIds: M
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 && B.getState().setGlobalHotkeysEnabled(!0), {
414
+ modals: i,
415
+ closingIds: t
401
416
  };
402
417
  });
403
- }, ANIMATION_DURATION_MS);
418
+ }, V);
404
419
  },
405
420
  closeAll: () => {
406
- let N = M().modals;
407
- N.length !== 0 && (i({ closingIds: new Set(N.map((i) => i.id)) }), setTimeout(() => {
408
- i({
421
+ let n = t().modals;
422
+ n.length !== 0 && (e({ closingIds: new Set(n.map((e) => e.id)) }), setTimeout(() => {
423
+ e({
409
424
  modals: [],
410
425
  closingIds: /* @__PURE__ */ new Set()
411
- }), useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0);
412
- }, ANIMATION_DURATION_MS));
426
+ }), B.getState().setGlobalHotkeysEnabled(!0);
427
+ }, V));
413
428
  },
414
- isOpen: (i) => M().modals.some((M) => M.id === i)
429
+ isOpen: (e) => t().modals.some((t) => t.id === e)
415
430
  }));
416
- function ModalProvider() {
417
- let N = useModalStore((i) => i.modals), P = useModalStore((i) => i.closingIds), F = useModalStore((i) => i.isOpen), I = useModalStore((i) => i.close);
418
- return /* @__PURE__ */ jsx(Fragment, { children: N.map((i) => {
419
- let N = F(i.id) && !P.has(i.id);
420
- return i.type === "confirm" ? /* @__PURE__ */ jsx(ConfirmModal, {
421
- isOpen: N,
422
- onClose: () => I(i.id),
431
+ //#endregion
432
+ //#region src/components/modal_provider/modal_provider.tsx
433
+ function W() {
434
+ let n = U((e) => e.modals), r = U((e) => e.closingIds), i = U((e) => e.isOpen), a = U((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(N, {
438
+ isOpen: n,
439
+ onClose: () => a(e.id),
423
440
  onConfirm: async () => {
424
- await i.onConfirm(), I(i.id);
441
+ await e.onConfirm(), a(e.id);
425
442
  },
426
- title: i.title,
427
- confirmLabel: i.confirmLabel,
428
- cancelLabel: i.cancelLabel,
429
- confirmColor: i.confirmColor,
430
- children: i.children
431
- }, i.id) : /* @__PURE__ */ jsx(Modal, {
432
- isOpen: N,
433
- onClose: () => I(i.id),
434
- title: i.title,
435
- size: i.size,
436
- children: i.children
437
- }, i.id);
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(M, {
449
+ isOpen: n,
450
+ onClose: () => a(e.id),
451
+ title: e.title,
452
+ size: e.size,
453
+ children: e.children
454
+ }, e.id);
438
455
  }) });
439
456
  }
440
- function Select({ options: i, label: P, error: F, placeholder: I, className: L, wrapperClassName: R, value: B, defaultValue: V, onChange: H, id: U = "select", ...W }) {
441
- let K = `${U}-${useId()}`;
442
- return /* @__PURE__ */ jsxs("div", {
443
- className: clsx_default("w-full", R),
457
+ //#endregion
458
+ //#region src/components/select/select.tsx
459
+ function G({ 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()}`;
461
+ return /* @__PURE__ */ n("div", {
462
+ className: p("w-full", s),
444
463
  children: [
445
- typeof P == "string" ? /* @__PURE__ */ jsxs("label", {
464
+ typeof r == "string" ? /* @__PURE__ */ n("label", {
446
465
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
447
- htmlFor: K,
448
- children: [P, W.required && /* @__PURE__ */ jsx("span", {
466
+ htmlFor: h,
467
+ children: [r, m.required && /* @__PURE__ */ t("span", {
449
468
  className: "text-red-500 dark:text-red-400 ml-1",
450
469
  children: "*"
451
470
  })]
452
- }) : P,
453
- /* @__PURE__ */ jsxs("select", {
454
- id: K,
455
- className: clsx_default(BASE_INPUT_STYLES, "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\")]", F && "border-red-500 dark:border-red-400 focus:ring-red-500", L),
456
- value: B,
457
- defaultValue: V,
458
- onChange: H,
459
- "aria-invalid": !!F,
460
- "aria-describedby": F ? `${K}-error` : void 0,
461
- ...W,
462
- children: [I !== void 0 && /* @__PURE__ */ jsx("option", {
471
+ }) : r,
472
+ /* @__PURE__ */ n("select", {
473
+ id: h,
474
+ className: p(D, "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,
478
+ "aria-invalid": !!i,
479
+ "aria-describedby": i ? `${h}-error` : void 0,
480
+ ...m,
481
+ children: [a !== void 0 && /* @__PURE__ */ t("option", {
463
482
  value: "",
464
- children: I
465
- }), i.map((i) => /* @__PURE__ */ jsx("option", {
466
- value: i.value,
467
- children: i.label
468
- }, i.value))]
483
+ children: a
484
+ }), e.map((e) => /* @__PURE__ */ t("option", {
485
+ value: e.value,
486
+ children: e.label
487
+ }, e.value))]
469
488
  }),
470
- F && /* @__PURE__ */ jsx("p", {
471
- id: `${K}-error`,
489
+ i && /* @__PURE__ */ t("p", {
490
+ id: `${h}-error`,
472
491
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
473
492
  role: "alert",
474
- children: F
493
+ children: i
475
494
  })
476
495
  ]
477
496
  });
478
497
  }
479
- function Switch({ label: P, description: F, error: I, className: L, wrapperClassName: R, checked: B, defaultChecked: H = !1, onChange: U, id: W = "switch", ...K }) {
480
- let q = `${W}-${useId()}`, [J, Y] = useState(H), X = B !== void 0, Z = X ? B : J, Q = [F && `${q}-description`, I && `${q}-error`].filter(Boolean).join(" ") || void 0;
481
- return /* @__PURE__ */ jsxs("div", {
482
- className: clsx_default("w-full", R),
498
+ //#endregion
499
+ //#region src/components/switch/switch.tsx
500
+ function K({ 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;
502
+ return /* @__PURE__ */ n("div", {
503
+ className: p("w-full", s),
483
504
  children: [
484
- /* @__PURE__ */ jsxs("label", {
485
- htmlFor: q,
486
- className: clsx_default("flex items-center gap-3 cursor-pointer", K.disabled && "cursor-not-allowed opacity-50"),
487
- children: [/* @__PURE__ */ jsxs("span", {
488
- className: clsx_default("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", Z ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", I && "ring-2 ring-red-500 dark:ring-red-400", L),
489
- children: [/* @__PURE__ */ jsx("input", {
505
+ /* @__PURE__ */ n("label", {
506
+ htmlFor: g,
507
+ className: p("flex items-center gap-3 cursor-pointer", h.disabled && "cursor-not-allowed opacity-50"),
508
+ 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),
510
+ children: [/* @__PURE__ */ t("input", {
490
511
  type: "checkbox",
491
512
  role: "switch",
492
- id: q,
513
+ id: g,
493
514
  className: "sr-only",
494
- checked: B,
495
- defaultChecked: H,
496
- onChange: (i) => {
497
- X || Y(i.target.checked), U?.(i);
515
+ checked: l,
516
+ defaultChecked: d,
517
+ onChange: (e) => {
518
+ y || v(e.target.checked), f?.(e);
498
519
  },
499
- "aria-invalid": !!I,
500
- "aria-describedby": Q,
501
- ...K
502
- }), /* @__PURE__ */ jsx("span", {
503
- className: clsx_default("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out", Z ? "translate-x-5.25" : "translate-x-0"),
520
+ "aria-invalid": !!a,
521
+ "aria-describedby": x,
522
+ ...h
523
+ }), /* @__PURE__ */ t("span", {
524
+ className: p("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out", b ? "translate-x-5.25" : "translate-x-0"),
504
525
  "aria-hidden": !0
505
526
  })]
506
- }), P && /* @__PURE__ */ jsx(Fragment, { children: typeof P == "string" ? /* @__PURE__ */ jsxs("span", {
527
+ }), r && /* @__PURE__ */ t(e, { children: typeof r == "string" ? /* @__PURE__ */ n("span", {
507
528
  className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
508
- children: [P, K.required && /* @__PURE__ */ jsx("span", {
529
+ children: [r, h.required && /* @__PURE__ */ t("span", {
509
530
  className: "text-red-500 dark:text-red-400 ml-1",
510
531
  children: "*"
511
532
  })]
512
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [P, K.required && /* @__PURE__ */ jsx("span", {
533
+ }) : /* @__PURE__ */ n(e, { children: [r, h.required && /* @__PURE__ */ t("span", {
513
534
  className: "text-red-500 dark:text-red-400 ml-1",
514
535
  children: "*"
515
536
  })] }) })]
516
537
  }),
517
- F && (typeof F == "string" ? /* @__PURE__ */ jsx("p", {
518
- id: `${q}-description`,
538
+ i && (typeof i == "string" ? /* @__PURE__ */ t("p", {
539
+ id: `${g}-description`,
519
540
  className: "text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14",
520
- children: F
521
- }) : /* @__PURE__ */ jsx("span", {
522
- id: `${q}-description`,
541
+ children: i
542
+ }) : /* @__PURE__ */ t("span", {
543
+ id: `${g}-description`,
523
544
  className: "block text-xs text-gray-500 dark:text-gray-400 mt-1 ml-14",
524
- children: F
545
+ children: i
525
546
  })),
526
- I && /* @__PURE__ */ jsx("p", {
527
- id: `${q}-error`,
547
+ a && /* @__PURE__ */ t("p", {
548
+ id: `${g}-error`,
528
549
  className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-14",
529
550
  role: "alert",
530
- children: I
551
+ children: a
531
552
  })
532
553
  ]
533
554
  });
534
555
  }
535
- function Tabs({ items: i, defaultIndex: P = 0, className: F, tabListClassName: I, panelClassName: L, onChange: R }) {
536
- let [z, B] = useState(P), H = (M) => {
537
- i[M]?.disabled || (B(M), R?.(M));
538
- }, U = i[z];
539
- return /* @__PURE__ */ jsxs("div", {
540
- className: clsx_default("w-full", F),
541
- children: [/* @__PURE__ */ jsx("div", {
556
+ //#endregion
557
+ //#region src/components/tabs/tabs.tsx
558
+ function q({ 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];
562
+ return /* @__PURE__ */ n("div", {
563
+ className: p("w-full", i),
564
+ children: [/* @__PURE__ */ t("div", {
542
565
  role: "tablist",
543
- className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", I),
544
- children: i.map((i, P) => /* @__PURE__ */ jsxs("button", {
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),
567
+ children: e.map((e, r) => /* @__PURE__ */ n("button", {
545
568
  role: "tab",
546
569
  type: "button",
547
- "aria-selected": z === P,
548
- "aria-disabled": i.disabled,
549
- disabled: i.disabled,
550
- onClick: () => H(P),
551
- className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", z === P ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : clsx_default("text-gray-600 dark:text-gray-400 border border-transparent", i.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")),
552
- children: [i.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", i.icon, z === P ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), i.title]
553
- }, P))
554
- }), /* @__PURE__ */ jsx("div", {
570
+ "aria-selected": c === r,
571
+ "aria-disabled": e.disabled,
572
+ 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]
576
+ }, r))
577
+ }), /* @__PURE__ */ t("div", {
555
578
  role: "tabpanel",
556
- className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", L),
557
- children: /* @__PURE__ */ jsx("div", {
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),
580
+ children: /* @__PURE__ */ t("div", {
558
581
  className: "tabs-panel-inner",
559
- children: U?.content
560
- }, z)
582
+ children: f?.content
583
+ }, c)
561
584
  })]
562
585
  });
563
586
  }
564
- function Textarea({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: B, value: H, defaultValue: U, onChange: W, id: K = "textarea", ...q }) {
565
- let J = `${K}-${useId()}`, [Y, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? Y : 0, $ = F && (I !== void 0 || L !== void 0);
566
- return /* @__PURE__ */ jsxs("div", {
567
- className: clsx_default("w-full", B),
587
+ //#endregion
588
+ //#region src/components/textarea/textarea.tsx
589
+ function J({ 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);
591
+ return /* @__PURE__ */ n("div", {
592
+ className: p("w-full", l),
568
593
  children: [
569
- typeof i == "string" ? /* @__PURE__ */ jsxs("label", {
594
+ typeof e == "string" ? /* @__PURE__ */ n("label", {
570
595
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
571
- htmlFor: J,
572
- children: [i, q.required && /* @__PURE__ */ jsx("span", {
596
+ htmlFor: _,
597
+ children: [e, g.required && /* @__PURE__ */ t("span", {
573
598
  className: "text-red-500 dark:text-red-400 ml-1",
574
599
  children: "*"
575
600
  })]
576
- }) : i,
577
- /* @__PURE__ */ jsx("textarea", {
578
- id: J,
579
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
580
- value: H,
581
- defaultValue: U,
582
- minLength: I,
583
- maxLength: L,
584
- onChange: (i) => {
585
- H === void 0 && Z(i.target.value.length), W?.(i);
601
+ }) : e,
602
+ /* @__PURE__ */ t("textarea", {
603
+ id: _,
604
+ className: p(D, "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,
607
+ minLength: a,
608
+ maxLength: o,
609
+ onChange: (e) => {
610
+ d === void 0 && b(e.target.value.length), m?.(e);
586
611
  },
587
- ...q
612
+ ...g
588
613
  }),
589
- $ && /* @__PURE__ */ jsx(CharacterCount, {
590
- current: Q,
591
- min: I,
592
- max: L,
593
- showMin: I !== void 0,
594
- showMax: L !== void 0
614
+ S && /* @__PURE__ */ t(v, {
615
+ current: x,
616
+ min: a,
617
+ max: o,
618
+ showMin: a !== void 0,
619
+ showMax: o !== void 0
595
620
  }),
596
- P && /* @__PURE__ */ jsx("p", {
621
+ r && /* @__PURE__ */ t("p", {
597
622
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
598
- children: P
623
+ children: r
599
624
  })
600
625
  ]
601
626
  });
602
627
  }
603
- const useIsClient = () => {
604
- let [i, M] = useState(!1);
605
- return useEffect(() => {
628
+ //#endregion
629
+ //#region src/hooks/use_is_client/use_is_client.tsx
630
+ var Y = () => {
631
+ let [e, t] = u(!1);
632
+ return s(() => {
606
633
  requestAnimationFrame(() => {
607
- M(!0);
634
+ t(!0);
608
635
  });
609
- }, []), i;
636
+ }, []), e;
610
637
  };
611
- function applyTheme(i) {
612
- let M = document.documentElement;
613
- i === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? M.classList.add("dark") : M.classList.remove("dark") : i === "dark" ? M.classList.add("dark") : M.classList.remove("dark");
638
+ //#endregion
639
+ //#region src/utils/theme.ts
640
+ function X(e) {
641
+ let t = document.documentElement;
642
+ 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");
614
643
  }
615
- var DEFAULT_TRANSITION_DURATION = 750, DEFAULT_TRANSITION_EASING = "ease-in-out";
616
- async function switchTheme({ theme: i, element: M, transitionDuration: N = DEFAULT_TRANSITION_DURATION, transitionEasing: P = DEFAULT_TRANSITION_EASING, applyThemeCallback: F }) {
644
+ //#endregion
645
+ //#region src/lib/theme_transition.ts
646
+ var Z = 750, Q = "ease-in-out";
647
+ async function $({ theme: e, element: t, transitionDuration: n = Z, transitionEasing: r = Q, applyThemeCallback: i }) {
617
648
  if (!document.startViewTransition || globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches) {
618
- F(i);
649
+ i(e);
619
650
  return;
620
651
  }
621
- let { top: I, left: L, width: R, height: z } = M.getBoundingClientRect(), B = L + R / 2, V = I + z / 2, H = globalThis.innerWidth - B, U = globalThis.innerHeight - V, W = Math.hypot(Math.max(B, H), Math.max(V, U));
652
+ let { top: a, left: o, width: s, height: c } = t.getBoundingClientRect(), l = o + s / 2, u = a + c / 2, d = globalThis.innerWidth - l, f = globalThis.innerHeight - u, p = Math.hypot(Math.max(l, d), Math.max(u, f));
622
653
  await document.startViewTransition(() => {
623
- F(i);
624
- }).ready, document.documentElement.animate({ clipPath: [`circle(0px at ${B}px ${V}px)`, `circle(${W}px at ${B}px ${V}px)`] }, {
625
- duration: N,
626
- easing: P,
654
+ i(e);
655
+ }).ready, document.documentElement.animate({ clipPath: [`circle(0px at ${l}px ${u}px)`, `circle(${p}px at ${l}px ${u}px)`] }, {
656
+ duration: n,
657
+ easing: r,
627
658
  pseudoElement: "::view-transition-new(root)"
628
659
  });
629
660
  }
630
- function getNextTheme(i) {
631
- return i === "light" ? "dark" : i === "dark" ? "system" : "light";
661
+ function ee(e) {
662
+ return e === "light" ? "dark" : e === "dark" ? "system" : "light";
632
663
  }
633
- function getIcon(i) {
634
- return /* @__PURE__ */ jsx("div", {
635
- className: clsx_default({
664
+ //#endregion
665
+ //#region src/components/theme_toggle/theme_toggle.tsx
666
+ function te(e) {
667
+ return /* @__PURE__ */ t("div", {
668
+ className: p({
636
669
  light: "i-tabler-sun text-yellow-500",
637
670
  dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
638
671
  system: "i-tabler-device-desktop text-blue-500"
639
- }[i], "w-5 h-5"),
672
+ }[e], "w-5 h-5"),
640
673
  style: {
641
674
  width: 20,
642
675
  height: 20
643
676
  }
644
677
  });
645
678
  }
646
- function ThemeToggle({ isTransitionEnabled: i = !0, transitionDuration: N, transitionEasing: P }) {
647
- let [F, I] = useState("system"), z = useIsClient(), H = useRef(null);
648
- return useEffect(() => {
649
- let i = localStorage.getItem("theme");
679
+ function ne({ isTransitionEnabled: e = !0, transitionDuration: n, transitionEasing: r }) {
680
+ let [i, a] = u("system"), c = Y(), d = l(null);
681
+ s(() => {
682
+ let e = localStorage.getItem("theme");
650
683
  requestAnimationFrame(() => {
651
- i ? (I(i), applyTheme(i)) : (I("system"), applyTheme("system"));
684
+ e ? (a(e), X(e)) : (a("system"), X("system"));
652
685
  });
653
- }, []), useEffect(() => {
654
- let i = globalThis.matchMedia("(prefers-color-scheme: dark)"), M = () => {
655
- F === "system" && applyTheme("system");
686
+ }, []), s(() => {
687
+ let e = globalThis.matchMedia("(prefers-color-scheme: dark)"), t = () => {
688
+ i === "system" && X("system");
656
689
  };
657
- return i.addEventListener("change", M), () => {
658
- i.removeEventListener("change", M);
690
+ return e.addEventListener("change", t), () => {
691
+ e.removeEventListener("change", t);
659
692
  };
660
- }, [F]), /* @__PURE__ */ jsx("button", {
661
- ref: H,
662
- onClick: useCallback(async () => {
663
- let M = getNextTheme(F), L = H.current;
664
- L && i ? await switchTheme({
665
- theme: M,
666
- element: L,
667
- transitionDuration: N,
668
- transitionEasing: P,
669
- applyThemeCallback: applyTheme
670
- }) : applyTheme(M), I(M), localStorage.setItem("theme", M);
671
- }, [
672
- F,
673
- i,
674
- N,
675
- P
676
- ]),
693
+ }, [i]);
694
+ let f = o(async () => {
695
+ let t = ee(i), o = d.current;
696
+ o && e ? await $({
697
+ theme: t,
698
+ element: o,
699
+ transitionDuration: n,
700
+ transitionEasing: r,
701
+ applyThemeCallback: X
702
+ }) : X(t), a(t), localStorage.setItem("theme", t);
703
+ }, [
704
+ i,
705
+ e,
706
+ n,
707
+ r
708
+ ]);
709
+ return /* @__PURE__ */ t("button", {
710
+ ref: d,
711
+ onClick: () => {
712
+ f();
713
+ },
677
714
  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",
678
- "aria-label": `Thème actuel: ${F}`,
679
- children: z ? getIcon(F) : /* @__PURE__ */ jsx("div", {
715
+ "aria-label": `Thème actuel: ${i}`,
716
+ children: c ? te(i) : /* @__PURE__ */ t("div", {
680
717
  className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
681
718
  style: {
682
719
  width: "20px",
@@ -685,4 +722,5 @@ function ThemeToggle({ isTransitionEnabled: i = !0, transitionDuration: N, trans
685
722
  })
686
723
  });
687
724
  }
688
- export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, ConfirmModal, IconButton, Input, Modal, ModalProvider, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useGlobalHotkeysStore, useIsClient, useModalStore, useRunAfterAnimation, withClientOnly };
725
+ //#endregion
726
+ export { D as BASE_INPUT_STYLES, g as Button, v as CharacterCount, y as Checkbox, S as ClientOnly, N as ConfirmModal, E as IconButton, O as Input, M as Modal, W as ModalProvider, G as Select, K as Switch, q as Tabs, J as Textarea, ne as ThemeToggle, X as applyTheme, b as useClientOnly, B as useGlobalHotkeysStore, Y as useIsClient, U as useModalStore, k as useRunAfterAnimation, x as withClientOnly };