@yamada-ui/radio 1.2.10-next-20241005220055 → 1.2.10-next-20241008193728
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-YWRIETVW.mjs → chunk-6FMV6NX2.mjs} +3 -3
- package/dist/chunk-6FMV6NX2.mjs.map +1 -0
- package/dist/{chunk-7YYLBUPI.mjs → chunk-NVHEZ3VI.mjs} +57 -57
- package/dist/chunk-NVHEZ3VI.mjs.map +1 -0
- package/dist/{chunk-VFISCGJO.mjs → chunk-XCAPUS2B.mjs} +29 -26
- package/dist/chunk-XCAPUS2B.mjs.map +1 -0
- package/dist/index.js +73 -70
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/radio-context.d.mts +2 -2
- package/dist/radio-context.d.ts +2 -2
- package/dist/radio-context.js +2 -2
- package/dist/radio-context.js.map +1 -1
- package/dist/radio-context.mjs +1 -1
- package/dist/radio-group.d.mts +21 -21
- package/dist/radio-group.d.ts +21 -21
- package/dist/radio-group.js +73 -70
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.mjs +3 -3
- package/dist/radio.d.mts +24 -24
- package/dist/radio.d.ts +24 -24
- package/dist/radio.js +51 -51
- package/dist/radio.js.map +1 -1
- package/dist/radio.mjs +2 -2
- package/package.json +7 -7
- package/dist/chunk-7YYLBUPI.mjs.map +0 -1
- package/dist/chunk-VFISCGJO.mjs.map +0 -1
- package/dist/chunk-YWRIETVW.mjs.map +0 -1
package/dist/index.js
CHANGED
@@ -38,8 +38,8 @@ var import_react = require("react");
|
|
38
38
|
// src/radio-context.ts
|
39
39
|
var import_utils = require("@yamada-ui/utils");
|
40
40
|
var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)({
|
41
|
-
|
42
|
-
|
41
|
+
name: "RadioGroupContext",
|
42
|
+
strict: false
|
43
43
|
});
|
44
44
|
|
45
45
|
// src/radio.tsx
|
@@ -53,20 +53,20 @@ var useRadio = ({
|
|
53
53
|
const {
|
54
54
|
id: _id,
|
55
55
|
name,
|
56
|
-
value,
|
57
|
-
isChecked: isCheckedProp,
|
58
56
|
defaultIsChecked,
|
57
|
+
isChecked: isCheckedProp,
|
58
|
+
value,
|
59
59
|
onChange: onChangeProp,
|
60
60
|
...computedProps
|
61
61
|
} = (0, import_form_control.useFormControlProps)({ id, ...props });
|
62
62
|
const [
|
63
63
|
{
|
64
64
|
"aria-readonly": _ariaReadonly,
|
65
|
-
required,
|
66
65
|
disabled,
|
67
66
|
readOnly,
|
68
|
-
|
67
|
+
required,
|
69
68
|
onBlur: onBlurProp,
|
69
|
+
onFocus: onFocusProp,
|
70
70
|
...formControlProps
|
71
71
|
},
|
72
72
|
rest
|
@@ -120,16 +120,16 @@ var useRadio = ({
|
|
120
120
|
...formControlProps,
|
121
121
|
...props2,
|
122
122
|
ref,
|
123
|
+
"aria-hidden": true,
|
123
124
|
"data-active": (0, import_utils2.dataAttr)(isActive),
|
124
|
-
"data-hover": (0, import_utils2.dataAttr)(isHovered),
|
125
125
|
"data-checked": (0, import_utils2.dataAttr)(checked),
|
126
126
|
"data-focus": (0, import_utils2.dataAttr)(isFocused),
|
127
127
|
"data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
|
128
|
-
"
|
129
|
-
onMouseDown: (0, import_utils2.handlerAll)(props2
|
130
|
-
|
131
|
-
|
132
|
-
|
128
|
+
"data-hover": (0, import_utils2.dataAttr)(isHovered),
|
129
|
+
onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, () => setActive(true)),
|
130
|
+
onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
|
131
|
+
onMouseLeave: (0, import_utils2.handlerAll)(props2.onMouseLeave, () => setHovered(false)),
|
132
|
+
onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false))
|
133
133
|
}),
|
134
134
|
[checked, isActive, isFocused, isFocusVisible, isHovered, formControlProps]
|
135
135
|
);
|
@@ -137,32 +137,32 @@ var useRadio = ({
|
|
137
137
|
(props2 = {}, ref = null) => ({
|
138
138
|
...formControlProps,
|
139
139
|
...props2,
|
140
|
-
ref,
|
141
140
|
id,
|
141
|
+
ref,
|
142
142
|
type: "radio",
|
143
143
|
name,
|
144
|
-
value,
|
145
|
-
required,
|
146
|
-
disabled,
|
147
|
-
readOnly,
|
148
|
-
checked,
|
149
|
-
"aria-checked": checked,
|
150
144
|
style: {
|
151
145
|
border: "0px",
|
152
146
|
clip: "rect(0px, 0px, 0px, 0px)",
|
153
147
|
height: "1px",
|
154
|
-
width: "1px",
|
155
148
|
margin: "-1px",
|
156
|
-
padding: "0px",
|
157
149
|
overflow: "hidden",
|
150
|
+
padding: "0px",
|
151
|
+
position: "absolute",
|
158
152
|
whiteSpace: "nowrap",
|
159
|
-
|
153
|
+
width: "1px"
|
160
154
|
},
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
155
|
+
"aria-checked": checked,
|
156
|
+
checked,
|
157
|
+
disabled,
|
158
|
+
readOnly,
|
159
|
+
required,
|
160
|
+
value,
|
161
|
+
onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
|
162
|
+
onChange: (0, import_utils2.handlerAll)(props2.onChange, onChange),
|
163
|
+
onFocus: (0, import_utils2.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
|
164
|
+
onKeyDown: (0, import_utils2.handlerAll)(props2.onKeyDown, onKeyDown),
|
165
|
+
onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
|
166
166
|
}),
|
167
167
|
[
|
168
168
|
formControlProps,
|
@@ -185,28 +185,28 @@ var useRadio = ({
|
|
185
185
|
...formControlProps,
|
186
186
|
...props2,
|
187
187
|
ref,
|
188
|
-
|
188
|
+
"data-checked": (0, import_utils2.dataAttr)(checked),
|
189
|
+
onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
|
189
190
|
ev.preventDefault();
|
190
191
|
ev.stopPropagation();
|
191
192
|
}),
|
192
|
-
onTouchStart: (0, import_utils2.handlerAll)(props2
|
193
|
+
onTouchStart: (0, import_utils2.handlerAll)(props2.onTouchStart, (ev) => {
|
193
194
|
ev.preventDefault();
|
194
195
|
ev.stopPropagation();
|
195
|
-
})
|
196
|
-
"data-checked": (0, import_utils2.dataAttr)(checked)
|
196
|
+
})
|
197
197
|
}),
|
198
198
|
[checked, formControlProps]
|
199
199
|
);
|
200
200
|
return {
|
201
|
-
props: rest,
|
202
|
-
isFocusVisible,
|
203
|
-
isFocused,
|
204
|
-
isHovered,
|
205
201
|
isActive,
|
206
202
|
isChecked: checked,
|
203
|
+
isFocused,
|
204
|
+
isFocusVisible,
|
205
|
+
isHovered,
|
206
|
+
props: rest,
|
207
207
|
getContainerProps,
|
208
|
-
getInputProps,
|
209
208
|
getIconProps,
|
209
|
+
getInputProps,
|
210
210
|
getLabelProps
|
211
211
|
};
|
212
212
|
};
|
@@ -222,33 +222,33 @@ var Radio = (0, import_react.forwardRef)(
|
|
222
222
|
});
|
223
223
|
const {
|
224
224
|
className,
|
225
|
+
children,
|
225
226
|
gap = "0.5rem",
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
227
|
+
isDisabled = (_a = groupProps.isDisabled) != null ? _a : control.isDisabled,
|
228
|
+
isInvalid = (_b = groupProps.isInvalid) != null ? _b : control.isInvalid,
|
229
|
+
isReadOnly = (_c = groupProps.isReadOnly) != null ? _c : control.isReadOnly,
|
230
|
+
isRequired = (_d = groupProps.isRequired) != null ? _d : control.isRequired,
|
230
231
|
iconProps,
|
231
232
|
inputProps,
|
232
233
|
labelProps,
|
233
|
-
children,
|
234
234
|
...computedProps
|
235
235
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
236
236
|
const isCheckedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
|
237
237
|
const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
|
238
238
|
const {
|
239
239
|
isChecked,
|
240
|
+
props: rest,
|
240
241
|
getContainerProps,
|
241
|
-
getInputProps,
|
242
242
|
getIconProps,
|
243
|
-
|
244
|
-
|
243
|
+
getInputProps,
|
244
|
+
getLabelProps
|
245
245
|
} = useRadio({
|
246
246
|
...computedProps,
|
247
|
-
|
248
|
-
isReadOnly,
|
247
|
+
isChecked: isCheckedProp,
|
249
248
|
isDisabled,
|
250
249
|
isInvalid,
|
251
|
-
|
250
|
+
isReadOnly,
|
251
|
+
isRequired,
|
252
252
|
onChange
|
253
253
|
});
|
254
254
|
const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
|
@@ -258,12 +258,12 @@ var Radio = (0, import_react.forwardRef)(
|
|
258
258
|
className: (0, import_utils2.cx)("ui-radio", className),
|
259
259
|
...getContainerProps(rest),
|
260
260
|
__css: {
|
261
|
+
alignItems: "center",
|
261
262
|
cursor: "pointer",
|
262
|
-
position: "relative",
|
263
263
|
display: "inline-flex",
|
264
|
-
alignItems: "center",
|
265
|
-
verticalAlign: "top",
|
266
264
|
gap,
|
265
|
+
position: "relative",
|
266
|
+
verticalAlign: "top",
|
267
267
|
...styles.container
|
268
268
|
},
|
269
269
|
children: [
|
@@ -286,8 +286,8 @@ var Radio = (0, import_react.forwardRef)(
|
|
286
286
|
className: "ui-radio__icon",
|
287
287
|
...getIconProps(iconProps),
|
288
288
|
__css: {
|
289
|
-
position: "relative",
|
290
289
|
display: "inline-block",
|
290
|
+
position: "relative",
|
291
291
|
userSelect: "none",
|
292
292
|
...styles.icon
|
293
293
|
}
|
@@ -321,9 +321,9 @@ var isEvent = (value) => value && (0, import_utils3.isObject)(value) && (0, impo
|
|
321
321
|
var useRadioGroup = ({
|
322
322
|
id,
|
323
323
|
name,
|
324
|
+
defaultValue,
|
324
325
|
isNative,
|
325
326
|
value: valueProp,
|
326
|
-
defaultValue,
|
327
327
|
onChange: onChangeProp,
|
328
328
|
...props
|
329
329
|
}) => {
|
@@ -332,8 +332,8 @@ var useRadioGroup = ({
|
|
332
332
|
name != null ? name : name = `radio-${id}`;
|
333
333
|
const onChangeRef = (0, import_utils3.useCallbackRef)(onChangeProp);
|
334
334
|
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
335
|
-
value: valueProp,
|
336
335
|
defaultValue,
|
336
|
+
value: valueProp,
|
337
337
|
onChange: onChangeRef
|
338
338
|
});
|
339
339
|
const containerRef = (0, import_react2.useRef)(null);
|
@@ -372,44 +372,47 @@ var useRadioGroup = ({
|
|
372
372
|
...props2,
|
373
373
|
ref,
|
374
374
|
name,
|
375
|
-
[isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
|
376
375
|
"aria-checked": isChecked,
|
376
|
+
[isNative ? "checked" : "isChecked"]: (
|
377
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
378
|
+
value != null ? isChecked : void 0
|
379
|
+
),
|
377
380
|
onChange
|
378
381
|
};
|
379
382
|
},
|
380
383
|
[name, value, onChange, isNative]
|
381
384
|
);
|
382
385
|
return {
|
383
|
-
props,
|
384
386
|
id,
|
385
387
|
name,
|
386
|
-
|
388
|
+
props,
|
387
389
|
setValue,
|
388
|
-
|
389
|
-
onFocus,
|
390
|
+
value,
|
390
391
|
getContainerProps,
|
391
|
-
getRadioProps
|
392
|
+
getRadioProps,
|
393
|
+
onChange,
|
394
|
+
onFocus
|
392
395
|
};
|
393
396
|
};
|
394
397
|
var RadioGroup = (0, import_react2.forwardRef)(
|
395
398
|
({
|
396
399
|
id: idProp,
|
397
400
|
className,
|
401
|
+
colorScheme,
|
398
402
|
size,
|
399
403
|
variant,
|
400
|
-
colorScheme,
|
401
404
|
children,
|
402
|
-
items = [],
|
403
405
|
direction = "column",
|
404
406
|
gap,
|
407
|
+
items = [],
|
405
408
|
...props
|
406
409
|
}, ref) => {
|
407
410
|
const {
|
408
|
-
labelId,
|
409
|
-
isRequired,
|
410
|
-
isReadOnly,
|
411
411
|
isDisabled,
|
412
412
|
isInvalid,
|
413
|
+
isReadOnly,
|
414
|
+
isRequired,
|
415
|
+
labelId,
|
413
416
|
...computedProps
|
414
417
|
} = (0, import_form_control2.useFormControl)({
|
415
418
|
id: idProp,
|
@@ -418,10 +421,10 @@ var RadioGroup = (0, import_react2.forwardRef)(
|
|
418
421
|
const {
|
419
422
|
id,
|
420
423
|
name,
|
424
|
+
props: rest,
|
421
425
|
value,
|
422
|
-
onChange,
|
423
426
|
getContainerProps,
|
424
|
-
|
427
|
+
onChange
|
425
428
|
} = useRadioGroup(computedProps);
|
426
429
|
const validChildren = (0, import_utils3.getValidChildren)(children);
|
427
430
|
let computedChildren = [];
|
@@ -432,14 +435,14 @@ var RadioGroup = (0, import_react2.forwardRef)(
|
|
432
435
|
RadioGroupProvider,
|
433
436
|
{
|
434
437
|
value: {
|
438
|
+
name,
|
439
|
+
colorScheme,
|
435
440
|
size,
|
436
441
|
variant,
|
437
|
-
colorScheme,
|
438
|
-
isRequired,
|
439
|
-
isReadOnly,
|
440
442
|
isDisabled,
|
441
443
|
isInvalid,
|
442
|
-
|
444
|
+
isReadOnly,
|
445
|
+
isRequired,
|
443
446
|
value,
|
444
447
|
onChange
|
445
448
|
},
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/radio.tsx","../src/radio-context.ts","../src/radio-group.tsx"],"sourcesContent":["export { Radio, useRadio } from \"./radio\"\nexport type { RadioProps, UseRadioProps, UseRadioReturn } from \"./radio\"\nexport { RadioGroup, useRadioGroup } from \"./radio-group\"\nexport type {\n RadioItem,\n RadioGroupProps,\n UseRadioGroupProps,\n UseRadioGroupReturn,\n} from \"./radio-group\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n PropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n useFormControl,\n useFormControlProps,\n formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport {\n cx,\n useCallbackRef,\n funcAll,\n handlerAll,\n dataAttr,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type {\n ForwardedRef,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n RefAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-context\"\n\nexport interface UseRadioProps<Y extends string | number = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The name of the input field in a radio.\n */\n name?: string\n /**\n * The value to be used in the radio button.\n */\n value?: Y\n /**\n * If `true`, the radio will be initially checked.\n *\n * @default false\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <\n Y extends string | number = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: UseRadioProps<Y> & M) => {\n const uuid = useId()\n\n id ??= uuid\n\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n \"aria-readonly\": _ariaReadonly,\n required,\n disabled,\n readOnly,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [isFocused, setFocused] = useState<boolean>(false)\n const [isHovered, setHovered] = useState<boolean>(false)\n const [isActive, setActive] = useState<boolean>(false)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultIsChecked)\n\n const isControlled = isCheckedProp !== undefined\n const checked = isControlled ? (isCheckedProp as boolean) : isChecked\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!isControlled) setIsChecked(ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, isControlled],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n }),\n [checked, formControlProps],\n )\n\n const getIconProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-active\": dataAttr(isActive),\n \"data-hover\": dataAttr(isHovered),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"aria-hidden\": true,\n onMouseDown: handlerAll(props?.onMouseDown, () => setActive(true)),\n onMouseUp: handlerAll(props?.onMouseUp, () => setActive(false)),\n onMouseEnter: handlerAll(props?.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props?.onMouseLeave, () => setHovered(false)),\n }),\n [checked, isActive, isFocused, isFocusVisible, isHovered, formControlProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n id,\n type: \"radio\",\n name,\n value,\n required,\n disabled,\n readOnly,\n checked,\n \"aria-checked\": checked,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n },\n onChange: handlerAll(props?.onChange, onChange),\n onBlur: handlerAll(props?.onBlur, onBlur, () => setFocused(false)),\n onFocus: handlerAll(props?.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props?.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props?.onKeyUp, onKeyUp),\n }),\n [\n formControlProps,\n id,\n name,\n value,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n onMouseDown: handlerAll(props?.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props?.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n \"data-checked\": dataAttr(checked),\n }),\n [checked, formControlProps],\n )\n\n return {\n props: rest,\n isFocusVisible,\n isFocused,\n isHovered,\n isActive,\n isChecked: checked,\n getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n\ninterface RadioOptions {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface RadioProps<Y extends string | number = string>\n extends Omit<HTMLUIProps<\"label\">, keyof UseRadioProps>,\n ThemeProps<\"Radio\">,\n UseRadioProps<Y>,\n RadioOptions {}\n\n/**\n * `Radio` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio\n */\nexport const Radio = forwardRef(\n <Y extends string | number = string>(\n props: RadioProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useRadioGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Radio\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n gap = \"0.5rem\",\n isRequired = groupProps.isRequired ?? control.isRequired,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n iconProps,\n inputProps,\n labelProps,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue === computedProps.value\n : computedProps.isChecked\n\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n isChecked,\n getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useRadio({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked: isCheckedProp,\n onChange,\n })\n\n const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps(rest)}\n __css={{\n cursor: \"pointer\",\n position: \"relative\",\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"top\",\n gap,\n ...styles.container,\n }}\n >\n <ui.input\n className=\"ui-radio__input\"\n {...getInputProps(\n {\n ...inputProps,\n tabIndex,\n },\n ref,\n )}\n />\n\n <ui.span\n className=\"ui-radio__icon\"\n {...getIconProps(iconProps)}\n __css={{\n position: \"relative\",\n display: \"inline-block\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n />\n\n <ui.span\n className=\"ui-radio__label\"\n {...getLabelProps(labelProps)}\n __css={{ ...styles.label }}\n >\n {children}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: RadioProps<Y> & RefAttributes<HTMLInputElement>,\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\nRadio.__ui__ = \"Radio\"\n","import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\n\nexport interface RadioGroupContext\n extends ThemeProps<\"Radio\">,\n FormControlOptions {\n name: string\n value: string | number\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | string | number) => void\n}\n\nexport const [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n","import type { ComponentArgs, ThemeProps, PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n cx,\n isObject,\n useCallbackRef,\n getValidChildren,\n mergeRefs,\n} from \"@yamada-ui/utils\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ForwardedRef,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\nimport type { RadioGroupContext } from \"./radio-context\"\nimport { RadioGroupProvider } from \"./radio-context\"\n\nexport type RadioItem<Y extends string | number = string> = RadioProps<Y> & {\n label?: string\n}\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport interface UseRadioGroupProps<Y extends string | number = string> {\n /**\n * The top-level id string that will be applied to the radios.\n * The index of the radio will be appended to this top-level id.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The value of the radio group.\n */\n value?: Y\n /**\n * The initial value of the radio group.\n */\n defaultValue?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n}\n\nexport const useRadioGroup = <\n Y extends string | number,\n M extends Dict = Dict,\n>({\n id,\n name,\n isNative,\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n ...props\n}: UseRadioGroupProps<Y> & M) => {\n const uuid = useId()\n\n id ??= uuid\n name ??= `radio-${id}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeRef,\n })\n\n const containerRef = useRef<any>(null)\n\n const onFocus = useCallback(() => {\n const container = containerRef.current\n\n if (!container) return\n\n let query = `input:not(:disabled):checked`\n\n let firstInput = container.querySelector(query) as HTMLElement | undefined\n\n if (firstInput) {\n firstInput.focus()\n } else {\n query = `input:not(:disabled)`\n firstInput = container.querySelector(query) as HTMLElement | undefined\n\n firstInput?.focus()\n }\n }, [])\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const nextValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n setValue(nextValue)\n },\n [setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"radiogroup\",\n ...props,\n ref: mergeRefs(ref, containerRef),\n }),\n [],\n )\n\n const getRadioProps: PropGetter<\n { value?: Y },\n { value?: Y; checked?: boolean; isChecked?: boolean }\n > = useCallback(\n (props = {}, ref = null) => {\n const isChecked = props.value === value\n\n return {\n ...props,\n ref,\n name,\n [isNative ? \"checked\" : \"isChecked\"]:\n value != null ? isChecked : undefined,\n \"aria-checked\": isChecked,\n onChange,\n }\n },\n [name, value, onChange, isNative],\n )\n\n return {\n props,\n id,\n name,\n value,\n setValue,\n onChange,\n onFocus,\n getContainerProps,\n getRadioProps,\n }\n}\n\nexport type UseRadioGroupReturn<Y extends string | number = string> =\n ReturnType<typeof useRadioGroup<Y>>\n\nexport interface RadioGroupProps<Y extends string | number = string>\n extends ThemeProps<\"Radio\">,\n Omit<FlexProps, \"defaultValue\" | \"onChange\">,\n UseRadioGroupProps<Y>,\n FormControlOptions {\n /**\n * If provided, generate radios based on items.\n *\n * @default '[]'\n */\n items?: RadioItem<Y>[]\n}\n\nexport const RadioGroup = forwardRef(\n <Y extends string | number = string>(\n {\n id: idProp,\n className,\n size,\n variant,\n colorScheme,\n children,\n items = [],\n direction = \"column\",\n gap,\n ...props\n }: RadioGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n labelId,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n ...computedProps\n } = useFormControl({\n id: idProp,\n ...props,\n })\n const {\n id,\n name,\n value,\n onChange,\n getContainerProps,\n props: rest,\n } = useRadioGroup(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <Radio key={i} value={value} {...props}>\n {label}\n </Radio>\n ))\n }\n\n return (\n <RadioGroupProvider\n value={\n {\n size,\n variant,\n colorScheme,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n name,\n value,\n onChange,\n } as RadioGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-radio-group\", className)}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n id,\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n direction={direction}\n >\n {children ?? computedChildren}\n </Flex>\n </RadioGroupProvider>\n )\n },\n) as {\n <Y extends string | number = string>(\n props: RadioGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\nRadioGroup.__ui__ = \"RadioGroup\"\n"],"mappings":"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","names":["import_utils","props","import_form_control","import_utils","import_react","import_jsx_runtime","props","value"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/radio.tsx","../src/radio-context.ts","../src/radio-group.tsx"],"sourcesContent":["export { Radio, useRadio } from \"./radio\"\nexport type { RadioProps, UseRadioProps, UseRadioReturn } from \"./radio\"\nexport { RadioGroup, useRadioGroup } from \"./radio-group\"\nexport type {\n RadioGroupProps,\n RadioItem,\n UseRadioGroupProps,\n UseRadioGroupReturn,\n} from \"./radio-group\"\n","import type {\n ComponentArgs,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n ForwardedRef,\n InputHTMLAttributes,\n KeyboardEvent,\n ReactElement,\n RefAttributes,\n SyntheticEvent,\n} from \"react\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControl,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n cx,\n dataAttr,\n funcAll,\n handlerAll,\n splitObject,\n useCallbackRef,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-context\"\n\nexport interface UseRadioProps<Y extends number | string = string>\n extends FormControlOptions {\n /**\n * id assigned to input.\n */\n id?: string\n /**\n * The name of the input field in a radio.\n */\n name?: string\n /**\n * If `true`, the radio will be initially checked.\n *\n * @default false\n */\n defaultIsChecked?: boolean\n /**\n * If `true`, the radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The value to be used in the radio button.\n */\n value?: Y\n /**\n * The callback invoked when the checked state changes.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <\n Y extends number | string = string,\n M extends Dict = Dict,\n>({\n id,\n ...props\n}: M & UseRadioProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n\n const {\n id: _id,\n name,\n defaultIsChecked,\n isChecked: isCheckedProp,\n value,\n onChange: onChangeProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [\n {\n \"aria-readonly\": _ariaReadonly,\n disabled,\n readOnly,\n required,\n onBlur: onBlurProp,\n onFocus: onFocusProp,\n ...formControlProps\n },\n rest,\n ] = splitObject(computedProps, formControlProperties)\n\n const [isFocusVisible, setIsFocusVisible] = useState<boolean>(false)\n const [isFocused, setFocused] = useState<boolean>(false)\n const [isHovered, setHovered] = useState<boolean>(false)\n const [isActive, setActive] = useState<boolean>(false)\n\n const [isChecked, setIsChecked] = useState<boolean>(!!defaultIsChecked)\n\n const isControlled = isCheckedProp !== undefined\n const checked = isControlled ? (isCheckedProp as boolean) : isChecked\n\n useEffect(() => {\n return trackFocusVisible(setIsFocusVisible)\n }, [])\n\n const onChange = useCallbackRef(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (readOnly || disabled) {\n ev.preventDefault()\n\n return\n }\n\n if (!isControlled) setIsChecked(ev.target.checked)\n\n onChangeProp?.(ev)\n },\n [readOnly, disabled, isControlled],\n )\n const onFocus = useCallbackRef(onFocusProp)\n const onBlur = useCallbackRef(onBlurProp)\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: PropGetter<\"label\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n }),\n [checked, formControlProps],\n )\n\n const getIconProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"aria-hidden\": true,\n \"data-active\": dataAttr(isActive),\n \"data-checked\": dataAttr(checked),\n \"data-focus\": dataAttr(isFocused),\n \"data-focus-visible\": dataAttr(isFocused && isFocusVisible),\n \"data-hover\": dataAttr(isHovered),\n onMouseDown: handlerAll(props.onMouseDown, () => setActive(true)),\n onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n }),\n [checked, isActive, isFocused, isFocusVisible, isHovered, formControlProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref,\n type: \"radio\",\n name,\n style: {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n },\n \"aria-checked\": checked,\n checked,\n disabled,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n }),\n [\n formControlProps,\n id,\n name,\n value,\n required,\n disabled,\n readOnly,\n checked,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref,\n \"data-checked\": dataAttr(checked),\n onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n ev.preventDefault()\n ev.stopPropagation()\n }),\n }),\n [checked, formControlProps],\n )\n\n return {\n isActive,\n isChecked: checked,\n isFocused,\n isFocusVisible,\n isHovered,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n\ninterface RadioOptions {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface RadioProps<Y extends number | string = string>\n extends Omit<HTMLUIProps<\"label\">, keyof UseRadioProps>,\n ThemeProps<\"Radio\">,\n UseRadioProps<Y>,\n RadioOptions {}\n\n/**\n * `Radio` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio\n */\nexport const Radio = forwardRef(\n <Y extends number | string = string>(\n props: RadioProps<Y>,\n ref: ForwardedRef<HTMLInputElement>,\n ) => {\n const group = useRadioGroupContext()\n const { value: groupValue, ...groupProps } = { ...group }\n const control = useFormControl(props)\n const [styles, mergedProps] = useComponentMultiStyle(\"Radio\", {\n ...groupProps,\n ...props,\n })\n const {\n className,\n children,\n gap = \"0.5rem\",\n isDisabled = groupProps.isDisabled ?? control.isDisabled,\n isInvalid = groupProps.isInvalid ?? control.isInvalid,\n isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n isRequired = groupProps.isRequired ?? control.isRequired,\n iconProps,\n inputProps,\n labelProps,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const isCheckedProp =\n groupValue && computedProps.value\n ? groupValue === computedProps.value\n : computedProps.isChecked\n\n const onChange =\n groupProps.onChange && computedProps.value\n ? funcAll(groupProps.onChange, computedProps.onChange)\n : computedProps.onChange\n\n const {\n isChecked,\n props: rest,\n getContainerProps,\n getIconProps,\n getInputProps,\n getLabelProps,\n } = useRadio({\n ...computedProps,\n isChecked: isCheckedProp,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n onChange,\n })\n\n const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps(rest)}\n __css={{\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n gap,\n position: \"relative\",\n verticalAlign: \"top\",\n ...styles.container,\n }}\n >\n <ui.input\n className=\"ui-radio__input\"\n {...getInputProps(\n {\n ...inputProps,\n tabIndex,\n },\n ref,\n )}\n />\n\n <ui.span\n className=\"ui-radio__icon\"\n {...getIconProps(iconProps)}\n __css={{\n display: \"inline-block\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.icon,\n }}\n />\n\n <ui.span\n className=\"ui-radio__label\"\n {...getLabelProps(labelProps)}\n __css={{ ...styles.label }}\n >\n {children}\n </ui.span>\n </ui.label>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioProps<Y> & RefAttributes<HTMLInputElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\nRadio.__ui__ = \"Radio\"\n","import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent } from \"react\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport interface RadioGroupContext\n extends ThemeProps<\"Radio\">,\n FormControlOptions {\n name: string\n value: number | string\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport const [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n name: \"RadioGroupContext\",\n strict: false,\n})\n","import type { ComponentArgs, PropGetter, ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { FlexProps } from \"@yamada-ui/layouts\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n ChangeEvent,\n ForwardedRef,\n ReactElement,\n RefAttributes,\n} from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport type { RadioGroupContext } from \"./radio-context\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { Flex } from \"@yamada-ui/layouts\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n cx,\n getValidChildren,\n isObject,\n mergeRefs,\n useCallbackRef,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useId, useRef } from \"react\"\nimport { Radio } from \"./radio\"\nimport { RadioGroupProvider } from \"./radio-context\"\n\nexport type RadioItem<Y extends number | string = string> = {\n label?: string\n} & RadioProps<Y>\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n value && isObject(value) && isObject(value.target)\n\nexport interface UseRadioGroupProps<Y extends number | string = string> {\n /**\n * The top-level id string that will be applied to the radios.\n * The index of the radio will be appended to this top-level id.\n */\n id?: string\n /**\n * The HTML `name` attribute used for forms.\n */\n name?: string\n /**\n * The initial value of the radio group.\n */\n defaultValue?: Y\n /**\n * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n *\n * This assumes, you're using native radio inputs.\n *\n * @default false\n */\n isNative?: boolean\n /**\n * The value of the radio group.\n */\n value?: Y\n /**\n * The callback fired when any children radio is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport const useRadioGroup = <\n Y extends number | string,\n M extends Dict = Dict,\n>({\n id,\n name,\n defaultValue,\n isNative,\n value: valueProp,\n onChange: onChangeProp,\n ...props\n}: M & UseRadioGroupProps<Y>) => {\n const uuid = useId()\n\n id ??= uuid\n name ??= `radio-${id}`\n\n const onChangeRef = useCallbackRef(onChangeProp)\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeRef,\n })\n\n const containerRef = useRef<any>(null)\n\n const onFocus = useCallback(() => {\n const container = containerRef.current\n\n if (!container) return\n\n let query = `input:not(:disabled):checked`\n\n let firstInput = container.querySelector(query) as HTMLElement | undefined\n\n if (firstInput) {\n firstInput.focus()\n } else {\n query = `input:not(:disabled)`\n firstInput = container.querySelector(query) as HTMLElement | undefined\n\n firstInput?.focus()\n }\n }, [])\n\n const onChange = useCallback(\n (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n const nextValue = (\n isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n ) as Y\n\n setValue(nextValue)\n },\n [setValue],\n )\n\n const getContainerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n role: \"radiogroup\",\n ...props,\n ref: mergeRefs(ref, containerRef),\n }),\n [],\n )\n\n const getRadioProps: PropGetter<\n { value?: Y },\n { checked?: boolean; isChecked?: boolean; value?: Y }\n > = useCallback(\n (props = {}, ref = null) => {\n const isChecked = props.value === value\n\n return {\n ...props,\n ref,\n name,\n \"aria-checked\": isChecked,\n [isNative ? \"checked\" : \"isChecked\"]:\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n value != null ? isChecked : undefined,\n onChange,\n }\n },\n [name, value, onChange, isNative],\n )\n\n return {\n id,\n name,\n props,\n setValue,\n value,\n getContainerProps,\n getRadioProps,\n onChange,\n onFocus,\n }\n}\n\nexport type UseRadioGroupReturn<Y extends number | string = string> =\n ReturnType<typeof useRadioGroup<Y>>\n\nexport interface RadioGroupProps<Y extends number | string = string>\n extends ThemeProps<\"Radio\">,\n Omit<FlexProps, \"defaultValue\" | \"onChange\">,\n UseRadioGroupProps<Y>,\n FormControlOptions {\n /**\n * If provided, generate radios based on items.\n *\n * @default '[]'\n */\n items?: RadioItem<Y>[]\n}\n\nexport const RadioGroup = forwardRef(\n <Y extends number | string = string>(\n {\n id: idProp,\n className,\n colorScheme,\n size,\n variant,\n children,\n direction = \"column\",\n gap,\n items = [],\n ...props\n }: RadioGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const {\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n labelId,\n ...computedProps\n } = useFormControl({\n id: idProp,\n ...props,\n })\n const {\n id,\n name,\n props: rest,\n value,\n getContainerProps,\n onChange,\n } = useRadioGroup(computedProps)\n\n const validChildren = getValidChildren(children)\n let computedChildren: ReactElement[] = []\n\n if (!validChildren.length && items.length) {\n computedChildren = items.map(({ label, value, ...props }, i) => (\n <Radio key={i} value={value} {...props}>\n {label}\n </Radio>\n ))\n }\n\n return (\n <RadioGroupProvider\n value={\n {\n name,\n colorScheme,\n size,\n variant,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n value,\n onChange,\n } as RadioGroupContext\n }\n >\n <Flex\n ref={ref}\n className={cx(\"ui-radio-group\", className)}\n gap={gap ?? (direction === \"row\" ? \"1rem\" : undefined)}\n {...getContainerProps({\n id,\n \"aria-labelledby\": labelId,\n ...rest,\n })}\n direction={direction}\n >\n {children ?? computedChildren}\n </Flex>\n </RadioGroupProvider>\n )\n },\n) as {\n <Y extends number | string = string>(\n props: RadioGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): ReactElement\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\nRadioGroup.__ui__ = \"RadioGroup\"\n"],"mappings":"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","names":["import_utils","props","import_form_control","import_utils","import_react","import_jsx_runtime","props","value"]}
|
package/dist/index.mjs
CHANGED
@@ -2,12 +2,12 @@
|
|
2
2
|
import {
|
3
3
|
RadioGroup,
|
4
4
|
useRadioGroup
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-XCAPUS2B.mjs";
|
6
6
|
import {
|
7
7
|
Radio,
|
8
8
|
useRadio
|
9
|
-
} from "./chunk-
|
10
|
-
import "./chunk-
|
9
|
+
} from "./chunk-NVHEZ3VI.mjs";
|
10
|
+
import "./chunk-6FMV6NX2.mjs";
|
11
11
|
export {
|
12
12
|
Radio,
|
13
13
|
RadioGroup,
|
package/dist/radio-context.d.mts
CHANGED
@@ -5,8 +5,8 @@ import { FormControlOptions } from '@yamada-ui/form-control';
|
|
5
5
|
|
6
6
|
interface RadioGroupContext extends ThemeProps<"Radio">, FormControlOptions {
|
7
7
|
name: string;
|
8
|
-
value:
|
9
|
-
onChange: (evOrValue: ChangeEvent<HTMLInputElement> |
|
8
|
+
value: number | string;
|
9
|
+
onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void;
|
10
10
|
}
|
11
11
|
declare const RadioGroupProvider: react.Provider<RadioGroupContext | undefined>;
|
12
12
|
declare const useRadioGroupContext: () => RadioGroupContext | undefined;
|
package/dist/radio-context.d.ts
CHANGED
@@ -5,8 +5,8 @@ import { FormControlOptions } from '@yamada-ui/form-control';
|
|
5
5
|
|
6
6
|
interface RadioGroupContext extends ThemeProps<"Radio">, FormControlOptions {
|
7
7
|
name: string;
|
8
|
-
value:
|
9
|
-
onChange: (evOrValue: ChangeEvent<HTMLInputElement> |
|
8
|
+
value: number | string;
|
9
|
+
onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void;
|
10
10
|
}
|
11
11
|
declare const RadioGroupProvider: react.Provider<RadioGroupContext | undefined>;
|
12
12
|
declare const useRadioGroupContext: () => RadioGroupContext | undefined;
|
package/dist/radio-context.js
CHANGED
@@ -27,8 +27,8 @@ __export(radio_context_exports, {
|
|
27
27
|
module.exports = __toCommonJS(radio_context_exports);
|
28
28
|
var import_utils = require("@yamada-ui/utils");
|
29
29
|
var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)({
|
30
|
-
|
31
|
-
|
30
|
+
name: "RadioGroupContext",
|
31
|
+
strict: false
|
32
32
|
});
|
33
33
|
// Annotate the CommonJS export names for ESM import in node:
|
34
34
|
0 && (module.exports = {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/radio-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {
|
1
|
+
{"version":3,"sources":["../src/radio-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent } from \"react\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport interface RadioGroupContext\n extends ThemeProps<\"Radio\">,\n FormControlOptions {\n name: string\n value: number | string\n onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport const [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n name: \"RadioGroupContext\",\n strict: false,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA8B;AAUvB,IAAM,CAAC,oBAAoB,oBAAoB,QAAI,4BAExD;AAAA,EACA,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;","names":[]}
|
package/dist/radio-context.mjs
CHANGED
package/dist/radio-group.d.mts
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
import { RadioProps } from './radio.mjs';
|
2
2
|
import * as react from 'react';
|
3
|
-
import { ChangeEvent, RefAttributes } from 'react';
|
3
|
+
import { ChangeEvent, RefAttributes, ReactElement } from 'react';
|
4
4
|
import { PropGetter, ThemeProps, ComponentArgs } from '@yamada-ui/core';
|
5
5
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
6
6
|
import { FlexProps } from '@yamada-ui/layouts';
|
7
7
|
import { Dict } from '@yamada-ui/utils';
|
8
8
|
|
9
|
-
type RadioItem<Y extends
|
9
|
+
type RadioItem<Y extends number | string = string> = {
|
10
10
|
label?: string;
|
11
|
-
}
|
12
|
-
interface UseRadioGroupProps<Y extends
|
11
|
+
} & RadioProps<Y>;
|
12
|
+
interface UseRadioGroupProps<Y extends number | string = string> {
|
13
13
|
/**
|
14
14
|
* The top-level id string that will be applied to the radios.
|
15
15
|
* The index of the radio will be appended to this top-level id.
|
@@ -19,18 +19,10 @@ interface UseRadioGroupProps<Y extends string | number = string> {
|
|
19
19
|
* The HTML `name` attribute used for forms.
|
20
20
|
*/
|
21
21
|
name?: string;
|
22
|
-
/**
|
23
|
-
* The value of the radio group.
|
24
|
-
*/
|
25
|
-
value?: Y;
|
26
22
|
/**
|
27
23
|
* The initial value of the radio group.
|
28
24
|
*/
|
29
25
|
defaultValue?: Y;
|
30
|
-
/**
|
31
|
-
* The callback fired when any children radio is checked or unchecked.
|
32
|
-
*/
|
33
|
-
onChange?: (value: Y) => void;
|
34
26
|
/**
|
35
27
|
* If `true`, input elements will receive `checked` attribute instead of `isChecked`.
|
36
28
|
*
|
@@ -39,26 +31,34 @@ interface UseRadioGroupProps<Y extends string | number = string> {
|
|
39
31
|
* @default false
|
40
32
|
*/
|
41
33
|
isNative?: boolean;
|
34
|
+
/**
|
35
|
+
* The value of the radio group.
|
36
|
+
*/
|
37
|
+
value?: Y;
|
38
|
+
/**
|
39
|
+
* The callback fired when any children radio is checked or unchecked.
|
40
|
+
*/
|
41
|
+
onChange?: (value: Y) => void;
|
42
42
|
}
|
43
|
-
declare const useRadioGroup: <Y extends
|
44
|
-
props: Omit<UseRadioGroupProps<Y> & M, "value" | "name" | "defaultValue" | "id" | "onChange" | "isNative">;
|
43
|
+
declare const useRadioGroup: <Y extends number | string, M extends Dict = Dict<any>>({ id, name, defaultValue, isNative, value: valueProp, onChange: onChangeProp, ...props }: M & UseRadioGroupProps<Y>) => {
|
45
44
|
id: string;
|
46
45
|
name: string;
|
47
|
-
|
46
|
+
props: Omit<M & UseRadioGroupProps<Y>, "value" | "defaultValue" | "name" | "id" | "onChange" | "isNative">;
|
48
47
|
setValue: react.Dispatch<react.SetStateAction<Y>>;
|
49
|
-
|
50
|
-
onFocus: () => void;
|
48
|
+
value: Y;
|
51
49
|
getContainerProps: PropGetter<"div", undefined>;
|
52
50
|
getRadioProps: PropGetter<{
|
53
51
|
value?: Y;
|
54
52
|
}, {
|
55
|
-
value?: Y;
|
56
53
|
checked?: boolean;
|
57
54
|
isChecked?: boolean;
|
55
|
+
value?: Y;
|
58
56
|
}>;
|
57
|
+
onChange: (evOrValue: ChangeEvent<HTMLInputElement> | Y) => void;
|
58
|
+
onFocus: () => void;
|
59
59
|
};
|
60
|
-
type UseRadioGroupReturn<Y extends
|
61
|
-
interface RadioGroupProps<Y extends
|
60
|
+
type UseRadioGroupReturn<Y extends number | string = string> = ReturnType<typeof useRadioGroup<Y>>;
|
61
|
+
interface RadioGroupProps<Y extends number | string = string> extends ThemeProps<"Radio">, Omit<FlexProps, "defaultValue" | "onChange">, UseRadioGroupProps<Y>, FormControlOptions {
|
62
62
|
/**
|
63
63
|
* If provided, generate radios based on items.
|
64
64
|
*
|
@@ -67,7 +67,7 @@ interface RadioGroupProps<Y extends string | number = string> extends ThemeProps
|
|
67
67
|
items?: RadioItem<Y>[];
|
68
68
|
}
|
69
69
|
declare const RadioGroup: {
|
70
|
-
<Y extends
|
70
|
+
<Y extends number | string = string>(props: RadioGroupProps<Y> & RefAttributes<HTMLDivElement>): ReactElement;
|
71
71
|
} & ComponentArgs;
|
72
72
|
|
73
73
|
export { RadioGroup, type RadioGroupProps, type RadioItem, type UseRadioGroupProps, type UseRadioGroupReturn, useRadioGroup };
|