@mieweb/ui 0.7.3-dev.1 → 0.7.3-dev.11
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 +45 -24
- package/agent/README.md +20 -0
- package/agent/init-agent.mjs +61 -0
- package/agent/mieweb-ui.instructions.md +169 -0
- package/dist/ag-grid.cjs +11 -0
- package/dist/ag-grid.cjs.map +1 -1
- package/dist/ag-grid.d.cts +4 -0
- package/dist/ag-grid.d.ts +4 -0
- package/dist/ag-grid.js +11 -0
- package/dist/ag-grid.js.map +1 -1
- package/dist/{chunk-OAHORW4N.cjs → chunk-3KY5W3ZN.cjs} +126 -97
- package/dist/chunk-3KY5W3ZN.cjs.map +1 -0
- package/dist/{chunk-KRGKPUJH.js → chunk-3X4GPM35.js} +7 -7
- package/dist/{chunk-KRGKPUJH.js.map → chunk-3X4GPM35.js.map} +1 -1
- package/dist/{chunk-3D4ITDLO.js → chunk-6H7NO5XX.js} +3 -3
- package/dist/{chunk-3D4ITDLO.js.map → chunk-6H7NO5XX.js.map} +1 -1
- package/dist/chunk-6NZXWKUE.js +3 -0
- package/dist/chunk-6NZXWKUE.js.map +1 -0
- package/dist/{chunk-QUUBTNMH.js → chunk-CLT4ASY7.js} +45 -15
- package/dist/chunk-CLT4ASY7.js.map +1 -0
- package/dist/{chunk-SYIFEJSF.cjs → chunk-DIL553SJ.cjs} +13 -13
- package/dist/{chunk-SYIFEJSF.cjs.map → chunk-DIL553SJ.cjs.map} +1 -1
- package/dist/{chunk-KFLDXJEE.js → chunk-DMIQS5KK.js} +46 -15
- package/dist/chunk-DMIQS5KK.js.map +1 -0
- package/dist/chunk-F7CQ5RO7.cjs +269 -0
- package/dist/chunk-F7CQ5RO7.cjs.map +1 -0
- package/dist/chunk-FXTNCCD2.js +243 -0
- package/dist/chunk-FXTNCCD2.js.map +1 -0
- package/dist/{chunk-5IDYOJHO.cjs → chunk-G6GJXVQC.cjs} +45 -15
- package/dist/chunk-G6GJXVQC.cjs.map +1 -0
- package/dist/{chunk-AFGADE3B.js → chunk-GP5CRU2I.js} +105 -26
- package/dist/chunk-GP5CRU2I.js.map +1 -0
- package/dist/{chunk-HIDV32ZX.js → chunk-GV3DE6KR.js} +3 -3
- package/dist/{chunk-HIDV32ZX.js.map → chunk-GV3DE6KR.js.map} +1 -1
- package/dist/{chunk-CVZYOMEW.js → chunk-I2AHT7JM.js} +78 -3
- package/dist/chunk-I2AHT7JM.js.map +1 -0
- package/dist/chunk-I44YNYI6.cjs +4 -0
- package/dist/chunk-I44YNYI6.cjs.map +1 -0
- package/dist/{chunk-FTRGZOVJ.js → chunk-ICMR3TYV.js} +3 -3
- package/dist/{chunk-FTRGZOVJ.js.map → chunk-ICMR3TYV.js.map} +1 -1
- package/dist/{chunk-MJFF4AXH.cjs → chunk-JU62BLDY.cjs} +78 -3
- package/dist/chunk-JU62BLDY.cjs.map +1 -0
- package/dist/{chunk-URHXR5SC.cjs → chunk-LFSP53TY.cjs} +7 -7
- package/dist/{chunk-URHXR5SC.cjs.map → chunk-LFSP53TY.cjs.map} +1 -1
- package/dist/{chunk-RBS3GHDZ.cjs → chunk-N7JVAXHD.cjs} +4 -4
- package/dist/{chunk-RBS3GHDZ.cjs.map → chunk-N7JVAXHD.cjs.map} +1 -1
- package/dist/{chunk-WUNWHOLA.cjs → chunk-NHR33YWI.cjs} +104 -25
- package/dist/chunk-NHR33YWI.cjs.map +1 -0
- package/dist/{chunk-FKLUSYFP.cjs → chunk-PCWIN32O.cjs} +4 -4
- package/dist/{chunk-FKLUSYFP.cjs.map → chunk-PCWIN32O.cjs.map} +1 -1
- package/dist/{chunk-S3MKIDYG.cjs → chunk-SMGNJGFT.cjs} +46 -15
- package/dist/chunk-SMGNJGFT.cjs.map +1 -0
- package/dist/{chunk-DLBV42JD.js → chunk-U35KWHXP.js} +86 -7
- package/dist/chunk-U35KWHXP.js.map +1 -0
- package/dist/{chunk-LC7YHZXM.js → chunk-UGJFT2QF.js} +5 -5
- package/dist/{chunk-LC7YHZXM.js.map → chunk-UGJFT2QF.js.map} +1 -1
- package/dist/{chunk-EGWWTIWS.js → chunk-UHVNVZ7L.js} +124 -95
- package/dist/chunk-UHVNVZ7L.js.map +1 -0
- package/dist/{chunk-6J7UGYT5.cjs → chunk-UZJDXFQE.cjs} +4 -4
- package/dist/{chunk-6J7UGYT5.cjs.map → chunk-UZJDXFQE.cjs.map} +1 -1
- package/dist/{chunk-ZBI52NP2.cjs → chunk-VAKZEVDE.cjs} +86 -7
- package/dist/chunk-VAKZEVDE.cjs.map +1 -0
- package/dist/{chunk-P6L74SKG.js → chunk-WUPT5SUN.js} +3 -3
- package/dist/{chunk-P6L74SKG.js.map → chunk-WUPT5SUN.js.map} +1 -1
- package/dist/{chunk-NQ2D2V6O.cjs → chunk-WWIBIUWT.cjs} +36 -36
- package/dist/{chunk-NQ2D2V6O.cjs.map → chunk-WWIBIUWT.cjs.map} +1 -1
- package/dist/components/Autocomplete/index.cjs +4 -3
- package/dist/components/Autocomplete/index.js +3 -2
- package/dist/components/Checkbox/index.cjs +5 -4
- package/dist/components/Checkbox/index.d.cts +9 -1
- package/dist/components/Checkbox/index.d.ts +9 -1
- package/dist/components/Checkbox/index.js +2 -1
- package/dist/components/DateInput/index.cjs +4 -3
- package/dist/components/DateInput/index.js +3 -2
- package/dist/components/Dropdown/index.cjs +9 -8
- package/dist/components/Dropdown/index.js +3 -2
- package/dist/components/Input/index.cjs +16 -3
- package/dist/components/Input/index.d.cts +25 -2
- package/dist/components/Input/index.d.ts +25 -2
- package/dist/components/Input/index.js +2 -1
- package/dist/components/MediaEditor/index.cjs +10 -9
- package/dist/components/MediaEditor/index.js +5 -4
- package/dist/components/PhoneInput/index.cjs +5 -4
- package/dist/components/PhoneInput/index.js +3 -2
- package/dist/components/Radio/index.cjs +5 -4
- package/dist/components/Radio/index.d.cts +9 -1
- package/dist/components/Radio/index.d.ts +9 -1
- package/dist/components/Radio/index.js +2 -1
- package/dist/components/RichTextEditor/index.cjs +7 -6
- package/dist/components/RichTextEditor/index.js +4 -3
- package/dist/components/Select/index.cjs +3 -3
- package/dist/components/Select/index.d.cts +11 -2
- package/dist/components/Select/index.d.ts +11 -2
- package/dist/components/Select/index.js +1 -1
- package/dist/components/SuperChat/index.cjs +7 -6
- package/dist/components/SuperChat/index.cjs.map +1 -1
- package/dist/components/SuperChat/index.js +3 -2
- package/dist/components/SuperChat/index.js.map +1 -1
- package/dist/components/Textarea/index.cjs +3 -3
- package/dist/components/Textarea/index.d.cts +11 -1
- package/dist/components/Textarea/index.d.ts +11 -1
- package/dist/components/Textarea/index.js +1 -1
- package/dist/esheet.cjs +10 -9
- package/dist/esheet.cjs.map +1 -1
- package/dist/esheet.js +7 -6
- package/dist/esheet.js.map +1 -1
- package/dist/index.cjs +566 -378
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -3
- package/dist/index.d.ts +26 -3
- package/dist/index.js +285 -109
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind-preset.cjs +4 -4
- package/dist/tailwind-preset.js +1 -1
- package/package.json +5 -1
- package/dist/chunk-5IDYOJHO.cjs.map +0 -1
- package/dist/chunk-6ECKH4DJ.cjs +0 -147
- package/dist/chunk-6ECKH4DJ.cjs.map +0 -1
- package/dist/chunk-AFGADE3B.js.map +0 -1
- package/dist/chunk-CVZYOMEW.js.map +0 -1
- package/dist/chunk-DLBV42JD.js.map +0 -1
- package/dist/chunk-EGWWTIWS.js.map +0 -1
- package/dist/chunk-KFLDXJEE.js.map +0 -1
- package/dist/chunk-MJFF4AXH.cjs.map +0 -1
- package/dist/chunk-OAHORW4N.cjs.map +0 -1
- package/dist/chunk-QUUBTNMH.js.map +0 -1
- package/dist/chunk-S3MKIDYG.cjs.map +0 -1
- package/dist/chunk-WUNWHOLA.cjs.map +0 -1
- package/dist/chunk-YXCE2HSK.js +0 -124
- package/dist/chunk-YXCE2HSK.js.map +0 -1
- package/dist/chunk-ZBI52NP2.cjs.map +0 -1
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
import { cn } from './chunk-TQONQSJO.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var inputVariants = cva(
|
|
7
|
+
[
|
|
8
|
+
"w-full px-3 py-2",
|
|
9
|
+
"border border-input rounded-lg",
|
|
10
|
+
"bg-background text-foreground",
|
|
11
|
+
"placeholder:text-muted-foreground",
|
|
12
|
+
"transition-colors duration-200",
|
|
13
|
+
"focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
|
|
14
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
15
|
+
],
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
size: {
|
|
19
|
+
sm: "h-8 text-sm",
|
|
20
|
+
md: "h-10 text-base",
|
|
21
|
+
lg: "h-12 text-lg"
|
|
22
|
+
},
|
|
23
|
+
hasError: {
|
|
24
|
+
true: "border-destructive focus:ring-destructive",
|
|
25
|
+
false: ""
|
|
26
|
+
},
|
|
27
|
+
labelVariant: {
|
|
28
|
+
stacked: "",
|
|
29
|
+
floating: "peer placeholder:text-transparent"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
compoundVariants: [
|
|
33
|
+
// Floating labels need extra height and asymmetric padding so both
|
|
34
|
+
// the floated label and the entered text fit inside the field.
|
|
35
|
+
{ labelVariant: "floating", size: "sm", className: "h-11 pt-4 pb-1" },
|
|
36
|
+
{ labelVariant: "floating", size: "md", className: "h-14 pt-5 pb-1.5" },
|
|
37
|
+
{ labelVariant: "floating", size: "lg", className: "h-16 pt-6 pb-2" }
|
|
38
|
+
],
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
size: "md",
|
|
41
|
+
hasError: false,
|
|
42
|
+
labelVariant: "stacked"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
var floatingGroupVariants = cva(
|
|
47
|
+
["relative rounded-lg border border-input bg-background px-3"],
|
|
48
|
+
{
|
|
49
|
+
variants: {
|
|
50
|
+
size: {
|
|
51
|
+
sm: "min-h-11 pt-4 pb-1",
|
|
52
|
+
md: "min-h-14 pt-5 pb-1.5",
|
|
53
|
+
lg: "min-h-16 pt-6 pb-2"
|
|
54
|
+
},
|
|
55
|
+
hasError: {
|
|
56
|
+
true: "border-destructive",
|
|
57
|
+
false: ""
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
defaultVariants: {
|
|
61
|
+
size: "md",
|
|
62
|
+
hasError: false
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
var floatingGroupLabelVariants = cva(
|
|
67
|
+
["absolute start-3 pointer-events-none select-none"],
|
|
68
|
+
{
|
|
69
|
+
variants: {
|
|
70
|
+
size: {
|
|
71
|
+
sm: "top-0.5 text-[0.65rem]",
|
|
72
|
+
md: "top-1 text-xs",
|
|
73
|
+
lg: "top-1.5 text-sm"
|
|
74
|
+
},
|
|
75
|
+
hasError: {
|
|
76
|
+
true: "text-destructive",
|
|
77
|
+
false: "text-muted-foreground"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
defaultVariants: {
|
|
81
|
+
size: "md",
|
|
82
|
+
hasError: false
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
var floatingLabelVariants = cva(
|
|
87
|
+
[
|
|
88
|
+
"absolute start-3 pointer-events-none select-none",
|
|
89
|
+
"transition-all duration-200 ease-out",
|
|
90
|
+
// Rest state: vertically centered, placeholder-sized (input is empty and unfocused).
|
|
91
|
+
"top-1/2 -translate-y-1/2",
|
|
92
|
+
// Floated state: focused, has a value, or was autofilled → shrink and move to the top,
|
|
93
|
+
// staying inside the field.
|
|
94
|
+
"peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:translate-y-0 peer-autofill:translate-y-0"
|
|
95
|
+
],
|
|
96
|
+
{
|
|
97
|
+
variants: {
|
|
98
|
+
size: {
|
|
99
|
+
sm: [
|
|
100
|
+
"text-sm",
|
|
101
|
+
"peer-focus:top-0.5 peer-[:not(:placeholder-shown)]:top-0.5 peer-autofill:top-0.5",
|
|
102
|
+
"peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
|
|
103
|
+
],
|
|
104
|
+
md: [
|
|
105
|
+
"text-base",
|
|
106
|
+
"peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
|
|
107
|
+
"peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
|
|
108
|
+
],
|
|
109
|
+
lg: [
|
|
110
|
+
"text-lg",
|
|
111
|
+
"peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
|
|
112
|
+
"peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
|
|
113
|
+
]
|
|
114
|
+
},
|
|
115
|
+
hasError: {
|
|
116
|
+
true: "text-destructive",
|
|
117
|
+
false: "text-muted-foreground"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
defaultVariants: {
|
|
121
|
+
size: "md",
|
|
122
|
+
hasError: false
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
var Input = React.forwardRef(
|
|
127
|
+
({
|
|
128
|
+
className,
|
|
129
|
+
size,
|
|
130
|
+
hasError,
|
|
131
|
+
error,
|
|
132
|
+
helperText,
|
|
133
|
+
label,
|
|
134
|
+
labelVariant = "stacked",
|
|
135
|
+
hideLabel,
|
|
136
|
+
required,
|
|
137
|
+
disabled,
|
|
138
|
+
id,
|
|
139
|
+
placeholder,
|
|
140
|
+
"aria-describedby": ariaDescribedBy,
|
|
141
|
+
...props
|
|
142
|
+
}, ref) => {
|
|
143
|
+
const generatedId = React.useId();
|
|
144
|
+
const inputId = id || generatedId;
|
|
145
|
+
const errorId = `${inputId}-error`;
|
|
146
|
+
const helperId = `${inputId}-helper`;
|
|
147
|
+
const describedByIds = [
|
|
148
|
+
error ? errorId : null,
|
|
149
|
+
helperText && !error ? helperId : null,
|
|
150
|
+
ariaDescribedBy
|
|
151
|
+
].filter(Boolean).join(" ");
|
|
152
|
+
const isFloating = labelVariant === "floating" && !!label && !hideLabel;
|
|
153
|
+
const requiredMark = required && /* @__PURE__ */ jsx("span", { className: "text-destructive ms-1", "aria-hidden": "true", children: "*" });
|
|
154
|
+
const inputElement = /* @__PURE__ */ jsx(
|
|
155
|
+
"input",
|
|
156
|
+
{
|
|
157
|
+
"data-slot": "input",
|
|
158
|
+
id: inputId,
|
|
159
|
+
ref,
|
|
160
|
+
className: cn(
|
|
161
|
+
inputVariants({
|
|
162
|
+
size,
|
|
163
|
+
hasError: hasError || !!error,
|
|
164
|
+
labelVariant: isFloating ? "floating" : "stacked"
|
|
165
|
+
}),
|
|
166
|
+
className
|
|
167
|
+
),
|
|
168
|
+
"aria-invalid": hasError || !!error,
|
|
169
|
+
"aria-describedby": describedByIds || void 0,
|
|
170
|
+
required,
|
|
171
|
+
disabled,
|
|
172
|
+
placeholder: isFloating ? " " : placeholder,
|
|
173
|
+
...props
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
return /* @__PURE__ */ jsxs(
|
|
177
|
+
"div",
|
|
178
|
+
{
|
|
179
|
+
"data-slot": "input-wrapper",
|
|
180
|
+
className: cn("flex flex-col gap-1.5", disabled && "opacity-50"),
|
|
181
|
+
children: [
|
|
182
|
+
label && !isFloating && /* @__PURE__ */ jsxs(
|
|
183
|
+
"label",
|
|
184
|
+
{
|
|
185
|
+
"data-slot": "input-label",
|
|
186
|
+
htmlFor: inputId,
|
|
187
|
+
className: cn(
|
|
188
|
+
"text-foreground text-sm font-medium",
|
|
189
|
+
hideLabel && "sr-only"
|
|
190
|
+
),
|
|
191
|
+
children: [
|
|
192
|
+
label,
|
|
193
|
+
requiredMark
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
),
|
|
197
|
+
isFloating ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
198
|
+
inputElement,
|
|
199
|
+
/* @__PURE__ */ jsxs(
|
|
200
|
+
"label",
|
|
201
|
+
{
|
|
202
|
+
"data-slot": "input-label",
|
|
203
|
+
htmlFor: inputId,
|
|
204
|
+
className: floatingLabelVariants({
|
|
205
|
+
size,
|
|
206
|
+
hasError: hasError || !!error
|
|
207
|
+
}),
|
|
208
|
+
children: [
|
|
209
|
+
label,
|
|
210
|
+
requiredMark
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
)
|
|
214
|
+
] }) : inputElement,
|
|
215
|
+
error && /* @__PURE__ */ jsx(
|
|
216
|
+
"p",
|
|
217
|
+
{
|
|
218
|
+
id: errorId,
|
|
219
|
+
"data-slot": "input-error",
|
|
220
|
+
className: "text-destructive-700 dark:text-destructive-400 text-sm",
|
|
221
|
+
role: "alert",
|
|
222
|
+
children: error
|
|
223
|
+
}
|
|
224
|
+
),
|
|
225
|
+
helperText && !error && /* @__PURE__ */ jsx(
|
|
226
|
+
"p",
|
|
227
|
+
{
|
|
228
|
+
id: helperId,
|
|
229
|
+
"data-slot": "input-helper",
|
|
230
|
+
className: "text-muted-foreground text-sm",
|
|
231
|
+
children: helperText
|
|
232
|
+
}
|
|
233
|
+
)
|
|
234
|
+
]
|
|
235
|
+
}
|
|
236
|
+
);
|
|
237
|
+
}
|
|
238
|
+
);
|
|
239
|
+
Input.displayName = "Input";
|
|
240
|
+
|
|
241
|
+
export { Input, floatingGroupLabelVariants, floatingGroupVariants, floatingLabelVariants, inputVariants };
|
|
242
|
+
//# sourceMappingURL=chunk-FXTNCCD2.js.map
|
|
243
|
+
//# sourceMappingURL=chunk-FXTNCCD2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Input/Input.tsx"],"names":[],"mappings":"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","file":"chunk-FXTNCCD2.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst inputVariants = cva(\n [\n 'w-full px-3 py-2',\n 'border border-input rounded-lg',\n 'bg-background text-foreground',\n 'placeholder:text-muted-foreground',\n 'transition-colors duration-200',\n 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n ],\n {\n variants: {\n size: {\n sm: 'h-8 text-sm',\n md: 'h-10 text-base',\n lg: 'h-12 text-lg',\n },\n hasError: {\n true: 'border-destructive focus:ring-destructive',\n false: '',\n },\n labelVariant: {\n stacked: '',\n floating: 'peer placeholder:text-transparent',\n },\n },\n compoundVariants: [\n // Floating labels need extra height and asymmetric padding so both\n // the floated label and the entered text fit inside the field.\n { labelVariant: 'floating', size: 'sm', className: 'h-11 pt-4 pb-1' },\n { labelVariant: 'floating', size: 'md', className: 'h-14 pt-5 pb-1.5' },\n { labelVariant: 'floating', size: 'lg', className: 'h-16 pt-6 pb-2' },\n ],\n defaultVariants: {\n size: 'md',\n hasError: false,\n labelVariant: 'stacked',\n },\n }\n);\n\n// Bordered field box for group controls (RadioGroup / CheckboxGroup) rendered\n// with labelVariant=\"floating\". Mirrors the floating input's box metrics so\n// mixed forms stay vertically aligned.\nconst floatingGroupVariants = cva(\n ['relative rounded-lg border border-input bg-background px-3'],\n {\n variants: {\n size: {\n sm: 'min-h-11 pt-4 pb-1',\n md: 'min-h-14 pt-5 pb-1.5',\n lg: 'min-h-16 pt-6 pb-2',\n },\n hasError: {\n true: 'border-destructive',\n false: '',\n },\n },\n defaultVariants: {\n size: 'md',\n hasError: false,\n },\n }\n);\n\n// Group label fixed in the floated position (groups have no empty state to\n// float from, so the label never animates). Metrics match the floated state\n// of floatingLabelVariants.\nconst floatingGroupLabelVariants = cva(\n ['absolute start-3 pointer-events-none select-none'],\n {\n variants: {\n size: {\n sm: 'top-0.5 text-[0.65rem]',\n md: 'top-1 text-xs',\n lg: 'top-1.5 text-sm',\n },\n hasError: {\n true: 'text-destructive',\n false: 'text-muted-foreground',\n },\n },\n defaultVariants: {\n size: 'md',\n hasError: false,\n },\n }\n);\n\nconst floatingLabelVariants = cva(\n [\n 'absolute start-3 pointer-events-none select-none',\n 'transition-all duration-200 ease-out',\n // Rest state: vertically centered, placeholder-sized (input is empty and unfocused).\n 'top-1/2 -translate-y-1/2',\n // Floated state: focused, has a value, or was autofilled → shrink and move to the top,\n // staying inside the field.\n 'peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:translate-y-0 peer-autofill:translate-y-0',\n ],\n {\n variants: {\n size: {\n sm: [\n 'text-sm',\n 'peer-focus:top-0.5 peer-[:not(:placeholder-shown)]:top-0.5 peer-autofill:top-0.5',\n 'peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]',\n ],\n md: [\n 'text-base',\n 'peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1',\n 'peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs',\n ],\n lg: [\n 'text-lg',\n 'peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5',\n 'peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm',\n ],\n },\n hasError: {\n true: 'text-destructive',\n false: 'text-muted-foreground',\n },\n },\n defaultVariants: {\n size: 'md',\n hasError: false,\n },\n }\n);\n\nexport interface InputProps\n extends\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n Omit<VariantProps<typeof inputVariants>, 'labelVariant'> {\n /** Error message to display below the input */\n error?: string;\n /** Helper text to display below the input */\n helperText?: string;\n /** Label for the input */\n label?: string;\n /**\n * How the label is rendered.\n * - `stacked` (default): label above the input.\n * - `floating`: label rests inside the input like a placeholder and floats\n * to the top of the field (staying inside it) when focused or filled.\n * Ignores `placeholder`; when `hideLabel` is set, falls back to a\n * visually-hidden stacked label.\n */\n labelVariant?: 'stacked' | 'floating';\n /** Whether the label should be visually hidden (still accessible) */\n hideLabel?: boolean;\n /** Whether the input is required */\n required?: boolean;\n}\n\n/**\n * A styled input component with support for labels, errors, and helper text.\n *\n * @example\n * ```tsx\n * <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n * <Input label=\"Password\" type=\"password\" error=\"Password is required\" hasError />\n * <Input label=\"Account number\" labelVariant=\"floating\" />\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size,\n hasError,\n error,\n helperText,\n label,\n labelVariant = 'stacked',\n hideLabel,\n required,\n disabled,\n id,\n placeholder,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref\n ) => {\n const generatedId = React.useId();\n const inputId = id || generatedId;\n const errorId = `${inputId}-error`;\n const helperId = `${inputId}-helper`;\n\n const describedByIds = [\n error ? errorId : null,\n helperText && !error ? helperId : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(' ');\n\n const isFloating = labelVariant === 'floating' && !!label && !hideLabel;\n\n const requiredMark = required && (\n <span className=\"text-destructive ms-1\" aria-hidden=\"true\">\n *\n </span>\n );\n\n const inputElement = (\n <input\n data-slot=\"input\"\n id={inputId}\n ref={ref}\n className={cn(\n inputVariants({\n size,\n hasError: hasError || !!error,\n labelVariant: isFloating ? 'floating' : 'stacked',\n }),\n className\n )}\n aria-invalid={hasError || !!error}\n aria-describedby={describedByIds || undefined}\n required={required}\n disabled={disabled}\n // A single-space placeholder keeps :placeholder-shown reliable so the\n // label can float via CSS alone; a user placeholder would clash with\n // the resting label.\n placeholder={isFloating ? ' ' : placeholder}\n {...props}\n />\n );\n\n return (\n <div\n data-slot=\"input-wrapper\"\n className={cn('flex flex-col gap-1.5', disabled && 'opacity-50')}\n >\n {label && !isFloating && (\n <label\n data-slot=\"input-label\"\n htmlFor={inputId}\n className={cn(\n 'text-foreground text-sm font-medium',\n hideLabel && 'sr-only'\n )}\n >\n {label}\n {requiredMark}\n </label>\n )}\n {isFloating ? (\n <div className=\"relative\">\n {inputElement}\n <label\n data-slot=\"input-label\"\n htmlFor={inputId}\n className={floatingLabelVariants({\n size,\n hasError: hasError || !!error,\n })}\n >\n {label}\n {requiredMark}\n </label>\n </div>\n ) : (\n inputElement\n )}\n {error && (\n <p\n id={errorId}\n data-slot=\"input-error\"\n className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n role=\"alert\"\n >\n {error}\n </p>\n )}\n {helperText && !error && (\n <p\n id={helperId}\n data-slot=\"input-helper\"\n className=\"text-muted-foreground text-sm\"\n >\n {helperText}\n </p>\n )}\n </div>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport {\n Input,\n inputVariants,\n floatingLabelVariants,\n floatingGroupVariants,\n floatingGroupLabelVariants,\n};\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var chunkF7CQ5RO7_cjs = require('./chunk-F7CQ5RO7.cjs');
|
|
3
4
|
var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
|
|
4
5
|
var React = require('react');
|
|
5
6
|
var classVarianceAuthority = require('class-variance-authority');
|
|
@@ -63,6 +64,7 @@ function RadioGroup({
|
|
|
63
64
|
defaultValue = "",
|
|
64
65
|
onValueChange,
|
|
65
66
|
label,
|
|
67
|
+
labelVariant = "stacked",
|
|
66
68
|
description,
|
|
67
69
|
error,
|
|
68
70
|
disabled = false,
|
|
@@ -88,6 +90,18 @@ function RadioGroup({
|
|
|
88
90
|
},
|
|
89
91
|
[isControlled, onValueChange]
|
|
90
92
|
);
|
|
93
|
+
const isFloating = labelVariant === "floating" && !!label;
|
|
94
|
+
const itemsElement = /* @__PURE__ */ jsxRuntime.jsx(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
"data-slot": "radio-group-items",
|
|
98
|
+
className: chunkS5RVSXDV_cjs.cn(
|
|
99
|
+
"flex gap-4",
|
|
100
|
+
orientation === "vertical" && "flex-col gap-3"
|
|
101
|
+
),
|
|
102
|
+
children
|
|
103
|
+
}
|
|
104
|
+
);
|
|
91
105
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
92
106
|
RadioGroupContext.Provider,
|
|
93
107
|
{
|
|
@@ -105,14 +119,40 @@ function RadioGroup({
|
|
|
105
119
|
{
|
|
106
120
|
"data-slot": "radio-group-legend",
|
|
107
121
|
className: chunkS5RVSXDV_cjs.cn(
|
|
108
|
-
|
|
122
|
+
// Legends are excluded from the fieldset's flex layout, so gap-*
|
|
123
|
+
// never applies to them; use an explicit margin matching the
|
|
124
|
+
// stacked Input label's 6px gap.
|
|
125
|
+
"text-foreground mb-1.5 font-medium",
|
|
109
126
|
size === "sm" && "text-xs",
|
|
110
127
|
size === "md" && "text-sm",
|
|
111
|
-
size === "lg" && "text-base"
|
|
128
|
+
size === "lg" && "text-base",
|
|
129
|
+
isFloating && "sr-only"
|
|
112
130
|
),
|
|
113
131
|
children: label
|
|
114
132
|
}
|
|
115
133
|
),
|
|
134
|
+
isFloating ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
135
|
+
"div",
|
|
136
|
+
{
|
|
137
|
+
"data-slot": "radio-group-field",
|
|
138
|
+
className: chunkF7CQ5RO7_cjs.floatingGroupVariants({ size, hasError: !!error }),
|
|
139
|
+
children: [
|
|
140
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
141
|
+
"span",
|
|
142
|
+
{
|
|
143
|
+
"aria-hidden": "true",
|
|
144
|
+
"data-slot": "radio-group-floating-label",
|
|
145
|
+
className: chunkF7CQ5RO7_cjs.floatingGroupLabelVariants({
|
|
146
|
+
size,
|
|
147
|
+
hasError: !!error
|
|
148
|
+
}),
|
|
149
|
+
children: label
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
itemsElement
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
) : null,
|
|
116
156
|
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
117
157
|
"p",
|
|
118
158
|
{
|
|
@@ -127,17 +167,7 @@ function RadioGroup({
|
|
|
127
167
|
children: description
|
|
128
168
|
}
|
|
129
169
|
),
|
|
130
|
-
|
|
131
|
-
"div",
|
|
132
|
-
{
|
|
133
|
-
"data-slot": "radio-group-items",
|
|
134
|
-
className: chunkS5RVSXDV_cjs.cn(
|
|
135
|
-
"flex gap-4",
|
|
136
|
-
orientation === "vertical" && "flex-col gap-3"
|
|
137
|
-
),
|
|
138
|
-
children
|
|
139
|
-
}
|
|
140
|
-
),
|
|
170
|
+
!isFloating && itemsElement,
|
|
141
171
|
error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
142
172
|
"p",
|
|
143
173
|
{
|
|
@@ -275,5 +305,5 @@ Radio.displayName = "Radio";
|
|
|
275
305
|
exports.Radio = Radio;
|
|
276
306
|
exports.RadioGroup = RadioGroup;
|
|
277
307
|
exports.radioVariants = radioVariants;
|
|
278
|
-
//# sourceMappingURL=chunk-
|
|
279
|
-
//# sourceMappingURL=chunk-
|
|
308
|
+
//# sourceMappingURL=chunk-G6GJXVQC.cjs.map
|
|
309
|
+
//# sourceMappingURL=chunk-G6GJXVQC.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Radio/Radio.tsx"],"names":["React","cva","jsx","cn","jsxs","floatingGroupVariants","floatingGroupLabelVariants"],"mappings":"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","file":"chunk-G6GJXVQC.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n floatingGroupVariants,\n floatingGroupLabelVariants,\n} from '../Input/Input';\n\n// ============================================================================\n// Radio Group Context\n// ============================================================================\n\ninterface RadioGroupContextValue {\n name: string;\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n size?: 'sm' | 'md' | 'lg' | null;\n}\n\nconst RadioGroupContext = React.createContext<\n RadioGroupContextValue | undefined\n>(undefined);\n\nfunction useRadioGroupContext() {\n const context = React.useContext(RadioGroupContext);\n if (!context) {\n throw new Error('Radio must be used within a RadioGroup');\n }\n return context;\n}\n\n// ============================================================================\n// Radio Variants\n// ============================================================================\n\nconst radioVariants = cva(\n [\n 'shrink-0 appearance-none',\n 'border-2 border-input rounded-full',\n 'bg-background',\n 'transition-all duration-150',\n 'cursor-pointer',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'checked:border-primary-500 dark:checked:border-primary-800',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-5 w-5',\n lg: 'h-6 w-6',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\n// ============================================================================\n// Radio Group\n// ============================================================================\n\nexport interface RadioGroupProps {\n /** Group name (required for native form behavior) */\n name?: string;\n /** Controlled value */\n value?: string;\n /** Default value (uncontrolled) */\n defaultValue?: string;\n /** Callback when value changes */\n onValueChange?: (value: string) => void;\n /** Group label */\n label?: string;\n /**\n * How the group label is rendered.\n * - `stacked` (default): label above the options.\n * - `floating`: renders the group as a bordered field matching floating\n * inputs, with the label fixed in the floated position so mixed forms\n * stay vertically aligned.\n */\n labelVariant?: 'stacked' | 'floating';\n /** Description for the group */\n description?: string;\n /** Error message */\n error?: string;\n /** Whether all radios are disabled */\n disabled?: boolean;\n /** Size of all radios */\n size?: 'sm' | 'md' | 'lg';\n /** Orientation of radio items */\n orientation?: 'horizontal' | 'vertical';\n /** Children radio items */\n children: React.ReactNode;\n /** Additional class name */\n className?: string;\n}\n\n/**\n * A radio group component for selecting one option from a set.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Select a plan\" onValueChange={setPlan}>\n * <Radio value=\"free\" label=\"Free\" />\n * <Radio value=\"pro\" label=\"Pro\" />\n * <Radio value=\"enterprise\" label=\"Enterprise\" />\n * </RadioGroup>\n * ```\n */\nfunction RadioGroup({\n name,\n value: controlledValue,\n defaultValue = '',\n onValueChange,\n label,\n labelVariant = 'stacked',\n description,\n error,\n disabled = false,\n size = 'md',\n orientation = 'vertical',\n children,\n className,\n}: RadioGroupProps) {\n const generatedName = React.useId();\n const groupName = name || generatedName;\n const groupId = React.useId();\n const descriptionId = `${groupId}-description`;\n const errorId = `${groupId}-error`;\n\n const [uncontrolledValue, setUncontrolledValue] =\n React.useState(defaultValue);\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : uncontrolledValue;\n\n const handleChange = React.useCallback(\n (newValue: string) => {\n if (!isControlled) {\n setUncontrolledValue(newValue);\n }\n onValueChange?.(newValue);\n },\n [isControlled, onValueChange]\n );\n\n const isFloating = labelVariant === 'floating' && !!label;\n\n const itemsElement = (\n <div\n data-slot=\"radio-group-items\"\n className={cn(\n 'flex gap-4',\n orientation === 'vertical' && 'flex-col gap-3'\n )}\n >\n {children}\n </div>\n );\n\n return (\n <RadioGroupContext.Provider\n value={{ name: groupName, value, onChange: handleChange, disabled, size }}\n >\n <fieldset\n data-slot=\"radio-group\"\n role=\"radiogroup\"\n className={cn('flex flex-col gap-2', className)}\n aria-describedby={\n [description ? descriptionId : null, error ? errorId : null]\n .filter(Boolean)\n .join(' ') || undefined\n }\n >\n {label && (\n <legend\n data-slot=\"radio-group-legend\"\n className={cn(\n // Legends are excluded from the fieldset's flex layout, so gap-*\n // never applies to them; use an explicit margin matching the\n // stacked Input label's 6px gap.\n 'text-foreground mb-1.5 font-medium',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n size === 'lg' && 'text-base',\n isFloating && 'sr-only'\n )}\n >\n {label}\n </legend>\n )}\n {isFloating ? (\n <div\n data-slot=\"radio-group-field\"\n className={floatingGroupVariants({ size, hasError: !!error })}\n >\n <span\n aria-hidden=\"true\"\n data-slot=\"radio-group-floating-label\"\n className={floatingGroupLabelVariants({\n size,\n hasError: !!error,\n })}\n >\n {label}\n </span>\n {itemsElement}\n </div>\n ) : null}\n {description && (\n <p\n id={descriptionId}\n data-slot=\"radio-group-description\"\n className={cn(\n 'text-muted-foreground',\n size === 'sm' && 'text-[10px]',\n size === 'md' && 'text-xs',\n size === 'lg' && 'text-sm'\n )}\n >\n {description}\n </p>\n )}\n {!isFloating && itemsElement}\n {error && (\n <p\n id={errorId}\n data-slot=\"radio-group-error\"\n className={cn(\n 'text-destructive',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n size === 'lg' && 'text-base'\n )}\n role=\"alert\"\n >\n {error}\n </p>\n )}\n </fieldset>\n </RadioGroupContext.Provider>\n );\n}\n\nRadioGroup.displayName = 'RadioGroup';\n\n// ============================================================================\n// Radio Item\n// ============================================================================\n\nexport interface RadioProps\n extends\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,\n VariantProps<typeof radioVariants> {\n /** Value for this radio option */\n value: string;\n /** Label for the radio */\n label?: string;\n /** Description text below the label */\n description?: string;\n /** Position of the label */\n labelPosition?: 'left' | 'right';\n}\n\n/**\n * An individual radio item within a RadioGroup.\n *\n * @example\n * ```tsx\n * <Radio value=\"option1\" label=\"Option 1\" />\n * <Radio value=\"option2\" label=\"Option 2\" description=\"Additional details\" />\n * ```\n */\nconst Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className,\n size: propSize,\n value,\n label,\n description,\n labelPosition = 'right',\n disabled: propDisabled,\n id,\n ...props\n },\n ref\n ) => {\n const context = useRadioGroupContext();\n const generatedId = React.useId();\n const radioId = id || generatedId;\n const descriptionId = `${radioId}-description`;\n\n const isChecked = context.value === value;\n const isDisabled = propDisabled || context.disabled;\n const size = propSize || context.size;\n\n const handleChange = React.useCallback(() => {\n if (!isDisabled) {\n context.onChange(value);\n }\n }, [isDisabled, context, value]);\n\n const radioElement = (\n <span\n data-slot=\"radio-indicator\"\n className=\"relative inline-flex items-center justify-center\"\n >\n <input\n ref={ref}\n data-slot=\"radio\"\n id={radioId}\n type=\"radio\"\n name={context.name}\n value={value}\n checked={isChecked}\n disabled={isDisabled}\n onChange={handleChange}\n aria-describedby={description ? descriptionId : undefined}\n className={cn(radioVariants({ size }), className)}\n {...props}\n />\n {/* Custom dot indicator */}\n <span\n data-slot=\"radio-dot\"\n className={cn(\n 'bg-primary-800 dark:bg-primary-500 pointer-events-none absolute rounded-full transition-transform',\n size === 'sm' && 'h-2 w-2',\n size === 'md' && 'h-2.5 w-2.5',\n size === 'lg' && 'h-3 w-3',\n isChecked ? 'scale-100' : 'scale-0'\n )}\n />\n </span>\n );\n\n const labelElement = label && (\n <div className=\"flex flex-col gap-0.5\">\n <label\n htmlFor={radioId}\n data-slot=\"radio-label\"\n className={cn(\n 'text-foreground cursor-pointer font-medium select-none',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n size === 'lg' && 'text-base',\n isDisabled && 'cursor-not-allowed opacity-50'\n )}\n >\n {label}\n </label>\n {description && (\n <p\n id={descriptionId}\n data-slot=\"radio-description\"\n className={cn(\n 'text-muted-foreground',\n size === 'sm' && 'text-[10px]',\n size === 'md' && 'text-xs',\n size === 'lg' && 'text-sm'\n )}\n >\n {description}\n </p>\n )}\n </div>\n );\n\n return (\n <div\n data-slot=\"radio-wrapper\"\n className={cn(\n 'flex items-start gap-3',\n labelPosition === 'left' && 'flex-row-reverse'\n )}\n >\n {radioElement}\n {labelElement}\n </div>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n\nexport { RadioGroup, Radio, radioVariants };\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from './chunk-TQONQSJO.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
|
-
import {
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var textareaVariants = cva(
|
|
7
7
|
[
|
|
@@ -30,12 +30,71 @@ var textareaVariants = cva(
|
|
|
30
30
|
vertical: "resize-y",
|
|
31
31
|
horizontal: "resize-x",
|
|
32
32
|
both: "resize"
|
|
33
|
+
},
|
|
34
|
+
labelVariant: {
|
|
35
|
+
stacked: "",
|
|
36
|
+
floating: "peer placeholder:text-transparent"
|
|
33
37
|
}
|
|
34
38
|
},
|
|
39
|
+
compoundVariants: [
|
|
40
|
+
// Floating labels reserve top padding so entered text always starts
|
|
41
|
+
// below the floated label, plus a little extra min-height.
|
|
42
|
+
{
|
|
43
|
+
labelVariant: "floating",
|
|
44
|
+
size: "sm",
|
|
45
|
+
className: "pt-5 min-h-[76px]"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
labelVariant: "floating",
|
|
49
|
+
size: "md",
|
|
50
|
+
className: "pt-6 min-h-[96px]"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
labelVariant: "floating",
|
|
54
|
+
size: "lg",
|
|
55
|
+
className: "pt-7 min-h-[120px]"
|
|
56
|
+
}
|
|
57
|
+
],
|
|
35
58
|
defaultVariants: {
|
|
36
59
|
size: "md",
|
|
37
60
|
hasError: false,
|
|
38
|
-
resize: "vertical"
|
|
61
|
+
resize: "vertical",
|
|
62
|
+
labelVariant: "stacked"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
var floatingLabelVariants = cva(
|
|
67
|
+
[
|
|
68
|
+
"absolute start-3 pointer-events-none select-none",
|
|
69
|
+
"transition-all duration-200 ease-out"
|
|
70
|
+
],
|
|
71
|
+
{
|
|
72
|
+
variants: {
|
|
73
|
+
size: {
|
|
74
|
+
sm: [
|
|
75
|
+
"text-sm top-3",
|
|
76
|
+
"peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
|
|
77
|
+
"peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
|
|
78
|
+
],
|
|
79
|
+
md: [
|
|
80
|
+
"text-base top-4",
|
|
81
|
+
"peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
|
|
82
|
+
"peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
|
|
83
|
+
],
|
|
84
|
+
lg: [
|
|
85
|
+
"text-lg top-5",
|
|
86
|
+
"peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2",
|
|
87
|
+
"peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
hasError: {
|
|
91
|
+
true: "text-destructive",
|
|
92
|
+
false: "text-muted-foreground"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
defaultVariants: {
|
|
96
|
+
size: "md",
|
|
97
|
+
hasError: false
|
|
39
98
|
}
|
|
40
99
|
}
|
|
41
100
|
);
|
|
@@ -46,6 +105,7 @@ var Textarea = React.forwardRef(
|
|
|
46
105
|
hasError,
|
|
47
106
|
resize,
|
|
48
107
|
label,
|
|
108
|
+
labelVariant = "stacked",
|
|
49
109
|
hideLabel,
|
|
50
110
|
error,
|
|
51
111
|
helperText,
|
|
@@ -56,6 +116,7 @@ var Textarea = React.forwardRef(
|
|
|
56
116
|
value,
|
|
57
117
|
defaultValue,
|
|
58
118
|
onChange,
|
|
119
|
+
placeholder,
|
|
59
120
|
"aria-describedby": ariaDescribedBy,
|
|
60
121
|
...props
|
|
61
122
|
}, ref) => {
|
|
@@ -97,8 +158,34 @@ var Textarea = React.forwardRef(
|
|
|
97
158
|
showCount ? countId : null,
|
|
98
159
|
ariaDescribedBy
|
|
99
160
|
].filter(Boolean).join(" ");
|
|
161
|
+
const isFloating = labelVariant === "floating" && !!label && !hideLabel;
|
|
162
|
+
const textareaElement = /* @__PURE__ */ jsx(
|
|
163
|
+
"textarea",
|
|
164
|
+
{
|
|
165
|
+
"data-slot": "textarea",
|
|
166
|
+
ref: internalRef,
|
|
167
|
+
id: textareaId,
|
|
168
|
+
value,
|
|
169
|
+
defaultValue: value === void 0 ? defaultValue : void 0,
|
|
170
|
+
onChange: handleChange,
|
|
171
|
+
maxLength,
|
|
172
|
+
"aria-invalid": hasError || !!error,
|
|
173
|
+
"aria-describedby": describedByIds || void 0,
|
|
174
|
+
placeholder: isFloating ? " " : placeholder,
|
|
175
|
+
className: cn(
|
|
176
|
+
textareaVariants({
|
|
177
|
+
size,
|
|
178
|
+
hasError: hasError || !!error,
|
|
179
|
+
resize: autoResize ? "none" : resize,
|
|
180
|
+
labelVariant: isFloating ? "floating" : "stacked"
|
|
181
|
+
}),
|
|
182
|
+
className
|
|
183
|
+
),
|
|
184
|
+
...props
|
|
185
|
+
}
|
|
186
|
+
);
|
|
100
187
|
return /* @__PURE__ */ jsxs("div", { "data-slot": "textarea-wrapper", className: "flex flex-col gap-1.5", children: [
|
|
101
|
-
label && /* @__PURE__ */ jsx(
|
|
188
|
+
label && !isFloating && /* @__PURE__ */ jsx(
|
|
102
189
|
"label",
|
|
103
190
|
{
|
|
104
191
|
"data-slot": "textarea-label",
|
|
@@ -110,29 +197,21 @@ var Textarea = React.forwardRef(
|
|
|
110
197
|
children: label
|
|
111
198
|
}
|
|
112
199
|
),
|
|
113
|
-
/* @__PURE__ */
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
"
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
onChange: handleChange,
|
|
122
|
-
maxLength,
|
|
123
|
-
"aria-invalid": hasError || !!error,
|
|
124
|
-
"aria-describedby": describedByIds || void 0,
|
|
125
|
-
className: cn(
|
|
126
|
-
textareaVariants({
|
|
200
|
+
isFloating ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
201
|
+
textareaElement,
|
|
202
|
+
/* @__PURE__ */ jsx(
|
|
203
|
+
"label",
|
|
204
|
+
{
|
|
205
|
+
"data-slot": "textarea-label",
|
|
206
|
+
htmlFor: textareaId,
|
|
207
|
+
className: floatingLabelVariants({
|
|
127
208
|
size,
|
|
128
|
-
hasError: hasError || !!error
|
|
129
|
-
resize: autoResize ? "none" : resize
|
|
209
|
+
hasError: hasError || !!error
|
|
130
210
|
}),
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
),
|
|
211
|
+
children: label
|
|
212
|
+
}
|
|
213
|
+
)
|
|
214
|
+
] }) : textareaElement,
|
|
136
215
|
/* @__PURE__ */ jsxs(
|
|
137
216
|
"div",
|
|
138
217
|
{
|
|
@@ -184,5 +263,5 @@ var Textarea = React.forwardRef(
|
|
|
184
263
|
Textarea.displayName = "Textarea";
|
|
185
264
|
|
|
186
265
|
export { Textarea, textareaVariants };
|
|
187
|
-
//# sourceMappingURL=chunk-
|
|
188
|
-
//# sourceMappingURL=chunk-
|
|
266
|
+
//# sourceMappingURL=chunk-GP5CRU2I.js.map
|
|
267
|
+
//# sourceMappingURL=chunk-GP5CRU2I.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"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","file":"chunk-GP5CRU2I.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst textareaVariants = cva(\n [\n 'w-full px-3 py-2',\n 'border border-input rounded-lg',\n 'bg-background text-foreground',\n 'placeholder:text-muted-foreground',\n 'transition-colors duration-200',\n 'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'resize-y',\n ],\n {\n variants: {\n size: {\n sm: 'text-sm min-h-[60px]',\n md: 'text-base min-h-[80px]',\n lg: 'text-lg min-h-[100px]',\n },\n hasError: {\n true: 'border-destructive focus:ring-destructive',\n false: '',\n },\n resize: {\n none: 'resize-none',\n vertical: 'resize-y',\n horizontal: 'resize-x',\n both: 'resize',\n },\n labelVariant: {\n stacked: '',\n floating: 'peer placeholder:text-transparent',\n },\n },\n compoundVariants: [\n // Floating labels reserve top padding so entered text always starts\n // below the floated label, plus a little extra min-height.\n {\n labelVariant: 'floating',\n size: 'sm',\n className: 'pt-5 min-h-[76px]',\n },\n {\n labelVariant: 'floating',\n size: 'md',\n className: 'pt-6 min-h-[96px]',\n },\n {\n labelVariant: 'floating',\n size: 'lg',\n className: 'pt-7 min-h-[120px]',\n },\n ],\n defaultVariants: {\n size: 'md',\n hasError: false,\n resize: 'vertical',\n labelVariant: 'stacked',\n },\n }\n);\n\nconst floatingLabelVariants = cva(\n [\n 'absolute start-3 pointer-events-none select-none',\n 'transition-all duration-200 ease-out',\n ],\n {\n variants: {\n size: {\n sm: [\n 'text-sm top-3',\n 'peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1',\n 'peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]',\n ],\n md: [\n 'text-base top-4',\n 'peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5',\n 'peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs',\n ],\n lg: [\n 'text-lg top-5',\n 'peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2',\n 'peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm',\n ],\n },\n hasError: {\n true: 'text-destructive',\n false: 'text-muted-foreground',\n },\n },\n defaultVariants: {\n size: 'md',\n hasError: false,\n },\n }\n);\n\nexport interface TextareaProps\n extends\n Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n Omit<VariantProps<typeof textareaVariants>, 'labelVariant'> {\n /** Label for the textarea */\n label?: string;\n /**\n * How the label is rendered.\n * - `stacked` (default): label above the textarea.\n * - `floating`: label rests inside the textarea like a placeholder and\n * floats to the top (staying inside it) when focused or filled.\n * Ignores `placeholder`; when `hideLabel` is set, falls back to a\n * visually-hidden stacked label.\n */\n labelVariant?: 'stacked' | 'floating';\n /** Whether the label should be visually hidden */\n hideLabel?: boolean;\n /** Error message to display */\n error?: string;\n /** Helper text to display */\n helperText?: string;\n /** Maximum character count */\n maxLength?: number;\n /** Show character count */\n showCount?: boolean;\n /** Auto-resize based on content */\n autoResize?: boolean;\n}\n\n/**\n * A multi-line text input component with character count and auto-resize.\n *\n * @example\n * ```tsx\n * <Textarea label=\"Description\" placeholder=\"Enter a description...\" />\n * <Textarea\n * label=\"Bio\"\n * maxLength={280}\n * showCount\n * helperText=\"Tell us about yourself\"\n * />\n * ```\n */\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n (\n {\n className,\n size,\n hasError,\n resize,\n label,\n labelVariant = 'stacked',\n hideLabel,\n error,\n helperText,\n maxLength,\n showCount = false,\n autoResize = false,\n id,\n value,\n defaultValue,\n onChange,\n placeholder,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref\n ) => {\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n const [internalValue, setInternalValue] = React.useState(\n (defaultValue as string) || ''\n );\n\n const generatedId = React.useId();\n const textareaId = id || generatedId;\n const errorId = `${textareaId}-error`;\n const helperId = `${textareaId}-helper`;\n const countId = `${textareaId}-count`;\n\n // Combine refs\n React.useImperativeHandle(ref, () => internalRef.current!);\n\n // Get current value\n const currentValue = value !== undefined ? String(value) : internalValue;\n const characterCount = currentValue.length;\n\n // Auto-resize logic\n const adjustHeight = React.useCallback(() => {\n const textarea = internalRef.current;\n if (textarea && autoResize) {\n textarea.style.height = 'auto';\n textarea.style.height = `${textarea.scrollHeight}px`;\n }\n }, [autoResize]);\n\n React.useEffect(() => {\n adjustHeight();\n }, [currentValue, adjustHeight]);\n\n // Handle change\n const handleChange = React.useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (value === undefined) {\n setInternalValue(e.target.value);\n }\n onChange?.(e);\n adjustHeight();\n },\n [value, onChange, adjustHeight]\n );\n\n // Build aria-describedby\n const describedByIds = [\n error ? errorId : null,\n helperText && !error ? helperId : null,\n showCount ? countId : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(' ');\n\n const isFloating = labelVariant === 'floating' && !!label && !hideLabel;\n\n const textareaElement = (\n <textarea\n data-slot=\"textarea\"\n ref={internalRef}\n id={textareaId}\n value={value}\n defaultValue={value === undefined ? defaultValue : undefined}\n onChange={handleChange}\n maxLength={maxLength}\n aria-invalid={hasError || !!error}\n aria-describedby={describedByIds || undefined}\n // A single-space placeholder keeps :placeholder-shown reliable so the\n // label can float via CSS alone.\n placeholder={isFloating ? ' ' : placeholder}\n className={cn(\n textareaVariants({\n size,\n hasError: hasError || !!error,\n resize: autoResize ? 'none' : resize,\n labelVariant: isFloating ? 'floating' : 'stacked',\n }),\n className\n )}\n {...props}\n />\n );\n\n return (\n <div data-slot=\"textarea-wrapper\" className=\"flex flex-col gap-1.5\">\n {label && !isFloating && (\n <label\n data-slot=\"textarea-label\"\n htmlFor={textareaId}\n className={cn(\n 'text-foreground text-sm font-medium',\n hideLabel && 'sr-only'\n )}\n >\n {label}\n </label>\n )}\n {isFloating ? (\n <div className=\"relative\">\n {textareaElement}\n <label\n data-slot=\"textarea-label\"\n htmlFor={textareaId}\n className={floatingLabelVariants({\n size,\n hasError: hasError || !!error,\n })}\n >\n {label}\n </label>\n </div>\n ) : (\n textareaElement\n )}\n <div\n data-slot=\"textarea-footer\"\n className=\"flex items-center justify-between gap-2\"\n >\n <div className=\"flex-1\">\n {error && (\n <p\n id={errorId}\n data-slot=\"textarea-error\"\n className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n role=\"alert\"\n >\n {error}\n </p>\n )}\n {helperText && !error && (\n <p\n id={helperId}\n data-slot=\"textarea-helper\"\n className=\"text-muted-foreground text-sm\"\n >\n {helperText}\n </p>\n )}\n </div>\n {showCount && (\n <p\n id={countId}\n data-slot=\"textarea-count\"\n className={cn(\n 'text-muted-foreground shrink-0 text-xs',\n maxLength && characterCount >= maxLength && 'text-destructive'\n )}\n >\n {characterCount}\n {maxLength && `/${maxLength}`}\n </p>\n )}\n </div>\n </div>\n );\n }\n);\n\nTextarea.displayName = 'Textarea';\n\nexport { Textarea, textareaVariants };\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { inputVariants } from './chunk-
|
|
1
|
+
import { inputVariants } from './chunk-FXTNCCD2.js';
|
|
2
2
|
import { useEscapeKey } from './chunk-T4ME7QCT.js';
|
|
3
3
|
import { useClickOutside } from './chunk-62ZOA6PX.js';
|
|
4
4
|
import { useAnchoredPosition } from './chunk-BOOJDRJO.js';
|
|
@@ -607,5 +607,5 @@ function DropdownLabel({
|
|
|
607
607
|
DropdownLabel.displayName = "DropdownLabel";
|
|
608
608
|
|
|
609
609
|
export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator };
|
|
610
|
-
//# sourceMappingURL=chunk-
|
|
611
|
-
//# sourceMappingURL=chunk-
|
|
610
|
+
//# sourceMappingURL=chunk-GV3DE6KR.js.map
|
|
611
|
+
//# sourceMappingURL=chunk-GV3DE6KR.js.map
|