@yamada-ui/react 2.2.1-dev-20260510005230 → 2.2.1-dev-20260510062932

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

@@ -59,10 +59,10 @@ const useCheckboxGroup = (props = {}) => {
 				"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 				"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
 				checked,
-				disabled: trulyDisabled,
 				readOnly,
 				required,
 				...props,
+				disabled: Boolean(props.disabled || trulyDisabled),
 				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)

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        disabled: trulyDisabled,\n        readOnly,\n        required,\n        ...props,\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,UAAU;IACV;IACA;IACA,GAAG;IACH,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  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"}

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

@@ -58,10 +58,10 @@ const useCheckboxGroup = (props = {}) => {
 				"data-checked": (0, utils_exports.dataAttr)(checked),
 				"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
 				checked,
-				disabled: trulyDisabled,
 				readOnly,
 				required,
 				...props,
+				disabled: Boolean(props.disabled || trulyDisabled),
 				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)

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        disabled: trulyDisabled,\n        readOnly,\n        required,\n        ...props,\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,UAAU;IACV;IACA;IACA,GAAG;IACH,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  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"}

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/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" | "root" | "field" | "indicator" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
   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/calendar/calendar.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/calendar/calendar.style.d.ts
-declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "control" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks", {
+declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
   /**
    * If `true`, the calendar will be fixed rows.
    *
@@ -73,7 +73,7 @@ declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "
       "--font-size": "fontSizes.xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "control" | "month" | "week" | "weekday" | "day" | "months" | "years" | "weeks">>>;
+}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
 type CalendarStyle = typeof calendarStyle;
 //#endregion
 export { CalendarStyle, calendarStyle };

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" | "item" | "root" | "trigger" | "prev" | "indicator" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "item" | "root" | "trigger" | "prev" | "indicator" | "indicators">>, {
+declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>, {
   sm: {
     root: {
       h: "sm";
@@ -17,7 +17,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "item" | "root
       h: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"list" | "next" | "item" | "root" | "trigger" | "prev" | "indicator" | "indicators">>>;
+}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "indicator" | "item" | "trigger" | "prev" | "indicators">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

package/dist/types/components/color-picker/color-picker.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/color-picker/color-picker.style.d.ts
-declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper">>, {
+declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "colorSwatch" | "root" | "field" | "eyeDropper">>, {
   xs: {
     field: {
       fontSize: "1em";

package/dist/types/components/color-selector/color-selector.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/color-selector/color-selector.style.d.ts
-declare const colorSelectorStyle: ComponentSlotStyle<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem", {
+declare const colorSelectorStyle: ComponentSlotStyle<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem", {
   /**
    * The shape of the thumb and color swatch.
    *
@@ -22,7 +22,7 @@ declare const colorSelectorStyle: ComponentSlotStyle<"root" | "hueSlider" | "sat
   md: {};
   lg: {};
   xl: {};
-}, CSSModifierObject<CSSSlotObject<"root" | "hueSlider" | "saturationSlider" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem">>>;
+}, CSSModifierObject<CSSSlotObject<"hueSlider" | "saturationSlider" | "root" | "eyeDropper" | "alphaSlider" | "colorSwatchGroup" | "colorSwatchGroupLabel" | "colorSwatchItem">>>;
 type ColorSelectorStyle = typeof colorSelectorStyle;
 //#endregion
 export { ColorSelectorStyle, colorSelectorStyle };

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" | "item" | "root" | "description", {
+declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "description" | "item", {
   /**
    * 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/file-input/file-input.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/file-input/file-input.style.d.ts
-declare const fileInputStyle: ComponentSlotStyle<"root" | "tag", CSSPropObject<CSSSlotObject<"root" | "tag">>, {
+declare const fileInputStyle: ComponentSlotStyle<"tag" | "root", CSSPropObject<CSSSlotObject<"tag" | "root">>, {
   xs: {
     root: {
       "&:has(~ [data-input-element])"?: {

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/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/menu/menu.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/menu/menu.style.d.ts
-declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
+declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
   sm: {
     command: {
       fontSize: "2xs";
@@ -86,7 +86,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
       px: "2";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
 type MenuStyle = typeof menuStyle;
 //#endregion
 export { MenuStyle, menuStyle };

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/number-input/number-input.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/number-input/number-input.style.d.ts
-declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "decrement" | "increment" | "field" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "decrement" | "increment" | "field" | "control">>, {
+declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "decrement" | "increment" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "decrement" | "increment" | "control">>, {
   xs: {
     control: {
       boxSize: "calc({--height} - {spaces.2})";

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/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" | "item" | "trigger", {
   /**
    * 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" | "item" | "trigger", {
   /**
    * 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" | "item" | "trigger">>, {
   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<"item" | "root" | "indicator", {
+declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indic
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"item" | "root" | "indicator">>>;
+}, 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" | "root" | "field" | "indicator" | "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/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" | "item" | "root" | "description" | "indicator", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "description" | "indicator" | "item", {
   /**
    * 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" | "endIcon" | "startIcon" | "closeButton", {
+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" | "item" | "root" | "description" | "indicator" | "connector", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator" | "item" | "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" | "item" | "root" | "description" | "indicator" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator" | "item" | "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" | "item" | "root" | "indicator", {
+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" | "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}" | "closeButton.Close" | "tag.Close tag" | "datePicker.Clear value" | "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" | "hueSlider.Blue" | "hueSlider.Cyan" | "hueSlider.Green" | "hueSlider.Magenta" | "hueSlider.Red" | "hueSlider.Yellow" | "numberInput.Decrease" | "numberInput.Increase" | "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">>;
+}, "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" | "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}" | "closeButton.Close" | "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.2.1-dev-20260510005230",
+  "version": "2.2.1-dev-20260510062932",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -147,7 +147,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
     "uqr": "^0.1.3",
-    "@yamada-ui/utils": "2.1.3-dev-20260510005230"
+    "@yamada-ui/utils": "2.1.3-dev-20260510062932"
   },
   "devDependencies": {
     "@babel/parser": "^7.29.2",