@yamada-ui/radio 1.1.2-dev-20240624140821 → 1.2.0-dev-20240624142905

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.
@@ -214,9 +214,10 @@ var Radio = forwardRef(
214
214
  children,
215
215
  ...computedProps
216
216
  } = omitThemeProps(mergedProps);
217
- const isChecked = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
217
+ const isCheckedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
218
218
  const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
219
219
  const {
220
+ isChecked,
220
221
  getContainerProps,
221
222
  getInputProps,
222
223
  getIconProps,
@@ -228,15 +229,15 @@ var Radio = forwardRef(
228
229
  isReadOnly,
229
230
  isDisabled,
230
231
  isInvalid,
231
- isChecked,
232
+ isChecked: isCheckedProp,
232
233
  onChange
233
234
  });
235
+ const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
234
236
  return /* @__PURE__ */ jsxs(
235
237
  ui.label,
236
238
  {
237
239
  className: cx("ui-radio", className),
238
- ...getContainerProps(),
239
- ...rest,
240
+ ...getContainerProps(rest),
240
241
  __css: {
241
242
  cursor: "pointer",
242
243
  position: "relative",
@@ -251,7 +252,13 @@ var Radio = forwardRef(
251
252
  ui.input,
252
253
  {
253
254
  className: "ui-radio__input",
254
- ...getInputProps(inputProps, ref)
255
+ ...getInputProps(
256
+ {
257
+ ...inputProps,
258
+ tabIndex
259
+ },
260
+ ref
261
+ )
255
262
  }
256
263
  ),
257
264
  /* @__PURE__ */ jsx(
@@ -326,20 +333,24 @@ var useRadioGroup = ({
326
333
  );
327
334
  const getContainerProps = useCallback2(
328
335
  (props2 = {}, ref = null) => ({
336
+ role: "radiogroup",
329
337
  ...props2,
330
- ref: mergeRefs(ref, containerRef),
331
- role: "radiogroup"
338
+ ref: mergeRefs(ref, containerRef)
332
339
  }),
333
340
  []
334
341
  );
335
342
  const getRadioProps = useCallback2(
336
- (props2 = {}, ref = null) => ({
337
- ...props2,
338
- ref,
339
- name,
340
- [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
341
- onChange
342
- }),
343
+ (props2 = {}, ref = null) => {
344
+ const isChecked = props2.value === value;
345
+ return {
346
+ ...props2,
347
+ ref,
348
+ name,
349
+ [isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
350
+ "aria-checked": isChecked,
351
+ onChange
352
+ };
353
+ },
343
354
  [name, value, onChange, isNative]
344
355
  );
345
356
  return {
@@ -360,6 +371,7 @@ var [RadioGroupProvider, useRadioGroupContext] = createContext({
360
371
  });
361
372
  var RadioGroup = forwardRef2(
362
373
  ({
374
+ id: idProp,
363
375
  className,
364
376
  size,
365
377
  variant,
@@ -370,18 +382,25 @@ var RadioGroup = forwardRef2(
370
382
  gap,
371
383
  ...props
372
384
  }, ref) => {
385
+ const {
386
+ labelId,
387
+ isRequired,
388
+ isReadOnly,
389
+ isDisabled,
390
+ isInvalid,
391
+ ...computedProps
392
+ } = useFormControl2({
393
+ id: idProp,
394
+ ...props
395
+ });
373
396
  const {
374
397
  id,
375
398
  name,
376
399
  value,
377
400
  onChange,
378
401
  getContainerProps,
379
- props: computedProps
380
- } = useRadioGroup(props);
381
- const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = useFormControl2({
382
- id,
383
- ...computedProps
384
- });
402
+ props: rest
403
+ } = useRadioGroup(computedProps);
385
404
  const validChildren = getValidChildren(children);
386
405
  let computedChildren = [];
387
406
  if (!validChildren.length && items.length) {
@@ -409,9 +428,9 @@ var RadioGroup = forwardRef2(
409
428
  className: cx2("ui-radio-group", className),
410
429
  gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
411
430
  ...getContainerProps({
412
- ...rest,
413
431
  id,
414
- name
432
+ "aria-labelledby": labelId,
433
+ ...rest
415
434
  }),
416
435
  direction,
417
436
  children: children != null ? children : computedChildren
@@ -430,4 +449,4 @@ export {
430
449
  useRadio,
431
450
  Radio
432
451
  };
433
- //# sourceMappingURL=chunk-SX2WMG2M.mjs.map
452
+ //# sourceMappingURL=chunk-AVG2WSQK.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/radio-group.tsx","../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\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 } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n"],"mappings":"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","names":["useFormControl","cx","useCallbackRef","useCallback","useId","forwardRef","props","jsx","useId","useCallbackRef","useCallback","props","forwardRef","useFormControl","value","props","jsx","cx"]}
package/dist/index.js CHANGED
@@ -83,20 +83,24 @@ var useRadioGroup = ({
83
83
  );
84
84
  const getContainerProps = (0, import_react.useCallback)(
85
85
  (props2 = {}, ref = null) => ({
86
+ role: "radiogroup",
86
87
  ...props2,
87
- ref: (0, import_utils.mergeRefs)(ref, containerRef),
88
- role: "radiogroup"
88
+ ref: (0, import_utils.mergeRefs)(ref, containerRef)
89
89
  }),
90
90
  []
91
91
  );
92
92
  const getRadioProps = (0, import_react.useCallback)(
93
- (props2 = {}, ref = null) => ({
94
- ...props2,
95
- ref,
96
- name,
97
- [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
98
- onChange
99
- }),
93
+ (props2 = {}, ref = null) => {
94
+ const isChecked = props2.value === value;
95
+ return {
96
+ ...props2,
97
+ ref,
98
+ name,
99
+ [isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
100
+ "aria-checked": isChecked,
101
+ onChange
102
+ };
103
+ },
100
104
  [name, value, onChange, isNative]
101
105
  );
102
106
  return {
@@ -117,6 +121,7 @@ var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)
117
121
  });
118
122
  var RadioGroup = (0, import_react.forwardRef)(
119
123
  ({
124
+ id: idProp,
120
125
  className,
121
126
  size,
122
127
  variant,
@@ -127,18 +132,25 @@ var RadioGroup = (0, import_react.forwardRef)(
127
132
  gap,
128
133
  ...props
129
134
  }, ref) => {
135
+ const {
136
+ labelId,
137
+ isRequired,
138
+ isReadOnly,
139
+ isDisabled,
140
+ isInvalid,
141
+ ...computedProps
142
+ } = (0, import_form_control.useFormControl)({
143
+ id: idProp,
144
+ ...props
145
+ });
130
146
  const {
131
147
  id,
132
148
  name,
133
149
  value,
134
150
  onChange,
135
151
  getContainerProps,
136
- props: computedProps
137
- } = useRadioGroup(props);
138
- const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control.useFormControl)({
139
- id,
140
- ...computedProps
141
- });
152
+ props: rest
153
+ } = useRadioGroup(computedProps);
142
154
  const validChildren = (0, import_utils.getValidChildren)(children);
143
155
  let computedChildren = [];
144
156
  if (!validChildren.length && items.length) {
@@ -166,9 +178,9 @@ var RadioGroup = (0, import_react.forwardRef)(
166
178
  className: (0, import_utils.cx)("ui-radio-group", className),
167
179
  gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
168
180
  ...getContainerProps({
169
- ...rest,
170
181
  id,
171
- name
182
+ "aria-labelledby": labelId,
183
+ ...rest
172
184
  }),
173
185
  direction,
174
186
  children: children != null ? children : computedChildren
@@ -364,9 +376,10 @@ var Radio = (0, import_react2.forwardRef)(
364
376
  children,
365
377
  ...computedProps
366
378
  } = (0, import_core.omitThemeProps)(mergedProps);
367
- const isChecked = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
379
+ const isCheckedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
368
380
  const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
369
381
  const {
382
+ isChecked,
370
383
  getContainerProps,
371
384
  getInputProps,
372
385
  getIconProps,
@@ -378,15 +391,15 @@ var Radio = (0, import_react2.forwardRef)(
378
391
  isReadOnly,
379
392
  isDisabled,
380
393
  isInvalid,
381
- isChecked,
394
+ isChecked: isCheckedProp,
382
395
  onChange
383
396
  });
397
+ const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
384
398
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
385
399
  import_core.ui.label,
386
400
  {
387
401
  className: (0, import_utils2.cx)("ui-radio", className),
388
- ...getContainerProps(),
389
- ...rest,
402
+ ...getContainerProps(rest),
390
403
  __css: {
391
404
  cursor: "pointer",
392
405
  position: "relative",
@@ -401,7 +414,13 @@ var Radio = (0, import_react2.forwardRef)(
401
414
  import_core.ui.input,
402
415
  {
403
416
  className: "ui-radio__input",
404
- ...getInputProps(inputProps, ref)
417
+ ...getInputProps(
418
+ {
419
+ ...inputProps,
420
+ tabIndex
421
+ },
422
+ ref
423
+ )
405
424
  }
406
425
  ),
407
426
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/radio.tsx","../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 UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 isChecked =\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 getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useRadio({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked,\n onChange,\n })\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps()}\n {...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(inputProps, ref)}\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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n","import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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 ...props,\n ref: mergeRefs(ref, containerRef),\n role: \"radiogroup\",\n }),\n [],\n )\n\n const getRadioProps: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\n useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n name,\n [isNative ? \"checked\" : \"isChecked\"]:\n value != null ? props.value === value : undefined,\n onChange,\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\n\nexport const RadioGroup = forwardRef(\n <Y extends string | number = string>(\n {\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 id,\n name,\n value,\n onChange,\n getContainerProps,\n props: computedProps,\n } = useRadioGroup(props)\n const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl({\n id,\n ...computedProps,\n })\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 ...rest,\n id,\n name,\n } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","value","props","import_jsx_runtime","props"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/radio.tsx","../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 UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n","import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\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 } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","value","props","import_jsx_runtime","props"]}
package/dist/index.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  RadioGroup,
5
5
  useRadio,
6
6
  useRadioGroup
7
- } from "./chunk-SX2WMG2M.mjs";
7
+ } from "./chunk-AVG2WSQK.mjs";
8
8
  export {
9
9
  Radio,
10
10
  RadioGroup,
@@ -221,9 +221,10 @@ var Radio = (0, import_react.forwardRef)(
221
221
  children,
222
222
  ...computedProps
223
223
  } = (0, import_core.omitThemeProps)(mergedProps);
224
- const isChecked = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
224
+ const isCheckedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
225
225
  const onChange = groupProps.onChange && computedProps.value ? (0, import_utils.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
226
226
  const {
227
+ isChecked,
227
228
  getContainerProps,
228
229
  getInputProps,
229
230
  getIconProps,
@@ -235,15 +236,15 @@ var Radio = (0, import_react.forwardRef)(
235
236
  isReadOnly,
236
237
  isDisabled,
237
238
  isInvalid,
238
- isChecked,
239
+ isChecked: isCheckedProp,
239
240
  onChange
240
241
  });
242
+ const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
241
243
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
242
244
  import_core.ui.label,
243
245
  {
244
246
  className: (0, import_utils.cx)("ui-radio", className),
245
- ...getContainerProps(),
246
- ...rest,
247
+ ...getContainerProps(rest),
247
248
  __css: {
248
249
  cursor: "pointer",
249
250
  position: "relative",
@@ -258,7 +259,13 @@ var Radio = (0, import_react.forwardRef)(
258
259
  import_core.ui.input,
259
260
  {
260
261
  className: "ui-radio__input",
261
- ...getInputProps(inputProps, ref)
262
+ ...getInputProps(
263
+ {
264
+ ...inputProps,
265
+ tabIndex
266
+ },
267
+ ref
268
+ )
262
269
  }
263
270
  ),
264
271
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -333,20 +340,24 @@ var useRadioGroup = ({
333
340
  );
334
341
  const getContainerProps = (0, import_react2.useCallback)(
335
342
  (props2 = {}, ref = null) => ({
343
+ role: "radiogroup",
336
344
  ...props2,
337
- ref: (0, import_utils2.mergeRefs)(ref, containerRef),
338
- role: "radiogroup"
345
+ ref: (0, import_utils2.mergeRefs)(ref, containerRef)
339
346
  }),
340
347
  []
341
348
  );
342
349
  const getRadioProps = (0, import_react2.useCallback)(
343
- (props2 = {}, ref = null) => ({
344
- ...props2,
345
- ref,
346
- name,
347
- [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
348
- onChange
349
- }),
350
+ (props2 = {}, ref = null) => {
351
+ const isChecked = props2.value === value;
352
+ return {
353
+ ...props2,
354
+ ref,
355
+ name,
356
+ [isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
357
+ "aria-checked": isChecked,
358
+ onChange
359
+ };
360
+ },
350
361
  [name, value, onChange, isNative]
351
362
  );
352
363
  return {
@@ -367,6 +378,7 @@ var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils2.createContext
367
378
  });
368
379
  var RadioGroup = (0, import_react2.forwardRef)(
369
380
  ({
381
+ id: idProp,
370
382
  className,
371
383
  size,
372
384
  variant,
@@ -377,18 +389,25 @@ var RadioGroup = (0, import_react2.forwardRef)(
377
389
  gap,
378
390
  ...props
379
391
  }, ref) => {
392
+ const {
393
+ labelId,
394
+ isRequired,
395
+ isReadOnly,
396
+ isDisabled,
397
+ isInvalid,
398
+ ...computedProps
399
+ } = (0, import_form_control2.useFormControl)({
400
+ id: idProp,
401
+ ...props
402
+ });
380
403
  const {
381
404
  id,
382
405
  name,
383
406
  value,
384
407
  onChange,
385
408
  getContainerProps,
386
- props: computedProps
387
- } = useRadioGroup(props);
388
- const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control2.useFormControl)({
389
- id,
390
- ...computedProps
391
- });
409
+ props: rest
410
+ } = useRadioGroup(computedProps);
392
411
  const validChildren = (0, import_utils2.getValidChildren)(children);
393
412
  let computedChildren = [];
394
413
  if (!validChildren.length && items.length) {
@@ -416,9 +435,9 @@ var RadioGroup = (0, import_react2.forwardRef)(
416
435
  className: (0, import_utils2.cx)("ui-radio-group", className),
417
436
  gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
418
437
  ...getContainerProps({
419
- ...rest,
420
438
  id,
421
- name
439
+ "aria-labelledby": labelId,
440
+ ...rest
422
441
  }),
423
442
  direction,
424
443
  children: children != null ? children : computedChildren
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/radio-group.tsx","../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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 ...props,\n ref: mergeRefs(ref, containerRef),\n role: \"radiogroup\",\n }),\n [],\n )\n\n const getRadioProps: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\n useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n name,\n [isNative ? \"checked\" : \"isChecked\"]:\n value != null ? props.value === value : undefined,\n onChange,\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\n\nexport const RadioGroup = forwardRef(\n <Y extends string | number = string>(\n {\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 id,\n name,\n value,\n onChange,\n getContainerProps,\n props: computedProps,\n } = useRadioGroup(props)\n const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl({\n id,\n ...computedProps,\n })\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 ...rest,\n id,\n name,\n } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 isChecked =\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 getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useRadio({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked,\n onChange,\n })\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps()}\n {...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(inputProps, ref)}\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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","import_jsx_runtime","props","value","props"]}
1
+ {"version":3,"sources":["../src/radio-group.tsx","../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\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 } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","import_jsx_runtime","props","value","props"]}
@@ -3,7 +3,7 @@ import {
3
3
  RadioGroup,
4
4
  useRadioGroup,
5
5
  useRadioGroupContext
6
- } from "./chunk-SX2WMG2M.mjs";
6
+ } from "./chunk-AVG2WSQK.mjs";
7
7
  export {
8
8
  RadioGroup,
9
9
  useRadioGroup,
package/dist/radio.js CHANGED
@@ -79,20 +79,24 @@ var useRadioGroup = ({
79
79
  );
80
80
  const getContainerProps = (0, import_react.useCallback)(
81
81
  (props2 = {}, ref = null) => ({
82
+ role: "radiogroup",
82
83
  ...props2,
83
- ref: (0, import_utils.mergeRefs)(ref, containerRef),
84
- role: "radiogroup"
84
+ ref: (0, import_utils.mergeRefs)(ref, containerRef)
85
85
  }),
86
86
  []
87
87
  );
88
88
  const getRadioProps = (0, import_react.useCallback)(
89
- (props2 = {}, ref = null) => ({
90
- ...props2,
91
- ref,
92
- name,
93
- [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
94
- onChange
95
- }),
89
+ (props2 = {}, ref = null) => {
90
+ const isChecked = props2.value === value;
91
+ return {
92
+ ...props2,
93
+ ref,
94
+ name,
95
+ [isNative ? "checked" : "isChecked"]: value != null ? isChecked : void 0,
96
+ "aria-checked": isChecked,
97
+ onChange
98
+ };
99
+ },
96
100
  [name, value, onChange, isNative]
97
101
  );
98
102
  return {
@@ -113,6 +117,7 @@ var [RadioGroupProvider, useRadioGroupContext] = (0, import_utils.createContext)
113
117
  });
114
118
  var RadioGroup = (0, import_react.forwardRef)(
115
119
  ({
120
+ id: idProp,
116
121
  className,
117
122
  size,
118
123
  variant,
@@ -123,18 +128,25 @@ var RadioGroup = (0, import_react.forwardRef)(
123
128
  gap,
124
129
  ...props
125
130
  }, ref) => {
131
+ const {
132
+ labelId,
133
+ isRequired,
134
+ isReadOnly,
135
+ isDisabled,
136
+ isInvalid,
137
+ ...computedProps
138
+ } = (0, import_form_control.useFormControl)({
139
+ id: idProp,
140
+ ...props
141
+ });
126
142
  const {
127
143
  id,
128
144
  name,
129
145
  value,
130
146
  onChange,
131
147
  getContainerProps,
132
- props: computedProps
133
- } = useRadioGroup(props);
134
- const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } = (0, import_form_control.useFormControl)({
135
- id,
136
- ...computedProps
137
- });
148
+ props: rest
149
+ } = useRadioGroup(computedProps);
138
150
  const validChildren = (0, import_utils.getValidChildren)(children);
139
151
  let computedChildren = [];
140
152
  if (!validChildren.length && items.length) {
@@ -162,9 +174,9 @@ var RadioGroup = (0, import_react.forwardRef)(
162
174
  className: (0, import_utils.cx)("ui-radio-group", className),
163
175
  gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
164
176
  ...getContainerProps({
165
- ...rest,
166
177
  id,
167
- name
178
+ "aria-labelledby": labelId,
179
+ ...rest
168
180
  }),
169
181
  direction,
170
182
  children: children != null ? children : computedChildren
@@ -360,9 +372,10 @@ var Radio = (0, import_react2.forwardRef)(
360
372
  children,
361
373
  ...computedProps
362
374
  } = (0, import_core.omitThemeProps)(mergedProps);
363
- const isChecked = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
375
+ const isCheckedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.isChecked;
364
376
  const onChange = groupProps.onChange && computedProps.value ? (0, import_utils2.funcAll)(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
365
377
  const {
378
+ isChecked,
366
379
  getContainerProps,
367
380
  getInputProps,
368
381
  getIconProps,
@@ -374,15 +387,15 @@ var Radio = (0, import_react2.forwardRef)(
374
387
  isReadOnly,
375
388
  isDisabled,
376
389
  isInvalid,
377
- isChecked,
390
+ isChecked: isCheckedProp,
378
391
  onChange
379
392
  });
393
+ const tabIndex = !groupValue ? 0 : isChecked ? 0 : -1;
380
394
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
381
395
  import_core.ui.label,
382
396
  {
383
397
  className: (0, import_utils2.cx)("ui-radio", className),
384
- ...getContainerProps(),
385
- ...rest,
398
+ ...getContainerProps(rest),
386
399
  __css: {
387
400
  cursor: "pointer",
388
401
  position: "relative",
@@ -397,7 +410,13 @@ var Radio = (0, import_react2.forwardRef)(
397
410
  import_core.ui.input,
398
411
  {
399
412
  className: "ui-radio__input",
400
- ...getInputProps(inputProps, ref)
413
+ ...getInputProps(
414
+ {
415
+ ...inputProps,
416
+ tabIndex
417
+ },
418
+ ref
419
+ )
401
420
  }
402
421
  ),
403
422
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
package/dist/radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/radio.tsx","../src/radio-group.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 isChecked =\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 getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useRadio({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked,\n onChange,\n })\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps()}\n {...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(inputProps, ref)}\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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n","import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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 ...props,\n ref: mergeRefs(ref, containerRef),\n role: \"radiogroup\",\n }),\n [],\n )\n\n const getRadioProps: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\n useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n name,\n [isNative ? \"checked\" : \"isChecked\"]:\n value != null ? props.value === value : undefined,\n onChange,\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\n\nexport const RadioGroup = forwardRef(\n <Y extends string | number = string>(\n {\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 id,\n name,\n value,\n onChange,\n getContainerProps,\n props: computedProps,\n } = useRadioGroup(props)\n const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl({\n id,\n ...computedProps,\n })\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 ...rest,\n id,\n name,\n } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","value","props","import_jsx_runtime","props"]}
1
+ {"version":3,"sources":["../src/radio.tsx","../src/radio-group.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n","import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\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 } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"mappings":"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","names":["import_form_control","import_utils","import_react","props","value","props","import_jsx_runtime","props"]}
package/dist/radio.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Radio,
4
4
  useRadio
5
- } from "./chunk-SX2WMG2M.mjs";
5
+ } from "./chunk-AVG2WSQK.mjs";
6
6
  export {
7
7
  Radio,
8
8
  useRadio
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/radio",
3
- "version": "1.1.2-dev-20240624140821",
3
+ "version": "1.2.0-dev-20240624142905",
4
4
  "description": "Yamada UI radio component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,10 +36,10 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.9.0-dev-20240624140821",
39
+ "@yamada-ui/core": "1.9.0-dev-20240624142905",
40
40
  "@yamada-ui/utils": "1.3.0",
41
- "@yamada-ui/form-control": "1.1.5-dev-20240624140821",
42
- "@yamada-ui/layouts": "1.1.27-dev-20240624140821",
41
+ "@yamada-ui/form-control": "2.0.0-dev-20240624142905",
42
+ "@yamada-ui/layouts": "1.1.27-dev-20240624142905",
43
43
  "@yamada-ui/use-controllable-state": "1.0.15",
44
44
  "@yamada-ui/use-focus-visible": "1.1.2"
45
45
  },
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/radio-group.tsx","../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, ThemeProps, UIPropGetter } 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 type { DOMAttributes, Dict, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n cx,\n isObject,\n mergeRefs,\n useCallbackRef,\n getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, Ref, ReactElement } from \"react\"\nimport { useCallback, useId, useRef, forwardRef } from \"react\"\nimport type { RadioProps } from \"./radio\"\nimport { Radio } from \"./radio\"\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 type 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 = string,\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 id ??= useId()\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 ...props,\n ref: mergeRefs(ref, containerRef),\n role: \"radiogroup\",\n }),\n [],\n )\n\n const getRadioProps: UIPropGetter<\"input\", { value?: Y }, { value?: Y }> =\n useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n name,\n [isNative ? \"checked\" : \"isChecked\"]:\n value != null ? props.value === value : undefined,\n onChange,\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 type RadioGroupProps<Y extends string | number = string> =\n ThemeProps<\"Radio\"> &\n Omit<FlexProps, \"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\ntype RadioGroupContext = ThemeProps<\"Radio\"> &\n FormControlOptions & {\n name: string\n value: string | number\n onChange: (\n evOrValue: ChangeEvent<HTMLInputElement> | string | number,\n ) => void\n }\n\nconst [RadioGroupProvider, useRadioGroupContext] = createContext<\n RadioGroupContext | undefined\n>({\n strict: false,\n name: \"RadioGroupContext\",\n})\n\nexport { useRadioGroupContext }\n\nexport const RadioGroup = forwardRef(\n <Y extends string | number = string>(\n {\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 id,\n name,\n value,\n onChange,\n getContainerProps,\n props: computedProps,\n } = useRadioGroup(props)\n const { isRequired, isReadOnly, isDisabled, isInvalid, ...rest } =\n useFormControl({\n id,\n ...computedProps,\n })\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 ...rest,\n id,\n name,\n } as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadioGroup.displayName = \"RadioGroup\"\n","import type {\n HTMLUIProps,\n ThemeProps,\n ComponentArgs,\n UIPropGetter,\n} from \"@yamada-ui/core\"\nimport { ui, useMultiComponentStyle, 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, PropGetter } 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 Ref,\n ChangeEvent,\n ChangeEventHandler,\n InputHTMLAttributes,\n KeyboardEvent,\n SyntheticEvent,\n DOMAttributes,\n} from \"react\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-group\"\n\nexport type UseRadioProps<Y extends string | number = string> =\n 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 id ??= useId()\n const {\n id: _id,\n name,\n value,\n isChecked: isCheckedProp,\n defaultIsChecked,\n required,\n disabled,\n readOnly,\n onChange: onChangeProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n ...computedProps\n } = useFormControlProps({ id, ...props })\n const [{ \"aria-readonly\": _ariaReadonly, ...formControlProps }, 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<Element>) => {\n if (key === \" \") setActive(true)\n },\n [setActive],\n )\n\n const onKeyUp = useCallback(\n ({ key }: KeyboardEvent<Element>) => {\n if (key === \" \") setActive(false)\n },\n [setActive],\n )\n\n const getContainerProps: UIPropGetter = 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: UIPropGetter<\"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 = 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 = 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\ntype RadioOptions = {\n iconProps?: HTMLUIProps<\"span\">\n inputProps?: InputHTMLAttributes<HTMLInputElement>\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport type RadioProps<Y extends string | number = string> = Omit<\n HTMLUIProps<\"label\">,\n keyof UseRadioProps\n> &\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] = useMultiComponentStyle(\"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 isChecked =\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 getContainerProps,\n getInputProps,\n getIconProps,\n getLabelProps,\n props: rest,\n } = useRadio({\n ...computedProps,\n isRequired,\n isReadOnly,\n isDisabled,\n isInvalid,\n isChecked,\n onChange,\n })\n\n return (\n <ui.label\n className={cx(\"ui-radio\", className)}\n {...getContainerProps()}\n {...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(inputProps, ref)}\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 as DOMAttributes<HTMLElement>)}\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> & { ref?: Ref<HTMLInputElement> },\n ): JSX.Element\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\n"],"mappings":"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","names":["useFormControl","cx","useCallbackRef","useCallback","useId","forwardRef","props","jsx","useId","useCallbackRef","useCallback","props","forwardRef","useFormControl","value","props","jsx","cx"]}