@agroshine/ags-web-ui-kit 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/dist/atoms/index.cjs +134 -0
- package/dist/atoms/index.cjs.map +1 -0
- package/dist/atoms/index.d.cts +583 -0
- package/dist/atoms/index.d.ts +583 -0
- package/dist/atoms/index.js +9 -0
- package/dist/atoms/index.js.map +1 -0
- package/dist/chunk-2KRMLIJQ.cjs +52 -0
- package/dist/chunk-2KRMLIJQ.cjs.map +1 -0
- package/dist/chunk-2TBYPKQ3.cjs +79 -0
- package/dist/chunk-2TBYPKQ3.cjs.map +1 -0
- package/dist/chunk-5FWELSEZ.js +1296 -0
- package/dist/chunk-5FWELSEZ.js.map +1 -0
- package/dist/chunk-5PEOJVY7.cjs +1502 -0
- package/dist/chunk-5PEOJVY7.cjs.map +1 -0
- package/dist/chunk-6LUGTNMH.js +259 -0
- package/dist/chunk-6LUGTNMH.js.map +1 -0
- package/dist/chunk-6O2IDBTX.js +112 -0
- package/dist/chunk-6O2IDBTX.js.map +1 -0
- package/dist/chunk-6YUNWKT3.js +26 -0
- package/dist/chunk-6YUNWKT3.js.map +1 -0
- package/dist/chunk-7R6OXNES.cjs +321 -0
- package/dist/chunk-7R6OXNES.cjs.map +1 -0
- package/dist/chunk-A3A7PJWG.cjs +13 -0
- package/dist/chunk-A3A7PJWG.cjs.map +1 -0
- package/dist/chunk-A7TDGQAB.js +557 -0
- package/dist/chunk-A7TDGQAB.js.map +1 -0
- package/dist/chunk-C4LX3XTN.cjs +1187 -0
- package/dist/chunk-C4LX3XTN.cjs.map +1 -0
- package/dist/chunk-DZW4GS2T.cjs +1340 -0
- package/dist/chunk-DZW4GS2T.cjs.map +1 -0
- package/dist/chunk-E3BTK736.cjs +174 -0
- package/dist/chunk-E3BTK736.cjs.map +1 -0
- package/dist/chunk-ERGKCXM2.cjs +267 -0
- package/dist/chunk-ERGKCXM2.cjs.map +1 -0
- package/dist/chunk-FOA46NSG.cjs +574 -0
- package/dist/chunk-FOA46NSG.cjs.map +1 -0
- package/dist/chunk-JTFCE6RA.js +1156 -0
- package/dist/chunk-JTFCE6RA.js.map +1 -0
- package/dist/chunk-KINOE57L.js +225 -0
- package/dist/chunk-KINOE57L.js.map +1 -0
- package/dist/chunk-MOED3QPY.js +11 -0
- package/dist/chunk-MOED3QPY.js.map +1 -0
- package/dist/chunk-NVR34DY2.cjs +4 -0
- package/dist/chunk-NVR34DY2.cjs.map +1 -0
- package/dist/chunk-PI3IJWBG.js +79 -0
- package/dist/chunk-PI3IJWBG.js.map +1 -0
- package/dist/chunk-PXAMTGYY.js +3 -0
- package/dist/chunk-PXAMTGYY.js.map +1 -0
- package/dist/chunk-QAZMI5VH.js +151 -0
- package/dist/chunk-QAZMI5VH.js.map +1 -0
- package/dist/chunk-QEG27NX6.js +30 -0
- package/dist/chunk-QEG27NX6.js.map +1 -0
- package/dist/chunk-THTOUSMG.cjs +52 -0
- package/dist/chunk-THTOUSMG.cjs.map +1 -0
- package/dist/chunk-UAXKB6IH.cjs +32 -0
- package/dist/chunk-UAXKB6IH.cjs.map +1 -0
- package/dist/chunk-W5IHWAMM.js +48 -0
- package/dist/chunk-W5IHWAMM.js.map +1 -0
- package/dist/chunk-X2UJQVZJ.cjs +139 -0
- package/dist/chunk-X2UJQVZJ.cjs.map +1 -0
- package/dist/chunk-X43C5OJD.js +1460 -0
- package/dist/chunk-X43C5OJD.js.map +1 -0
- package/dist/chunk-XCYSBWV4.js +56 -0
- package/dist/chunk-XCYSBWV4.js.map +1 -0
- package/dist/chunk-XX4CBCEB.cjs +102 -0
- package/dist/chunk-XX4CBCEB.cjs.map +1 -0
- package/dist/hooks/index.cjs +33 -0
- package/dist/hooks/index.cjs.map +1 -0
- package/dist/hooks/index.d.cts +59 -0
- package/dist/hooks/index.d.ts +59 -0
- package/dist/hooks/index.js +4 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.cjs +366 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +17 -0
- package/dist/index.js.map +1 -0
- package/dist/interface-DnK5S6ww.d.cts +51 -0
- package/dist/interface-DnK5S6ww.d.ts +51 -0
- package/dist/lib/index.cjs +13 -0
- package/dist/lib/index.cjs.map +1 -0
- package/dist/lib/index.d.cts +5 -0
- package/dist/lib/index.d.ts +5 -0
- package/dist/lib/index.js +4 -0
- package/dist/lib/index.js.map +1 -0
- package/dist/molecules/index.cjs +123 -0
- package/dist/molecules/index.cjs.map +1 -0
- package/dist/molecules/index.d.cts +449 -0
- package/dist/molecules/index.d.ts +449 -0
- package/dist/molecules/index.js +10 -0
- package/dist/molecules/index.js.map +1 -0
- package/dist/organisms/index.cjs +102 -0
- package/dist/organisms/index.cjs.map +1 -0
- package/dist/organisms/index.d.cts +396 -0
- package/dist/organisms/index.d.ts +396 -0
- package/dist/organisms/index.js +9 -0
- package/dist/organisms/index.js.map +1 -0
- package/dist/tooltip-Bl2ZTtfg.d.cts +16 -0
- package/dist/tooltip-Bl2ZTtfg.d.ts +16 -0
- package/dist/ui/index.cjs +955 -0
- package/dist/ui/index.cjs.map +1 -0
- package/dist/ui/index.d.cts +252 -0
- package/dist/ui/index.d.ts +252 -0
- package/dist/ui/index.js +642 -0
- package/dist/ui/index.js.map +1 -0
- package/package.json +200 -0
- package/tailwind.preset.cjs +134 -0
|
@@ -0,0 +1,1460 @@
|
|
|
1
|
+
import { FormItem } from './chunk-QEG27NX6.js';
|
|
2
|
+
import { Avatar, AvatarImage, AvatarFallback, Input, RadioGroup, RadioGroupItem, Separator, Skeleton, Textarea, toggleVariants, ToggleGroupItem, ToggleGroup, Checkbox, Badge } from './chunk-KINOE57L.js';
|
|
3
|
+
import { cn } from './chunk-MOED3QPY.js';
|
|
4
|
+
import * as React5 from 'react';
|
|
5
|
+
import { forwardRef, Fragment, useState, useRef, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
|
|
6
|
+
import { cva } from 'class-variance-authority';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { X, EyeOff, Eye, Plus, Minus, StarHalf, Star, ChevronDown, Inbox, Check } from 'lucide-react';
|
|
9
|
+
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
10
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
11
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
12
|
+
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
13
|
+
|
|
14
|
+
var avatarVariants = cva(
|
|
15
|
+
"relative flex shrink-0 overflow-hidden bg-default-200 text-default-700",
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
size: {
|
|
19
|
+
sm: "h-8 w-8 text-xs",
|
|
20
|
+
md: "h-10 w-10 text-sm",
|
|
21
|
+
lg: "h-12 w-12 text-base",
|
|
22
|
+
xl: "h-16 w-16 text-lg"
|
|
23
|
+
},
|
|
24
|
+
shape: {
|
|
25
|
+
circle: "rounded-full",
|
|
26
|
+
square: "rounded-md"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: { size: "md", shape: "circle" }
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
var Avatar2 = React5.forwardRef(
|
|
33
|
+
({ src, alt, fallback, size = "md", shape = "circle", className }, ref) => /* @__PURE__ */ jsxs(Avatar, { ref, className: cn(avatarVariants({ size, shape }), className), children: [
|
|
34
|
+
src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt }) : null,
|
|
35
|
+
/* @__PURE__ */ jsx(
|
|
36
|
+
AvatarFallback,
|
|
37
|
+
{
|
|
38
|
+
className: cn(
|
|
39
|
+
"flex h-full w-full items-center justify-center bg-default-200 text-default-700 font-medium",
|
|
40
|
+
shape === "circle" ? "rounded-full" : "rounded-md"
|
|
41
|
+
),
|
|
42
|
+
children: fallback
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
] })
|
|
46
|
+
);
|
|
47
|
+
Avatar2.displayName = "Avatar";
|
|
48
|
+
var Checkbox2 = ({
|
|
49
|
+
isSelected,
|
|
50
|
+
defaultSelected,
|
|
51
|
+
isDisabled,
|
|
52
|
+
isIndeterminate,
|
|
53
|
+
onValueChange,
|
|
54
|
+
children,
|
|
55
|
+
className,
|
|
56
|
+
classNames,
|
|
57
|
+
name,
|
|
58
|
+
value,
|
|
59
|
+
id
|
|
60
|
+
}) => {
|
|
61
|
+
const checkedProp = isIndeterminate === true ? "indeterminate" : isSelected !== void 0 ? isSelected : void 0;
|
|
62
|
+
return /* @__PURE__ */ jsxs(
|
|
63
|
+
"label",
|
|
64
|
+
{
|
|
65
|
+
className: cn(
|
|
66
|
+
"inline-flex items-center gap-2 cursor-pointer select-none",
|
|
67
|
+
isDisabled && "cursor-not-allowed opacity-60",
|
|
68
|
+
classNames?.base,
|
|
69
|
+
className
|
|
70
|
+
),
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsx(
|
|
73
|
+
Checkbox,
|
|
74
|
+
{
|
|
75
|
+
id,
|
|
76
|
+
name,
|
|
77
|
+
value,
|
|
78
|
+
disabled: isDisabled,
|
|
79
|
+
defaultChecked: defaultSelected,
|
|
80
|
+
checked: checkedProp,
|
|
81
|
+
onCheckedChange: (c) => onValueChange?.(Boolean(c)),
|
|
82
|
+
className: classNames?.wrapper
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
children && /* @__PURE__ */ jsx("span", { className: cn("text-sm", classNames?.label), children })
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
var ROW_PADDING = {
|
|
91
|
+
small: "py-1.5",
|
|
92
|
+
default: "py-2.5",
|
|
93
|
+
// canon (10px)
|
|
94
|
+
middle: "py-2.5",
|
|
95
|
+
// alias compat
|
|
96
|
+
large: "py-3.5"
|
|
97
|
+
};
|
|
98
|
+
var LABEL_TEXT = {
|
|
99
|
+
small: "text-[12px]",
|
|
100
|
+
default: "text-[13px]",
|
|
101
|
+
// canon
|
|
102
|
+
middle: "text-[13px]",
|
|
103
|
+
large: "text-sm"
|
|
104
|
+
};
|
|
105
|
+
var VALUE_TEXT = {
|
|
106
|
+
small: "text-[13px]",
|
|
107
|
+
default: "text-sm",
|
|
108
|
+
// canon (14px)
|
|
109
|
+
middle: "text-sm",
|
|
110
|
+
large: "text-base"
|
|
111
|
+
};
|
|
112
|
+
function DescRow({ label, value, size, layout, bordered, isLast }) {
|
|
113
|
+
const rowBorder = bordered ? "border-b border-border last:border-b-0" : cn("border-b border-border", isLast && "border-b-0");
|
|
114
|
+
if (layout === "vertical") {
|
|
115
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(ROW_PADDING[size], rowBorder, bordered && "px-3"), children: [
|
|
116
|
+
/* @__PURE__ */ jsx("div", { className: cn("mb-1 font-normal text-muted-foreground", LABEL_TEXT[size]), children: label }),
|
|
117
|
+
/* @__PURE__ */ jsx("div", { className: cn("font-medium text-foreground", VALUE_TEXT[size]), children: value })
|
|
118
|
+
] });
|
|
119
|
+
}
|
|
120
|
+
return /* @__PURE__ */ jsxs(
|
|
121
|
+
"div",
|
|
122
|
+
{
|
|
123
|
+
className: cn(
|
|
124
|
+
"grid grid-cols-[140px_1fr] items-baseline gap-3",
|
|
125
|
+
ROW_PADDING[size],
|
|
126
|
+
rowBorder
|
|
127
|
+
),
|
|
128
|
+
children: [
|
|
129
|
+
/* @__PURE__ */ jsx(
|
|
130
|
+
"span",
|
|
131
|
+
{
|
|
132
|
+
className: cn(
|
|
133
|
+
"font-normal text-muted-foreground",
|
|
134
|
+
LABEL_TEXT[size],
|
|
135
|
+
bordered && "-my-2.5 bg-muted/40 px-3 py-2.5"
|
|
136
|
+
),
|
|
137
|
+
children: label
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ jsx("span", { className: cn("font-medium text-foreground", VALUE_TEXT[size], bordered && "pr-3"), children: value })
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
var Descriptions = forwardRef(function Descriptions2({
|
|
146
|
+
title,
|
|
147
|
+
column = 1,
|
|
148
|
+
layout = "horizontal",
|
|
149
|
+
size = "default",
|
|
150
|
+
bordered = false,
|
|
151
|
+
items,
|
|
152
|
+
className
|
|
153
|
+
}, ref) {
|
|
154
|
+
return /* @__PURE__ */ jsxs(
|
|
155
|
+
"div",
|
|
156
|
+
{
|
|
157
|
+
ref,
|
|
158
|
+
className: cn(
|
|
159
|
+
"w-full",
|
|
160
|
+
bordered && "overflow-hidden rounded-md border border-border",
|
|
161
|
+
className
|
|
162
|
+
),
|
|
163
|
+
children: [
|
|
164
|
+
title && /* @__PURE__ */ jsx(
|
|
165
|
+
"div",
|
|
166
|
+
{
|
|
167
|
+
className: cn(
|
|
168
|
+
"mb-3 text-base font-semibold text-foreground",
|
|
169
|
+
bordered && "mb-0 border-b border-border bg-muted/40 px-3 py-2.5"
|
|
170
|
+
),
|
|
171
|
+
children: title
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
/* @__PURE__ */ jsx(
|
|
175
|
+
"div",
|
|
176
|
+
{
|
|
177
|
+
className: cn(column === 1 ? "flex flex-col" : "grid"),
|
|
178
|
+
style: column > 1 ? { gridTemplateColumns: `repeat(${column}, minmax(0, 1fr))`, columnGap: "24px" } : void 0,
|
|
179
|
+
children: items.map((item, idx) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
|
180
|
+
DescRow,
|
|
181
|
+
{
|
|
182
|
+
label: item.label,
|
|
183
|
+
value: item.children,
|
|
184
|
+
size,
|
|
185
|
+
layout,
|
|
186
|
+
bordered,
|
|
187
|
+
isLast: idx === items.length - 1
|
|
188
|
+
}
|
|
189
|
+
) }, idx))
|
|
190
|
+
}
|
|
191
|
+
)
|
|
192
|
+
]
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
});
|
|
196
|
+
Descriptions.displayName = "Descriptions";
|
|
197
|
+
var sizeClasses = {
|
|
198
|
+
small: "h-7 text-[13px] px-2.5",
|
|
199
|
+
default: "h-9 text-sm px-3",
|
|
200
|
+
large: "h-10 text-[15px] px-4"
|
|
201
|
+
};
|
|
202
|
+
var statusBorderClasses = {
|
|
203
|
+
error: "border-destructive focus-visible:ring-destructive",
|
|
204
|
+
success: "border-success-500 focus-visible:ring-success-500",
|
|
205
|
+
warning: "border-warning-500 focus-visible:ring-warning-500",
|
|
206
|
+
default: ""
|
|
207
|
+
};
|
|
208
|
+
var Input2 = forwardRef(function Input3({
|
|
209
|
+
variant = "default",
|
|
210
|
+
prefix,
|
|
211
|
+
suffix,
|
|
212
|
+
allowClear = false,
|
|
213
|
+
status = "default",
|
|
214
|
+
showPasswordToggle = false,
|
|
215
|
+
type = "text",
|
|
216
|
+
disabled,
|
|
217
|
+
className,
|
|
218
|
+
name,
|
|
219
|
+
touched,
|
|
220
|
+
error,
|
|
221
|
+
externalLabel,
|
|
222
|
+
help,
|
|
223
|
+
errorMessage,
|
|
224
|
+
onChange,
|
|
225
|
+
value,
|
|
226
|
+
defaultValue,
|
|
227
|
+
...rest
|
|
228
|
+
}, ref) {
|
|
229
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? "");
|
|
230
|
+
const isControlled = value !== void 0;
|
|
231
|
+
const currentValue = isControlled ? value : internalValue;
|
|
232
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
233
|
+
const isPasswordType = type === "password";
|
|
234
|
+
const inputType = isPasswordType && showPasswordToggle ? showPassword ? "text" : "password" : type;
|
|
235
|
+
const showClearButton = allowClear && !disabled && Boolean(currentValue);
|
|
236
|
+
const showPasswordButton = isPasswordType && showPasswordToggle && !disabled;
|
|
237
|
+
const hasRightAffix = Boolean(suffix) || showClearButton || showPasswordButton;
|
|
238
|
+
const hasLeftAffix = Boolean(prefix);
|
|
239
|
+
const messageColor2 = status === "error" ? "text-destructive" : status === "warning" ? "text-warning-700" : "";
|
|
240
|
+
const handleChange = (e) => {
|
|
241
|
+
if (!isControlled) setInternalValue(e.target.value);
|
|
242
|
+
onChange?.(e);
|
|
243
|
+
};
|
|
244
|
+
const handleClear = () => {
|
|
245
|
+
if (!isControlled) setInternalValue("");
|
|
246
|
+
onChange?.({ target: { value: "" } });
|
|
247
|
+
};
|
|
248
|
+
return /* @__PURE__ */ jsxs(
|
|
249
|
+
FormItem,
|
|
250
|
+
{
|
|
251
|
+
help: touched || error ? help : "",
|
|
252
|
+
validateStatus: touched && error ? "error" : "default",
|
|
253
|
+
label: externalLabel,
|
|
254
|
+
children: [
|
|
255
|
+
/* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
|
|
256
|
+
hasLeftAffix && /* @__PURE__ */ jsx(
|
|
257
|
+
"span",
|
|
258
|
+
{
|
|
259
|
+
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-muted-foreground",
|
|
260
|
+
"aria-hidden": "true",
|
|
261
|
+
children: prefix
|
|
262
|
+
}
|
|
263
|
+
),
|
|
264
|
+
/* @__PURE__ */ jsx(
|
|
265
|
+
Input,
|
|
266
|
+
{
|
|
267
|
+
ref,
|
|
268
|
+
name,
|
|
269
|
+
type: inputType,
|
|
270
|
+
disabled,
|
|
271
|
+
value: currentValue,
|
|
272
|
+
onChange: handleChange,
|
|
273
|
+
"aria-invalid": status === "error" || touched && Boolean(error) || void 0,
|
|
274
|
+
className: cn(
|
|
275
|
+
sizeClasses[variant],
|
|
276
|
+
statusBorderClasses[status],
|
|
277
|
+
hasLeftAffix && "pl-9",
|
|
278
|
+
hasRightAffix && "pr-9"
|
|
279
|
+
),
|
|
280
|
+
...rest
|
|
281
|
+
}
|
|
282
|
+
),
|
|
283
|
+
hasRightAffix && /* @__PURE__ */ jsxs("span", { className: "absolute inset-y-0 right-0 flex items-center gap-1 px-2.5 text-muted-foreground", children: [
|
|
284
|
+
showClearButton && /* @__PURE__ */ jsx(
|
|
285
|
+
"button",
|
|
286
|
+
{
|
|
287
|
+
type: "button",
|
|
288
|
+
onClick: handleClear,
|
|
289
|
+
"aria-label": "Limpiar",
|
|
290
|
+
className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
|
|
291
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
|
|
292
|
+
}
|
|
293
|
+
),
|
|
294
|
+
showPasswordButton && /* @__PURE__ */ jsx(
|
|
295
|
+
"button",
|
|
296
|
+
{
|
|
297
|
+
type: "button",
|
|
298
|
+
onClick: () => setShowPassword((v) => !v),
|
|
299
|
+
"aria-label": showPassword ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
|
|
300
|
+
"aria-pressed": showPassword,
|
|
301
|
+
className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
|
|
302
|
+
children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
|
|
303
|
+
}
|
|
304
|
+
),
|
|
305
|
+
suffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none flex items-center text-muted-foreground", children: suffix })
|
|
306
|
+
] })
|
|
307
|
+
] }),
|
|
308
|
+
errorMessage && /* @__PURE__ */ jsx(
|
|
309
|
+
"p",
|
|
310
|
+
{
|
|
311
|
+
className: cn("mt-1 text-xs", messageColor2),
|
|
312
|
+
role: status === "error" ? "alert" : void 0,
|
|
313
|
+
children: errorMessage
|
|
314
|
+
}
|
|
315
|
+
)
|
|
316
|
+
]
|
|
317
|
+
}
|
|
318
|
+
);
|
|
319
|
+
});
|
|
320
|
+
var inputNumberRootVariants = cva(
|
|
321
|
+
"inline-flex items-center w-full rounded border bg-background text-default-900 transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
|
|
322
|
+
{
|
|
323
|
+
variants: {
|
|
324
|
+
size: {
|
|
325
|
+
sm: "text-xs h-8",
|
|
326
|
+
md: "text-sm h-10",
|
|
327
|
+
lg: "text-base h-12"
|
|
328
|
+
},
|
|
329
|
+
disabled: {
|
|
330
|
+
true: "opacity-60 cursor-not-allowed bg-default-100",
|
|
331
|
+
false: ""
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
defaultVariants: { size: "md", disabled: false }
|
|
335
|
+
}
|
|
336
|
+
);
|
|
337
|
+
var inputNumberButtonVariants = cva(
|
|
338
|
+
"flex items-center justify-center text-default-700 hover:bg-default-100 disabled:opacity-40 disabled:cursor-not-allowed border-default-200",
|
|
339
|
+
{
|
|
340
|
+
variants: {
|
|
341
|
+
size: {
|
|
342
|
+
sm: "w-7 h-full",
|
|
343
|
+
md: "w-8 h-full",
|
|
344
|
+
lg: "w-10 h-full"
|
|
345
|
+
}
|
|
346
|
+
},
|
|
347
|
+
defaultVariants: { size: "md" }
|
|
348
|
+
}
|
|
349
|
+
);
|
|
350
|
+
function clamp(v, min, max) {
|
|
351
|
+
return Math.min(max, Math.max(min, v));
|
|
352
|
+
}
|
|
353
|
+
function format(v, precision) {
|
|
354
|
+
if (precision === void 0) return String(v);
|
|
355
|
+
return v.toFixed(precision);
|
|
356
|
+
}
|
|
357
|
+
var InputNumber = React5.forwardRef(
|
|
358
|
+
({
|
|
359
|
+
value,
|
|
360
|
+
defaultValue,
|
|
361
|
+
onChange,
|
|
362
|
+
min = Number.NEGATIVE_INFINITY,
|
|
363
|
+
max = Number.POSITIVE_INFINITY,
|
|
364
|
+
step = 1,
|
|
365
|
+
size = "md",
|
|
366
|
+
disabled,
|
|
367
|
+
precision,
|
|
368
|
+
placeholder,
|
|
369
|
+
name,
|
|
370
|
+
id,
|
|
371
|
+
className
|
|
372
|
+
}, ref) => {
|
|
373
|
+
const [internal, setInternal] = React5.useState(defaultValue);
|
|
374
|
+
const current = value ?? internal;
|
|
375
|
+
const update = (next) => {
|
|
376
|
+
const c = clamp(next, min, max);
|
|
377
|
+
if (value === void 0) setInternal(c);
|
|
378
|
+
onChange?.(c);
|
|
379
|
+
};
|
|
380
|
+
const increment = () => update((current ?? 0) + step);
|
|
381
|
+
const decrement = () => update((current ?? 0) - step);
|
|
382
|
+
const handleInput = (e) => {
|
|
383
|
+
const raw = e.target.value;
|
|
384
|
+
if (raw === "") {
|
|
385
|
+
if (value === void 0) setInternal(void 0);
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
const num = Number(raw);
|
|
389
|
+
if (Number.isNaN(num)) return;
|
|
390
|
+
update(num);
|
|
391
|
+
};
|
|
392
|
+
const display = current === void 0 ? "" : format(current, precision);
|
|
393
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(inputNumberRootVariants({ size, disabled: !!disabled }), className), children: [
|
|
394
|
+
/* @__PURE__ */ jsx(
|
|
395
|
+
"input",
|
|
396
|
+
{
|
|
397
|
+
ref,
|
|
398
|
+
id,
|
|
399
|
+
name,
|
|
400
|
+
type: "number",
|
|
401
|
+
value: display,
|
|
402
|
+
onChange: handleInput,
|
|
403
|
+
disabled,
|
|
404
|
+
placeholder,
|
|
405
|
+
className: "flex-1 bg-transparent outline-none px-3 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
406
|
+
}
|
|
407
|
+
),
|
|
408
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full border-l border-default-200", children: [
|
|
409
|
+
/* @__PURE__ */ jsx(
|
|
410
|
+
"button",
|
|
411
|
+
{
|
|
412
|
+
type: "button",
|
|
413
|
+
onClick: increment,
|
|
414
|
+
disabled: disabled || current !== void 0 && current >= max,
|
|
415
|
+
className: cn(inputNumberButtonVariants({ size }), "border-b h-1/2"),
|
|
416
|
+
tabIndex: -1,
|
|
417
|
+
children: /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" })
|
|
418
|
+
}
|
|
419
|
+
),
|
|
420
|
+
/* @__PURE__ */ jsx(
|
|
421
|
+
"button",
|
|
422
|
+
{
|
|
423
|
+
type: "button",
|
|
424
|
+
onClick: decrement,
|
|
425
|
+
disabled: disabled || current !== void 0 && current <= min,
|
|
426
|
+
className: cn(inputNumberButtonVariants({ size }), "h-1/2"),
|
|
427
|
+
tabIndex: -1,
|
|
428
|
+
children: /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" })
|
|
429
|
+
}
|
|
430
|
+
)
|
|
431
|
+
] })
|
|
432
|
+
] });
|
|
433
|
+
}
|
|
434
|
+
);
|
|
435
|
+
InputNumber.displayName = "InputNumber";
|
|
436
|
+
var progressTrackVariants = cva(
|
|
437
|
+
"relative w-full overflow-hidden rounded-full bg-default-200",
|
|
438
|
+
{
|
|
439
|
+
variants: {
|
|
440
|
+
size: {
|
|
441
|
+
sm: "h-1",
|
|
442
|
+
md: "h-2",
|
|
443
|
+
lg: "h-3"
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
defaultVariants: { size: "md" }
|
|
447
|
+
}
|
|
448
|
+
);
|
|
449
|
+
var progressIndicatorVariants = cva("h-full flex-1 transition-all", {
|
|
450
|
+
variants: {
|
|
451
|
+
color: {
|
|
452
|
+
primary: "bg-primary",
|
|
453
|
+
success: "bg-success",
|
|
454
|
+
warning: "bg-warning",
|
|
455
|
+
danger: "bg-destructive"
|
|
456
|
+
}
|
|
457
|
+
},
|
|
458
|
+
defaultVariants: { color: "primary" }
|
|
459
|
+
});
|
|
460
|
+
var Progress = React5.forwardRef(
|
|
461
|
+
({ value = 0, color = "primary", size = "md", showLabel, label, className }, ref) => {
|
|
462
|
+
const clamped = Math.max(0, Math.min(100, value));
|
|
463
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
|
|
464
|
+
(label !== void 0 || showLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-default-500 mb-1", children: [
|
|
465
|
+
label !== void 0 && /* @__PURE__ */ jsx("span", { children: label }),
|
|
466
|
+
showLabel && /* @__PURE__ */ jsxs("span", { className: "ml-auto", children: [
|
|
467
|
+
clamped,
|
|
468
|
+
"%"
|
|
469
|
+
] })
|
|
470
|
+
] }),
|
|
471
|
+
/* @__PURE__ */ jsx(ProgressPrimitive.Root, { value: clamped, className: progressTrackVariants({ size }), children: /* @__PURE__ */ jsx(
|
|
472
|
+
ProgressPrimitive.Indicator,
|
|
473
|
+
{
|
|
474
|
+
className: progressIndicatorVariants({ color }),
|
|
475
|
+
style: { transform: `translateX(-${100 - clamped}%)` }
|
|
476
|
+
}
|
|
477
|
+
) })
|
|
478
|
+
] });
|
|
479
|
+
}
|
|
480
|
+
);
|
|
481
|
+
Progress.displayName = "Progress";
|
|
482
|
+
var radioItemVariants = cva(
|
|
483
|
+
"aspect-square h-4 w-4 rounded-full border ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
484
|
+
{
|
|
485
|
+
variants: {
|
|
486
|
+
color: {
|
|
487
|
+
primary: "border-primary text-primary data-[state=checked]:border-primary",
|
|
488
|
+
secondary: "border-secondary text-secondary data-[state=checked]:border-secondary",
|
|
489
|
+
success: "border-success text-success data-[state=checked]:border-success",
|
|
490
|
+
warning: "border-warning text-warning data-[state=checked]:border-warning",
|
|
491
|
+
danger: "border-destructive text-destructive data-[state=checked]:border-destructive"
|
|
492
|
+
}
|
|
493
|
+
},
|
|
494
|
+
defaultVariants: {
|
|
495
|
+
color: "primary"
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
);
|
|
499
|
+
var Radio = React5.forwardRef(
|
|
500
|
+
({
|
|
501
|
+
value,
|
|
502
|
+
defaultValue,
|
|
503
|
+
options,
|
|
504
|
+
onChange,
|
|
505
|
+
orientation = "vertical",
|
|
506
|
+
color = "primary",
|
|
507
|
+
className,
|
|
508
|
+
name,
|
|
509
|
+
disabled
|
|
510
|
+
}, ref) => /* @__PURE__ */ jsx(
|
|
511
|
+
RadioGroup,
|
|
512
|
+
{
|
|
513
|
+
ref,
|
|
514
|
+
value,
|
|
515
|
+
defaultValue,
|
|
516
|
+
onValueChange: onChange,
|
|
517
|
+
name,
|
|
518
|
+
disabled,
|
|
519
|
+
className: cn(orientation === "horizontal" ? "flex flex-row gap-4" : "grid gap-2", className),
|
|
520
|
+
children: options.map((opt) => /* @__PURE__ */ jsxs(
|
|
521
|
+
"label",
|
|
522
|
+
{
|
|
523
|
+
className: cn(
|
|
524
|
+
"inline-flex items-center gap-2 text-sm cursor-pointer select-none",
|
|
525
|
+
(opt.disabled || disabled) && "cursor-not-allowed opacity-60"
|
|
526
|
+
),
|
|
527
|
+
children: [
|
|
528
|
+
/* @__PURE__ */ jsx(
|
|
529
|
+
RadioGroupItem,
|
|
530
|
+
{
|
|
531
|
+
value: opt.value,
|
|
532
|
+
disabled: opt.disabled || disabled,
|
|
533
|
+
className: radioItemVariants({ color })
|
|
534
|
+
}
|
|
535
|
+
),
|
|
536
|
+
/* @__PURE__ */ jsx("span", { children: opt.label })
|
|
537
|
+
]
|
|
538
|
+
},
|
|
539
|
+
opt.value
|
|
540
|
+
))
|
|
541
|
+
}
|
|
542
|
+
)
|
|
543
|
+
);
|
|
544
|
+
Radio.displayName = "Radio";
|
|
545
|
+
var rateStarVariants = cva("transition-colors cursor-pointer", {
|
|
546
|
+
variants: {
|
|
547
|
+
size: {
|
|
548
|
+
sm: "h-4 w-4",
|
|
549
|
+
md: "h-5 w-5",
|
|
550
|
+
lg: "h-7 w-7"
|
|
551
|
+
},
|
|
552
|
+
active: {
|
|
553
|
+
true: "fill-warning text-warning",
|
|
554
|
+
false: "fill-transparent text-default-300"
|
|
555
|
+
},
|
|
556
|
+
disabled: {
|
|
557
|
+
true: "cursor-not-allowed",
|
|
558
|
+
false: ""
|
|
559
|
+
}
|
|
560
|
+
},
|
|
561
|
+
defaultVariants: { size: "md", active: false, disabled: false }
|
|
562
|
+
});
|
|
563
|
+
var Rate = React5.forwardRef(
|
|
564
|
+
({ value, defaultValue = 0, onChange, count = 5, allowHalf, disabled, size = "md", className }, ref) => {
|
|
565
|
+
const [internal, setInternal] = React5.useState(defaultValue);
|
|
566
|
+
const [hover, setHover] = React5.useState(null);
|
|
567
|
+
const current = value ?? internal;
|
|
568
|
+
const display = hover ?? current;
|
|
569
|
+
const setValue = (next) => {
|
|
570
|
+
if (disabled) return;
|
|
571
|
+
if (value === void 0) setInternal(next);
|
|
572
|
+
onChange?.(next);
|
|
573
|
+
};
|
|
574
|
+
const handleClick = (e, index) => {
|
|
575
|
+
if (!allowHalf) return setValue(index + 1);
|
|
576
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
577
|
+
const isFirstHalf = e.clientX - rect.left < rect.width / 2;
|
|
578
|
+
setValue(index + (isFirstHalf ? 0.5 : 1));
|
|
579
|
+
};
|
|
580
|
+
const handleHover = (e, index) => {
|
|
581
|
+
if (disabled) return;
|
|
582
|
+
if (!allowHalf) return setHover(index + 1);
|
|
583
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
584
|
+
const isFirstHalf = e.clientX - rect.left < rect.width / 2;
|
|
585
|
+
setHover(index + (isFirstHalf ? 0.5 : 1));
|
|
586
|
+
};
|
|
587
|
+
return /* @__PURE__ */ jsx(
|
|
588
|
+
"div",
|
|
589
|
+
{
|
|
590
|
+
ref,
|
|
591
|
+
className: cn("inline-flex items-center gap-1", className),
|
|
592
|
+
onMouseLeave: () => setHover(null),
|
|
593
|
+
children: Array.from({ length: count }).map((_, i) => {
|
|
594
|
+
const filled = display >= i + 1;
|
|
595
|
+
const half = !filled && allowHalf && display >= i + 0.5;
|
|
596
|
+
return /* @__PURE__ */ jsx(
|
|
597
|
+
"button",
|
|
598
|
+
{
|
|
599
|
+
type: "button",
|
|
600
|
+
disabled,
|
|
601
|
+
onClick: (e) => handleClick(e, i),
|
|
602
|
+
onMouseMove: (e) => handleHover(e, i),
|
|
603
|
+
className: cn(
|
|
604
|
+
"p-0 bg-transparent border-0 leading-none",
|
|
605
|
+
disabled && "cursor-not-allowed"
|
|
606
|
+
),
|
|
607
|
+
"aria-label": `Rate ${i + 1}`,
|
|
608
|
+
children: half ? /* @__PURE__ */ jsx(StarHalf, { className: rateStarVariants({ size, active: true, disabled }) }) : /* @__PURE__ */ jsx(Star, { className: rateStarVariants({ size, active: filled, disabled }) })
|
|
609
|
+
},
|
|
610
|
+
i
|
|
611
|
+
);
|
|
612
|
+
})
|
|
613
|
+
}
|
|
614
|
+
);
|
|
615
|
+
}
|
|
616
|
+
);
|
|
617
|
+
Rate.displayName = "Rate";
|
|
618
|
+
|
|
619
|
+
// src/atoms/Select/utils.ts
|
|
620
|
+
var sizeClasses2 = {
|
|
621
|
+
sm: "h-8 text-[13.5px] pl-[11px] pr-8",
|
|
622
|
+
default: "h-10 text-sm pl-[14px] pr-9",
|
|
623
|
+
lg: "h-[46px] text-[15px] pl-4 pr-10"
|
|
624
|
+
};
|
|
625
|
+
var statusBorder = {
|
|
626
|
+
error: "border-destructive focus:ring-destructive/30",
|
|
627
|
+
warning: "border-warning-500 focus:ring-warning-500/30",
|
|
628
|
+
success: "border-success-500 focus:ring-success-500/30",
|
|
629
|
+
"": "border-input hover:border-primary-200 focus:ring-ring/30"
|
|
630
|
+
};
|
|
631
|
+
var statusBorderWithin = {
|
|
632
|
+
error: "border-destructive focus-within:ring-destructive/30",
|
|
633
|
+
warning: "border-warning-500 focus-within:ring-warning-500/30",
|
|
634
|
+
success: "border-success-500 focus-within:ring-success-500/30",
|
|
635
|
+
"": "border-input hover:border-primary-200 focus-within:ring-ring/30"
|
|
636
|
+
};
|
|
637
|
+
var messageColor = {
|
|
638
|
+
error: "text-destructive",
|
|
639
|
+
warning: "text-warning-600",
|
|
640
|
+
success: "text-success-600",
|
|
641
|
+
"": ""
|
|
642
|
+
};
|
|
643
|
+
var dotColorClass = {
|
|
644
|
+
primary: "bg-primary-700",
|
|
645
|
+
success: "bg-success-700",
|
|
646
|
+
warning: "bg-warning-800",
|
|
647
|
+
danger: "bg-danger-700"
|
|
648
|
+
};
|
|
649
|
+
var chipColorClass = {
|
|
650
|
+
primary: "bg-primary-50 text-primary-700 border-primary-100",
|
|
651
|
+
success: "bg-success-50 text-success-700 border-success-200",
|
|
652
|
+
warning: "bg-warning-50 text-warning-800 border-warning-100",
|
|
653
|
+
danger: "bg-danger-50 text-danger-700 border-danger-100"
|
|
654
|
+
};
|
|
655
|
+
var leadingIconBoxClass = "flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded bg-primary-50 text-[11px] font-bold text-primary-700";
|
|
656
|
+
var richIconBoxClass = "flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-md text-[11.5px] font-bold";
|
|
657
|
+
var metaPillClass = "ml-auto flex-shrink-0 rounded-full bg-muted px-2 py-0.5 font-mono text-[11.5px] text-muted-foreground";
|
|
658
|
+
var dropdownClass = "absolute left-0 right-0 top-[calc(100%+6px)] z-20 max-h-80 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground";
|
|
659
|
+
function Chip({ option, disabled, onRemove }) {
|
|
660
|
+
const dot = option.dotColor ?? "primary";
|
|
661
|
+
return /* @__PURE__ */ jsxs(
|
|
662
|
+
"span",
|
|
663
|
+
{
|
|
664
|
+
className: cn(
|
|
665
|
+
"inline-flex h-7 items-center gap-1.5 rounded-full border pl-2.5 pr-1.5 text-[13px] font-medium",
|
|
666
|
+
chipColorClass[dot]
|
|
667
|
+
),
|
|
668
|
+
children: [
|
|
669
|
+
/* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 rounded-full", dotColorClass[dot]) }),
|
|
670
|
+
/* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: option.label }),
|
|
671
|
+
/* @__PURE__ */ jsx(
|
|
672
|
+
"button",
|
|
673
|
+
{
|
|
674
|
+
type: "button",
|
|
675
|
+
"aria-label": "Quitar",
|
|
676
|
+
onClick: (e) => {
|
|
677
|
+
e.stopPropagation();
|
|
678
|
+
if (!disabled) onRemove(option.value);
|
|
679
|
+
},
|
|
680
|
+
className: "ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full opacity-70 transition hover:bg-black/10 hover:opacity-100",
|
|
681
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
682
|
+
}
|
|
683
|
+
)
|
|
684
|
+
]
|
|
685
|
+
}
|
|
686
|
+
);
|
|
687
|
+
}
|
|
688
|
+
function EmptyState({
|
|
689
|
+
title = "Sin resultados",
|
|
690
|
+
subtitle = "Prueba otro t\xE9rmino de b\xFAsqueda"
|
|
691
|
+
}) {
|
|
692
|
+
return /* @__PURE__ */ jsxs("div", { className: "px-3 py-7 text-center", children: [
|
|
693
|
+
/* @__PURE__ */ jsx(Inbox, { className: "mx-auto mb-1.5 h-7 w-7 text-muted-foreground/40" }),
|
|
694
|
+
/* @__PURE__ */ jsx("div", { className: "text-[13.5px] font-medium text-foreground", children: title }),
|
|
695
|
+
subtitle && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: subtitle })
|
|
696
|
+
] });
|
|
697
|
+
}
|
|
698
|
+
function OptionItem({
|
|
699
|
+
option,
|
|
700
|
+
isActive,
|
|
701
|
+
isHighlighted = false,
|
|
702
|
+
variant = "select",
|
|
703
|
+
onMouseEnter,
|
|
704
|
+
onClick
|
|
705
|
+
}) {
|
|
706
|
+
const dot = option.dotColor ?? "primary";
|
|
707
|
+
return /* @__PURE__ */ jsxs(
|
|
708
|
+
"li",
|
|
709
|
+
{
|
|
710
|
+
role: "option",
|
|
711
|
+
"aria-selected": isActive,
|
|
712
|
+
onMouseEnter,
|
|
713
|
+
onClick,
|
|
714
|
+
className: cn(
|
|
715
|
+
"flex cursor-pointer items-center gap-2.5 rounded-sm px-2.5 py-2 text-sm text-foreground",
|
|
716
|
+
variant === "multiselect" && "hover:bg-accent",
|
|
717
|
+
isHighlighted && "bg-accent",
|
|
718
|
+
isActive && (variant === "select" ? "bg-primary-50 font-semibold text-primary-700" : "bg-primary-50 font-medium text-primary-700"),
|
|
719
|
+
option.disabled && "cursor-not-allowed text-muted-foreground opacity-60"
|
|
720
|
+
),
|
|
721
|
+
children: [
|
|
722
|
+
option.leadingIcon ? variant === "select" ? /* @__PURE__ */ jsx(
|
|
723
|
+
"span",
|
|
724
|
+
{
|
|
725
|
+
className: cn(
|
|
726
|
+
richIconBoxClass,
|
|
727
|
+
isActive ? "bg-primary-700 text-white" : "bg-gradient-to-br from-primary-50 to-primary-100 text-primary-700"
|
|
728
|
+
),
|
|
729
|
+
children: option.leadingIcon
|
|
730
|
+
}
|
|
731
|
+
) : /* @__PURE__ */ jsx("span", { className: leadingIconBoxClass, children: option.leadingIcon }) : option.dotColor && variant === "multiselect" ? /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 rounded-full", dotColorClass[dot]) }) : null,
|
|
732
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
733
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: option.label }),
|
|
734
|
+
option.description && /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-normal text-muted-foreground", children: option.description })
|
|
735
|
+
] }),
|
|
736
|
+
option.meta && /* @__PURE__ */ jsx("span", { className: metaPillClass, children: option.meta }),
|
|
737
|
+
isActive && variant === "multiselect" && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-4 w-4 flex-shrink-0 text-primary-700" }),
|
|
738
|
+
isActive && variant === "select" && !option.meta && /* @__PURE__ */ jsx("span", { className: "ml-auto text-primary-700", "aria-hidden": true, children: "\u2713" })
|
|
739
|
+
]
|
|
740
|
+
}
|
|
741
|
+
);
|
|
742
|
+
}
|
|
743
|
+
function MultiSelectInner(props, ref) {
|
|
744
|
+
const {
|
|
745
|
+
options,
|
|
746
|
+
value,
|
|
747
|
+
onChange,
|
|
748
|
+
placeholder = "Selecciona una opci\xF3n",
|
|
749
|
+
touched,
|
|
750
|
+
error,
|
|
751
|
+
help,
|
|
752
|
+
externalLabel,
|
|
753
|
+
isSearchable = false,
|
|
754
|
+
searchable = false,
|
|
755
|
+
errorMessage,
|
|
756
|
+
status = "",
|
|
757
|
+
disabled,
|
|
758
|
+
className,
|
|
759
|
+
maxTagCount = 3,
|
|
760
|
+
onBlur
|
|
761
|
+
} = props;
|
|
762
|
+
const [open, setOpen] = useState(false);
|
|
763
|
+
const [search, setSearch] = useState("");
|
|
764
|
+
const rootRef = useRef(null);
|
|
765
|
+
useImperativeHandle(ref, () => rootRef.current);
|
|
766
|
+
const enableSearch = searchable || isSearchable;
|
|
767
|
+
useEffect(() => {
|
|
768
|
+
const handleClickOutside = (e) => {
|
|
769
|
+
if (rootRef.current && !rootRef.current.contains(e.target)) {
|
|
770
|
+
if (open) {
|
|
771
|
+
setOpen(false);
|
|
772
|
+
onBlur?.();
|
|
773
|
+
}
|
|
774
|
+
}
|
|
775
|
+
};
|
|
776
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
777
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
778
|
+
}, [open, onBlur]);
|
|
779
|
+
const filteredOptions = useMemo(
|
|
780
|
+
() => enableSearch && search ? options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase())) : options,
|
|
781
|
+
[options, search, enableSearch]
|
|
782
|
+
);
|
|
783
|
+
const toggleValue = (v) => {
|
|
784
|
+
if (value.includes(v)) onChange(value.filter((item) => item !== v));
|
|
785
|
+
else onChange([...value, v]);
|
|
786
|
+
};
|
|
787
|
+
const selectedOptions = useMemo(
|
|
788
|
+
() => value.map((v) => options.find((o) => o.value === v)).filter(Boolean),
|
|
789
|
+
[value, options]
|
|
790
|
+
);
|
|
791
|
+
const visibleChips = selectedOptions.slice(0, maxTagCount);
|
|
792
|
+
const overflowCount = selectedOptions.length - visibleChips.length;
|
|
793
|
+
const showError = touched && error || status === "error";
|
|
794
|
+
const effectiveStatus = showError ? "error" : status;
|
|
795
|
+
const isEmpty = filteredOptions.length === 0;
|
|
796
|
+
return /* @__PURE__ */ jsxs(
|
|
797
|
+
FormItem,
|
|
798
|
+
{
|
|
799
|
+
help: touched || error ? help : "",
|
|
800
|
+
validateStatus: showError ? "error" : "default",
|
|
801
|
+
label: externalLabel,
|
|
802
|
+
children: [
|
|
803
|
+
/* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative w-full", className), children: [
|
|
804
|
+
/* @__PURE__ */ jsxs(
|
|
805
|
+
"div",
|
|
806
|
+
{
|
|
807
|
+
role: "combobox",
|
|
808
|
+
"aria-expanded": open,
|
|
809
|
+
"aria-disabled": disabled,
|
|
810
|
+
onClick: () => !disabled && setOpen(true),
|
|
811
|
+
className: cn(
|
|
812
|
+
"relative flex min-h-[40px] w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border bg-background py-1 pl-2 pr-9 text-sm transition-colors",
|
|
813
|
+
"focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background",
|
|
814
|
+
statusBorderWithin[effectiveStatus],
|
|
815
|
+
open && !disabled && "border-ring",
|
|
816
|
+
disabled && "bg-muted text-muted-foreground cursor-not-allowed opacity-70"
|
|
817
|
+
),
|
|
818
|
+
children: [
|
|
819
|
+
visibleChips.map((opt) => /* @__PURE__ */ jsx(Chip, { option: opt, disabled, onRemove: toggleValue }, String(opt.value))),
|
|
820
|
+
overflowCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex h-[26px] items-center rounded-full bg-muted px-2 text-[12.5px] font-medium text-muted-foreground", children: [
|
|
821
|
+
"+",
|
|
822
|
+
overflowCount,
|
|
823
|
+
" m\xE1s"
|
|
824
|
+
] }),
|
|
825
|
+
enableSearch ? /* @__PURE__ */ jsx(
|
|
826
|
+
"input",
|
|
827
|
+
{
|
|
828
|
+
className: "h-7 min-w-[80px] flex-1 border-0 bg-transparent px-1.5 text-sm outline-none placeholder:text-muted-foreground",
|
|
829
|
+
value: search,
|
|
830
|
+
placeholder: selectedOptions.length === 0 ? placeholder : "",
|
|
831
|
+
disabled,
|
|
832
|
+
onChange: (e) => {
|
|
833
|
+
setSearch(e.target.value);
|
|
834
|
+
if (!open) setOpen(true);
|
|
835
|
+
},
|
|
836
|
+
onFocus: () => setOpen(true)
|
|
837
|
+
}
|
|
838
|
+
) : selectedOptions.length === 0 && /* @__PURE__ */ jsx("span", { className: "px-1.5 text-muted-foreground", children: placeholder }),
|
|
839
|
+
/* @__PURE__ */ jsx(
|
|
840
|
+
ChevronDown,
|
|
841
|
+
{
|
|
842
|
+
className: cn(
|
|
843
|
+
"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground transition-transform",
|
|
844
|
+
open && "rotate-180 text-primary-700"
|
|
845
|
+
),
|
|
846
|
+
"aria-hidden": true
|
|
847
|
+
}
|
|
848
|
+
)
|
|
849
|
+
]
|
|
850
|
+
}
|
|
851
|
+
),
|
|
852
|
+
open && !disabled && /* @__PURE__ */ jsx("div", { role: "listbox", className: dropdownClass, children: isEmpty ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx("ul", { children: filteredOptions.map((option) => /* @__PURE__ */ jsx(
|
|
853
|
+
OptionItem,
|
|
854
|
+
{
|
|
855
|
+
option,
|
|
856
|
+
variant: "multiselect",
|
|
857
|
+
isActive: value.includes(option.value),
|
|
858
|
+
onClick: () => {
|
|
859
|
+
if (option.disabled) return;
|
|
860
|
+
toggleValue(option.value);
|
|
861
|
+
}
|
|
862
|
+
},
|
|
863
|
+
String(option.value)
|
|
864
|
+
)) }) })
|
|
865
|
+
] }),
|
|
866
|
+
errorMessage && effectiveStatus === "error" && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errorMessage })
|
|
867
|
+
]
|
|
868
|
+
}
|
|
869
|
+
);
|
|
870
|
+
}
|
|
871
|
+
var MultiSelect = forwardRef(MultiSelectInner);
|
|
872
|
+
function SelectInner(props, ref) {
|
|
873
|
+
const {
|
|
874
|
+
options,
|
|
875
|
+
value,
|
|
876
|
+
onChange,
|
|
877
|
+
placeholder = "Selecciona una opci\xF3n",
|
|
878
|
+
touched,
|
|
879
|
+
error,
|
|
880
|
+
help,
|
|
881
|
+
externalLabel,
|
|
882
|
+
isSearchable = false,
|
|
883
|
+
errorMessage,
|
|
884
|
+
status = "",
|
|
885
|
+
size = "default",
|
|
886
|
+
leadingIcon,
|
|
887
|
+
disabled,
|
|
888
|
+
className,
|
|
889
|
+
onBlur
|
|
890
|
+
} = props;
|
|
891
|
+
const [open, setOpen] = useState(false);
|
|
892
|
+
const [search, setSearch] = useState("");
|
|
893
|
+
const [activeIndex, setActiveIndex] = useState(-1);
|
|
894
|
+
const rootRef = useRef(null);
|
|
895
|
+
useImperativeHandle(ref, () => rootRef.current);
|
|
896
|
+
const selectedOption = options.find((opt) => opt.value === value);
|
|
897
|
+
useEffect(() => {
|
|
898
|
+
const handleClickOutside = (e) => {
|
|
899
|
+
if (rootRef.current && !rootRef.current.contains(e.target)) {
|
|
900
|
+
if (open) {
|
|
901
|
+
setOpen(false);
|
|
902
|
+
onBlur?.();
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
};
|
|
906
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
907
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
908
|
+
}, [open, onBlur]);
|
|
909
|
+
const filteredOptions = useMemo(
|
|
910
|
+
() => isSearchable && search ? options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase())) : options,
|
|
911
|
+
[options, search, isSearchable]
|
|
912
|
+
);
|
|
913
|
+
const commitSelection = (opt) => {
|
|
914
|
+
if (opt.disabled) return;
|
|
915
|
+
onChange(opt.value);
|
|
916
|
+
setOpen(false);
|
|
917
|
+
setSearch("");
|
|
918
|
+
setActiveIndex(-1);
|
|
919
|
+
};
|
|
920
|
+
const handleKeyDown = (e) => {
|
|
921
|
+
if (disabled) return;
|
|
922
|
+
if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
|
|
923
|
+
e.preventDefault();
|
|
924
|
+
setOpen(true);
|
|
925
|
+
return;
|
|
926
|
+
}
|
|
927
|
+
if (!open) return;
|
|
928
|
+
if (e.key === "Escape") {
|
|
929
|
+
e.preventDefault();
|
|
930
|
+
setOpen(false);
|
|
931
|
+
} else if (e.key === "ArrowDown") {
|
|
932
|
+
e.preventDefault();
|
|
933
|
+
setActiveIndex((i) => Math.min(filteredOptions.length - 1, i + 1));
|
|
934
|
+
} else if (e.key === "ArrowUp") {
|
|
935
|
+
e.preventDefault();
|
|
936
|
+
setActiveIndex((i) => Math.max(0, i - 1));
|
|
937
|
+
} else if (e.key === "Enter") {
|
|
938
|
+
e.preventDefault();
|
|
939
|
+
const opt = filteredOptions[activeIndex];
|
|
940
|
+
if (opt) commitSelection(opt);
|
|
941
|
+
}
|
|
942
|
+
};
|
|
943
|
+
const showError = touched && error || status === "error";
|
|
944
|
+
const effectiveStatus = showError ? "error" : status;
|
|
945
|
+
const isEmpty = filteredOptions.length === 0;
|
|
946
|
+
return /* @__PURE__ */ jsxs(
|
|
947
|
+
FormItem,
|
|
948
|
+
{
|
|
949
|
+
help: touched || error ? help : "",
|
|
950
|
+
validateStatus: showError ? "error" : "default",
|
|
951
|
+
label: externalLabel,
|
|
952
|
+
children: [
|
|
953
|
+
/* @__PURE__ */ jsxs(
|
|
954
|
+
"div",
|
|
955
|
+
{
|
|
956
|
+
ref: rootRef,
|
|
957
|
+
className: cn("relative w-full", className),
|
|
958
|
+
onKeyDown: handleKeyDown,
|
|
959
|
+
tabIndex: -1,
|
|
960
|
+
children: [
|
|
961
|
+
/* @__PURE__ */ jsxs(
|
|
962
|
+
"button",
|
|
963
|
+
{
|
|
964
|
+
type: "button",
|
|
965
|
+
disabled,
|
|
966
|
+
onClick: () => !disabled && setOpen((o) => !o),
|
|
967
|
+
"aria-haspopup": "listbox",
|
|
968
|
+
"aria-expanded": open,
|
|
969
|
+
className: cn(
|
|
970
|
+
"w-full flex items-center gap-2 rounded-md border bg-background text-left transition-colors",
|
|
971
|
+
"focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background",
|
|
972
|
+
sizeClasses2[size],
|
|
973
|
+
statusBorder[effectiveStatus],
|
|
974
|
+
open && !disabled && "border-ring",
|
|
975
|
+
disabled && "bg-muted text-muted-foreground cursor-not-allowed opacity-70"
|
|
976
|
+
),
|
|
977
|
+
children: [
|
|
978
|
+
leadingIcon && /* @__PURE__ */ jsx("span", { className: leadingIconBoxClass, children: leadingIcon }),
|
|
979
|
+
selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 truncate font-medium text-foreground", children: [
|
|
980
|
+
selectedOption.leadingIcon && !leadingIcon && /* @__PURE__ */ jsx("span", { className: leadingIconBoxClass, children: selectedOption.leadingIcon }),
|
|
981
|
+
/* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption.label }),
|
|
982
|
+
selectedOption.meta && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-[12.5px] font-normal text-muted-foreground", children: [
|
|
983
|
+
"\xB7 ",
|
|
984
|
+
selectedOption.meta
|
|
985
|
+
] })
|
|
986
|
+
] }) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-muted-foreground", children: placeholder }),
|
|
987
|
+
/* @__PURE__ */ jsx(
|
|
988
|
+
ChevronDown,
|
|
989
|
+
{
|
|
990
|
+
className: cn(
|
|
991
|
+
"absolute right-3 h-4 w-4 text-muted-foreground transition-transform",
|
|
992
|
+
open && "rotate-180 text-primary-700"
|
|
993
|
+
),
|
|
994
|
+
"aria-hidden": true
|
|
995
|
+
}
|
|
996
|
+
)
|
|
997
|
+
]
|
|
998
|
+
}
|
|
999
|
+
),
|
|
1000
|
+
open && !disabled && /* @__PURE__ */ jsxs("div", { role: "listbox", className: dropdownClass, children: [
|
|
1001
|
+
isSearchable && /* @__PURE__ */ jsx("div", { className: "sticky top-[-4px] z-10 -mx-1 mb-1 border-b border-border bg-popover px-2 py-1.5", children: /* @__PURE__ */ jsx(
|
|
1002
|
+
"input",
|
|
1003
|
+
{
|
|
1004
|
+
type: "text",
|
|
1005
|
+
autoFocus: true,
|
|
1006
|
+
value: search,
|
|
1007
|
+
onChange: (e) => {
|
|
1008
|
+
setSearch(e.target.value);
|
|
1009
|
+
setActiveIndex(0);
|
|
1010
|
+
},
|
|
1011
|
+
className: "w-full rounded-sm border border-transparent bg-muted px-2.5 py-1.5 text-[13.5px] outline-none focus:border-primary-500 focus:bg-background",
|
|
1012
|
+
placeholder: "Buscar..."
|
|
1013
|
+
}
|
|
1014
|
+
) }),
|
|
1015
|
+
isEmpty ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx("ul", { children: filteredOptions.map((option, idx) => /* @__PURE__ */ jsx(
|
|
1016
|
+
OptionItem,
|
|
1017
|
+
{
|
|
1018
|
+
option,
|
|
1019
|
+
isActive: option.value === value,
|
|
1020
|
+
isHighlighted: idx === activeIndex,
|
|
1021
|
+
onMouseEnter: () => setActiveIndex(idx),
|
|
1022
|
+
onClick: () => commitSelection(option)
|
|
1023
|
+
},
|
|
1024
|
+
String(option.value)
|
|
1025
|
+
)) })
|
|
1026
|
+
] })
|
|
1027
|
+
]
|
|
1028
|
+
}
|
|
1029
|
+
),
|
|
1030
|
+
errorMessage && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-xs", messageColor[effectiveStatus]), children: errorMessage })
|
|
1031
|
+
]
|
|
1032
|
+
}
|
|
1033
|
+
);
|
|
1034
|
+
}
|
|
1035
|
+
var Select = forwardRef(SelectInner);
|
|
1036
|
+
var Separator2 = React5.forwardRef(
|
|
1037
|
+
({ orientation = "horizontal", text, className }, ref) => {
|
|
1038
|
+
if (text && orientation === "horizontal") {
|
|
1039
|
+
return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative flex items-center w-full my-2", className), children: [
|
|
1040
|
+
/* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "flex-1" }),
|
|
1041
|
+
/* @__PURE__ */ jsx("span", { className: "px-3 text-xs text-muted-foreground uppercase tracking-wider bg-background", children: text }),
|
|
1042
|
+
/* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "flex-1" })
|
|
1043
|
+
] });
|
|
1044
|
+
}
|
|
1045
|
+
return /* @__PURE__ */ jsx(
|
|
1046
|
+
Separator,
|
|
1047
|
+
{
|
|
1048
|
+
ref,
|
|
1049
|
+
orientation,
|
|
1050
|
+
className: cn(orientation === "vertical" ? "mx-2 h-4 inline-block" : "", className)
|
|
1051
|
+
}
|
|
1052
|
+
);
|
|
1053
|
+
}
|
|
1054
|
+
);
|
|
1055
|
+
Separator2.displayName = "Separator";
|
|
1056
|
+
function roundedClass(r) {
|
|
1057
|
+
if (r === "sm") return "rounded-sm";
|
|
1058
|
+
if (r === "full") return "rounded-full";
|
|
1059
|
+
return "rounded-md";
|
|
1060
|
+
}
|
|
1061
|
+
function toCss(v) {
|
|
1062
|
+
if (typeof v === "number") return `${v}px`;
|
|
1063
|
+
return v;
|
|
1064
|
+
}
|
|
1065
|
+
var Skeleton2 = React5.forwardRef(
|
|
1066
|
+
({ width, height, rounded = "md", lines, className }, ref) => {
|
|
1067
|
+
if (lines && lines > 1) {
|
|
1068
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-2", className), children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
|
|
1069
|
+
Skeleton,
|
|
1070
|
+
{
|
|
1071
|
+
className: cn(roundedClass(rounded), "h-3"),
|
|
1072
|
+
style: {
|
|
1073
|
+
width: i === lines - 1 ? "60%" : toCss(width) ?? "100%"
|
|
1074
|
+
}
|
|
1075
|
+
},
|
|
1076
|
+
i
|
|
1077
|
+
)) });
|
|
1078
|
+
}
|
|
1079
|
+
return /* @__PURE__ */ jsx(
|
|
1080
|
+
Skeleton,
|
|
1081
|
+
{
|
|
1082
|
+
ref,
|
|
1083
|
+
className: cn(roundedClass(rounded), className),
|
|
1084
|
+
style: { width: toCss(width), height: toCss(height) }
|
|
1085
|
+
}
|
|
1086
|
+
);
|
|
1087
|
+
}
|
|
1088
|
+
);
|
|
1089
|
+
Skeleton2.displayName = "Skeleton";
|
|
1090
|
+
var sliderRangeVariants = cva("absolute h-full", {
|
|
1091
|
+
variants: {
|
|
1092
|
+
color: {
|
|
1093
|
+
primary: "bg-primary",
|
|
1094
|
+
secondary: "bg-secondary",
|
|
1095
|
+
success: "bg-success",
|
|
1096
|
+
warning: "bg-warning",
|
|
1097
|
+
danger: "bg-destructive"
|
|
1098
|
+
}
|
|
1099
|
+
},
|
|
1100
|
+
defaultVariants: { color: "primary" }
|
|
1101
|
+
});
|
|
1102
|
+
var sliderThumbVariants = cva(
|
|
1103
|
+
"block h-3.5 w-3.5 rounded-full border-2 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
1104
|
+
{
|
|
1105
|
+
variants: {
|
|
1106
|
+
color: {
|
|
1107
|
+
primary: "border-primary",
|
|
1108
|
+
secondary: "border-secondary",
|
|
1109
|
+
success: "border-success",
|
|
1110
|
+
warning: "border-warning",
|
|
1111
|
+
danger: "border-destructive"
|
|
1112
|
+
}
|
|
1113
|
+
},
|
|
1114
|
+
defaultVariants: { color: "primary" }
|
|
1115
|
+
}
|
|
1116
|
+
);
|
|
1117
|
+
function toArray(v) {
|
|
1118
|
+
if (v === void 0) return void 0;
|
|
1119
|
+
return Array.isArray(v) ? v : [v];
|
|
1120
|
+
}
|
|
1121
|
+
var Slider = React5.forwardRef(
|
|
1122
|
+
({
|
|
1123
|
+
value,
|
|
1124
|
+
defaultValue,
|
|
1125
|
+
onChange,
|
|
1126
|
+
min = 0,
|
|
1127
|
+
max = 100,
|
|
1128
|
+
step = 1,
|
|
1129
|
+
color = "primary",
|
|
1130
|
+
disabled,
|
|
1131
|
+
showTooltip,
|
|
1132
|
+
className
|
|
1133
|
+
}, ref) => {
|
|
1134
|
+
const valueArr = toArray(value);
|
|
1135
|
+
const defaultArr = toArray(defaultValue);
|
|
1136
|
+
const [internal, setInternal] = React5.useState(defaultArr ?? [min]);
|
|
1137
|
+
const display = valueArr ?? internal;
|
|
1138
|
+
const handleChange = (next) => {
|
|
1139
|
+
if (valueArr === void 0) setInternal(next);
|
|
1140
|
+
if (!onChange) return;
|
|
1141
|
+
onChange(next.length === 1 ? next[0] : next);
|
|
1142
|
+
};
|
|
1143
|
+
return /* @__PURE__ */ jsxs(
|
|
1144
|
+
SliderPrimitive.Root,
|
|
1145
|
+
{
|
|
1146
|
+
ref,
|
|
1147
|
+
value: valueArr,
|
|
1148
|
+
defaultValue: defaultArr,
|
|
1149
|
+
onValueChange: handleChange,
|
|
1150
|
+
min,
|
|
1151
|
+
max,
|
|
1152
|
+
step,
|
|
1153
|
+
disabled,
|
|
1154
|
+
className: cn(
|
|
1155
|
+
"relative flex w-full touch-none select-none items-center",
|
|
1156
|
+
disabled && "opacity-50",
|
|
1157
|
+
className
|
|
1158
|
+
),
|
|
1159
|
+
children: [
|
|
1160
|
+
/* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: sliderRangeVariants({ color }) }) }),
|
|
1161
|
+
display.map((v, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: sliderThumbVariants({ color }), children: showTooltip && /* @__PURE__ */ jsx("span", { className: "absolute -top-7 left-1/2 -translate-x-1/2 rounded bg-default-900 text-default-50 px-1.5 py-0.5 text-xs whitespace-nowrap", children: v }) }, i))
|
|
1162
|
+
]
|
|
1163
|
+
}
|
|
1164
|
+
);
|
|
1165
|
+
}
|
|
1166
|
+
);
|
|
1167
|
+
Slider.displayName = "Slider";
|
|
1168
|
+
var switchRootVariants = cva(
|
|
1169
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-default-200",
|
|
1170
|
+
{
|
|
1171
|
+
variants: {
|
|
1172
|
+
color: {
|
|
1173
|
+
primary: "data-[state=checked]:bg-primary",
|
|
1174
|
+
secondary: "data-[state=checked]:bg-secondary",
|
|
1175
|
+
success: "data-[state=checked]:bg-success",
|
|
1176
|
+
warning: "data-[state=checked]:bg-warning",
|
|
1177
|
+
danger: "data-[state=checked]:bg-destructive"
|
|
1178
|
+
},
|
|
1179
|
+
size: {
|
|
1180
|
+
sm: "h-5 w-9",
|
|
1181
|
+
md: "h-6 w-11",
|
|
1182
|
+
lg: "h-7 w-14"
|
|
1183
|
+
}
|
|
1184
|
+
},
|
|
1185
|
+
defaultVariants: { color: "primary", size: "md" }
|
|
1186
|
+
}
|
|
1187
|
+
);
|
|
1188
|
+
var switchThumbVariants = cva(
|
|
1189
|
+
"pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
|
|
1190
|
+
{
|
|
1191
|
+
variants: {
|
|
1192
|
+
size: {
|
|
1193
|
+
sm: "h-4 w-4 data-[state=checked]:translate-x-4",
|
|
1194
|
+
md: "h-5 w-5 data-[state=checked]:translate-x-5",
|
|
1195
|
+
lg: "h-6 w-6 data-[state=checked]:translate-x-7"
|
|
1196
|
+
}
|
|
1197
|
+
},
|
|
1198
|
+
defaultVariants: { size: "md" }
|
|
1199
|
+
}
|
|
1200
|
+
);
|
|
1201
|
+
var Switch = React5.forwardRef(
|
|
1202
|
+
({
|
|
1203
|
+
checked,
|
|
1204
|
+
defaultChecked,
|
|
1205
|
+
onChange,
|
|
1206
|
+
color = "primary",
|
|
1207
|
+
size = "md",
|
|
1208
|
+
label,
|
|
1209
|
+
disabled,
|
|
1210
|
+
className,
|
|
1211
|
+
name,
|
|
1212
|
+
id
|
|
1213
|
+
}, ref) => {
|
|
1214
|
+
const control = /* @__PURE__ */ jsx(
|
|
1215
|
+
SwitchPrimitives.Root,
|
|
1216
|
+
{
|
|
1217
|
+
ref,
|
|
1218
|
+
id,
|
|
1219
|
+
name,
|
|
1220
|
+
checked,
|
|
1221
|
+
defaultChecked,
|
|
1222
|
+
onCheckedChange: onChange,
|
|
1223
|
+
disabled,
|
|
1224
|
+
className: cn(switchRootVariants({ color, size }), !label && className),
|
|
1225
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: switchThumbVariants({ size }) })
|
|
1226
|
+
}
|
|
1227
|
+
);
|
|
1228
|
+
if (!label) return control;
|
|
1229
|
+
return /* @__PURE__ */ jsxs(
|
|
1230
|
+
"label",
|
|
1231
|
+
{
|
|
1232
|
+
className: cn(
|
|
1233
|
+
"inline-flex items-center gap-2 text-sm cursor-pointer select-none",
|
|
1234
|
+
disabled && "cursor-not-allowed opacity-60",
|
|
1235
|
+
className
|
|
1236
|
+
),
|
|
1237
|
+
children: [
|
|
1238
|
+
control,
|
|
1239
|
+
/* @__PURE__ */ jsx("span", { children: label })
|
|
1240
|
+
]
|
|
1241
|
+
}
|
|
1242
|
+
);
|
|
1243
|
+
}
|
|
1244
|
+
);
|
|
1245
|
+
Switch.displayName = "Switch";
|
|
1246
|
+
var variantMap = {
|
|
1247
|
+
default: "bg-default-100 text-foreground border-default-200",
|
|
1248
|
+
success: "bg-success-50 text-success-800 border-success-200",
|
|
1249
|
+
warning: "bg-warning-50 text-warning-800 border-warning-200",
|
|
1250
|
+
danger: "bg-danger-50 text-danger-800 border-danger-200"
|
|
1251
|
+
};
|
|
1252
|
+
var Tag = ({ icon, onClose, variant, children }) => {
|
|
1253
|
+
return /* @__PURE__ */ jsxs(
|
|
1254
|
+
Badge,
|
|
1255
|
+
{
|
|
1256
|
+
variant: "outline",
|
|
1257
|
+
className: cn("gap-2 px-3 py-1 text-sm rounded-md border", variantMap[variant]),
|
|
1258
|
+
children: [
|
|
1259
|
+
icon,
|
|
1260
|
+
children,
|
|
1261
|
+
onClose && /* @__PURE__ */ jsx(
|
|
1262
|
+
"button",
|
|
1263
|
+
{
|
|
1264
|
+
type: "button",
|
|
1265
|
+
onClick: onClose,
|
|
1266
|
+
className: "ml-1 inline-flex items-center justify-center rounded hover:bg-black/10",
|
|
1267
|
+
"aria-label": "close",
|
|
1268
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
|
|
1269
|
+
}
|
|
1270
|
+
)
|
|
1271
|
+
]
|
|
1272
|
+
}
|
|
1273
|
+
);
|
|
1274
|
+
};
|
|
1275
|
+
var sizeClasses3 = {
|
|
1276
|
+
small: "text-[13px] py-1.5 px-2.5",
|
|
1277
|
+
default: "text-sm py-2 px-3",
|
|
1278
|
+
large: "text-[15px] py-2.5 px-4"
|
|
1279
|
+
};
|
|
1280
|
+
var statusBorderClasses2 = {
|
|
1281
|
+
error: "border-destructive focus-visible:ring-destructive",
|
|
1282
|
+
success: "border-success-500 focus-visible:ring-success-500",
|
|
1283
|
+
warning: "border-warning-500 focus-visible:ring-warning-500",
|
|
1284
|
+
default: ""
|
|
1285
|
+
};
|
|
1286
|
+
var Textarea2 = forwardRef(function Textarea3({
|
|
1287
|
+
size = "default",
|
|
1288
|
+
allowClear = false,
|
|
1289
|
+
status = "default",
|
|
1290
|
+
autoSize = false,
|
|
1291
|
+
disabled,
|
|
1292
|
+
className,
|
|
1293
|
+
name,
|
|
1294
|
+
touched,
|
|
1295
|
+
error,
|
|
1296
|
+
externalLabel,
|
|
1297
|
+
help,
|
|
1298
|
+
errorMessage,
|
|
1299
|
+
onChange,
|
|
1300
|
+
value,
|
|
1301
|
+
defaultValue,
|
|
1302
|
+
rows = 3,
|
|
1303
|
+
...rest
|
|
1304
|
+
}, ref) {
|
|
1305
|
+
const [internalValue, setInternalValue] = useState(defaultValue ?? "");
|
|
1306
|
+
const isControlled = value !== void 0;
|
|
1307
|
+
const currentValue = isControlled ? value : internalValue;
|
|
1308
|
+
const innerRef = useRef(null);
|
|
1309
|
+
const setRefs = useCallback(
|
|
1310
|
+
(node) => {
|
|
1311
|
+
innerRef.current = node;
|
|
1312
|
+
if (typeof ref === "function") ref(node);
|
|
1313
|
+
else if (ref) ref.current = node;
|
|
1314
|
+
},
|
|
1315
|
+
[ref]
|
|
1316
|
+
);
|
|
1317
|
+
useEffect(() => {
|
|
1318
|
+
if (autoSize && innerRef.current) {
|
|
1319
|
+
innerRef.current.style.height = "auto";
|
|
1320
|
+
innerRef.current.style.height = `${innerRef.current.scrollHeight}px`;
|
|
1321
|
+
}
|
|
1322
|
+
}, [currentValue, autoSize]);
|
|
1323
|
+
const showClearButton = allowClear && !disabled && Boolean(currentValue);
|
|
1324
|
+
const messageColor2 = status === "error" ? "text-destructive" : status === "warning" ? "text-warning-700" : "";
|
|
1325
|
+
const handleChange = (e) => {
|
|
1326
|
+
if (!isControlled) setInternalValue(e.target.value);
|
|
1327
|
+
onChange?.(e);
|
|
1328
|
+
};
|
|
1329
|
+
const handleClear = () => {
|
|
1330
|
+
if (!isControlled) setInternalValue("");
|
|
1331
|
+
onChange?.({ target: { value: "" } });
|
|
1332
|
+
innerRef.current?.focus();
|
|
1333
|
+
};
|
|
1334
|
+
return /* @__PURE__ */ jsxs(
|
|
1335
|
+
FormItem,
|
|
1336
|
+
{
|
|
1337
|
+
help: touched || error ? help : "",
|
|
1338
|
+
validateStatus: touched && error ? "error" : "default",
|
|
1339
|
+
label: externalLabel,
|
|
1340
|
+
children: [
|
|
1341
|
+
/* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
|
|
1342
|
+
/* @__PURE__ */ jsx(
|
|
1343
|
+
Textarea,
|
|
1344
|
+
{
|
|
1345
|
+
ref: setRefs,
|
|
1346
|
+
name,
|
|
1347
|
+
disabled,
|
|
1348
|
+
rows,
|
|
1349
|
+
value: currentValue,
|
|
1350
|
+
onChange: handleChange,
|
|
1351
|
+
"aria-invalid": status === "error" || touched && Boolean(error) || void 0,
|
|
1352
|
+
className: cn(
|
|
1353
|
+
sizeClasses3[size],
|
|
1354
|
+
statusBorderClasses2[status],
|
|
1355
|
+
autoSize && "resize-none overflow-hidden",
|
|
1356
|
+
showClearButton && "pr-9"
|
|
1357
|
+
),
|
|
1358
|
+
...rest
|
|
1359
|
+
}
|
|
1360
|
+
),
|
|
1361
|
+
showClearButton && /* @__PURE__ */ jsx(
|
|
1362
|
+
"button",
|
|
1363
|
+
{
|
|
1364
|
+
type: "button",
|
|
1365
|
+
onClick: handleClear,
|
|
1366
|
+
"aria-label": "Limpiar",
|
|
1367
|
+
className: "absolute right-2 top-2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
|
|
1368
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
|
|
1369
|
+
}
|
|
1370
|
+
)
|
|
1371
|
+
] }),
|
|
1372
|
+
errorMessage && /* @__PURE__ */ jsx(
|
|
1373
|
+
"p",
|
|
1374
|
+
{
|
|
1375
|
+
className: cn("mt-1 text-xs", messageColor2),
|
|
1376
|
+
role: status === "error" ? "alert" : void 0,
|
|
1377
|
+
children: errorMessage
|
|
1378
|
+
}
|
|
1379
|
+
)
|
|
1380
|
+
]
|
|
1381
|
+
}
|
|
1382
|
+
);
|
|
1383
|
+
});
|
|
1384
|
+
function mapSize(size) {
|
|
1385
|
+
if (size === "sm") return "sm";
|
|
1386
|
+
if (size === "lg") return "lg";
|
|
1387
|
+
return "default";
|
|
1388
|
+
}
|
|
1389
|
+
var Toggle = React5.forwardRef(
|
|
1390
|
+
({
|
|
1391
|
+
pressed,
|
|
1392
|
+
defaultPressed,
|
|
1393
|
+
onChange,
|
|
1394
|
+
variant = "default",
|
|
1395
|
+
size = "md",
|
|
1396
|
+
disabled,
|
|
1397
|
+
className,
|
|
1398
|
+
children,
|
|
1399
|
+
...rest
|
|
1400
|
+
}, ref) => /* @__PURE__ */ jsx(
|
|
1401
|
+
TogglePrimitive.Root,
|
|
1402
|
+
{
|
|
1403
|
+
ref,
|
|
1404
|
+
pressed,
|
|
1405
|
+
defaultPressed,
|
|
1406
|
+
onPressedChange: onChange,
|
|
1407
|
+
disabled,
|
|
1408
|
+
className: cn(toggleVariants({ variant, size: mapSize(size) }), className),
|
|
1409
|
+
...rest,
|
|
1410
|
+
children
|
|
1411
|
+
}
|
|
1412
|
+
)
|
|
1413
|
+
);
|
|
1414
|
+
Toggle.displayName = "Toggle";
|
|
1415
|
+
function mapSize2(size) {
|
|
1416
|
+
if (size === "sm") return "sm";
|
|
1417
|
+
if (size === "lg") return "lg";
|
|
1418
|
+
return "default";
|
|
1419
|
+
}
|
|
1420
|
+
var ToggleGroup2 = React5.forwardRef((props, ref) => {
|
|
1421
|
+
const { options, variant = "default", size = "md", disabled, className } = props;
|
|
1422
|
+
const sharedItems = options.map((opt) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: opt.value, disabled: opt.disabled || disabled, children: opt.label }, opt.value));
|
|
1423
|
+
if (props.type === "single") {
|
|
1424
|
+
return /* @__PURE__ */ jsx(
|
|
1425
|
+
ToggleGroup,
|
|
1426
|
+
{
|
|
1427
|
+
ref,
|
|
1428
|
+
type: "single",
|
|
1429
|
+
value: props.value,
|
|
1430
|
+
defaultValue: props.defaultValue,
|
|
1431
|
+
onValueChange: (v) => props.onChange?.(v),
|
|
1432
|
+
variant,
|
|
1433
|
+
size: mapSize2(size),
|
|
1434
|
+
disabled,
|
|
1435
|
+
className: cn(className),
|
|
1436
|
+
children: sharedItems
|
|
1437
|
+
}
|
|
1438
|
+
);
|
|
1439
|
+
}
|
|
1440
|
+
return /* @__PURE__ */ jsx(
|
|
1441
|
+
ToggleGroup,
|
|
1442
|
+
{
|
|
1443
|
+
ref,
|
|
1444
|
+
type: "multiple",
|
|
1445
|
+
value: props.value,
|
|
1446
|
+
defaultValue: props.defaultValue,
|
|
1447
|
+
onValueChange: (v) => props.onChange?.(v),
|
|
1448
|
+
variant,
|
|
1449
|
+
size: mapSize2(size),
|
|
1450
|
+
disabled,
|
|
1451
|
+
className: cn(className),
|
|
1452
|
+
children: sharedItems
|
|
1453
|
+
}
|
|
1454
|
+
);
|
|
1455
|
+
});
|
|
1456
|
+
ToggleGroup2.displayName = "ToggleGroup";
|
|
1457
|
+
|
|
1458
|
+
export { Avatar2 as Avatar, Checkbox2 as Checkbox, Descriptions, Input2 as Input, InputNumber, MultiSelect, Progress, Radio, Rate, Select, Separator2 as Separator, Skeleton2 as Skeleton, Slider, Switch, Tag, Textarea2 as Textarea, Toggle, ToggleGroup2 as ToggleGroup };
|
|
1459
|
+
//# sourceMappingURL=chunk-X43C5OJD.js.map
|
|
1460
|
+
//# sourceMappingURL=chunk-X43C5OJD.js.map
|