@yamada-ui/radio 0.1.11 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -2
- package/dist/index.js +175 -175
- package/dist/index.mjs +3 -5
- package/dist/radio-group.d.ts +25 -1
- package/dist/radio.d.ts +46 -1
- package/dist/radio.mjs +1 -1
- package/package.json +4 -4
- /package/dist/{chunk-GSVZURUN.mjs → chunk-6R3LHBQV.mjs} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { Radio, RadioProps, UseRadioProps, useRadio } from './radio.js';
|
|
2
|
-
export { RadioGroup, RadioGroupProps, UseRadioGroupProps,
|
|
1
|
+
export { Radio, RadioProps, UseRadioProps, UseRadioReturn, useRadio } from './radio.js';
|
|
2
|
+
export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup } from './radio-group.js';
|
|
3
3
|
import '@yamada-ui/core';
|
|
4
4
|
import '@yamada-ui/form-control';
|
|
5
5
|
import '@yamada-ui/utils';
|
package/dist/index.js
CHANGED
|
@@ -23,31 +23,155 @@ __export(src_exports, {
|
|
|
23
23
|
Radio: () => Radio,
|
|
24
24
|
RadioGroup: () => RadioGroup,
|
|
25
25
|
useRadio: () => useRadio,
|
|
26
|
-
useRadioGroup: () => useRadioGroup
|
|
27
|
-
useRadioGroupContenxt: () => useRadioGroupContenxt
|
|
26
|
+
useRadioGroup: () => useRadioGroup
|
|
28
27
|
});
|
|
29
28
|
module.exports = __toCommonJS(src_exports);
|
|
30
29
|
|
|
31
30
|
// src/radio.tsx
|
|
32
31
|
var import_core = require("@yamada-ui/core");
|
|
33
|
-
var
|
|
32
|
+
var import_form_control2 = require("@yamada-ui/form-control");
|
|
34
33
|
var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
|
|
34
|
+
var import_utils2 = require("@yamada-ui/utils");
|
|
35
|
+
var import_react2 = require("react");
|
|
36
|
+
|
|
37
|
+
// src/radio-group.tsx
|
|
38
|
+
var import_form_control = require("@yamada-ui/form-control");
|
|
39
|
+
var import_layouts = require("@yamada-ui/layouts");
|
|
40
|
+
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
35
41
|
var import_utils = require("@yamada-ui/utils");
|
|
36
42
|
var import_react = require("react");
|
|
37
43
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
+
var isEvent = (value) => value && (0, import_utils.isObject)(value) && (0, import_utils.isObject)(value.target);
|
|
45
|
+
var useRadioGroup = ({
|
|
46
|
+
id,
|
|
47
|
+
name,
|
|
48
|
+
isNative,
|
|
49
|
+
...props
|
|
50
|
+
}) => {
|
|
51
|
+
id = id != null ? id : (0, import_react.useId)();
|
|
52
|
+
name = name != null ? name : `radio-${id}`;
|
|
53
|
+
props.onChange = (0, import_utils.useCallbackRef)(props.onChange);
|
|
54
|
+
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
55
|
+
value: props.value,
|
|
56
|
+
defaultValue: props.defaultValue,
|
|
57
|
+
onChange: props.onChange
|
|
58
|
+
});
|
|
59
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
60
|
+
const onFocus = (0, import_react.useCallback)(() => {
|
|
61
|
+
const container = containerRef.current;
|
|
62
|
+
if (!container)
|
|
63
|
+
return;
|
|
64
|
+
let query = `input:not(:disabled):checked`;
|
|
65
|
+
let firstInput = container.querySelector(query);
|
|
66
|
+
if (firstInput) {
|
|
67
|
+
firstInput.focus();
|
|
68
|
+
} else {
|
|
69
|
+
query = `input:not(:disabled)`;
|
|
70
|
+
firstInput = container.querySelector(query);
|
|
71
|
+
firstInput == null ? void 0 : firstInput.focus();
|
|
72
|
+
}
|
|
73
|
+
}, []);
|
|
74
|
+
const onChange = (0, import_react.useCallback)(
|
|
75
|
+
(evOrValue) => {
|
|
76
|
+
const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
|
|
77
|
+
setValue(nextValue);
|
|
78
|
+
},
|
|
79
|
+
[setValue]
|
|
80
|
+
);
|
|
81
|
+
const getContainerProps = (0, import_react.useCallback)(
|
|
82
|
+
(props2 = {}, ref = null) => ({
|
|
83
|
+
...props2,
|
|
84
|
+
ref: (0, import_utils.mergeRefs)(ref, containerRef),
|
|
85
|
+
role: "group"
|
|
86
|
+
}),
|
|
87
|
+
[]
|
|
88
|
+
);
|
|
89
|
+
const getRadioProps = (0, import_react.useCallback)(
|
|
90
|
+
(props2 = {}, ref = null) => ({
|
|
91
|
+
...props2,
|
|
92
|
+
ref,
|
|
93
|
+
name,
|
|
94
|
+
[isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
|
|
95
|
+
onChange
|
|
96
|
+
}),
|
|
97
|
+
[name, value, onChange, isNative]
|
|
98
|
+
);
|
|
99
|
+
return {
|
|
100
|
+
name,
|
|
101
|
+
value,
|
|
102
|
+
setValue,
|
|
103
|
+
onChange,
|
|
104
|
+
onFocus,
|
|
105
|
+
getContainerProps,
|
|
106
|
+
getRadioProps
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
var [RadioGroupProvider, useRadioGroupContenxt] = (0, import_utils.createContext)({
|
|
110
|
+
strict: false,
|
|
111
|
+
name: "RadioGroupContext"
|
|
112
|
+
});
|
|
113
|
+
var RadioGroup = (0, import_react.forwardRef)(
|
|
114
|
+
({
|
|
115
|
+
className,
|
|
116
|
+
size,
|
|
117
|
+
variant,
|
|
118
|
+
colorScheme,
|
|
119
|
+
children,
|
|
120
|
+
direction = "column",
|
|
121
|
+
gap,
|
|
122
|
+
...props
|
|
123
|
+
}, ref) => {
|
|
124
|
+
const { name, value, onChange, getContainerProps } = useRadioGroup(props);
|
|
125
|
+
const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control.useFormControl)(props);
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
127
|
+
RadioGroupProvider,
|
|
128
|
+
{
|
|
129
|
+
value: {
|
|
130
|
+
size,
|
|
131
|
+
variant,
|
|
132
|
+
colorScheme,
|
|
133
|
+
isRequired,
|
|
134
|
+
isReadOnly,
|
|
135
|
+
isDisabled,
|
|
136
|
+
isInvalid,
|
|
137
|
+
name,
|
|
138
|
+
value,
|
|
139
|
+
onChange
|
|
140
|
+
},
|
|
141
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
142
|
+
import_layouts.Flex,
|
|
143
|
+
{
|
|
144
|
+
ref,
|
|
145
|
+
className: (0, import_utils.cx)("ui-radio-group", className),
|
|
146
|
+
direction,
|
|
147
|
+
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
|
148
|
+
...getContainerProps(
|
|
149
|
+
(0, import_utils.omitObject)(props, ["onChange", "isInvalid", "isDisabled", "isRequired", "isReadOnly"])
|
|
150
|
+
),
|
|
151
|
+
children
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
RadioGroup.displayName = "RadioGroup";
|
|
159
|
+
|
|
160
|
+
// src/radio.tsx
|
|
161
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
38
162
|
var useRadio = (props) => {
|
|
39
|
-
const { id, name, value, required, disabled, readOnly, ...rest } = (0,
|
|
40
|
-
const [isFocusVisible, setIsFocusVisible] = (0,
|
|
41
|
-
const [isFocused, setFocused] = (0,
|
|
42
|
-
const [isHovered, setHovered] = (0,
|
|
43
|
-
const [isActive, setActive] = (0,
|
|
44
|
-
const [isChecked, setIsChecked] = (0,
|
|
163
|
+
const { id, name, value, required, disabled, readOnly, ...rest } = (0, import_form_control2.useFormControlProps)(props);
|
|
164
|
+
const [isFocusVisible, setIsFocusVisible] = (0, import_react2.useState)(false);
|
|
165
|
+
const [isFocused, setFocused] = (0, import_react2.useState)(false);
|
|
166
|
+
const [isHovered, setHovered] = (0, import_react2.useState)(false);
|
|
167
|
+
const [isActive, setActive] = (0, import_react2.useState)(false);
|
|
168
|
+
const [isChecked, setIsChecked] = (0, import_react2.useState)(!!props.defaultChecked);
|
|
45
169
|
const isControlled = props.isChecked !== void 0;
|
|
46
170
|
const checked = isControlled ? props.isChecked : isChecked;
|
|
47
|
-
(0,
|
|
171
|
+
(0, import_react2.useEffect)(() => {
|
|
48
172
|
return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
|
|
49
173
|
}, []);
|
|
50
|
-
const onChange = (0,
|
|
174
|
+
const onChange = (0, import_utils2.useCallbackRef)(
|
|
51
175
|
(ev) => {
|
|
52
176
|
var _a;
|
|
53
177
|
if (readOnly || disabled) {
|
|
@@ -60,52 +184,52 @@ var useRadio = (props) => {
|
|
|
60
184
|
},
|
|
61
185
|
[readOnly, disabled, isControlled]
|
|
62
186
|
);
|
|
63
|
-
const onBlur = (0,
|
|
64
|
-
const onFocus = (0,
|
|
65
|
-
const onKeyDown = (0,
|
|
187
|
+
const onBlur = (0, import_utils2.useCallbackRef)(rest.onBlur);
|
|
188
|
+
const onFocus = (0, import_utils2.useCallbackRef)(rest.onFocus);
|
|
189
|
+
const onKeyDown = (0, import_react2.useCallback)(
|
|
66
190
|
({ key }) => {
|
|
67
191
|
if (key === " ")
|
|
68
192
|
setActive(true);
|
|
69
193
|
},
|
|
70
194
|
[setActive]
|
|
71
195
|
);
|
|
72
|
-
const onKeyUp = (0,
|
|
196
|
+
const onKeyUp = (0, import_react2.useCallback)(
|
|
73
197
|
({ key }) => {
|
|
74
198
|
if (key === " ")
|
|
75
199
|
setActive(false);
|
|
76
200
|
},
|
|
77
201
|
[setActive]
|
|
78
202
|
);
|
|
79
|
-
const getContainerProps = (0,
|
|
203
|
+
const getContainerProps = (0, import_react2.useCallback)(
|
|
80
204
|
(props2 = {}, ref = null) => ({
|
|
81
|
-
...(0,
|
|
205
|
+
...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
|
|
82
206
|
...props2,
|
|
83
207
|
ref,
|
|
84
|
-
"data-checked": (0,
|
|
208
|
+
"data-checked": (0, import_utils2.dataAttr)(checked)
|
|
85
209
|
}),
|
|
86
210
|
[checked, rest]
|
|
87
211
|
);
|
|
88
|
-
const getIconProps = (0,
|
|
212
|
+
const getIconProps = (0, import_react2.useCallback)(
|
|
89
213
|
(props2 = {}, ref = null) => ({
|
|
90
|
-
...(0,
|
|
214
|
+
...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
|
|
91
215
|
...props2,
|
|
92
216
|
ref,
|
|
93
|
-
"data-active": (0,
|
|
94
|
-
"data-hover": (0,
|
|
95
|
-
"data-checked": (0,
|
|
96
|
-
"data-focus": (0,
|
|
97
|
-
"data-focus-visible": (0,
|
|
217
|
+
"data-active": (0, import_utils2.dataAttr)(isActive),
|
|
218
|
+
"data-hover": (0, import_utils2.dataAttr)(isHovered),
|
|
219
|
+
"data-checked": (0, import_utils2.dataAttr)(checked),
|
|
220
|
+
"data-focus": (0, import_utils2.dataAttr)(isFocused),
|
|
221
|
+
"data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
|
|
98
222
|
"aria-hidden": true,
|
|
99
|
-
onMouseDown: (0,
|
|
100
|
-
onMouseUp: (0,
|
|
101
|
-
onMouseEnter: (0,
|
|
102
|
-
onMouseLeave: (0,
|
|
223
|
+
onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, () => setActive(true)),
|
|
224
|
+
onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false)),
|
|
225
|
+
onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
|
|
226
|
+
onMouseLeave: (0, import_utils2.handlerAll)(props2.onMouseLeave, () => setHovered(false))
|
|
103
227
|
}),
|
|
104
228
|
[checked, isActive, isFocused, isFocusVisible, isHovered, rest]
|
|
105
229
|
);
|
|
106
|
-
const getInputProps = (0,
|
|
230
|
+
const getInputProps = (0, import_react2.useCallback)(
|
|
107
231
|
(props2 = {}, ref = null) => ({
|
|
108
|
-
...(0,
|
|
232
|
+
...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
|
|
109
233
|
...props2,
|
|
110
234
|
ref,
|
|
111
235
|
id,
|
|
@@ -127,11 +251,11 @@ var useRadio = (props) => {
|
|
|
127
251
|
whiteSpace: "nowrap",
|
|
128
252
|
position: "absolute"
|
|
129
253
|
},
|
|
130
|
-
onChange: (0,
|
|
131
|
-
onBlur: (0,
|
|
132
|
-
onFocus: (0,
|
|
133
|
-
onKeyDown: (0,
|
|
134
|
-
onKeyUp: (0,
|
|
254
|
+
onChange: (0, import_utils2.handlerAll)(props2.onChange, onChange),
|
|
255
|
+
onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
|
|
256
|
+
onFocus: (0, import_utils2.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
|
|
257
|
+
onKeyDown: (0, import_utils2.handlerAll)(props2.onKeyDown, onKeyDown),
|
|
258
|
+
onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
|
|
135
259
|
}),
|
|
136
260
|
[
|
|
137
261
|
rest,
|
|
@@ -149,20 +273,20 @@ var useRadio = (props) => {
|
|
|
149
273
|
onKeyUp
|
|
150
274
|
]
|
|
151
275
|
);
|
|
152
|
-
const getLabelProps = (0,
|
|
276
|
+
const getLabelProps = (0, import_react2.useCallback)(
|
|
153
277
|
(props2 = {}, ref = null) => ({
|
|
154
|
-
...(0,
|
|
278
|
+
...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
|
|
155
279
|
props: props2,
|
|
156
280
|
ref,
|
|
157
|
-
onMouseDown: (0,
|
|
281
|
+
onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
|
|
158
282
|
ev.preventDefault();
|
|
159
283
|
ev.stopPropagation();
|
|
160
284
|
}),
|
|
161
|
-
onTouchStart: (0,
|
|
285
|
+
onTouchStart: (0, import_utils2.handlerAll)(props2.onTouchStart, (ev) => {
|
|
162
286
|
ev.preventDefault();
|
|
163
287
|
ev.stopPropagation();
|
|
164
288
|
}),
|
|
165
|
-
"data-checked": (0,
|
|
289
|
+
"data-checked": (0, import_utils2.dataAttr)(checked)
|
|
166
290
|
}),
|
|
167
291
|
[checked, rest]
|
|
168
292
|
);
|
|
@@ -178,11 +302,11 @@ var useRadio = (props) => {
|
|
|
178
302
|
getLabelProps
|
|
179
303
|
};
|
|
180
304
|
};
|
|
181
|
-
var Radio = (0,
|
|
305
|
+
var Radio = (0, import_react2.forwardRef)(
|
|
182
306
|
(props, ref) => {
|
|
183
307
|
var _a, _b, _c, _d;
|
|
184
308
|
const group = useRadioGroupContenxt();
|
|
185
|
-
const control = (0,
|
|
309
|
+
const control = (0, import_form_control2.useFormControl)(props);
|
|
186
310
|
const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Radio", { ...group, ...props });
|
|
187
311
|
const {
|
|
188
312
|
className,
|
|
@@ -204,14 +328,14 @@ var Radio = (0, import_react.forwardRef)(
|
|
|
204
328
|
isDisabled,
|
|
205
329
|
isInvalid,
|
|
206
330
|
isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value === rest.value : rest.isChecked,
|
|
207
|
-
onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0,
|
|
331
|
+
onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0, import_utils2.funcAll)(group.onChange, rest.onChange) : rest.onChange
|
|
208
332
|
});
|
|
209
|
-
return /* @__PURE__ */ (0,
|
|
333
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
210
334
|
import_core.ui.label,
|
|
211
335
|
{
|
|
212
|
-
className: (0,
|
|
336
|
+
className: (0, import_utils2.cx)("ui-radio", className),
|
|
213
337
|
...getContainerProps(),
|
|
214
|
-
...(0,
|
|
338
|
+
...(0, import_utils2.omitObject)(rest, [
|
|
215
339
|
"id",
|
|
216
340
|
"name",
|
|
217
341
|
"value",
|
|
@@ -232,8 +356,8 @@ var Radio = (0, import_react.forwardRef)(
|
|
|
232
356
|
...styles.container
|
|
233
357
|
},
|
|
234
358
|
children: [
|
|
235
|
-
/* @__PURE__ */ (0,
|
|
236
|
-
/* @__PURE__ */ (0,
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.ui.input, { className: "ui-radio-input", ...getInputProps(inputProps, ref) }),
|
|
360
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
237
361
|
import_core.ui.span,
|
|
238
362
|
{
|
|
239
363
|
className: "ui-radio-icon",
|
|
@@ -246,7 +370,7 @@ var Radio = (0, import_react.forwardRef)(
|
|
|
246
370
|
}
|
|
247
371
|
}
|
|
248
372
|
),
|
|
249
|
-
/* @__PURE__ */ (0,
|
|
373
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
250
374
|
import_core.ui.span,
|
|
251
375
|
{
|
|
252
376
|
className: "ui-radio-label",
|
|
@@ -261,134 +385,10 @@ var Radio = (0, import_react.forwardRef)(
|
|
|
261
385
|
}
|
|
262
386
|
);
|
|
263
387
|
Radio.displayName = "Radio";
|
|
264
|
-
|
|
265
|
-
// src/radio-group.tsx
|
|
266
|
-
var import_form_control2 = require("@yamada-ui/form-control");
|
|
267
|
-
var import_layouts = require("@yamada-ui/layouts");
|
|
268
|
-
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
|
269
|
-
var import_utils2 = require("@yamada-ui/utils");
|
|
270
|
-
var import_react2 = require("react");
|
|
271
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
272
|
-
var isEvent = (value) => value && (0, import_utils2.isObject)(value) && (0, import_utils2.isObject)(value.target);
|
|
273
|
-
var useRadioGroup = ({
|
|
274
|
-
id,
|
|
275
|
-
name,
|
|
276
|
-
isNative,
|
|
277
|
-
...props
|
|
278
|
-
}) => {
|
|
279
|
-
id = id != null ? id : (0, import_react2.useId)();
|
|
280
|
-
name = name != null ? name : `radio-${id}`;
|
|
281
|
-
props.onChange = (0, import_utils2.useCallbackRef)(props.onChange);
|
|
282
|
-
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
|
283
|
-
value: props.value,
|
|
284
|
-
defaultValue: props.defaultValue,
|
|
285
|
-
onChange: props.onChange
|
|
286
|
-
});
|
|
287
|
-
const containerRef = (0, import_react2.useRef)(null);
|
|
288
|
-
const onFocus = (0, import_react2.useCallback)(() => {
|
|
289
|
-
const container = containerRef.current;
|
|
290
|
-
if (!container)
|
|
291
|
-
return;
|
|
292
|
-
let query = `input:not(:disabled):checked`;
|
|
293
|
-
let firstInput = container.querySelector(query);
|
|
294
|
-
if (firstInput) {
|
|
295
|
-
firstInput.focus();
|
|
296
|
-
} else {
|
|
297
|
-
query = `input:not(:disabled)`;
|
|
298
|
-
firstInput = container.querySelector(query);
|
|
299
|
-
firstInput == null ? void 0 : firstInput.focus();
|
|
300
|
-
}
|
|
301
|
-
}, []);
|
|
302
|
-
const onChange = (0, import_react2.useCallback)(
|
|
303
|
-
(evOrValue) => {
|
|
304
|
-
const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
|
|
305
|
-
setValue(nextValue);
|
|
306
|
-
},
|
|
307
|
-
[setValue]
|
|
308
|
-
);
|
|
309
|
-
const getContainerProps = (0, import_react2.useCallback)(
|
|
310
|
-
(props2 = {}, ref = null) => ({
|
|
311
|
-
...props2,
|
|
312
|
-
ref: (0, import_utils2.mergeRefs)(ref, containerRef),
|
|
313
|
-
role: "group"
|
|
314
|
-
}),
|
|
315
|
-
[]
|
|
316
|
-
);
|
|
317
|
-
const getRadioProps = (0, import_react2.useCallback)(
|
|
318
|
-
(props2 = {}, ref = null) => ({
|
|
319
|
-
...props2,
|
|
320
|
-
ref,
|
|
321
|
-
name,
|
|
322
|
-
[isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
|
|
323
|
-
onChange
|
|
324
|
-
}),
|
|
325
|
-
[name, value, onChange, isNative]
|
|
326
|
-
);
|
|
327
|
-
return {
|
|
328
|
-
name,
|
|
329
|
-
value,
|
|
330
|
-
setValue,
|
|
331
|
-
onChange,
|
|
332
|
-
onFocus,
|
|
333
|
-
getContainerProps,
|
|
334
|
-
getRadioProps
|
|
335
|
-
};
|
|
336
|
-
};
|
|
337
|
-
var [RadioGroupProvider, useRadioGroupContenxt] = (0, import_utils2.createContext)({
|
|
338
|
-
strict: false,
|
|
339
|
-
name: "RadioGroupContext"
|
|
340
|
-
});
|
|
341
|
-
var RadioGroup = (0, import_react2.forwardRef)(
|
|
342
|
-
({
|
|
343
|
-
className,
|
|
344
|
-
size,
|
|
345
|
-
variant,
|
|
346
|
-
colorScheme,
|
|
347
|
-
children,
|
|
348
|
-
direction = "column",
|
|
349
|
-
gap,
|
|
350
|
-
...props
|
|
351
|
-
}, ref) => {
|
|
352
|
-
const { name, value, onChange, getContainerProps } = useRadioGroup(props);
|
|
353
|
-
const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control2.useFormControl)(props);
|
|
354
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
355
|
-
RadioGroupProvider,
|
|
356
|
-
{
|
|
357
|
-
value: {
|
|
358
|
-
size,
|
|
359
|
-
variant,
|
|
360
|
-
colorScheme,
|
|
361
|
-
isRequired,
|
|
362
|
-
isReadOnly,
|
|
363
|
-
isDisabled,
|
|
364
|
-
isInvalid,
|
|
365
|
-
name,
|
|
366
|
-
value,
|
|
367
|
-
onChange
|
|
368
|
-
},
|
|
369
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
370
|
-
import_layouts.Flex,
|
|
371
|
-
{
|
|
372
|
-
ref,
|
|
373
|
-
className: (0, import_utils2.cx)("ui-radio-group", className),
|
|
374
|
-
direction,
|
|
375
|
-
gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
|
|
376
|
-
...getContainerProps(
|
|
377
|
-
(0, import_utils2.omitObject)(props, ["onChange", "isInvalid", "isDisabled", "isRequired", "isReadOnly"])
|
|
378
|
-
),
|
|
379
|
-
children
|
|
380
|
-
}
|
|
381
|
-
)
|
|
382
|
-
}
|
|
383
|
-
);
|
|
384
|
-
}
|
|
385
|
-
);
|
|
386
|
-
RadioGroup.displayName = "RadioGroup";
|
|
387
388
|
// Annotate the CommonJS export names for ESM import in node:
|
|
388
389
|
0 && (module.exports = {
|
|
389
390
|
Radio,
|
|
390
391
|
RadioGroup,
|
|
391
392
|
useRadio,
|
|
392
|
-
useRadioGroup
|
|
393
|
-
useRadioGroupContenxt
|
|
393
|
+
useRadioGroup
|
|
394
394
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Radio,
|
|
3
3
|
useRadio
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-6R3LHBQV.mjs";
|
|
5
5
|
import {
|
|
6
6
|
RadioGroup,
|
|
7
|
-
useRadioGroup
|
|
8
|
-
useRadioGroupContenxt
|
|
7
|
+
useRadioGroup
|
|
9
8
|
} from "./chunk-IFPH6APO.mjs";
|
|
10
9
|
export {
|
|
11
10
|
Radio,
|
|
12
11
|
RadioGroup,
|
|
13
12
|
useRadio,
|
|
14
|
-
useRadioGroup
|
|
15
|
-
useRadioGroupContenxt
|
|
13
|
+
useRadioGroup
|
|
16
14
|
};
|
package/dist/radio-group.d.ts
CHANGED
|
@@ -6,11 +6,34 @@ import { FlexProps } from '@yamada-ui/layouts';
|
|
|
6
6
|
import { PropGetter, DOMAttributes } from '@yamada-ui/utils';
|
|
7
7
|
|
|
8
8
|
type UseRadioGroupProps<Y extends string | number = string> = {
|
|
9
|
+
/**
|
|
10
|
+
* The top-level id string that will be applied to the radios.
|
|
11
|
+
* The index of the radio will be appended to this top-level id.
|
|
12
|
+
*/
|
|
9
13
|
id?: string;
|
|
14
|
+
/**
|
|
15
|
+
* The HTML `name` attribute used for forms.
|
|
16
|
+
*/
|
|
10
17
|
name?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The value of the radio group.
|
|
20
|
+
*/
|
|
11
21
|
value?: Y;
|
|
22
|
+
/**
|
|
23
|
+
* The initial value of the radio group.
|
|
24
|
+
*/
|
|
12
25
|
defaultValue?: Y;
|
|
26
|
+
/**
|
|
27
|
+
* The callback fired when any children radio is checked or unchecked.
|
|
28
|
+
*/
|
|
13
29
|
onChange?: (value: Y) => void;
|
|
30
|
+
/**
|
|
31
|
+
* If `true`, input elements will receive `checked` attribute instead of `isChecked`.
|
|
32
|
+
*
|
|
33
|
+
* This assumes, you're using native radio inputs.
|
|
34
|
+
*
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
14
37
|
isNative?: boolean;
|
|
15
38
|
};
|
|
16
39
|
declare const useRadioGroup: <Y extends string | number = string>({ id, name, isNative, ...props }: UseRadioGroupProps<Y>) => {
|
|
@@ -33,6 +56,7 @@ declare const useRadioGroup: <Y extends string | number = string>({ id, name, is
|
|
|
33
56
|
onChange: (ev: ChangeEvent<HTMLInputElement> | Y) => void;
|
|
34
57
|
}>;
|
|
35
58
|
};
|
|
59
|
+
type UseRadioGroupReturn = ReturnType<typeof useRadioGroup>;
|
|
36
60
|
type RadioGroupProps<Y extends string | number = string> = ThemeProps<'Radio'> & Omit<FlexProps, 'onChange'> & UseRadioGroupProps<Y> & FormControlOptions;
|
|
37
61
|
type RadioGroupContext = ThemeProps<'Radio'> & FormControlOptions & {
|
|
38
62
|
name: string;
|
|
@@ -45,4 +69,4 @@ declare const RadioGroup: (<Y extends string | number = string>(props: ThemeProp
|
|
|
45
69
|
ref?: Ref<HTMLDivElement> | undefined;
|
|
46
70
|
}) => JSX.Element) & ComponentArgs;
|
|
47
71
|
|
|
48
|
-
export { RadioGroup, RadioGroupProps, UseRadioGroupProps, useRadioGroup, useRadioGroupContenxt };
|
|
72
|
+
export { RadioGroup, RadioGroupProps, UseRadioGroupProps, UseRadioGroupReturn, useRadioGroup, useRadioGroupContenxt };
|
package/dist/radio.d.ts
CHANGED
|
@@ -4,11 +4,33 @@ import { PropGetter } from '@yamada-ui/utils';
|
|
|
4
4
|
import { ChangeEventHandler, Ref, InputHTMLAttributes } from 'react';
|
|
5
5
|
|
|
6
6
|
type UseRadioProps<Y extends string | number = string> = FormControlOptions & {
|
|
7
|
+
/**
|
|
8
|
+
* id assigned to input.
|
|
9
|
+
*/
|
|
7
10
|
id?: string;
|
|
11
|
+
/**
|
|
12
|
+
* The name of the input field in a radio.
|
|
13
|
+
*/
|
|
8
14
|
name?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The value to be used in the radio button.
|
|
17
|
+
*/
|
|
9
18
|
value?: Y;
|
|
19
|
+
/**
|
|
20
|
+
* If `true`, the radio will be initially checked.
|
|
21
|
+
*
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
10
24
|
defaultChecked?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* If `true`, the radio will be checked.
|
|
27
|
+
*
|
|
28
|
+
* @default false
|
|
29
|
+
*/
|
|
11
30
|
isChecked?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The callback invoked when the checked state changes.
|
|
33
|
+
*/
|
|
12
34
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
13
35
|
};
|
|
14
36
|
declare const useRadio: <Y extends string | number = string>(props: UseRadioProps<Y>) => {
|
|
@@ -22,6 +44,7 @@ declare const useRadio: <Y extends string | number = string>(props: UseRadioProp
|
|
|
22
44
|
getIconProps: PropGetter;
|
|
23
45
|
getLabelProps: PropGetter;
|
|
24
46
|
};
|
|
47
|
+
type UseRadioReturn = ReturnType<typeof useRadio>;
|
|
25
48
|
type RadioOptions = {
|
|
26
49
|
iconProps?: HTMLUIProps<'span'>;
|
|
27
50
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
@@ -29,14 +52,36 @@ type RadioOptions = {
|
|
|
29
52
|
};
|
|
30
53
|
type RadioProps<Y extends string | number = string> = Omit<HTMLUIProps<'label'>, keyof UseRadioProps> & ThemeProps<'Radio'> & UseRadioProps<Y> & RadioOptions;
|
|
31
54
|
declare const Radio: (<Y extends string | number = string>(props: Omit<HTMLUIProps<"label">, "value" | "name" | "id" | "onChange" | "defaultChecked" | keyof FormControlOptions | "isChecked"> & ThemeProps<"Radio"> & FormControlOptions & {
|
|
55
|
+
/**
|
|
56
|
+
* id assigned to input.
|
|
57
|
+
*/
|
|
32
58
|
id?: string | undefined;
|
|
59
|
+
/**
|
|
60
|
+
* The name of the input field in a radio.
|
|
61
|
+
*/
|
|
33
62
|
name?: string | undefined;
|
|
63
|
+
/**
|
|
64
|
+
* The value to be used in the radio button.
|
|
65
|
+
*/
|
|
34
66
|
value?: Y | undefined;
|
|
67
|
+
/**
|
|
68
|
+
* If `true`, the radio will be initially checked.
|
|
69
|
+
*
|
|
70
|
+
* @default false
|
|
71
|
+
*/
|
|
35
72
|
defaultChecked?: boolean | undefined;
|
|
73
|
+
/**
|
|
74
|
+
* If `true`, the radio will be checked.
|
|
75
|
+
*
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
36
78
|
isChecked?: boolean | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* The callback invoked when the checked state changes.
|
|
81
|
+
*/
|
|
37
82
|
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
|
|
38
83
|
} & RadioOptions & {
|
|
39
84
|
ref?: Ref<HTMLInputElement> | undefined;
|
|
40
85
|
}) => JSX.Element) & ComponentArgs;
|
|
41
86
|
|
|
42
|
-
export { Radio, RadioProps, UseRadioProps, useRadio };
|
|
87
|
+
export { Radio, RadioProps, UseRadioProps, UseRadioReturn, useRadio };
|
package/dist/radio.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/radio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Yamada UI radio component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.
|
|
38
|
+
"@yamada-ui/core": "0.3.1",
|
|
39
39
|
"@yamada-ui/utils": "0.1.1",
|
|
40
|
-
"@yamada-ui/form-control": "0.
|
|
41
|
-
"@yamada-ui/layouts": "0.
|
|
40
|
+
"@yamada-ui/form-control": "0.2.0",
|
|
41
|
+
"@yamada-ui/layouts": "0.2.0",
|
|
42
42
|
"@yamada-ui/use-controllable-state": "0.1.2",
|
|
43
43
|
"@yamada-ui/use-focus-visible": "0.1.1"
|
|
44
44
|
},
|
|
File without changes
|