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