@mieweb/ui 0.7.3-dev.10 → 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/dist/{chunk-FRZGGC5P.cjs → chunk-3KY5W3ZN.cjs} +7 -7
- package/dist/{chunk-FRZGGC5P.cjs.map → chunk-3KY5W3ZN.cjs.map} +1 -1
- package/dist/{chunk-CXMGO7TD.js → chunk-3X4GPM35.js} +5 -5
- package/dist/{chunk-CXMGO7TD.js.map → chunk-3X4GPM35.js.map} +1 -1
- package/dist/{chunk-EXSGF4YH.js → chunk-6H7NO5XX.js} +3 -3
- package/dist/{chunk-EXSGF4YH.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-WDHWMROB.cjs → chunk-DIL553SJ.cjs} +10 -10
- package/dist/{chunk-WDHWMROB.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-VD6GHFMF.cjs → chunk-F7CQ5RO7.cjs} +44 -2
- package/dist/chunk-F7CQ5RO7.cjs.map +1 -0
- package/dist/{chunk-RP355H4V.js → chunk-FXTNCCD2.js} +43 -3
- 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-AHEIXYLT.js → chunk-GV3DE6KR.js} +3 -3
- package/dist/{chunk-AHEIXYLT.js.map → chunk-GV3DE6KR.js.map} +1 -1
- package/dist/{chunk-4VDL3C3X.js → chunk-I2AHT7JM.js} +13 -2
- 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-ZI6KNWOK.js → chunk-ICMR3TYV.js} +3 -3
- package/dist/{chunk-ZI6KNWOK.js.map → chunk-ICMR3TYV.js.map} +1 -1
- package/dist/{chunk-O3V3VI4U.cjs → chunk-JU62BLDY.cjs} +13 -2
- package/dist/chunk-JU62BLDY.cjs.map +1 -0
- package/dist/{chunk-3T3JKV6Q.cjs → chunk-LFSP53TY.cjs} +7 -7
- package/dist/{chunk-3T3JKV6Q.cjs.map → chunk-LFSP53TY.cjs.map} +1 -1
- package/dist/{chunk-O5UATYAO.cjs → chunk-N7JVAXHD.cjs} +4 -4
- package/dist/{chunk-O5UATYAO.cjs.map → chunk-N7JVAXHD.cjs.map} +1 -1
- package/dist/{chunk-BPUOFQNK.cjs → chunk-PCWIN32O.cjs} +4 -4
- package/dist/{chunk-BPUOFQNK.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-XCIH6I4D.js → chunk-UGJFT2QF.js} +4 -4
- package/dist/{chunk-XCIH6I4D.js.map → chunk-UGJFT2QF.js.map} +1 -1
- package/dist/{chunk-MSGYPBA4.js → chunk-UHVNVZ7L.js} +3 -3
- package/dist/{chunk-MSGYPBA4.js.map → chunk-UHVNVZ7L.js.map} +1 -1
- package/dist/{chunk-JF6C5B3I.cjs → chunk-UZJDXFQE.cjs} +4 -4
- package/dist/{chunk-JF6C5B3I.cjs.map → chunk-UZJDXFQE.cjs.map} +1 -1
- package/dist/{chunk-DEHYGDBC.js → chunk-WUPT5SUN.js} +3 -3
- package/dist/{chunk-DEHYGDBC.js.map → chunk-WUPT5SUN.js.map} +1 -1
- package/dist/{chunk-VPQ4WZ66.cjs → chunk-WWIBIUWT.cjs} +27 -27
- package/dist/{chunk-VPQ4WZ66.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 +13 -4
- package/dist/components/Input/index.d.cts +9 -1
- package/dist/components/Input/index.d.ts +9 -1
- package/dist/components/Input/index.js +2 -1
- package/dist/components/MediaEditor/index.cjs +9 -8
- package/dist/components/MediaEditor/index.js +4 -3
- 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/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/esheet.cjs +8 -7
- package/dist/esheet.cjs.map +1 -1
- package/dist/esheet.js +5 -4
- package/dist/esheet.js.map +1 -1
- package/dist/index.cjs +262 -253
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +18 -17
- 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 +1 -1
- package/dist/chunk-4VDL3C3X.js.map +0 -1
- package/dist/chunk-5IDYOJHO.cjs.map +0 -1
- package/dist/chunk-KFLDXJEE.js.map +0 -1
- package/dist/chunk-O3V3VI4U.cjs.map +0 -1
- package/dist/chunk-QUUBTNMH.js.map +0 -1
- package/dist/chunk-RP355H4V.js.map +0 -1
- package/dist/chunk-S3MKIDYG.cjs.map +0 -1
- package/dist/chunk-VD6GHFMF.cjs.map +0 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { floatingGroupLabelVariants, floatingGroupVariants } from './chunk-FXTNCCD2.js';
|
|
1
2
|
import { cn } from './chunk-TQONQSJO.js';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
import { cva } from 'class-variance-authority';
|
|
@@ -145,6 +146,7 @@ var Checkbox = React.forwardRef(
|
|
|
145
146
|
Checkbox.displayName = "Checkbox";
|
|
146
147
|
function CheckboxGroup({
|
|
147
148
|
label,
|
|
149
|
+
labelVariant = "stacked",
|
|
148
150
|
description,
|
|
149
151
|
error,
|
|
150
152
|
orientation = "vertical",
|
|
@@ -154,6 +156,19 @@ function CheckboxGroup({
|
|
|
154
156
|
const groupId = React.useId();
|
|
155
157
|
const descriptionId = `${groupId}-description`;
|
|
156
158
|
const errorId = `${groupId}-error`;
|
|
159
|
+
const isFloating = labelVariant === "floating" && !!label;
|
|
160
|
+
const itemsElement = /* @__PURE__ */ jsx(
|
|
161
|
+
"div",
|
|
162
|
+
{
|
|
163
|
+
role: "group",
|
|
164
|
+
"data-slot": "checkbox-group-items",
|
|
165
|
+
className: cn(
|
|
166
|
+
"flex gap-4",
|
|
167
|
+
orientation === "vertical" && "flex-col gap-2"
|
|
168
|
+
),
|
|
169
|
+
children
|
|
170
|
+
}
|
|
171
|
+
);
|
|
157
172
|
return /* @__PURE__ */ jsxs(
|
|
158
173
|
"fieldset",
|
|
159
174
|
{
|
|
@@ -165,31 +180,47 @@ function CheckboxGroup({
|
|
|
165
180
|
"legend",
|
|
166
181
|
{
|
|
167
182
|
"data-slot": "checkbox-group-legend",
|
|
168
|
-
className:
|
|
183
|
+
className: cn(
|
|
184
|
+
// Legends are excluded from the fieldset's flex layout; explicit
|
|
185
|
+
// margin matches the stacked Input label's 6px gap.
|
|
186
|
+
"text-foreground mb-1.5 text-sm font-medium",
|
|
187
|
+
isFloating && "sr-only"
|
|
188
|
+
),
|
|
169
189
|
children: label
|
|
170
190
|
}
|
|
171
191
|
),
|
|
192
|
+
isFloating ? /* @__PURE__ */ jsxs(
|
|
193
|
+
"div",
|
|
194
|
+
{
|
|
195
|
+
"data-slot": "checkbox-group-field",
|
|
196
|
+
className: floatingGroupVariants({ hasError: !!error }),
|
|
197
|
+
children: [
|
|
198
|
+
/* @__PURE__ */ jsx(
|
|
199
|
+
"span",
|
|
200
|
+
{
|
|
201
|
+
"aria-hidden": "true",
|
|
202
|
+
"data-slot": "checkbox-group-floating-label",
|
|
203
|
+
className: floatingGroupLabelVariants({ hasError: !!error }),
|
|
204
|
+
children: label
|
|
205
|
+
}
|
|
206
|
+
),
|
|
207
|
+
itemsElement
|
|
208
|
+
]
|
|
209
|
+
}
|
|
210
|
+
) : null,
|
|
172
211
|
description && /* @__PURE__ */ jsx(
|
|
173
212
|
"p",
|
|
174
213
|
{
|
|
175
214
|
id: descriptionId,
|
|
176
215
|
"data-slot": "checkbox-group-description",
|
|
177
|
-
className: "text-muted-foreground mb-3 text-xs",
|
|
178
|
-
children: description
|
|
179
|
-
}
|
|
180
|
-
),
|
|
181
|
-
/* @__PURE__ */ jsx(
|
|
182
|
-
"div",
|
|
183
|
-
{
|
|
184
|
-
role: "group",
|
|
185
|
-
"data-slot": "checkbox-group-items",
|
|
186
216
|
className: cn(
|
|
187
|
-
"
|
|
188
|
-
|
|
217
|
+
"text-muted-foreground text-xs",
|
|
218
|
+
isFloating ? "mt-1" : "mb-3"
|
|
189
219
|
),
|
|
190
|
-
children
|
|
220
|
+
children: description
|
|
191
221
|
}
|
|
192
222
|
),
|
|
223
|
+
!isFloating && itemsElement,
|
|
193
224
|
error && /* @__PURE__ */ jsx(
|
|
194
225
|
"p",
|
|
195
226
|
{
|
|
@@ -257,5 +288,5 @@ function MinusIcon({ size, className }) {
|
|
|
257
288
|
}
|
|
258
289
|
|
|
259
290
|
export { Checkbox, CheckboxGroup, checkboxVariants };
|
|
260
|
-
//# sourceMappingURL=chunk-
|
|
261
|
-
//# sourceMappingURL=chunk-
|
|
291
|
+
//# sourceMappingURL=chunk-DMIQS5KK.js.map
|
|
292
|
+
//# sourceMappingURL=chunk-DMIQS5KK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-DMIQS5KK.js","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\nconst checkboxVariants = cva(\n [\n 'shrink-0 appearance-none',\n 'border-2 border-input rounded',\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:bg-primary-800 checked:border-primary-500',\n 'indeterminate:bg-primary-800 indeterminate:border-primary-500',\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\nexport interface CheckboxProps\n extends\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,\n VariantProps<typeof checkboxVariants> {\n /** Label for the checkbox */\n label?: string;\n /** Description text below the label */\n description?: string;\n /** Indeterminate state (neither checked nor unchecked) */\n indeterminate?: boolean;\n /** Error message */\n error?: string;\n /** Position of the label */\n labelPosition?: 'left' | 'right';\n}\n\n/**\n * An accessible checkbox component with support for indeterminate state.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms and conditions\" />\n * <Checkbox label=\"Newsletter\" description=\"Receive updates about new features\" />\n * <Checkbox indeterminate label=\"Select all\" />\n * ```\n */\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n className,\n size,\n label,\n description,\n indeterminate = false,\n error,\n labelPosition = 'right',\n id,\n disabled,\n ...props\n },\n ref\n ) => {\n const internalRef = React.useRef<HTMLInputElement>(null);\n const generatedId = React.useId();\n const checkboxId = id || generatedId;\n const descriptionId = `${checkboxId}-description`;\n const errorId = `${checkboxId}-error`;\n\n // Handle indeterminate state\n React.useEffect(() => {\n const checkbox = internalRef.current;\n if (checkbox) {\n checkbox.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n // Combine refs\n React.useImperativeHandle(ref, () => internalRef.current!);\n\n const checkboxElement = (\n <span\n data-slot=\"checkbox-indicator\"\n className=\"relative inline-flex items-center justify-center\"\n >\n <input\n ref={internalRef}\n data-slot=\"checkbox\"\n id={checkboxId}\n type=\"checkbox\"\n disabled={disabled}\n aria-describedby={\n [description ? descriptionId : null, error ? errorId : null]\n .filter(Boolean)\n .join(' ') || undefined\n }\n aria-invalid={!!error}\n className={cn('peer', checkboxVariants({ size }), className)}\n {...props}\n />\n {/* Custom check icon overlay */}\n <CheckIcon\n size={size}\n className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-checked:opacity-100\"\n />\n {/* Custom indeterminate icon overlay */}\n <MinusIcon\n size={size}\n className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-indeterminate:opacity-100\"\n />\n </span>\n );\n\n const labelElement = label && (\n <div className=\"flex flex-col\">\n <label\n htmlFor={checkboxId}\n data-slot=\"checkbox-label\"\n className={cn(\n 'text-foreground cursor-pointer text-sm font-medium select-none',\n disabled && 'cursor-not-allowed opacity-50'\n )}\n >\n {label}\n </label>\n {description && (\n <p\n id={descriptionId}\n data-slot=\"checkbox-description\"\n className=\"text-muted-foreground mt-0.5 text-xs\"\n >\n {description}\n </p>\n )}\n </div>\n );\n\n return (\n <div data-slot=\"checkbox-wrapper\" className=\"flex flex-col gap-1\">\n <div\n data-slot=\"checkbox-row\"\n className={cn(\n 'flex gap-2',\n description ? 'items-start' : 'items-center',\n labelPosition === 'left' && 'flex-row-reverse'\n )}\n >\n {checkboxElement}\n {labelElement}\n </div>\n {error && (\n <p\n id={errorId}\n data-slot=\"checkbox-error\"\n className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n role=\"alert\"\n >\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\n// ============================================================================\n// Checkbox Group\n// ============================================================================\n\nexport interface CheckboxGroupProps {\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 for the group */\n error?: string;\n /** Orientation of checkboxes */\n orientation?: 'horizontal' | 'vertical';\n /** Children checkboxes */\n children: React.ReactNode;\n /** Additional class name */\n className?: string;\n}\n\n/**\n * A container for grouping related checkboxes.\n *\n * @example\n * ```tsx\n * <CheckboxGroup label=\"Interests\" orientation=\"vertical\">\n * <Checkbox label=\"Sports\" />\n * <Checkbox label=\"Music\" />\n * <Checkbox label=\"Travel\" />\n * </CheckboxGroup>\n * ```\n */\nfunction CheckboxGroup({\n label,\n labelVariant = 'stacked',\n description,\n error,\n orientation = 'vertical',\n children,\n className,\n}: CheckboxGroupProps) {\n const groupId = React.useId();\n const descriptionId = `${groupId}-description`;\n const errorId = `${groupId}-error`;\n\n const isFloating = labelVariant === 'floating' && !!label;\n\n const itemsElement = (\n <div\n role=\"group\"\n data-slot=\"checkbox-group-items\"\n className={cn(\n 'flex gap-4',\n orientation === 'vertical' && 'flex-col gap-2'\n )}\n >\n {children}\n </div>\n );\n\n return (\n <fieldset\n data-slot=\"checkbox-group\"\n className={cn('flex flex-col', 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=\"checkbox-group-legend\"\n className={cn(\n // Legends are excluded from the fieldset's flex layout; explicit\n // margin matches the stacked Input label's 6px gap.\n 'text-foreground mb-1.5 text-sm font-medium',\n isFloating && 'sr-only'\n )}\n >\n {label}\n </legend>\n )}\n {isFloating ? (\n <div\n data-slot=\"checkbox-group-field\"\n className={floatingGroupVariants({ hasError: !!error })}\n >\n <span\n aria-hidden=\"true\"\n data-slot=\"checkbox-group-floating-label\"\n className={floatingGroupLabelVariants({ hasError: !!error })}\n >\n {label}\n </span>\n {itemsElement}\n </div>\n ) : null}\n {description && (\n <p\n id={descriptionId}\n data-slot=\"checkbox-group-description\"\n className={cn(\n 'text-muted-foreground text-xs',\n isFloating ? 'mt-1' : 'mb-3'\n )}\n >\n {description}\n </p>\n )}\n {!isFloating && itemsElement}\n {error && (\n <p\n id={errorId}\n data-slot=\"checkbox-group-error\"\n className=\"text-destructive mt-2 text-sm\"\n role=\"alert\"\n >\n {error}\n </p>\n )}\n </fieldset>\n );\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\n// ============================================================================\n// Check Icon\n// ============================================================================\n\ninterface CheckIconProps {\n size?: 'sm' | 'md' | 'lg' | null;\n className?: string;\n}\n\nfunction CheckIcon({ size, className }: CheckIconProps) {\n const sizeMap = {\n sm: 10,\n md: 12,\n lg: 14,\n };\n const iconSize = sizeMap[size || 'md'];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={iconSize}\n height={iconSize}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n );\n}\n\nfunction MinusIcon({ size, className }: CheckIconProps) {\n const sizeMap = {\n sm: 10,\n md: 12,\n lg: 14,\n };\n const iconSize = sizeMap[size || 'md'];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={iconSize}\n height={iconSize}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"3\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n >\n <path d=\"M5 12h14\" />\n </svg>\n );\n}\n\nexport { Checkbox, CheckboxGroup, checkboxVariants };\n"]}
|
|
@@ -65,6 +65,46 @@ var inputVariants = classVarianceAuthority.cva(
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
);
|
|
68
|
+
var floatingGroupVariants = classVarianceAuthority.cva(
|
|
69
|
+
["relative rounded-lg border border-input bg-background px-3"],
|
|
70
|
+
{
|
|
71
|
+
variants: {
|
|
72
|
+
size: {
|
|
73
|
+
sm: "min-h-11 pt-4 pb-1",
|
|
74
|
+
md: "min-h-14 pt-5 pb-1.5",
|
|
75
|
+
lg: "min-h-16 pt-6 pb-2"
|
|
76
|
+
},
|
|
77
|
+
hasError: {
|
|
78
|
+
true: "border-destructive",
|
|
79
|
+
false: ""
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
defaultVariants: {
|
|
83
|
+
size: "md",
|
|
84
|
+
hasError: false
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
var floatingGroupLabelVariants = classVarianceAuthority.cva(
|
|
89
|
+
["absolute start-3 pointer-events-none select-none"],
|
|
90
|
+
{
|
|
91
|
+
variants: {
|
|
92
|
+
size: {
|
|
93
|
+
sm: "top-0.5 text-[0.65rem]",
|
|
94
|
+
md: "top-1 text-xs",
|
|
95
|
+
lg: "top-1.5 text-sm"
|
|
96
|
+
},
|
|
97
|
+
hasError: {
|
|
98
|
+
true: "text-destructive",
|
|
99
|
+
false: "text-muted-foreground"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
defaultVariants: {
|
|
103
|
+
size: "md",
|
|
104
|
+
hasError: false
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
);
|
|
68
108
|
var floatingLabelVariants = classVarianceAuthority.cva(
|
|
69
109
|
[
|
|
70
110
|
"absolute start-3 pointer-events-none select-none",
|
|
@@ -221,7 +261,9 @@ var Input = React__namespace.forwardRef(
|
|
|
221
261
|
Input.displayName = "Input";
|
|
222
262
|
|
|
223
263
|
exports.Input = Input;
|
|
264
|
+
exports.floatingGroupLabelVariants = floatingGroupLabelVariants;
|
|
265
|
+
exports.floatingGroupVariants = floatingGroupVariants;
|
|
224
266
|
exports.floatingLabelVariants = floatingLabelVariants;
|
|
225
267
|
exports.inputVariants = inputVariants;
|
|
226
|
-
//# sourceMappingURL=chunk-
|
|
227
|
-
//# sourceMappingURL=chunk-
|
|
268
|
+
//# sourceMappingURL=chunk-F7CQ5RO7.cjs.map
|
|
269
|
+
//# sourceMappingURL=chunk-F7CQ5RO7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Input/Input.tsx"],"names":["cva","React","jsx","cn","jsxs"],"mappings":"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","file":"chunk-F7CQ5RO7.cjs","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"]}
|
|
@@ -43,6 +43,46 @@ var inputVariants = cva(
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
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
|
+
);
|
|
46
86
|
var floatingLabelVariants = cva(
|
|
47
87
|
[
|
|
48
88
|
"absolute start-3 pointer-events-none select-none",
|
|
@@ -198,6 +238,6 @@ var Input = React.forwardRef(
|
|
|
198
238
|
);
|
|
199
239
|
Input.displayName = "Input";
|
|
200
240
|
|
|
201
|
-
export { Input, floatingLabelVariants, inputVariants };
|
|
202
|
-
//# sourceMappingURL=chunk-
|
|
203
|
-
//# sourceMappingURL=chunk-
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,iBAAA,GAA0BA,+BAE9B,MAAS,CAAA;AAEX,SAAS,oBAAA,GAAuB;AAC9B,EAAA,MAAM,OAAA,GAAgBA,4BAAW,iBAAiB,CAAA;AAClD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wCAAwC,CAAA;AAAA,EAC1D;AACA,EAAA,OAAO,OAAA;AACT;AAMA,IAAM,aAAA,GAAgBC,0BAAA;AAAA,EACpB;AAAA,IACE,0BAAA;AAAA,IACA,oCAAA;AAAA,IACA,eAAA;AAAA,IACA,6BAAA;AAAA,IACA,gBAAA;AAAA,IACA,qGAAA;AAAA,IACA,iDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAqDA,SAAS,UAAA,CAAW;AAAA,EAClB,IAAA;AAAA,EACA,KAAA,EAAO,eAAA;AAAA,EACP,YAAA,GAAe,EAAA;AAAA,EACf,aAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,WAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA,GAAO,IAAA;AAAA,EACP,WAAA,GAAc,UAAA;AAAA,EACd,QAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,gBAAsBD,gBAAA,CAAA,KAAA,EAAM;AAClC,EAAA,MAAM,YAAY,IAAA,IAAQ,aAAA;AAC1B,EAAA,MAAM,UAAgBA,gBAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,aAAA,GAAgB,GAAG,OAAO,CAAA,YAAA,CAAA;AAChC,EAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAE1B,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GACtCA,0BAAS,YAAY,CAAA;AAC7B,EAAA,MAAM,eAAe,eAAA,KAAoB,MAAA;AACzC,EAAA,MAAM,KAAA,GAAQ,eAAe,eAAA,GAAkB,iBAAA;AAE/C,EAAA,MAAM,YAAA,GAAqBA,gBAAA,CAAA,WAAA;AAAA,IACzB,CAAC,QAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,oBAAA,CAAqB,QAAQ,CAAA;AAAA,MAC/B;AACA,MAAA,aAAA,GAAgB,QAAQ,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,GAC9B;AAEA,EAAA,MAAM,UAAA,GAAa,YAAA,KAAiB,UAAA,IAAc,CAAC,CAAC,KAAA;AAEpD,EAAA,MAAM,YAAA,mBACJE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWC,oBAAA;AAAA,QACT,YAAA;AAAA,QACA,gBAAgB,UAAA,IAAc;AAAA,OAChC;AAAA,MAEC;AAAA;AAAA,GACH;AAGF,EAAA,uBACED,cAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,KAAA,EAAO,EAAE,IAAA,EAAM,SAAA,EAAW,OAAO,QAAA,EAAU,YAAA,EAAc,UAAU,IAAA,EAAK;AAAA,MAExE,QAAA,kBAAAE,eAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,WAAA,EAAU,aAAA;AAAA,UACV,IAAA,EAAK,YAAA;AAAA,UACL,SAAA,EAAWD,oBAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,UAC9C,kBAAA,EACE,CAAC,WAAA,GAAc,aAAA,GAAgB,MAAM,KAAA,GAAQ,OAAA,GAAU,IAAI,CAAA,CACxD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAAA,UAGjB,QAAA,EAAA;AAAA,YAAA,KAAA,oBACCD,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,WAAA,EAAU,oBAAA;AAAA,gBACV,SAAA,EAAWC,oBAAA;AAAA;AAAA;AAAA;AAAA,kBAIT,oCAAA;AAAA,kBACA,SAAS,IAAA,IAAQ,SAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ,WAAA;AAAA,kBACjB,UAAA,IAAc;AAAA,iBAChB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YAED,UAAA,mBACCC,eAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAA,EAAU,mBAAA;AAAA,gBACV,SAAA,EAAWC,wCAAsB,EAAE,IAAA,EAAM,UAAU,CAAC,CAAC,OAAO,CAAA;AAAA,gBAE5D,QAAA,EAAA;AAAA,kCAAAH,cAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAY,MAAA;AAAA,sBACZ,WAAA,EAAU,4BAAA;AAAA,sBACV,WAAWI,4CAAA,CAA2B;AAAA,wBACpC,IAAA;AAAA,wBACA,QAAA,EAAU,CAAC,CAAC;AAAA,uBACb,CAAA;AAAA,sBAEA,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kBACC;AAAA;AAAA;AAAA,aACH,GACE,IAAA;AAAA,YACH,WAAA,oBACCJ,cAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAI,aAAA;AAAA,gBACJ,WAAA,EAAU,yBAAA;AAAA,gBACV,SAAA,EAAWC,oBAAA;AAAA,kBACT,uBAAA;AAAA,kBACA,SAAS,IAAA,IAAQ,aAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ;AAAA,iBACnB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YAED,CAAC,UAAA,IAAc,YAAA;AAAA,YACf,KAAA,oBACCD,cAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAI,OAAA;AAAA,gBACJ,WAAA,EAAU,mBAAA;AAAA,gBACV,SAAA,EAAWC,oBAAA;AAAA,kBACT,kBAAA;AAAA,kBACA,SAAS,IAAA,IAAQ,SAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,kBACjB,SAAS,IAAA,IAAQ;AAAA,iBACnB;AAAA,gBACA,IAAA,EAAK,OAAA;AAAA,gBAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA,GACF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AA6BzB,IAAM,KAAA,GAAcH,gBAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA,EAAM,QAAA;AAAA,IACN,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA,GAAgB,OAAA;AAAA,IAChB,QAAA,EAAU,YAAA;AAAA,IACV,EAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAU,oBAAA,EAAqB;AACrC,IAAA,MAAM,cAAoBA,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,IAAA,MAAM,aAAA,GAAgB,GAAG,OAAO,CAAA,YAAA,CAAA;AAEhC,IAAA,MAAM,SAAA,GAAY,QAAQ,KAAA,KAAU,KAAA;AACpC,IAAA,MAAM,UAAA,GAAa,gBAAgB,OAAA,CAAQ,QAAA;AAC3C,IAAA,MAAM,IAAA,GAAO,YAAY,OAAA,CAAQ,IAAA;AAEjC,IAAA,MAAM,YAAA,GAAqBA,6BAAY,MAAM;AAC3C,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAAA,MACxB;AAAA,IACF,CAAA,EAAG,CAAC,UAAA,EAAY,OAAA,EAAS,KAAK,CAAC,CAAA;AAE/B,IAAA,MAAM,YAAA,mBACJI,eAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAU,kDAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,WAAA,EAAU,OAAA;AAAA,cACV,EAAA,EAAI,OAAA;AAAA,cACJ,IAAA,EAAK,OAAA;AAAA,cACL,MAAM,OAAA,CAAQ,IAAA;AAAA,cACd,KAAA;AAAA,cACA,OAAA,EAAS,SAAA;AAAA,cACT,QAAA,EAAU,UAAA;AAAA,cACV,QAAA,EAAU,YAAA;AAAA,cACV,kBAAA,EAAkB,cAAc,aAAA,GAAgB,MAAA;AAAA,cAChD,WAAWC,oBAAA,CAAG,aAAA,CAAc,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,cAC/C,GAAG;AAAA;AAAA,WACN;AAAA,0BAEAD,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,WAAA;AAAA,cACV,SAAA,EAAWC,oBAAA;AAAA,gBACT,mGAAA;AAAA,gBACA,SAAS,IAAA,IAAQ,SAAA;AAAA,gBACjB,SAAS,IAAA,IAAQ,aAAA;AAAA,gBACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,gBACjB,YAAY,WAAA,GAAc;AAAA;AAC5B;AAAA;AACF;AAAA;AAAA,KACF;AAGF,IAAA,MAAM,YAAA,GAAe,KAAA,oBACnBC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uBAAA,EACb,QAAA,EAAA;AAAA,sBAAAF,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,WAAA,EAAU,aAAA;AAAA,UACV,SAAA,EAAWC,oBAAA;AAAA,YACT,wDAAA;AAAA,YACA,SAAS,IAAA,IAAQ,SAAA;AAAA,YACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,YACjB,SAAS,IAAA,IAAQ,WAAA;AAAA,YACjB,UAAA,IAAc;AAAA,WAChB;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,WAAA,oBACCD,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,aAAA;AAAA,UACJ,WAAA,EAAU,mBAAA;AAAA,UACV,SAAA,EAAWC,oBAAA;AAAA,YACT,uBAAA;AAAA,YACA,SAAS,IAAA,IAAQ,aAAA;AAAA,YACjB,SAAS,IAAA,IAAQ,SAAA;AAAA,YACjB,SAAS,IAAA,IAAQ;AAAA,WACnB;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAGF,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,eAAA;AAAA,QACV,SAAA,EAAWD,oBAAA;AAAA,UACT,wBAAA;AAAA,UACA,kBAAkB,MAAA,IAAU;AAAA,SAC9B;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","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,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
|