@yamada-ui/react 2.3.0-next-20260516024901 → 2.3.0-next-20260516100323

package/dist/cjs/components/checkbox/use-checkbox-group.cjs

@@ -13,7 +13,7 @@ const [CheckboxGroupContext, useCheckboxGroupContext] = require_context.createCo
 	strict: false
 });
 const useCheckboxGroup = (props = {}) => {
-	const { context: { labelId } = {}, props: { defaultValue = [], disabled, max, readOnly, required, value: valueProp, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedbyProp, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
+	const { context: { labelId } = {}, props: { defaultValue = [], disabled, max, readOnly, required, value: valueProp, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
 	const interactive = !(readOnly || disabled);
 	const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
 		defaultValue,
@@ -33,12 +33,12 @@ const useCheckboxGroup = (props = {}) => {
 		max,
 		setValue
 	]);
-	const getRootProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => require_props.mergeProps(dataProps, {
-		"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedbyProp, ariaDescribedby),
-		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(labelId, ariaLabelledby),
+	const getRootProps = (0, react.useCallback)((props = {}) => require_props.mergeProps(dataProps, {
+		"aria-describedby": ariaDescribedby,
+		"aria-labelledby": labelId,
 		role: "group"
-	}, rest, props, { ref })(), [
-		ariaDescribedbyProp,
+	}, rest, props)(), [
+		ariaDescribedby,
 		dataProps,
 		labelId,
 		rest

package/dist/cjs/components/checkbox/use-checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-group.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv)) {\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        } else if (!isNumber(max) || prev.length < max) {\n          return [...prev, valueOrEv]\n        } else {\n          return prev\n        }\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n          \"aria-labelledby\": cx(labelId, ariaLabelledby),\n          role: \"group\",\n        },\n        rest,\n        props,\n        {\n          ref,\n        },\n      )(),\n    [ariaDescribedbyProp, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC;CAClC,MAAM;CACN,QAAQ;CACT,CAAC;AA0BJ,MAAa,oBACX,QAAkC,EAAE,KACjC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,eAAe,EAAE,EACjB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACEC,wBAAAA,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,cACH,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,UAAa,UAAU,EAAE,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,UAAU,EAC1B,OAAO,KAAK,QAAQ,cAAc,cAAc,UAAU;QACrD,IAAI,EAAA,GAAA,oBAAA,cAAA,UAAU,IAAI,IAAI,KAAK,SAAS,KACzC,OAAO,CAAC,GAAG,MAAM,UAAU;QAE3B,OAAO;IAET;IAEJ;EAAC;EAAa;EAAK;EAAS,CAC7B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KACJC,cAAAA,WACE,WACA;EACE,qBAAA,GAAA,oBAAA,cAAA,IAAuB,qBAAqB,gBAAgB;EAC5D,oBAAA,GAAA,oBAAA,cAAA,IAAsB,SAAS,eAAe;EAC9C,MAAM;EACP,EACD,MACA,OACA,EACE,KACD,CACF,EAAE,EACL;EAAC;EAAqB;EAAW;EAAS;EAAK,CAChD;CAiDD,OAAO;EACL;EACA;EACA,gBAAA,GAAA,MAAA,cAjDC,QAAQ,EAAE,KAAK;GACd,MAAM,UACJ,EAAA,GAAA,oBAAA,cAAA,aAAa,MAAM,MAAA,GAAA,oBAAA,cAAA,UACT,MAAM,MAAM,KAAA,GAAA,oBAAA,cAAA,UAAa,MAAM,MAAM,KAC/C,MAAM,SAAS,MAAM,MAAW;GAClC,MAAM,gBAAgB,CAAC,YAAA,GAAA,oBAAA,cAAA,UAAoB,IAAI,IAAI,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAOC,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;IACjC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,cAAc;IAClD,SAAA,GAAA,oBAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;IACnD,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;IAC9C,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;IACvD;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAcY;EACb,gBAAA,GAAA,MAAA,cAXC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,UAAU,CAOE;EACb;EACA;EACD"}
+{"version":3,"file":"use-checkbox-group.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv)) {\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        } else if (!isNumber(max) || prev.length < max) {\n          return [...prev, valueOrEv]\n        } else {\n          return prev\n        }\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": ariaDescribedby,\n          \"aria-labelledby\": labelId,\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaDescribedby, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC;CAClC,MAAM;CACN,QAAQ;CACT,CAAC;AA0BJ,MAAa,oBACX,QAAkC,EAAE,KACjC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,eAAe,EAAE,EACjB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,wBAAAA,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,cACH,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,UAAa,UAAU,EAAE,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,UAAU,EAC1B,OAAO,KAAK,QAAQ,cAAc,cAAc,UAAU;QACrD,IAAI,EAAA,GAAA,oBAAA,cAAA,UAAU,IAAI,IAAI,KAAK,SAAS,KACzC,OAAO,CAAC,GAAG,MAAM,UAAU;QAE3B,OAAO;IAET;IAEJ;EAAC;EAAa;EAAK;EAAS,CAC7B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KACTC,cAAAA,WACE,WACA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAiB;EAAW;EAAS;EAAK,CAC5C;CAiDD,OAAO;EACL;EACA;EACA,gBAAA,GAAA,MAAA,cAjDC,QAAQ,EAAE,KAAK;GACd,MAAM,UACJ,EAAA,GAAA,oBAAA,cAAA,aAAa,MAAM,MAAA,GAAA,oBAAA,cAAA,UACT,MAAM,MAAM,KAAA,GAAA,oBAAA,cAAA,UAAa,MAAM,MAAM,KAC/C,MAAM,SAAS,MAAM,MAAW;GAClC,MAAM,gBAAgB,CAAC,YAAA,GAAA,oBAAA,cAAA,UAAoB,IAAI,IAAI,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAOC,YAAAA,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;IACjC,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,cAAc;IAClD,SAAA,GAAA,oBAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;IACnD,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;IAC9C,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;IACvD;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAcY;EACb,gBAAA,GAAA,MAAA,cAXC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,UAAU,CAOE;EACb;EACA;EACD"}

package/dist/cjs/components/radio/use-radio.cjs

@@ -1,7 +1,6 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
-const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_props = require("../../core/components/props.cjs");
 const require_hooks_use_controllable_state_index = require("../../hooks/use-controllable-state/index.cjs");
@@ -13,7 +12,7 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 	const group = require_use_radio_group.useRadioGroupContext();
 	const { name: groupName, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = (0, react.useId)();
-	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 } = require_use_field_props.useFieldProps({
+	const { props: { id, ref, name = groupName, "aria-controls": ariaControls, "aria-labelledby": ariaLabelledby, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -38,31 +37,30 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		checked,
 		rest
 	]);
-	const getInputProps = (0, react.useCallback)(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		const sharedProps = {
+	const getInputProps = (0, react.useCallback)((props = {}) => {
+		const sharedProps = require_props.mergeProps({
 			...dataProps,
 			...ariaProps,
 			id,
+			ref,
 			type: "radio",
 			name,
 			style: require_dom.visuallyHiddenAttributes.style,
 			"aria-checked": checked,
-			"aria-controls": (0, require_utils_index.utils_exports.cx)(ariaControls, ariaControlsProp),
-			"aria-describedby": (0, require_utils_index.utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby),
-			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
+			"aria-controls": ariaControls,
+			"aria-describedby": resolvedAriaDescribedby,
+			"aria-labelledby": ariaLabelledby,
 			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 			checked,
 			disabled,
 			readOnly,
 			required,
 			tabIndex,
-			value,
-			...props,
-			ref: require_ref.mergeRefs(props.ref, ref),
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
-			onChange: (0, require_utils_index.utils_exports.handlerAll)(props.onChange, onChange),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
-		};
+			value
+		}, props, {
+			...eventProps,
+			onChange
+		})();
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
 		dataProps,
@@ -70,17 +68,16 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		id,
 		name,
 		checked,
-		ariaControlsProp,
+		ariaControls,
 		resolvedAriaDescribedby,
-		ariaLabelledbyProp,
+		ariaLabelledby,
 		disabled,
 		readOnly,
 		required,
 		tabIndex,
 		value,
 		ref,
-		eventProps.onBlur,
-		eventProps.onFocus,
+		eventProps,
 		onChange,
 		getGroupInputProps
 	]);

package/dist/cjs/components/radio/use-radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","mergeProps","visuallyHiddenAttributes","mergeRefs"],"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 { mergeProps } from \"../../core\"\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 = mergeProps(\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":";;;;;;;;;;;AA4DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQA,wBAAAA,sBAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,QAAA,GAAA,MAAA,QAAc;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,eACEC,wBAAAA,cAAc;EAChB,IAAI,QAAQ,OAAO,KAAA;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,2CAAAA,0BAA0B;EACtD,cAAc;EACd,OALA,EAAA,GAAA,oBAAA,cAAA,aAAa,WAAW,IAAI,EAAA,GAAA,oBAAA,cAAA,aAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,cACH,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAQ,GAAG,mBAAmB;EAEhD,WAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK;EACd,MAAM,cAAcC,cAAAA,WAClB,WACA,EAAE,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ,EAAE,EACrC,MACA,MACD,EAAE;EAEH,OAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,EACC,iBAAiB,cACjB,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOC,YAAAA,yBAAyB;GAChC,gBAAgB;GAChB,kBAAA,GAAA,oBAAA,cAAA,IAAoB,cAAc,iBAAiB;GACnD,qBAAA,GAAA,oBAAA,cAAA,IAAuB,yBAAyB,gBAAgB;GAChE,oBAAA,GAAA,oBAAA,cAAA,IAAsB,gBAAgB,mBAAmB;GACzD,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACH,KAAKC,YAAAA,UAAU,MAAM,KAAK,IAAI;GAC9B,SAAA,GAAA,oBAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;GACnD,WAAA,GAAA,oBAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;GAC9C,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;GACvD;EAED,OAAO,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;CAYD,OAAO;EACL;EACA,oBAAA,GAAA,MAAA,cAXC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;GACjC,GAAG;GACJ,GACD,CAAC,WAAW,QAAQ,CAKH;EACjB;EACA;EACA;EACD"}
+{"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","mergeProps","visuallyHiddenAttributes"],"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 { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, isUndefined, visuallyHiddenAttributes } 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\": ariaControls,\n      \"aria-labelledby\": ariaLabelledby,\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 = mergeProps(\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    (props = {}) => {\n      const sharedProps = mergeProps(\n        {\n          ...dataProps,\n          ...ariaProps,\n          id,\n          ref,\n          type: \"radio\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          \"aria-checked\": checked,\n          \"aria-controls\": ariaControls,\n          \"aria-describedby\": resolvedAriaDescribedby,\n          \"aria-labelledby\": ariaLabelledby,\n          \"data-checked\": dataAttr(checked),\n          checked,\n          disabled,\n          readOnly,\n          required,\n          tabIndex,\n          value,\n        },\n        props,\n        { ...eventProps, onChange },\n      )()\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      checked,\n      ariaControls,\n      resolvedAriaDescribedby,\n      ariaLabelledby,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\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":";;;;;;;;;;AAqDA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQA,wBAAAA,sBAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,QAAA,GAAA,MAAA,QAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,iBAAiB,cACjB,mBAAmB,gBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,wBAAAA,cAAc;EAChB,IAAI,QAAQ,OAAO,KAAA;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,2CAAAA,0BAA0B;EACtD,cAAc;EACd,OALA,EAAA,GAAA,oBAAA,cAAA,aAAa,WAAW,IAAI,EAAA,GAAA,oBAAA,cAAA,aAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,cACH,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAQ,GAAG,mBAAmB;EAEhD,WAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK;EACd,MAAM,cAAcC,cAAAA,WAClB,WACA,EAAE,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ,EAAE,EACrC,MACA,MACD,EAAE;EAEH,OAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK;EACd,MAAM,cAAcA,cAAAA,WAClB;GACE,GAAG;GACH,GAAG;GACH;GACA;GACA,MAAM;GACN;GACA,OAAOC,YAAAA,yBAAyB;GAChC,gBAAgB;GAChB,iBAAiB;GACjB,oBAAoB;GACpB,mBAAmB;GACnB,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACD,EACD,OACA;GAAE,GAAG;GAAY;GAAU,CAC5B,EAAE;EAEH,OAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAYD,OAAO;EACL;EACA,oBAAA,GAAA,MAAA,cAXC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,iBAAA,GAAA,oBAAA,cAAA,UAAyB,QAAQ;GACjC,GAAG;GACJ,GACD,CAAC,WAAW,QAAQ,CAKH;EACjB;EACA;EACA;EACD"}

package/dist/esm/components/checkbox/use-checkbox-group.js

@@ -12,7 +12,7 @@ const [CheckboxGroupContext, useCheckboxGroupContext] = createContext$1({
 	strict: false
 });
 const useCheckboxGroup = (props = {}) => {
-	const { context: { labelId } = {}, props: { defaultValue = [], disabled, max, readOnly, required, value: valueProp, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedbyProp, ...ariaProps }, dataProps, eventProps } = useFieldProps(props);
+	const { context: { labelId } = {}, props: { defaultValue = [], disabled, max, readOnly, required, value: valueProp, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps(props);
 	const interactive = !(readOnly || disabled);
 	const [value, setValue] = useControllableState({
 		defaultValue,
@@ -32,12 +32,12 @@ const useCheckboxGroup = (props = {}) => {
 		max,
 		setValue
 	]);
-	const getRootProps = useCallback(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => mergeProps(dataProps, {
-		"aria-describedby": (0, utils_exports.cx)(ariaDescribedbyProp, ariaDescribedby),
-		"aria-labelledby": (0, utils_exports.cx)(labelId, ariaLabelledby),
+	const getRootProps = useCallback((props = {}) => mergeProps(dataProps, {
+		"aria-describedby": ariaDescribedby,
+		"aria-labelledby": labelId,
 		role: "group"
-	}, rest, props, { ref })(), [
-		ariaDescribedbyProp,
+	}, rest, props)(), [
+		ariaDescribedby,
 		dataProps,
 		labelId,
 		rest

package/dist/esm/components/checkbox/use-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-group.js","names":["createContext"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedbyProp, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv)) {\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        } else if (!isNumber(max) || prev.length < max) {\n          return [...prev, valueOrEv]\n        } else {\n          return prev\n        }\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": cx(ariaDescribedbyProp, ariaDescribedby),\n          \"aria-labelledby\": cx(labelId, ariaLabelledby),\n          role: \"group\",\n        },\n        rest,\n        props,\n        {\n          ref,\n        },\n      )(),\n    [ariaDescribedbyProp, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;AA2BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC;CAClC,MAAM;CACN,QAAQ;CACT,CAAC;AA0BJ,MAAa,oBACX,QAAkC,EAAE,KACjC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,eAAe,EAAE,EACjB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,qBAAqB,GAAG,aACzD,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,cAAA,UAAa,UAAU,EAAE,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,UAAU,EAC1B,OAAO,KAAK,QAAQ,cAAc,cAAc,UAAU;QACrD,IAAI,EAAA,GAAA,cAAA,UAAU,IAAI,IAAI,KAAK,SAAS,KACzC,OAAO,CAAC,GAAG,MAAM,UAAU;QAE3B,OAAO;IAET;IAEJ;EAAC;EAAa;EAAK;EAAS,CAC7B;CAED,MAAM,eAA2B,aAC9B,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KACJ,WACE,WACA;EACE,qBAAA,GAAA,cAAA,IAAuB,qBAAqB,gBAAgB;EAC5D,oBAAA,GAAA,cAAA,IAAsB,SAAS,eAAe;EAC9C,MAAM;EACP,EACD,MACA,OACA,EACE,KACD,CACF,EAAE,EACL;EAAC;EAAqB;EAAW;EAAS;EAAK,CAChD;CAiDD,OAAO;EACL;EACA;EACA,eAlDyC,aACxC,QAAQ,EAAE,KAAK;GACd,MAAM,UACJ,EAAA,GAAA,cAAA,aAAa,MAAM,MAAA,GAAA,cAAA,UACT,MAAM,MAAM,KAAA,GAAA,cAAA,UAAa,MAAM,MAAM,KAC/C,MAAM,SAAS,MAAM,MAAW;GAClC,MAAM,gBAAgB,CAAC,YAAA,GAAA,cAAA,UAAoB,IAAI,IAAI,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAO,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC,iBAAA,GAAA,cAAA,UAAyB,QAAQ;IACjC,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,cAAc;IAClD,SAAA,GAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;IACnD,WAAA,GAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;IAC9C,UAAA,GAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;IACvD;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAcY;EACb,eAZyC,aACxC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,UAAU,CAOE;EACb;EACA;EACD"}
+{"version":3,"file":"use-checkbox-group.js","names":["createContext"],"sources":["../../../../src/components/checkbox/use-checkbox-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface CheckboxGroupContext extends Omit<\n  UseCheckboxGroupReturn,\n  \"getRootProps\"\n> {}\n\nconst [CheckboxGroupContext, useCheckboxGroupContext] =\n  createContext<CheckboxGroupContext>({\n    name: \"CheckboxGroupContext\",\n    strict: false,\n  })\n\nexport { CheckboxGroupContext, useCheckboxGroupContext }\n\nexport interface UseCheckboxGroupProps<Y extends string = string>\n  extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\">, FieldProps {\n  /**\n   * The initial value of the checkbox group.\n   *\n   * @default []\n   */\n  defaultValue?: Y[]\n  /**\n   * The maximum number of checkboxes that can be checked.\n   */\n  max?: number\n  /**\n   * The value of the checkbox group.\n   */\n  value?: Y[]\n  /**\n   * The callback fired when any children checkbox is checked or unchecked.\n   */\n  onChange?: (value: Y[]) => void\n}\n\nexport const useCheckboxGroup = <Y extends string = string>(\n  props: UseCheckboxGroupProps<Y> = {},\n) => {\n  const {\n    context: { labelId } = {},\n    props: {\n      defaultValue = [],\n      disabled,\n      max,\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onChange = useCallback(\n    (valueOrEv: ChangeEvent<HTMLInputElement> | Y) => {\n      if (!interactive) return\n\n      if (isObject(valueOrEv)) valueOrEv = valueOrEv.target.value as Y\n\n      setValue((prev) => {\n        if (prev.includes(valueOrEv)) {\n          return prev.filter((prevValue) => prevValue !== valueOrEv)\n        } else if (!isNumber(max) || prev.length < max) {\n          return [...prev, valueOrEv]\n        } else {\n          return prev\n        }\n      })\n    },\n    [interactive, max, setValue],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        {\n          \"aria-describedby\": ariaDescribedby,\n          \"aria-labelledby\": labelId,\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaDescribedby, dataProps, labelId, rest],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const checked =\n        !isUndefined(value) &&\n        (isString(props.value) || isNumber(props.value)) &&\n        value.includes(props.value as Y)\n      const trulyDisabled = !checked && isNumber(max) && value.length >= max\n\n      return {\n        ...dataProps,\n        ...ariaProps,\n        type: \"checkbox\",\n        style: visuallyHiddenAttributes.style,\n        \"aria-checked\": checked,\n        \"aria-disabled\": ariaAttr(trulyDisabled),\n        \"data-checked\": dataAttr(checked),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        checked,\n        readOnly,\n        required,\n        ...props,\n        disabled: Boolean(props.disabled || trulyDisabled),\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onChange: handlerAll(props.onChange, onChange),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      eventProps,\n      max,\n      onChange,\n      readOnly,\n      required,\n      value,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  return {\n    max,\n    value,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    onChange,\n  }\n}\n\nexport type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>\n"],"mappings":";;;;;;;;;AA0BA,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC;CAClC,MAAM;CACN,QAAQ;CACT,CAAC;AA0BJ,MAAa,oBACX,QAAkC,EAAE,KACjC;CACH,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,eAAe,EAAE,EACjB,UACA,KACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,cAAiD;EAChD,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,cAAA,UAAa,UAAU,EAAE,YAAY,UAAU,OAAO;EAEtD,UAAU,SAAS;GACjB,IAAI,KAAK,SAAS,UAAU,EAC1B,OAAO,KAAK,QAAQ,cAAc,cAAc,UAAU;QACrD,IAAI,EAAA,GAAA,cAAA,UAAU,IAAI,IAAI,KAAK,SAAS,KACzC,OAAO,CAAC,GAAG,MAAM,UAAU;QAE3B,OAAO;IAET;IAEJ;EAAC;EAAa;EAAK;EAAS,CAC7B;CAED,MAAM,eAA2B,aAC9B,QAAQ,EAAE,KACT,WACE,WACA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAiB;EAAW;EAAS;EAAK,CAC5C;CAiDD,OAAO;EACL;EACA;EACA,eAlDyC,aACxC,QAAQ,EAAE,KAAK;GACd,MAAM,UACJ,EAAA,GAAA,cAAA,aAAa,MAAM,MAAA,GAAA,cAAA,UACT,MAAM,MAAM,KAAA,GAAA,cAAA,UAAa,MAAM,MAAM,KAC/C,MAAM,SAAS,MAAM,MAAW;GAClC,MAAM,gBAAgB,CAAC,YAAA,GAAA,cAAA,UAAoB,IAAI,IAAI,MAAM,UAAU;GAEnE,OAAO;IACL,GAAG;IACH,GAAG;IACH,MAAM;IACN,OAAO,yBAAyB;IAChC,gBAAgB;IAChB,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC,iBAAA,GAAA,cAAA,UAAyB,QAAQ;IACjC,kBAAA,GAAA,cAAA,UAA0B,cAAc;IACxC;IACA;IACA;IACA,GAAG;IACH,UAAU,QAAQ,MAAM,YAAY,cAAc;IAClD,SAAA,GAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;IACnD,WAAA,GAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;IAC9C,UAAA,GAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;IACvD;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAcY;EACb,eAZyC,aACxC,WAAW;GACV,GAAG;GACH,GAAG;GACJ,GACD,CAAC,UAAU,CAOE;EACb;EACA;EACD"}

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

@@ -1,6 +1,5 @@
 "use client";
 import { visuallyHiddenAttributes } from "../../utils/dom.js";
-import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
 import { useControllableEventState } from "../../hooks/use-controllable-state/index.js";
@@ -12,7 +11,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, "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({
+	const { props: { id, ref, name = groupName, "aria-controls": ariaControls, "aria-labelledby": ariaLabelledby, 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
@@ -37,31 +36,30 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		checked,
 		rest
 	]);
-	const getInputProps = useCallback(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		const sharedProps = {
+	const getInputProps = useCallback((props = {}) => {
+		const sharedProps = mergeProps({
 			...dataProps,
 			...ariaProps,
 			id,
+			ref,
 			type: "radio",
 			name,
 			style: visuallyHiddenAttributes.style,
 			"aria-checked": checked,
-			"aria-controls": (0, utils_exports.cx)(ariaControls, ariaControlsProp),
-			"aria-describedby": (0, utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby),
-			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
+			"aria-controls": ariaControls,
+			"aria-describedby": resolvedAriaDescribedby,
+			"aria-labelledby": ariaLabelledby,
 			"data-checked": (0, utils_exports.dataAttr)(checked),
 			checked,
 			disabled,
 			readOnly,
 			required,
 			tabIndex,
-			value,
-			...props,
-			ref: mergeRefs(props.ref, ref),
-			onBlur: (0, utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
-			onChange: (0, utils_exports.handlerAll)(props.onChange, onChange),
-			onFocus: (0, utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
-		};
+			value
+		}, props, {
+			...eventProps,
+			onChange
+		})();
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
 		dataProps,
@@ -69,17 +67,16 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		id,
 		name,
 		checked,
-		ariaControlsProp,
+		ariaControls,
 		resolvedAriaDescribedby,
-		ariaLabelledbyProp,
+		ariaLabelledby,
 		disabled,
 		readOnly,
 		required,
 		tabIndex,
 		value,
 		ref,
-		eventProps.onBlur,
-		eventProps.onFocus,
+		eventProps,
 		onChange,
 		getGroupInputProps
 	]);

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

@@ -1 +1 @@
-{"version":3,"file":"use-radio.js","names":[],"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 { mergeProps } from \"../../core\"\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 = mergeProps(\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":";;;;;;;;;;AA4DA,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,KAAA;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,EAAA,GAAA,cAAA,aAAa,WAAW,IAAI,EAAA,GAAA,cAAA,aAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAQ,GAAG,mBAAmB;EAEhD,WAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAM,eAAoC,aACvC,QAAQ,EAAE,KAAK;EACd,MAAM,cAAc,WAClB,WACA,EAAE,iBAAA,GAAA,cAAA,UAAyB,QAAQ,EAAE,EACrC,MACA,MACD,EAAE;EAEH,OAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAM,gBAAqC,aACxC,EACC,iBAAiB,cACjB,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB;GAChB,kBAAA,GAAA,cAAA,IAAoB,cAAc,iBAAiB;GACnD,qBAAA,GAAA,cAAA,IAAuB,yBAAyB,gBAAgB;GAChE,oBAAA,GAAA,cAAA,IAAsB,gBAAgB,mBAAmB;GACzD,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACH,KAAK,UAAU,MAAM,KAAK,IAAI;GAC9B,SAAA,GAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;GACnD,WAAA,GAAA,cAAA,YAAqB,MAAM,UAAU,SAAS;GAC9C,UAAA,GAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;GACvD;EAED,OAAO,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;CAYD,OAAO;EACL;EACA,mBAZoC,aACnC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,GAAG;GACJ,GACD,CAAC,WAAW,QAAQ,CAKH;EACjB;EACA;EACA;EACD"}
+{"version":3,"file":"use-radio.js","names":[],"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 { mergeProps } from \"../../core\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, isUndefined, visuallyHiddenAttributes } 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\": ariaControls,\n      \"aria-labelledby\": ariaLabelledby,\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 = mergeProps(\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    (props = {}) => {\n      const sharedProps = mergeProps(\n        {\n          ...dataProps,\n          ...ariaProps,\n          id,\n          ref,\n          type: \"radio\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          \"aria-checked\": checked,\n          \"aria-controls\": ariaControls,\n          \"aria-describedby\": resolvedAriaDescribedby,\n          \"aria-labelledby\": ariaLabelledby,\n          \"data-checked\": dataAttr(checked),\n          checked,\n          disabled,\n          readOnly,\n          required,\n          tabIndex,\n          value,\n        },\n        props,\n        { ...eventProps, onChange },\n      )()\n\n      return getGroupInputProps?.(sharedProps) ?? sharedProps\n    },\n    [\n      dataProps,\n      ariaProps,\n      id,\n      name,\n      checked,\n      ariaControls,\n      resolvedAriaDescribedby,\n      ariaLabelledby,\n      disabled,\n      readOnly,\n      required,\n      tabIndex,\n      value,\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":";;;;;;;;;AAqDA,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,cACjB,mBAAmB,gBACnB,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,KAAA;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,EAAA,GAAA,cAAA,aAAa,WAAW,IAAI,EAAA,GAAA,cAAA,aAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAQ,GAAG,mBAAmB;EAEhD,WAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAM,eAAoC,aACvC,QAAQ,EAAE,KAAK;EACd,MAAM,cAAc,WAClB,WACA,EAAE,iBAAA,GAAA,cAAA,UAAyB,QAAQ,EAAE,EACrC,MACA,MACD,EAAE;EAEH,OAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAM,gBAAqC,aACxC,QAAQ,EAAE,KAAK;EACd,MAAM,cAAc,WAClB;GACE,GAAG;GACH,GAAG;GACH;GACA;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB;GAChB,iBAAiB;GACjB,oBAAoB;GACpB,mBAAmB;GACnB,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACD,EACD,OACA;GAAE,GAAG;GAAY;GAAU,CAC5B,EAAE;EAEH,OAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAYD,OAAO;EACL;EACA,mBAZoC,aACnC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,iBAAA,GAAA,cAAA,UAAyB,QAAQ;GACjC,GAAG;GACJ,GACD,CAAC,WAAW,QAAQ,CAKH;EACjB;EACA;EACA;EACD"}

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

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

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

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

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/breadcrumb/breadcrumb.style.d.ts
-declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "item" | "root", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "item" | "root">>, {
+declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "root" | "item", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "root" | "item">>, {
   sm: {
     list: {
       fontSize: "sm";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/carousel/carousel.style.d.ts
-declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "indicators" | "prev", CSSPropObject<CSSSlotObject<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "indicators" | "prev">>, {
+declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "trigger" | "indicator" | "item" | "indicators" | "prev", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "indicator" | "item" | "indicators" | "prev">>, {
   sm: {
     root: {
       h: "sm";
@@ -17,7 +17,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "indicator" |
       h: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"list" | "next" | "indicator" | "item" | "root" | "trigger" | "indicators" | "prev">>>;
+}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "indicator" | "item" | "indicators" | "prev">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

package/dist/types/components/chart/cartesian-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

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

@@ -37,7 +37,7 @@ interface CheckboxProps<Y extends string = string> extends Merge<HTMLStyledProps
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {
@@ -133,7 +133,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: _$react.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxPropsContext: _$react.Context<Partial<CheckboxProps<string>> | undefined>, useCheckboxPropsContext: () => Partial<CheckboxProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {
@@ -229,7 +229,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       rounded: {
         indicator: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox/checkbox.style.d.ts
-declare const checkboxStyle: ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const checkboxStyle: ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/components/checkbox-card/checkbox-card.d.ts

@@ -63,7 +63,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -213,7 +213,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -363,7 +363,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/checkbox-card/checkbox-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-declare const checkboxCardStyle: ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/data-list/data-list.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/data-list/data-list.style.d.ts
-declare const dataListStyle: ComponentSlotStyle<"term" | "description" | "item" | "root", {
+declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "item" | "description", {
   /**
    * The orientation of the data list.
    *

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/drawer/drawer.style.d.ts
-declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar", {
+declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar", {
   /**
    * The placement of the drawer.
    *
@@ -117,7 +117,7 @@ declare const drawerStyle: ComponentSlotStyle<"body" | "footer" | "header" | "ti
       rounded: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton" | "dragBar">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root" | "dragBar">>>;
 type DrawerStyle = typeof drawerStyle;
 //#endregion
 export { DrawerStyle, drawerStyle };

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

@@ -41,7 +41,7 @@ declare const DropzoneRoot: Component<({
   loadingProps,
   overlayProps,
   ...rest
-}: WithoutThemeProps<DropzoneRootProps, ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "description" | "root">>, {
+}: WithoutThemeProps<DropzoneRootProps, ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "root" | "description">>, {
   xs: {
     root: {
       minH: "xs";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/dropzone/dropzone.style.d.ts
-declare const dropzoneStyle: ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "description" | "root">>, {
+declare const dropzoneStyle: ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "root" | "description">>, {
   xs: {
     root: {
       minH: "xs";

package/dist/types/components/empty-state/empty-state.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/empty-state/empty-state.style.d.ts
-declare const emptyState: ComponentSlotStyle<"title" | "content" | "description" | "indicator" | "root", CSSPropObject<CSSSlotObject<"title" | "content" | "description" | "indicator" | "root">>, {
+declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
   sm: {
     content: {
       gap: "xs";
@@ -47,7 +47,7 @@ declare const emptyState: ComponentSlotStyle<"title" | "content" | "description"
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "description" | "indicator" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
 type EmptyState = typeof emptyState;
 //#endregion
 export { EmptyState, emptyState };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/field/field.style.d.ts
-declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator", {
+declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator", {
   /**
    * The orientation of the field.
    */
@@ -35,7 +35,7 @@ declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "helperMessage"
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator">>>;
+}, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>>;
 type FieldStyle = typeof fieldStyle;
 //#endregion
 export { FieldStyle, fieldStyle };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/fieldset/fieldset.style.d.ts
-declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "helperMessage" | "errorMessage", CSSPropObject<CSSSlotObject<"header" | "legend" | "content" | "root" | "helperMessage" | "errorMessage">>, {
+declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage", CSSPropObject<CSSSlotObject<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage">>, {
   sm: {
     content: {
       gap: "3";

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

@@ -82,7 +82,7 @@ declare const Flip: Component<({
   onChange,
   onClick: onClickProp,
   ...rest
-}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
+}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
 //#endregion
 export { Flip, FlipProps, FlipPropsContext, useFlipPropsContext };
 //# sourceMappingURL=flip.d.ts.map

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/flip/flip.style.d.ts
-declare const flipStyle: ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>;
+declare const flipStyle: ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>;
 type FlipStyle = typeof flipStyle;
 //#endregion
 export { FlipStyle, flipStyle };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/form/form.style.d.ts
-declare const formStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "group" | "description" | "root" | "submitButton", CSSPropObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "group" | "description" | "root" | "submitButton">>, {
+declare const formStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "group" | "root" | "description" | "submitButton", CSSPropObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "group" | "root" | "description" | "submitButton">>, {
   sm: {
     body: {
       gap: "5";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/list/list.style.d.ts
-declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
+declare const listStyle: ComponentSlotStyle<"icon" | "root" | "item", {
   styleType: {
     circle: {
       root: {
@@ -35,7 +35,7 @@ declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>>;
 type ListStyle = typeof listStyle;
 //#endregion
 export { ListStyle, listStyle };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/modal/modal.style.d.ts
-declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton", {
+declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root", {
   /**
    * The placement of the modal.
    *
@@ -155,7 +155,7 @@ declare const modalStyle: ComponentSlotStyle<"body" | "footer" | "header" | "tit
       p: "0";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "root" | "closeButton">>>;
+}, CSSModifierObject<CSSSlotObject<"body" | "footer" | "header" | "title" | "content" | "overlay" | "closeButton" | "root">>>;
 type ModalStyle = typeof modalStyle;
 //#endregion
 export { ModalStyle, modalStyle };

package/dist/types/components/native-accordion/native-accordion.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/native-accordion/native-accordion.style.d.ts
-declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", {
+declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", {
   /**
    * If `true`, animate the accordion items when they are expanded or collapsed.
    *
@@ -31,7 +31,7 @@ declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "ico
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
+}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/notice/notice.style.d.ts
-declare const noticeStyle: ComponentSlotStyle<"content" | "item" | "root" | "closeButton", CSSPropObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>>;
+declare const noticeStyle: ComponentSlotStyle<"content" | "closeButton" | "root" | "item", CSSPropObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "closeButton" | "root" | "item">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/pagination/pagination.style.d.ts
-declare const paginationStyle: ComponentSlotStyle<"text" | "item" | "root", CSSPropObject<CSSSlotObject<"text" | "item" | "root">>, {
+declare const paginationStyle: ComponentSlotStyle<"text" | "root" | "item", CSSPropObject<CSSSlotObject<"text" | "root" | "item">>, {
   xs: {
     item: {
       fontSize: "{font-size}";

package/dist/types/components/password-input/strength-meter.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/password-input/strength-meter.style.d.ts
-declare const strengthMeterStyle: ComponentSlotStyle<"label" | "indicator" | "root" | "indicators", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root" | "indicators">>>;
+declare const strengthMeterStyle: ComponentSlotStyle<"label" | "root" | "indicator" | "indicators", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator" | "indicators">>>;
 type StrengthMeterStyle = typeof strengthMeterStyle;
 //#endregion
 export { StrengthMeterStyle, strengthMeterStyle };

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

@@ -29,7 +29,7 @@ interface RadioProps<Y extends string = string> extends Merge<HTMLStyledProps<"l
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {
@@ -135,7 +135,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioPropsContext: _$react.Context<Partial<RadioProps<string>> | undefined>, useRadioPropsContext: () => Partial<RadioProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {
@@ -241,7 +241,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
     shape: {
       circle: {
         indicator: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio/radio.style.d.ts
-declare const radioStyle: ComponentSlotStyle<"label" | "group" | "indicator" | "root", {
+declare const radioStyle: ComponentSlotStyle<"label" | "group" | "root" | "indicator", {
   /**
    * The shape of the component
    *

package/dist/types/components/radio-card/radio-card.d.ts

@@ -55,7 +55,7 @@ interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyled
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -232,7 +232,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {
@@ -409,7 +409,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/radio-card/radio-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-declare const radioCardStyle: ComponentSlotStyle<"group" | "description" | "indicator" | "root" | "addon", {
+declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/rating/rating.style.d.ts
-declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"group" | "icon" | "item" | "root">>, {
+declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"group" | "icon" | "root" | "item">>, {
   xs: {
     icon: {
       fontSize: "md";
@@ -27,7 +27,7 @@ declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root"
       fontSize: "3xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "root" | "item">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/reorder/reorder.style.d.ts
-declare const reorderStyle: ComponentSlotStyle<"item" | "root" | "trigger", {
+declare const reorderStyle: ComponentSlotStyle<"root" | "trigger" | "item", {
   /**
    * The orientation of the reorder.
    *

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/resizable/resizable.style.d.ts
-declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "trigger", {
+declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "trigger" | "item", {
   /**
    * The orientation of the resizable.
    *
@@ -19,7 +19,7 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "tri
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root" | "trigger">>, {
+}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "trigger" | "item">>, {
   border: {
     icon: {
       bg: "colorScheme.muted";

package/dist/types/components/segmented-control/segmented-control.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "root", {
+declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"indicator" | "item" | "
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"indicator" | "item" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/select/select.style.d.ts
-declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "valueText", {
+declare const selectStyle: ComponentSlotStyle<"label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText", {
   /**
    * If `true`, wrap the value text.
    *

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

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/status/status.style.d.ts
-declare const statusStyle: ComponentSlotStyle<"label" | "indicator" | "root", CSSPropObject<CSSSlotObject<"label" | "indicator" | "root">>, {
+declare const statusStyle: ComponentSlotStyle<"label" | "root" | "indicator", CSSPropObject<CSSSlotObject<"label" | "root" | "indicator">>, {
   sm: {
     indicator: {
       boxSize: "2";
@@ -26,7 +26,7 @@ declare const statusStyle: ComponentSlotStyle<"label" | "indicator" | "root", CS
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"label" | "indicator" | "root">>>;
+}, CSSModifierObject<CSSSlotObject<"label" | "root" | "indicator">>>;
 type StatusStyle = typeof statusStyle;
 //#endregion
 export { StatusStyle, statusStyle };

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/steps/steps.style.d.ts
-declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "description" | "indicator" | "item" | "root", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "indicator" | "item" | "description", {
   /**
    * The orientation of the steps.
    *

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tag/tag.style.d.ts
-declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "root" | "closeButton" | "endIcon" | "startIcon", {
+declare const tagStyle: ComponentSlotStyle<"content" | "icon" | "closeButton" | "root" | "endIcon" | "startIcon", {
   /**
    * If `true`, the tag is full rounded. Else, it'll be slightly round.
    *

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

@@ -69,7 +69,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "connector" | "description" | "indicator" | "item" | "root", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
   align: {
     center: {
       content: {

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "connector" | "description" | "indicator" | "item" | "root", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
   /**
    * The alignment of the timeline.
    *

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

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tree/tree.style.d.ts
-declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "indicator" | "item" | "root", {
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "indicator" | "item", {
   /**
    * The shape of the component
    *

package/dist/types/providers/i18n-provider/i18n-provider.d.ts

@@ -134,7 +134,7 @@ declare const I18nContext: _$react.Context<I18nContext<{
   readonly toggle: {
     readonly "Toggle button": "Toggle button";
   };
-}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "closeButton.Close" | "tag.Close tag" | "stat.Decreased by" | "stat.Increased by" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%">>;
+}, "progress.Loading..." | "progress.{value} percent" | "select.Clear value" | "table.Clear sorting" | "table.Page size" | "table.Select all rows" | "table.Select row" | "table.Sort ascending" | "table.Sort descending" | "toggle.Toggle button" | "slider.Slider thumb" | "modal.Close modal" | "modal.Open modal" | "closeButton.Close" | "actionBar.Close action bar" | "actionBar.Open action bar" | "autocomplete.Clear value" | "autocomplete.No results found" | "avatar.Avatar Icon" | "breadcrumb.Breadcrumb" | "breadcrumb.Ellipsis" | "calendar.Choose the month" | "calendar.Choose the year" | "calendar.Go to the next month" | "calendar.Go to the previous month" | "calendar.Today" | "carousel.Go to next slide" | "carousel.Go to previous slide" | "carousel.Go to {page} slide" | "carousel.Slides" | "carousel.{page} of {total}" | "colorPicker.Pick a color" | "colorSelector.Pick a color" | "colorSwatch.Color swatch group" | "datePicker.Clear value" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "pagination.Go to first page" | "pagination.Go to last page" | "pagination.Go to next page" | "pagination.Go to page {value}" | "pagination.Go to previous page" | "pagination.Pagination" | "pagination.{value} / {total}" | "pagination.{value} of {total}" | "passwordInput.Password strength meter" | "passwordInput.Toggle password visibility" | "saturationSlider.Saturation and brightness thumb" | "saturationSlider.Saturation {saturation}%, Brightness {brightness}%" | "sidebar.Close sidebar" | "sidebar.Open sidebar" | "stat.Decreased by" | "stat.Increased by" | "tag.Close tag">>;
 interface I18nProviderProps {
   children?: ReactNode;
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.3.0-next-20260516024901",
+  "version": "2.3.0-next-20260516100323",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",