@soyfri/shared-library 2.0.0-beta.7 → 2.0.0-beta.9
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/components/RadioGroup/RadioGroup.cjs +202 -0
- package/components/RadioGroup/RadioGroup.cjs.map +1 -0
- package/components/RadioGroup/RadioGroup.d.ts +53 -0
- package/components/RadioGroup/RadioGroup.definitions.d.ts +6 -0
- package/components/RadioGroup/RadioGroup.js +202 -0
- package/components/RadioGroup/RadioGroup.js.map +1 -0
- package/components/RadioGroup/RadioGroup.sx.d.ts +20 -0
- package/components/RadioGroup/RadioGroup.types.d.ts +1 -0
- package/components/RadioGroup/index.d.ts +2 -0
- package/components/RadioGroup.d.ts +6 -0
- package/components/Stepper/Stepper.cjs +67 -24
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.d.ts +12 -0
- package/components/Stepper/Stepper.js +68 -25
- package/components/Stepper/Stepper.js.map +1 -1
- package/components/Switch/Switch.cjs +181 -0
- package/components/Switch/Switch.cjs.map +1 -0
- package/components/Switch/Switch.d.ts +43 -0
- package/components/Switch/Switch.definitions.d.ts +7 -0
- package/components/Switch/Switch.js +181 -0
- package/components/Switch/Switch.js.map +1 -0
- package/components/Switch/Switch.sx.d.ts +22 -0
- package/components/Switch/Switch.types.d.ts +1 -0
- package/components/Switch/index.d.ts +2 -0
- package/components/Switch.d.ts +6 -0
- package/package.json +11 -1
- package/theme/componentStyles.d.ts +1 -1
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
34
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
35
|
+
const styles = require("@mui/material/styles");
|
|
36
|
+
const material = require("@mui/material");
|
|
37
|
+
const reactHookForm = require("react-hook-form");
|
|
38
|
+
const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
|
|
39
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
40
|
+
const FOCUS_TRANSITION = "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
41
|
+
const buildRadioGroupSx = ({
|
|
42
|
+
bordered,
|
|
43
|
+
borderRadius,
|
|
44
|
+
error
|
|
45
|
+
}) => {
|
|
46
|
+
const radius = toRadius(borderRadius);
|
|
47
|
+
if (!bordered) {
|
|
48
|
+
return {
|
|
49
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
return (theme) => ({
|
|
53
|
+
"& .MuiRadioGroup-root": __spreadProps(__spreadValues({
|
|
54
|
+
paddingTop: 1.25,
|
|
55
|
+
paddingBottom: 1.25,
|
|
56
|
+
paddingX: 1.5,
|
|
57
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
58
|
+
borderRadius: radius,
|
|
59
|
+
transition: FOCUS_TRANSITION
|
|
60
|
+
}, error && {
|
|
61
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
62
|
+
}), {
|
|
63
|
+
// Focus del usuario sobre cualquier radio interno.
|
|
64
|
+
"&:focus-within": {
|
|
65
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
66
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
67
|
+
}
|
|
68
|
+
}),
|
|
69
|
+
"& .MuiFormHelperText-root": {
|
|
70
|
+
marginLeft: 0
|
|
71
|
+
},
|
|
72
|
+
"& .MuiFormLabel-root": {
|
|
73
|
+
marginBottom: 0.5
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
const RadioGroup = (props) => {
|
|
78
|
+
const _a = props, {
|
|
79
|
+
options,
|
|
80
|
+
label,
|
|
81
|
+
row = true,
|
|
82
|
+
size = "small",
|
|
83
|
+
disabled = false,
|
|
84
|
+
error = false,
|
|
85
|
+
helperText,
|
|
86
|
+
bordered = true,
|
|
87
|
+
borderRadius = 10,
|
|
88
|
+
defaultValue,
|
|
89
|
+
preset,
|
|
90
|
+
sx
|
|
91
|
+
} = _a, rest = __objRest(_a, [
|
|
92
|
+
"options",
|
|
93
|
+
"label",
|
|
94
|
+
"row",
|
|
95
|
+
"size",
|
|
96
|
+
"disabled",
|
|
97
|
+
"error",
|
|
98
|
+
"helperText",
|
|
99
|
+
"bordered",
|
|
100
|
+
"borderRadius",
|
|
101
|
+
"defaultValue",
|
|
102
|
+
"preset",
|
|
103
|
+
"sx"
|
|
104
|
+
]);
|
|
105
|
+
const theme = styles.useTheme();
|
|
106
|
+
const presetSx = resolvePreset.resolvePreset("RadioGroup", preset, theme);
|
|
107
|
+
const buildSx = (effectiveError) => [
|
|
108
|
+
buildRadioGroupSx({ bordered, borderRadius, error: effectiveError }),
|
|
109
|
+
...presetSx ? [presetSx] : [],
|
|
110
|
+
...Array.isArray(sx) ? sx : [sx]
|
|
111
|
+
];
|
|
112
|
+
const renderOptions = (currentValue, onChange2, fieldName) => options.map((opt) => {
|
|
113
|
+
var _a2;
|
|
114
|
+
const inputId = (_a2 = opt.id) != null ? _a2 : `${fieldName != null ? fieldName : "radio"}-${opt.value}`;
|
|
115
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
116
|
+
material.FormControlLabel,
|
|
117
|
+
{
|
|
118
|
+
value: opt.value,
|
|
119
|
+
control: /* @__PURE__ */ jsxRuntime.jsx(
|
|
120
|
+
material.Radio,
|
|
121
|
+
{
|
|
122
|
+
id: inputId,
|
|
123
|
+
size,
|
|
124
|
+
disabled: disabled || opt.disabled
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
label: opt.label,
|
|
128
|
+
checked: currentValue === opt.value,
|
|
129
|
+
disabled: disabled || opt.disabled
|
|
130
|
+
},
|
|
131
|
+
inputId
|
|
132
|
+
);
|
|
133
|
+
});
|
|
134
|
+
if ("control" in props && props.control) {
|
|
135
|
+
const { name: name2, control, validation } = props;
|
|
136
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
137
|
+
reactHookForm.Controller,
|
|
138
|
+
{
|
|
139
|
+
name: name2,
|
|
140
|
+
control,
|
|
141
|
+
rules: validation,
|
|
142
|
+
defaultValue,
|
|
143
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
144
|
+
var _a2, _b;
|
|
145
|
+
const finalError = !!fieldError || error;
|
|
146
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
147
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
148
|
+
material.FormControl,
|
|
149
|
+
{
|
|
150
|
+
error: finalError,
|
|
151
|
+
disabled,
|
|
152
|
+
sx: buildSx(finalError),
|
|
153
|
+
fullWidth: true,
|
|
154
|
+
children: [
|
|
155
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { children: label }),
|
|
156
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
157
|
+
material.RadioGroup,
|
|
158
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
159
|
+
row,
|
|
160
|
+
name: field.name,
|
|
161
|
+
value: (_b = field.value) != null ? _b : "",
|
|
162
|
+
onBlur: field.onBlur,
|
|
163
|
+
onChange: (_e, value2) => field.onChange(value2),
|
|
164
|
+
children: renderOptions(field.value, field.onChange, field.name)
|
|
165
|
+
})
|
|
166
|
+
),
|
|
167
|
+
finalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: finalHelperText })
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
const { value, onChange, name } = props;
|
|
176
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
177
|
+
material.FormControl,
|
|
178
|
+
{
|
|
179
|
+
error,
|
|
180
|
+
disabled,
|
|
181
|
+
sx: buildSx(error),
|
|
182
|
+
fullWidth: true,
|
|
183
|
+
children: [
|
|
184
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { children: label }),
|
|
185
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
186
|
+
material.RadioGroup,
|
|
187
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
188
|
+
row,
|
|
189
|
+
name,
|
|
190
|
+
value: value != null ? value : "",
|
|
191
|
+
onChange: (_e, next) => onChange(next),
|
|
192
|
+
children: renderOptions(value, onChange, name)
|
|
193
|
+
})
|
|
194
|
+
),
|
|
195
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
};
|
|
200
|
+
exports.RadioGroup = RadioGroup;
|
|
201
|
+
exports.default = RadioGroup;
|
|
202
|
+
//# sourceMappingURL=RadioGroup.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.cjs","sources":["../../../src/components/RadioGroup/RadioGroup.sx.ts","../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildRadioGroupSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Transición compartida (matchea el InputGroup).\n */\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para RadioGroup. Reproduce el estilo del antiguo\n * `FormRadioGroup` legacy: contenedor con borde + padding vertical.\n *\n * Cuando `bordered=true`, el contenedor gana:\n * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).\n * - `error=true` → borde + shadow de error (palette.error.main).\n *\n * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica\n * visualmente el borde sin empujar nada alrededor.\n *\n * Si `bordered=false`, devuelve un sx mínimo (sólo helper text reset).\n */\nexport const buildRadioGroupSx = ({\n bordered,\n borderRadius,\n error,\n}: BuildRadioGroupSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiRadioGroup-root': {\n paddingTop: 1.25,\n paddingBottom: 1.25,\n paddingX: 1.5,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n // Focus del usuario sobre cualquier radio interno.\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n '& .MuiFormLabel-root': {\n marginBottom: 0.5,\n },\n });\n};\n","import { useTheme } from '@mui/material/styles';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n FormLabel,\n Radio,\n RadioGroup as MuiRadioGroup,\n type RadioGroupProps as MuiRadioGroupProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildRadioGroupSx } from './RadioGroup.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport interface RadioOption {\n /** Valor que se emite cuando se selecciona la opción. */\n value: string;\n /** Texto mostrado al lado del radio. */\n label: string;\n /** Deshabilitar opción individualmente. */\n disabled?: boolean;\n /** ID custom del input (default: prefijo + value). */\n id?: string;\n}\n\nexport type RadioGroupSize = 'small' | 'medium';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseRadioGroupProps\n extends Omit<MuiRadioGroupProps, 'value' | 'onChange' | 'defaultValue'> {\n options: RadioOption[];\n /** Label superior del grupo. */\n label?: string;\n /** Distribución horizontal (default: true — replica el comportamiento legacy). */\n row?: boolean;\n size?: RadioGroupSize;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde estilo \"form field\". Default: true. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n defaultValue?: string;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.RadioGroup`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFRadioGroupProps extends BaseRadioGroupProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: never;\n onChange?: never;\n}\n\nexport interface ControlledRadioGroupProps extends BaseRadioGroupProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string;\n onChange: (value: string) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type RadioGroupProps = RHFRadioGroupProps | ControlledRadioGroupProps;\n\nexport const RadioGroup: React.FC<RadioGroupProps> = (props) => {\n const {\n options,\n label,\n row = true,\n size = 'small',\n disabled = false,\n error = false,\n helperText,\n bordered = true,\n borderRadius = 10,\n defaultValue,\n preset,\n sx,\n ...rest\n } = props as ControlledRadioGroupProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('RadioGroup', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildRadioGroupSx({ bordered, borderRadius, error: effectiveError }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderOptions = (\n currentValue: string | undefined,\n onChange: (value: string) => void,\n fieldName?: string,\n ) =>\n options.map((opt) => {\n const inputId = opt.id ?? `${fieldName ?? 'radio'}-${opt.value}`;\n return (\n <FormControlLabel\n key={inputId}\n value={opt.value}\n control={\n <Radio\n id={inputId}\n size={size}\n disabled={disabled || opt.disabled}\n />\n }\n label={opt.label}\n checked={currentValue === opt.value}\n disabled={disabled || opt.disabled}\n />\n );\n });\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation } = props as RHFRadioGroupProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n fullWidth\n >\n {label && <FormLabel>{label}</FormLabel>}\n <MuiRadioGroup\n {...rest}\n row={row}\n name={field.name}\n value={field.value ?? ''}\n onBlur={field.onBlur}\n onChange={(_e, value) => field.onChange(value)}\n >\n {renderOptions(field.value, field.onChange, field.name)}\n </MuiRadioGroup>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { value, onChange, name } = props as ControlledRadioGroupProps;\n return (\n <FormControl\n error={error}\n disabled={disabled}\n sx={buildSx(error)}\n fullWidth\n >\n {label && <FormLabel>{label}</FormLabel>}\n <MuiRadioGroup\n {...rest}\n row={row}\n name={name}\n value={value ?? ''}\n onChange={(_e, next) => onChange(next)}\n >\n {renderOptions(value, onChange, name)}\n </MuiRadioGroup>\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default RadioGroup;\n"],"names":["useTheme","resolvePreset","onChange","_a","jsx","FormControlLabel","Radio","name","Controller","jsxs","FormControl","FormLabel","MuiRadioGroup","value","FormHelperText"],"mappings":"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"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { RadioGroupProps as MuiRadioGroupProps, SxProps, Theme } from '@mui/material';
|
|
2
|
+
import { Control, RegisterOptions } from 'react-hook-form';
|
|
3
|
+
export interface RadioOption {
|
|
4
|
+
/** Valor que se emite cuando se selecciona la opción. */
|
|
5
|
+
value: string;
|
|
6
|
+
/** Texto mostrado al lado del radio. */
|
|
7
|
+
label: string;
|
|
8
|
+
/** Deshabilitar opción individualmente. */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** ID custom del input (default: prefijo + value). */
|
|
11
|
+
id?: string;
|
|
12
|
+
}
|
|
13
|
+
export type RadioGroupSize = 'small' | 'medium';
|
|
14
|
+
export interface BaseRadioGroupProps extends Omit<MuiRadioGroupProps, 'value' | 'onChange' | 'defaultValue'> {
|
|
15
|
+
options: RadioOption[];
|
|
16
|
+
/** Label superior del grupo. */
|
|
17
|
+
label?: string;
|
|
18
|
+
/** Distribución horizontal (default: true — replica el comportamiento legacy). */
|
|
19
|
+
row?: boolean;
|
|
20
|
+
size?: RadioGroupSize;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
error?: boolean;
|
|
23
|
+
helperText?: string;
|
|
24
|
+
/** Renderiza un contenedor con borde estilo "form field". Default: true. */
|
|
25
|
+
bordered?: boolean;
|
|
26
|
+
/** Border radius del contenedor (cuando bordered). Default: 10. */
|
|
27
|
+
borderRadius?: number | string;
|
|
28
|
+
defaultValue?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Nombre del preset de estilo registrado en `theme.styles.RadioGroup`.
|
|
31
|
+
* - `"default"` (o ausente) = estilo built-in del paquete.
|
|
32
|
+
* - Cualquier otro string = mergea el preset encima del estilo built-in.
|
|
33
|
+
*/
|
|
34
|
+
preset?: string;
|
|
35
|
+
sx?: SxProps<Theme>;
|
|
36
|
+
}
|
|
37
|
+
export interface RHFRadioGroupProps extends BaseRadioGroupProps {
|
|
38
|
+
name: string;
|
|
39
|
+
control: Control<any>;
|
|
40
|
+
validation?: RegisterOptions;
|
|
41
|
+
value?: never;
|
|
42
|
+
onChange?: never;
|
|
43
|
+
}
|
|
44
|
+
export interface ControlledRadioGroupProps extends BaseRadioGroupProps {
|
|
45
|
+
name?: string;
|
|
46
|
+
control?: never;
|
|
47
|
+
validation?: never;
|
|
48
|
+
value: string;
|
|
49
|
+
onChange: (value: string) => void;
|
|
50
|
+
}
|
|
51
|
+
export type RadioGroupProps = RHFRadioGroupProps | ControlledRadioGroupProps;
|
|
52
|
+
export declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
53
|
+
export default RadioGroup;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const BasicRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box, Typography } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B' },\n { value: 'c', label: 'Opci\u00F3n C' },\n];\n\nexport const BasicRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"Selecciona una opci\u00F3n\"\n options={options}\n value={value}\n onChange={setValue}\n />\n <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>\n </Box>\n );\n};\n";
|
|
2
|
+
export declare const ColumnRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'sm', label: 'Peque\u00F1o' },\n { value: 'md', label: 'Mediano' },\n { value: 'lg', label: 'Grande' },\n];\n\nexport const ColumnRadioGroupExample = () => {\n const [value, setValue] = useState('md');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"Tama\u00F1o\"\n options={options}\n value={value}\n onChange={setValue}\n row={false}\n />\n </Box>\n );\n};\n";
|
|
3
|
+
export declare const RadioGroupWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'yes', label: 'S\u00ED' },\n { value: 'no', label: 'No' },\n];\n\nexport const RadioGroupWithErrorExample = () => {\n const [value, setValue] = useState('');\n const hasError = !value;\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n label=\"\u00BFAceptas los t\u00E9rminos?\"\n options={options}\n value={value}\n onChange={setValue}\n error={hasError}\n helperText={hasError ? 'Este campo es obligatorio' : ''}\n />\n </Box>\n );\n};\n";
|
|
4
|
+
export declare const DisabledRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B', disabled: true },\n { value: 'c', label: 'Opci\u00F3n C' },\n];\n\nexport const DisabledRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n {/* Bloqueo total */}\n <RadioGroup\n label=\"Grupo deshabilitado\"\n options={options}\n value={value}\n onChange={setValue}\n disabled\n />\n {/* Bloqueo por opci\u00F3n */}\n <RadioGroup\n label=\"Opci\u00F3n B deshabilitada\"\n options={options}\n value={value}\n onChange={setValue}\n sx={{ mt: 3 }}\n />\n </Box>\n );\n};\n";
|
|
5
|
+
export declare const UnborderedRadioGroupDefinition = "\nimport React, { useState } from 'react';\nimport { RadioGroup } from './RadioGroup';\nimport { Box } from '@mui/material';\n\nconst options = [\n { value: 'a', label: 'Opci\u00F3n A' },\n { value: 'b', label: 'Opci\u00F3n B' },\n];\n\nexport const UnborderedRadioGroupExample = () => {\n const [value, setValue] = useState('a');\n return (\n <Box sx={{ width: 360 }}>\n <RadioGroup\n options={options}\n value={value}\n onChange={setValue}\n bordered={false}\n />\n </Box>\n );\n};\n";
|
|
6
|
+
export declare const RHFRadioGroupDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { RadioGroup } from './RadioGroup';\nimport { Box, Button, Typography } from '@mui/material';\n\nconst options = [\n { value: 'paypal', label: 'PayPal' },\n { value: 'card', label: 'Tarjeta' },\n { value: 'transfer', label: 'Transferencia' },\n];\n\nexport const RHFRadioGroupExample = () => {\n const { control, handleSubmit, watch } = useForm({\n defaultValues: { paymentMethod: 'card' },\n });\n const value = watch('paymentMethod');\n return (\n <Box sx={{ width: 360 }} component=\"form\" onSubmit={handleSubmit(console.log)}>\n <RadioGroup\n label=\"M\u00E9todo de pago\"\n options={options}\n name=\"paymentMethod\"\n control={control}\n validation={{ required: 'Selecciona un m\u00E9todo' }}\n />\n <Typography sx={{ mt: 2 }}>Valor en el form: {value}</Typography>\n <Button type=\"submit\" sx={{ mt: 1 }}>Enviar</Button>\n </Box>\n );\n};\n";
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
import { useTheme } from "@mui/material/styles";
|
|
34
|
+
import { FormControl, FormLabel, RadioGroup as RadioGroup$1, FormHelperText, FormControlLabel, Radio } from "@mui/material";
|
|
35
|
+
import { Controller } from "react-hook-form";
|
|
36
|
+
import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
|
|
37
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
38
|
+
const FOCUS_TRANSITION = "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
39
|
+
const buildRadioGroupSx = ({
|
|
40
|
+
bordered,
|
|
41
|
+
borderRadius,
|
|
42
|
+
error
|
|
43
|
+
}) => {
|
|
44
|
+
const radius = toRadius(borderRadius);
|
|
45
|
+
if (!bordered) {
|
|
46
|
+
return {
|
|
47
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
return (theme) => ({
|
|
51
|
+
"& .MuiRadioGroup-root": __spreadProps(__spreadValues({
|
|
52
|
+
paddingTop: 1.25,
|
|
53
|
+
paddingBottom: 1.25,
|
|
54
|
+
paddingX: 1.5,
|
|
55
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
56
|
+
borderRadius: radius,
|
|
57
|
+
transition: FOCUS_TRANSITION
|
|
58
|
+
}, error && {
|
|
59
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
60
|
+
}), {
|
|
61
|
+
// Focus del usuario sobre cualquier radio interno.
|
|
62
|
+
"&:focus-within": {
|
|
63
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
64
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
65
|
+
}
|
|
66
|
+
}),
|
|
67
|
+
"& .MuiFormHelperText-root": {
|
|
68
|
+
marginLeft: 0
|
|
69
|
+
},
|
|
70
|
+
"& .MuiFormLabel-root": {
|
|
71
|
+
marginBottom: 0.5
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
const RadioGroup = (props) => {
|
|
76
|
+
const _a = props, {
|
|
77
|
+
options,
|
|
78
|
+
label,
|
|
79
|
+
row = true,
|
|
80
|
+
size = "small",
|
|
81
|
+
disabled = false,
|
|
82
|
+
error = false,
|
|
83
|
+
helperText,
|
|
84
|
+
bordered = true,
|
|
85
|
+
borderRadius = 10,
|
|
86
|
+
defaultValue,
|
|
87
|
+
preset,
|
|
88
|
+
sx
|
|
89
|
+
} = _a, rest = __objRest(_a, [
|
|
90
|
+
"options",
|
|
91
|
+
"label",
|
|
92
|
+
"row",
|
|
93
|
+
"size",
|
|
94
|
+
"disabled",
|
|
95
|
+
"error",
|
|
96
|
+
"helperText",
|
|
97
|
+
"bordered",
|
|
98
|
+
"borderRadius",
|
|
99
|
+
"defaultValue",
|
|
100
|
+
"preset",
|
|
101
|
+
"sx"
|
|
102
|
+
]);
|
|
103
|
+
const theme = useTheme();
|
|
104
|
+
const presetSx = resolvePreset("RadioGroup", preset, theme);
|
|
105
|
+
const buildSx = (effectiveError) => [
|
|
106
|
+
buildRadioGroupSx({ bordered, borderRadius, error: effectiveError }),
|
|
107
|
+
...presetSx ? [presetSx] : [],
|
|
108
|
+
...Array.isArray(sx) ? sx : [sx]
|
|
109
|
+
];
|
|
110
|
+
const renderOptions = (currentValue, onChange2, fieldName) => options.map((opt) => {
|
|
111
|
+
var _a2;
|
|
112
|
+
const inputId = (_a2 = opt.id) != null ? _a2 : `${fieldName != null ? fieldName : "radio"}-${opt.value}`;
|
|
113
|
+
return /* @__PURE__ */ jsx(
|
|
114
|
+
FormControlLabel,
|
|
115
|
+
{
|
|
116
|
+
value: opt.value,
|
|
117
|
+
control: /* @__PURE__ */ jsx(
|
|
118
|
+
Radio,
|
|
119
|
+
{
|
|
120
|
+
id: inputId,
|
|
121
|
+
size,
|
|
122
|
+
disabled: disabled || opt.disabled
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
label: opt.label,
|
|
126
|
+
checked: currentValue === opt.value,
|
|
127
|
+
disabled: disabled || opt.disabled
|
|
128
|
+
},
|
|
129
|
+
inputId
|
|
130
|
+
);
|
|
131
|
+
});
|
|
132
|
+
if ("control" in props && props.control) {
|
|
133
|
+
const { name: name2, control, validation } = props;
|
|
134
|
+
return /* @__PURE__ */ jsx(
|
|
135
|
+
Controller,
|
|
136
|
+
{
|
|
137
|
+
name: name2,
|
|
138
|
+
control,
|
|
139
|
+
rules: validation,
|
|
140
|
+
defaultValue,
|
|
141
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
142
|
+
var _a2, _b;
|
|
143
|
+
const finalError = !!fieldError || error;
|
|
144
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
145
|
+
return /* @__PURE__ */ jsxs(
|
|
146
|
+
FormControl,
|
|
147
|
+
{
|
|
148
|
+
error: finalError,
|
|
149
|
+
disabled,
|
|
150
|
+
sx: buildSx(finalError),
|
|
151
|
+
fullWidth: true,
|
|
152
|
+
children: [
|
|
153
|
+
label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
|
|
154
|
+
/* @__PURE__ */ jsx(
|
|
155
|
+
RadioGroup$1,
|
|
156
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
157
|
+
row,
|
|
158
|
+
name: field.name,
|
|
159
|
+
value: (_b = field.value) != null ? _b : "",
|
|
160
|
+
onBlur: field.onBlur,
|
|
161
|
+
onChange: (_e, value2) => field.onChange(value2),
|
|
162
|
+
children: renderOptions(field.value, field.onChange, field.name)
|
|
163
|
+
})
|
|
164
|
+
),
|
|
165
|
+
finalHelperText && /* @__PURE__ */ jsx(FormHelperText, { children: finalHelperText })
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
const { value, onChange, name } = props;
|
|
174
|
+
return /* @__PURE__ */ jsxs(
|
|
175
|
+
FormControl,
|
|
176
|
+
{
|
|
177
|
+
error,
|
|
178
|
+
disabled,
|
|
179
|
+
sx: buildSx(error),
|
|
180
|
+
fullWidth: true,
|
|
181
|
+
children: [
|
|
182
|
+
label && /* @__PURE__ */ jsx(FormLabel, { children: label }),
|
|
183
|
+
/* @__PURE__ */ jsx(
|
|
184
|
+
RadioGroup$1,
|
|
185
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
186
|
+
row,
|
|
187
|
+
name,
|
|
188
|
+
value: value != null ? value : "",
|
|
189
|
+
onChange: (_e, next) => onChange(next),
|
|
190
|
+
children: renderOptions(value, onChange, name)
|
|
191
|
+
})
|
|
192
|
+
),
|
|
193
|
+
helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
);
|
|
197
|
+
};
|
|
198
|
+
export {
|
|
199
|
+
RadioGroup,
|
|
200
|
+
RadioGroup as default
|
|
201
|
+
};
|
|
202
|
+
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.sx.ts","../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildRadioGroupSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Transición compartida (matchea el InputGroup).\n */\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para RadioGroup. Reproduce el estilo del antiguo\n * `FormRadioGroup` legacy: contenedor con borde + padding vertical.\n *\n * Cuando `bordered=true`, el contenedor gana:\n * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).\n * - `error=true` → borde + shadow de error (palette.error.main).\n *\n * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica\n * visualmente el borde sin empujar nada alrededor.\n *\n * Si `bordered=false`, devuelve un sx mínimo (sólo helper text reset).\n */\nexport const buildRadioGroupSx = ({\n bordered,\n borderRadius,\n error,\n}: BuildRadioGroupSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiRadioGroup-root': {\n paddingTop: 1.25,\n paddingBottom: 1.25,\n paddingX: 1.5,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n // Focus del usuario sobre cualquier radio interno.\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n '& .MuiFormLabel-root': {\n marginBottom: 0.5,\n },\n });\n};\n","import { useTheme } from '@mui/material/styles';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n FormLabel,\n Radio,\n RadioGroup as MuiRadioGroup,\n type RadioGroupProps as MuiRadioGroupProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildRadioGroupSx } from './RadioGroup.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport interface RadioOption {\n /** Valor que se emite cuando se selecciona la opción. */\n value: string;\n /** Texto mostrado al lado del radio. */\n label: string;\n /** Deshabilitar opción individualmente. */\n disabled?: boolean;\n /** ID custom del input (default: prefijo + value). */\n id?: string;\n}\n\nexport type RadioGroupSize = 'small' | 'medium';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseRadioGroupProps\n extends Omit<MuiRadioGroupProps, 'value' | 'onChange' | 'defaultValue'> {\n options: RadioOption[];\n /** Label superior del grupo. */\n label?: string;\n /** Distribución horizontal (default: true — replica el comportamiento legacy). */\n row?: boolean;\n size?: RadioGroupSize;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde estilo \"form field\". Default: true. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n defaultValue?: string;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.RadioGroup`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFRadioGroupProps extends BaseRadioGroupProps {\n name: string;\n control: Control<any>;\n validation?: RegisterOptions;\n value?: never;\n onChange?: never;\n}\n\nexport interface ControlledRadioGroupProps extends BaseRadioGroupProps {\n name?: string;\n control?: never;\n validation?: never;\n value: string;\n onChange: (value: string) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type RadioGroupProps = RHFRadioGroupProps | ControlledRadioGroupProps;\n\nexport const RadioGroup: React.FC<RadioGroupProps> = (props) => {\n const {\n options,\n label,\n row = true,\n size = 'small',\n disabled = false,\n error = false,\n helperText,\n bordered = true,\n borderRadius = 10,\n defaultValue,\n preset,\n sx,\n ...rest\n } = props as ControlledRadioGroupProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('RadioGroup', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildRadioGroupSx({ bordered, borderRadius, error: effectiveError }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderOptions = (\n currentValue: string | undefined,\n onChange: (value: string) => void,\n fieldName?: string,\n ) =>\n options.map((opt) => {\n const inputId = opt.id ?? `${fieldName ?? 'radio'}-${opt.value}`;\n return (\n <FormControlLabel\n key={inputId}\n value={opt.value}\n control={\n <Radio\n id={inputId}\n size={size}\n disabled={disabled || opt.disabled}\n />\n }\n label={opt.label}\n checked={currentValue === opt.value}\n disabled={disabled || opt.disabled}\n />\n );\n });\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation } = props as RHFRadioGroupProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultValue}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n fullWidth\n >\n {label && <FormLabel>{label}</FormLabel>}\n <MuiRadioGroup\n {...rest}\n row={row}\n name={field.name}\n value={field.value ?? ''}\n onBlur={field.onBlur}\n onChange={(_e, value) => field.onChange(value)}\n >\n {renderOptions(field.value, field.onChange, field.name)}\n </MuiRadioGroup>\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { value, onChange, name } = props as ControlledRadioGroupProps;\n return (\n <FormControl\n error={error}\n disabled={disabled}\n sx={buildSx(error)}\n fullWidth\n >\n {label && <FormLabel>{label}</FormLabel>}\n <MuiRadioGroup\n {...rest}\n row={row}\n name={name}\n value={value ?? ''}\n onChange={(_e, next) => onChange(next)}\n >\n {renderOptions(value, onChange, name)}\n </MuiRadioGroup>\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default RadioGroup;\n"],"names":["onChange","_a","name","MuiRadioGroup","value"],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
|
+
export interface BuildRadioGroupSxOptions {
|
|
3
|
+
bordered: boolean;
|
|
4
|
+
borderRadius: number | string;
|
|
5
|
+
error: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Builder de sx para RadioGroup. Reproduce el estilo del antiguo
|
|
9
|
+
* `FormRadioGroup` legacy: contenedor con borde + padding vertical.
|
|
10
|
+
*
|
|
11
|
+
* Cuando `bordered=true`, el contenedor gana:
|
|
12
|
+
* - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).
|
|
13
|
+
* - `error=true` → borde + shadow de error (palette.error.main).
|
|
14
|
+
*
|
|
15
|
+
* El shadow es de 1px, así que no hay shift de layout — sólo se intensifica
|
|
16
|
+
* visualmente el borde sin empujar nada alrededor.
|
|
17
|
+
*
|
|
18
|
+
* Si `bordered=false`, devuelve un sx mínimo (sólo helper text reset).
|
|
19
|
+
*/
|
|
20
|
+
export declare const buildRadioGroupSx: ({ bordered, borderRadius, error, }: BuildRadioGroupSxOptions) => SxProps<Theme>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { RadioOption, RadioGroupSize, BaseRadioGroupProps, RHFRadioGroupProps, ControlledRadioGroupProps, RadioGroupProps, } from './RadioGroup';
|