@yamada-ui/react 2.1.4-dev-20260323173341 → 2.1.4-dev-20260323175147

package/dist/esm/components/radio/radio.style.js

@@ -8,6 +8,7 @@ const radioStyle = defineComponentSlotStyle({
 		group: {},
 		indicator: {
 			alignItems: "center",
+			bg: "{indicator-bg}",
 			borderColor: "{indicator-border-color}",
 			borderWidth: "2px",
 			boxSize: "{indicator-size}",
@@ -43,6 +44,7 @@ const radioStyle = defineComponentSlotStyle({
 		root: {
 			"--error-border-color": "colors.border.error",
 			"--focus-border-color": "colorScheme.outline",
+			"--indicator-bg": "transparent",
 			"--indicator-border-color": "colors.border.emphasized",
 			alignItems: "center",
 			display: "flex",

package/dist/esm/components/radio/radio.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.style.js","names":[],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n  base: {\n    group: {},\n    indicator: {\n      alignItems: \"center\",\n      borderColor: \"{indicator-border-color}\",\n      borderWidth: \"2px\",\n      boxSize: \"{indicator-size}\",\n      display: \"inline-flex\",\n      focusRingColor: \"{focus-border-color}\",\n      \"input:focus-visible + &\": focusRingStyle.outline,\n      justifyContent: \"center\",\n      _before: { display: \"block\" },\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    label: {},\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      \"--indicator-border-color\": \"colors.border.emphasized\",\n      alignItems: \"center\",\n      display: \"flex\",\n      fontSize: \"{label-size}\",\n      gap: \"2\",\n      userSelect: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n      rounded: {\n        indicator: {\n          rounded: \"l1\",\n          _before: { rounded: \"calc({radii.l1} / 2)\" },\n        },\n      },\n      square: {\n        indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n      },\n    },\n  },\n\n  variants: {\n    base: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n    },\n    outline: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n      root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n    },\n    solid: {},\n    subtle: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"transparent\" },\n    },\n    surface: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { _before: { boxSize: \"1.5\" } },\n      root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n    },\n    md: {\n      indicator: { _before: { boxSize: \"2\" } },\n      root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n    },\n    lg: {\n      indicator: { _before: { boxSize: \"3\" } },\n      root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"radio.style.js","names":[],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n  base: {\n    group: {},\n    indicator: {\n      alignItems: \"center\",\n      bg: \"{indicator-bg}\",\n      borderColor: \"{indicator-border-color}\",\n      borderWidth: \"2px\",\n      boxSize: \"{indicator-size}\",\n      display: \"inline-flex\",\n      focusRingColor: \"{focus-border-color}\",\n      \"input:focus-visible + &\": focusRingStyle.outline,\n      justifyContent: \"center\",\n      _before: { display: \"block\" },\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    label: {},\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      \"--indicator-bg\": \"transparent\",\n      \"--indicator-border-color\": \"colors.border.emphasized\",\n      alignItems: \"center\",\n      display: \"flex\",\n      fontSize: \"{label-size}\",\n      gap: \"2\",\n      userSelect: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n      rounded: {\n        indicator: {\n          rounded: \"l1\",\n          _before: { rounded: \"calc({radii.l1} / 2)\" },\n        },\n      },\n      square: {\n        indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n      },\n    },\n  },\n\n  variants: {\n    base: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n    },\n    outline: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n      root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n    },\n    solid: {},\n    subtle: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"transparent\" },\n    },\n    surface: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { _before: { boxSize: \"1.5\" } },\n      root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n    },\n    md: {\n      indicator: { _before: { boxSize: \"2\" } },\n      root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n    },\n    lg: {\n      indicator: { _before: { boxSize: \"3\" } },\n      root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,kBAAkB;GAClB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

package/dist/esm/components/radio/use-radio.js

@@ -14,7 +14,7 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 	const group = useRadioGroupContext();
 	const { name: groupName, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = useId();
-	const { props: { id, ref, name = groupName, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
+	const { props: { id, ref, name = groupName, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -44,7 +44,7 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		checked,
 		rest
 	]);
-	const getInputProps = useCallback(({ "aria-describedby": ariaDescribedby$1, ...props$1 } = {}) => {
+	const getInputProps = useCallback(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby$1, "aria-labelledby": ariaLabelledby, ...props$1 } = {}) => {
 		const sharedProps = {
 			...dataProps,
 			...ariaProps,
@@ -53,12 +53,15 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 			name,
 			style: visuallyHiddenAttributes.style,
 			"aria-checked": checked,
+			"aria-controls": (0, utils_exports.cx)(ariaControls, ariaControlsProp),
 			"aria-describedby": (0, utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
+			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
 			"data-checked": (0, utils_exports.dataAttr)(checked),
 			checked,
 			disabled,
 			readOnly,
 			required,
+			tabIndex,
 			value,
 			...props$1,
 			ref: mergeRefs(props$1.ref, ref),
@@ -68,18 +71,22 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		};
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
+		dataProps,
+		ariaProps,
 		id,
 		name,
 		checked,
+		ariaControlsProp,
 		resolvedAriaDescribedby,
+		ariaLabelledbyProp,
 		disabled,
 		readOnly,
 		required,
+		tabIndex,
 		value,
-		dataProps,
-		ariaProps,
 		ref,
-		eventProps,
+		eventProps.onBlur,
+		eventProps.onFocus,
 		onChange,
 		getGroupInputProps
 	]);

package/dist/esm/components/radio/use-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-radio.js","names":["getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  cx,\n  dataAttr,\n  handlerAll,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the radio will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\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 of the radio.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the radio is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the radio is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseRadioProps<Y> = {}) => {\n  const group = useRadioGroupContext()\n  const {\n    name: groupName,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name = groupName,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const interactive = !(readOnly || disabled)\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue === value\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      setChecked(ev)\n    },\n    [setChecked, interactive],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        \"data-checked\": dataAttr(checked),\n        ...rest,\n        ...props,\n      }\n\n      return getLabelProps?.(sharedProps) ?? sharedProps\n    },\n    [dataProps, getLabelProps, checked, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"radio\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"data-checked\": dataAttr(checked),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      id,\n      name,\n      checked,\n      resolvedAriaDescribedby,\n      disabled,\n      readOnly,\n      required,\n      value,\n      dataProps,\n      ariaProps,\n      ref,\n      eventProps,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":";;;;;;;;;;;;AA2DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQ,sBAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAc,0BAA0B;EACtD,cAAc;EACd,OALA,gCAAa,WAAW,IAAI,gCAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,aAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,4CAAyB,QAAQ;GACjC,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAMC,gBAAqC,aACxC,EAAE,oBAAoBC,mBAAiB,GAAGF,YAAU,EAAE,KAAK;EAC1D,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB;GAChB,0CAAuB,yBAAyBE,kBAAgB;GAChE,4CAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAK,UAAUA,QAAM,KAAK,IAAI;GAC9B,sCAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA,mBAZoC,aACnC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,4CAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAKC;EACA;EACA;EACD"}
+{"version":3,"file":"use-radio.js","names":["getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n  cx,\n  dataAttr,\n  handlerAll,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the radio will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\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 of the radio.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the radio is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the radio is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <Y extends string = string>({\n  \"aria-describedby\": ariaDescribedbyProp,\n  ...props\n}: UseRadioProps<Y> = {}) => {\n  const group = useRadioGroupContext()\n  const {\n    name: groupName,\n    value: groupValue,\n    getInputProps: getGroupInputProps,\n    getLabelProps,\n  } = group ?? {}\n  const uuid = useId()\n  const {\n    props: {\n      id,\n      ref,\n      name = groupName,\n      \"aria-controls\": ariaControlsProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps({\n    id: group ? uuid : undefined,\n    ...props,\n    notSupportReadOnly: true,\n  })\n  const interactive = !(readOnly || disabled)\n  const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n  const resolvedChecked =\n    !isUndefined(groupValue) && !isUndefined(value)\n      ? groupValue === value\n      : checkedProp\n  const [checked, setChecked] = useControllableEventState({\n    defaultValue: defaultChecked,\n    value: resolvedChecked,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return (ev.defaultPrevented = true)\n\n      setChecked(ev)\n    },\n    [setChecked, interactive],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        \"data-checked\": dataAttr(checked),\n        ...rest,\n        ...props,\n      }\n\n      return getLabelProps?.(sharedProps) ?? sharedProps\n    },\n    [dataProps, getLabelProps, checked, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const sharedProps = {\n        ...dataProps,\n        ...ariaProps,\n        id,\n        type: \"radio\",\n        name,\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-controls\": cx(ariaControls, ariaControlsProp),\n        \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n        \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n        \"data-checked\": dataAttr(checked),\n        checked,\n        disabled,\n        readOnly,\n        required,\n        tabIndex,\n        value,\n        ...props,\n        ref: mergeRefs(props.ref, ref),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      checked,\n      ariaControlsProp,\n      resolvedAriaDescribedby,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\n      ref,\n      eventProps.onBlur,\n      eventProps.onFocus,\n      onChange,\n      getGroupInputProps,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-hidden\": \"true\",\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getIndicatorProps,\n    getInputProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":";;;;;;;;;;;;AA2DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQ,sBAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,iBAAiB,kBACjB,mBAAmB,oBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAc,0BAA0B;EACtD,cAAc;EACd,OALA,gCAAa,WAAW,IAAI,gCAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,aAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,4CAAyB,QAAQ;GACjC,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAMC,gBAAqC,aACxC,EACC,iBAAiB,cACjB,oBAAoBC,mBACpB,mBAAmB,gBACnB,GAAGF,YACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB;GAChB,uCAAoB,cAAc,iBAAiB;GACnD,0CAAuB,yBAAyBE,kBAAgB;GAChE,yCAAsB,gBAAgB,mBAAmB;GACzD,4CAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAK,UAAUA,QAAM,KAAK,IAAI;GAC9B,sCAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA,mBAZoC,aACnC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,4CAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAKC;EACA;EACA;EACD"}

package/dist/types/components/accordion/accordion.d.ts

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react922 from "react";
+import * as react182 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react922.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react182.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react910 from "react";
+import * as react170 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react910.Context<{
+declare const AccordionDescendantsContext: react170.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react910.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react910.RefCallback<HTMLButtonElement>;
+    } | undefined) => react170.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react910.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react910.RefCallback<HTMLButtonElement>;
+      } | undefined) => react170.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: () => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react910.RefCallback<HTMLButtonElement>;
+    register: react170.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react910.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react910.RefCallback<HTMLButtonElement>;
+    } | undefined) => react170.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react910.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react170.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react910.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react170.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react910.RefCallback<HTMLButtonElement>;
+    } | undefined) => react170.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react910.Dispatch<react910.SetStateAction<number>>;
-  setIndex: react910.Dispatch<react910.SetStateAction<number | number[]>>;
+  setFocusedIndex: react170.Dispatch<react170.SetStateAction<number>>;
+  setIndex: react170.Dispatch<react170.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/airy/airy.d.ts

@@ -5,7 +5,7 @@ import { AiryStyle } from "./airy.style.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import "../../index.js";
-import * as react27 from "react";
+import * as react1036 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react27.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react1036.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react28 from "react";
+import * as react163 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react28.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react163.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alert/alert.style.d.ts

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
   island: {
     description: {
       color: "fg.muted";

package/dist/types/components/alpha-slider/alpha-slider.d.ts

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react26 from "react";
+import * as react164 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react26.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react164.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react52 from "react";
+import * as react155 from "react";
 
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react52.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react155.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts

@@ -11,7 +11,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react44 from "react";
+import * as react162 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -67,7 +67,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react44.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react162.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "empty" | "indicator" | "field" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts

@@ -8,7 +8,7 @@ import { UsePopoverProps } from "../popover/use-popover.js";
 import "../popover/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react45 from "react";
+import * as react156 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react45.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react156.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react45.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react156.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react45.Dispatch<react45.SetStateAction<string>>;
-  setValue: react45.Dispatch<react45.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react156.Dispatch<react156.SetStateAction<string>>;
+  setValue: react156.Dispatch<react156.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

package/dist/types/components/avatar/avatar.d.ts

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react39 from "react";
+import * as react1030 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils0 from "@yamada-ui/utils";
+import * as _yamada_ui_utils24 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react39.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils24.Dict = _yamada_ui_utils24.Dict<any>>(el: H | react1030.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react39.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react39.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1030.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1030.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils24.Dict = _yamada_ui_utils24.Dict<any>, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils24.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react42 from "react";
+import * as react1033 from "react";
 
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react42.ReactElement<any, string | react42.JSXElementConstructor<any>>[];
+  children: react1033.ReactElement<any, string | react1033.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/badge/badge.d.ts

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react38 from "react";
+import * as react1011 from "react";
 
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react38.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react1011.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

package/dist/types/components/bleed/bleed.d.ts

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react37 from "react";
+import * as react138 from "react";
 
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react37.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react138.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

package/dist/types/components/blockquote/blockquote.d.ts

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react29 from "react";
+import * as react1010 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react29.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react1010.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { BreadcrumbStyle } from "./breadcrumb.style.js";
 import { UseBreadcrumbProps } from "./use-breadcrumb.js";
 import "../../index.js";
-import * as react62 from "react";
+import * as react146 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/breadcrumb/breadcrumb.d.ts
@@ -40,7 +40,7 @@ interface BreadcrumbRootProps extends HTMLStyledProps<"nav">, ThemeProps<Breadcr
    */
   separatorProps?: BreadcrumbSeparatorProps;
 }
-declare const BreadcrumbPropsContext: react62.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
+declare const BreadcrumbPropsContext: react146.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
 /**
  * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
  *

package/dist/types/components/breadcrumb/use-breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import { ReactNodeOrFunction } from "../../utils/index.types.js";
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react63 from "react";
+import * as react143 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/breadcrumb/use-breadcrumb.d.ts
@@ -46,7 +46,7 @@ declare const useBreadcrumb: ({
   startBoundaries,
   ...rest
 }?: UseBreadcrumbProps) => {
-  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react63.ReactPortal | ReactElement<unknown, string | react63.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react63.JSXElementConstructor<any>> | null | undefined)[];
+  children: (string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react143.ReactPortal | ReactElement<unknown, string | react143.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | ReactElement<any, string | react143.JSXElementConstructor<any>> | null | undefined)[];
   getEllipsisProps: PropGetter<"svg", undefined, undefined>;
   getLinkProps: PropGetter<"a", {
     currentPage?: boolean;

package/dist/types/components/button/button.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import "../loading/index.js";
 import { ButtonStyle } from "./button.style.js";
 import "../../index.js";
-import * as react74 from "react";
+import * as react140 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/button/button.d.ts
@@ -72,7 +72,7 @@ interface ButtonProps extends HTMLStyledProps<"button">, ThemeProps<ButtonStyle>
    */
   loadingProps?: ButtonLoadingProps;
 }
-declare const ButtonPropsContext: react74.Context<Partial<ButtonProps> | undefined>, useButtonPropsContext: () => Partial<ButtonProps> | undefined;
+declare const ButtonPropsContext: react140.Context<Partial<ButtonProps> | undefined>, useButtonPropsContext: () => Partial<ButtonProps> | undefined;
 /**
  * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
  *

package/dist/types/components/button/icon-button.d.ts

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { IconButtonStyle } from "./icon-button.style.js";
 import { ButtonProps } from "./button.js";
 import "../../index.js";
-import * as react75 from "react";
+import * as react141 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/button/icon-button.d.ts
@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<WithoutThemeProps<ButtonProps, IconButton
    */
   icon?: ReactNode;
 }
-declare const IconButtonPropsContext: react75.Context<Partial<IconButtonProps> | undefined>, useIconButtonPropsContext: () => Partial<IconButtonProps> | undefined;
+declare const IconButtonPropsContext: react141.Context<Partial<IconButtonProps> | undefined>, useIconButtonPropsContext: () => Partial<IconButtonProps> | undefined;
 /**
  * `IconButton` is a component that displays an icon within a button.
  *

package/dist/types/components/calendar/calendar.d.ts

@@ -7,7 +7,7 @@ import { UseCalendarDayProps, UseCalendarProps } from "./use-calendar.js";
 import { SelectRootProps } from "../select/select.js";
 import "../select/index.js";
 import "../../index.js";
-import * as react66 from "react";
+import * as react154 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/calendar/calendar.d.ts
@@ -69,7 +69,7 @@ interface CalendarRootProps<Multiple extends boolean = false, Range extends bool
    */
   yearSelectProps?: CalendarYearSelectProps;
 }
-declare const CalendarPropsContext: react66.Context<Partial<CalendarRootProps<false, false>> | undefined>, useCalendarPropsContext: () => Partial<CalendarRootProps<false, false>> | undefined;
+declare const CalendarPropsContext: react154.Context<Partial<CalendarRootProps<false, false>> | undefined>, useCalendarPropsContext: () => Partial<CalendarRootProps<false, false>> | undefined;
 /**
  * `Calendar` is a component for displaying or selecting dates in a calendar.
  *