@yamada-ui/react 2.2.1-dev-20260428170353 → 2.2.1-dev-20260429020906

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

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_context = require('../../utils/context.cjs');
 const require_effect = require('../../utils/effect.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 let react = require("react");
 
@@ -54,13 +56,11 @@ const useToggleGroup = ({ defaultValue, disabled, readOnly, value: valueProp, on
 		disabled,
 		readOnly,
 		value,
-		getGroupProps: (0, react.useCallback)((props) => ({
+		getGroupProps: (0, react.useCallback)((props) => require_props.mergeProps({
 			"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
 			"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
-			role: "group",
-			...rest,
-			...props
-		}), [
+			role: "group"
+		}, rest, props)(), [
 			disabled,
 			readOnly,
 			rest

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

@@ -1 +1 @@
-{"version":3,"file":"use-toggle-group.cjs","names":["createContext","useControllableState","value"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  isArray,\n  isUndefined,\n  toArray,\n  useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n  onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n  disabled?: boolean\n  readOnly?: boolean\n  value?: string | string[]\n  onChange?: <Y extends string = string>(value: undefined | Y) => void\n}\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n  createContext<ToggleGroupContext>({\n    name: \"ToggleGroupContext\",\n    strict: false,\n  })\n\nexport { ToggleGroupContext, useToggleGroupContext }\n\nexport interface UseToggleGroupProps<\n  Y extends string | string[] = string,\n> extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\"> {\n  /**\n   * The initial value of the toggle button group.\n   */\n  defaultValue?: Y extends any[] ? Y : undefined | Y\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the toggle button group.\n   */\n  value?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The callback fired when any children toggle button is selected or unselected.\n   */\n  onChange?: (value: Y extends any[] ? Y : undefined | Y) => void\n}\n\nexport const useToggleGroup = <Y extends string | string[] = string>({\n  defaultValue,\n  disabled,\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseToggleGroupProps<Y>) => {\n  type Value = Y extends any[] ? Y : undefined | Y\n\n  const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n    new Map(),\n  )\n  const [value, setValue] = useControllableState<Value>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onReset = useCallback((targetValue?: string[]) => {\n    onChangeMapRef.current.forEach((onChange, value) => {\n      if (targetValue?.includes(value)) {\n        onChange(true)\n      } else {\n        onChange(false)\n      }\n    })\n  }, [])\n\n  const onChange = useCallback(\n    <M extends string = Y extends any[] ? Y[number] : Y>(\n      value: M | undefined,\n    ) => {\n      if (isUndefined(value)) return\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const included = prev.includes(value)\n\n          if (included) {\n            const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          } else {\n            const nextValue = [...prev, value]\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          }\n        } else {\n          if (String(value) === prev) {\n            onReset()\n\n            return undefined as Value\n          } else {\n            onReset([value])\n\n            return value as unknown as Value\n          }\n        }\n      })\n    },\n    [setValue, onReset],\n  )\n\n  useUpdateEffect(() => {\n    onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n    setValue(valueProp as Value)\n  }, [valueProp])\n\n  const getGroupProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"group\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, readOnly, rest],\n  )\n\n  return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,CAAC,oBAAoB,yBACzBA,8BAAkC;CAChC,MAAM;CACN,QAAQ;CACT,CAAC;AAiCJ,MAAa,kBAAwD,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,WACyB;CAG5B,MAAM,mDACJ,IAAI,KAAK,CACV;CACD,MAAM,CAAC,OAAO,YAAYC,gEAA4B;EACpD;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,kCAAuB,gBAA2B;AACtD,iBAAe,QAAQ,SAAS,YAAU,YAAU;AAClD,OAAI,aAAa,SAASC,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;IAEjB;IACD,EAAE,CAAC;CAEN,MAAM,mCAEF,YACG;AACH,yDAAgBA,QAAM,CAAE;AAExB,YAAU,SAAS;AACjB,sDAAY,KAAK,CAGf,KAFiB,KAAK,SAASA,QAAM,EAEvB;IACZ,MAAM,YAAY,KAAK,QAAQ,cAAc,cAAcA,QAAM;AAEjE,YAAQ,UAAU;AAElB,WAAO;UACF;IACL,MAAM,YAAY,CAAC,GAAG,MAAMA,QAAM;AAElC,YAAQ,UAAU;AAElB,WAAO;;YAGL,OAAOA,QAAM,KAAK,MAAM;AAC1B,aAAS;AAET;UACK;AACL,YAAQ,CAACA,QAAM,CAAC;AAEhB,WAAOA;;IAGX;IAEJ,CAAC,UAAU,QAAQ,CACpB;AAED,sCAAsB;AACpB,UAAQ,oDAAa,UAAU,kDAAW,UAAU,GAAG,OAAU;AAEjE,WAAS,UAAmB;IAC3B,CAAC,UAAU,CAAC;AAaf,QAAO;EAAE;EAAU;EAAU;EAAO,uCAVjC,WAAW;GACV,iEAA0B,SAAS;GACnC,iEAA0B,SAAS;GACnC,MAAM;GACN,GAAG;GACH,GAAG;GACJ,GACD;GAAC;GAAU;GAAU;GAAK,CAC3B;EAEkD;EAAU;EAAgB"}
+{"version":3,"file":"use-toggle-group.cjs","names":["createContext","useControllableState","value","mergeProps"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  isArray,\n  isUndefined,\n  toArray,\n  useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n  onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n  disabled?: boolean\n  readOnly?: boolean\n  value?: string | string[]\n  onChange?: <Y extends string = string>(value: undefined | Y) => void\n}\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n  createContext<ToggleGroupContext>({\n    name: \"ToggleGroupContext\",\n    strict: false,\n  })\n\nexport { ToggleGroupContext, useToggleGroupContext }\n\nexport interface UseToggleGroupProps<\n  Y extends string | string[] = string,\n> extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\"> {\n  /**\n   * The initial value of the toggle button group.\n   */\n  defaultValue?: Y extends any[] ? Y : undefined | Y\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the toggle button group.\n   */\n  value?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The callback fired when any children toggle button is selected or unselected.\n   */\n  onChange?: (value: Y extends any[] ? Y : undefined | Y) => void\n}\n\nexport const useToggleGroup = <Y extends string | string[] = string>({\n  defaultValue,\n  disabled,\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseToggleGroupProps<Y>) => {\n  type Value = Y extends any[] ? Y : undefined | Y\n\n  const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n    new Map(),\n  )\n  const [value, setValue] = useControllableState<Value>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onReset = useCallback((targetValue?: string[]) => {\n    onChangeMapRef.current.forEach((onChange, value) => {\n      if (targetValue?.includes(value)) {\n        onChange(true)\n      } else {\n        onChange(false)\n      }\n    })\n  }, [])\n\n  const onChange = useCallback(\n    <M extends string = Y extends any[] ? Y[number] : Y>(\n      value: M | undefined,\n    ) => {\n      if (isUndefined(value)) return\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const included = prev.includes(value)\n\n          if (included) {\n            const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          } else {\n            const nextValue = [...prev, value]\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          }\n        } else {\n          if (String(value) === prev) {\n            onReset()\n\n            return undefined as Value\n          } else {\n            onReset([value])\n\n            return value as unknown as Value\n          }\n        }\n      })\n    },\n    [setValue, onReset],\n  )\n\n  useUpdateEffect(() => {\n    onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n    setValue(valueProp as Value)\n  }, [valueProp])\n\n  const getGroupProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,CAAC,oBAAoB,yBACzBA,8BAAkC;CAChC,MAAM;CACN,QAAQ;CACT,CAAC;AAiCJ,MAAa,kBAAwD,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,WACyB;CAG5B,MAAM,mDACJ,IAAI,KAAK,CACV;CACD,MAAM,CAAC,OAAO,YAAYC,gEAA4B;EACpD;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,kCAAuB,gBAA2B;AACtD,iBAAe,QAAQ,SAAS,YAAU,YAAU;AAClD,OAAI,aAAa,SAASC,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;IAEjB;IACD,EAAE,CAAC;CAEN,MAAM,mCAEF,YACG;AACH,yDAAgBA,QAAM,CAAE;AAExB,YAAU,SAAS;AACjB,sDAAY,KAAK,CAGf,KAFiB,KAAK,SAASA,QAAM,EAEvB;IACZ,MAAM,YAAY,KAAK,QAAQ,cAAc,cAAcA,QAAM;AAEjE,YAAQ,UAAU;AAElB,WAAO;UACF;IACL,MAAM,YAAY,CAAC,GAAG,MAAMA,QAAM;AAElC,YAAQ,UAAU;AAElB,WAAO;;YAGL,OAAOA,QAAM,KAAK,MAAM;AAC1B,aAAS;AAET;UACK;AACL,YAAQ,CAACA,QAAM,CAAC;AAEhB,WAAOA;;IAGX;IAEJ,CAAC,UAAU,QAAQ,CACpB;AAED,sCAAsB;AACpB,UAAQ,oDAAa,UAAU,kDAAW,UAAU,GAAG,OAAU;AAEjE,WAAS,UAAmB;IAC3B,CAAC,UAAU,CAAC;AAgBf,QAAO;EAAE;EAAU;EAAU;EAAO,uCAbjC,UACCC,yBACE;GACE,iEAA0B,SAAS;GACnC,iEAA0B,SAAS;GACnC,MAAM;GACP,EACD,MACA,MACD,EAAE,EACL;GAAC;GAAU;GAAU;GAAK,CAC3B;EAEkD;EAAU;EAAgB"}

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

@@ -4,6 +4,8 @@ const require_rolldown_runtime = 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');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
@@ -93,20 +95,23 @@ const useToggle = (props = {}) => {
 	return {
 		checked: trulyChecked,
 		setChecked,
-		getButtonProps: (0, react.useCallback)((props$1 = {}) => ({
-			...dataProps,
-			type: "button",
-			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
-			"aria-label": value?.toString() ?? t("Toggle button"),
-			"aria-pressed": trulyChecked,
-			"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
-			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(trulyChecked),
-			disabled,
-			tabIndex: interactive ? void 0 : -1,
-			...rest,
-			...props$1,
-			onClick: (0, require_utils_index.utils_exports.handlerAll)(rest.onClick, props$1.onClick, onClick)
-		}), [
+		getButtonProps: (0, react.useCallback)((props$1 = {}) => {
+			const ariaLabel = value?.toString() ?? t("Toggle button");
+			const mergedProps = require_props.mergeProps(dataProps, {
+				type: "button",
+				"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
+				"aria-label": ariaLabel,
+				"aria-pressed": trulyChecked,
+				"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
+				"data-checked": (0, require_utils_index.utils_exports.dataAttr)(trulyChecked),
+				disabled,
+				tabIndex: interactive ? void 0 : -1
+			}, rest, props$1, { onClick })();
+			return {
+				...mergedProps,
+				"aria-label": mergedProps["aria-label"] ?? ariaLabel
+			};
+		}, [
 			dataProps,
 			value,
 			trulyChecked,

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

@@ -1 +1 @@
-{"version":3,"file":"use-toggle.cjs","names":["useI18n","useToggleGroupContext","useFieldProps","useControllableState","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","props","mergeRefs"],"sources":["../../../../src/components/toggle/use-toggle.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useToggleGroupContext } from \"./use-toggle-group\"\n\nexport interface UseToggleProps<Y extends string = string>\n  extends\n    FieldProps,\n    HTMLRefAttributes<\"input\">,\n    Omit<HTMLProps<\"button\">, \"onChange\" | \"ref\" | \"value\"> {\n  /**\n   * If `true`, the toggle button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the toggle button will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the toggle button will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The value of the toggle button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when checked state changes.\n   */\n  onChange?: (checked: boolean) => void\n}\n\nexport const useToggle = <Y extends string = string>(\n  props: UseToggleProps<Y> = {},\n) => {\n  const { t } = useI18n(\"toggle\")\n  const {\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    value: groupValue,\n    onChange: onChangeGroup,\n    onChangeMapRef,\n  } = useToggleGroupContext() ?? {}\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      active,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseToggleProps<Y>>({\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    ...props,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !(readOnly || disabled)\n  const controlled = !isUndefined(groupValue)\n  const trulyChecked = useMemo(() => {\n    if (!controlled) {\n      return checked\n    } else {\n      return isArray(groupValue)\n        ? groupValue.includes(value ?? \"\")\n        : value === groupValue\n    }\n  }, [controlled, groupValue, checked, value])\n\n  if (controlled && isUndefined(value))\n    console.warn(`Toggle: value is required. Please set the value.`)\n\n  if (value) onChangeMapRef?.current.set(value, setChecked)\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    setChecked((prev) => !prev)\n    onChangeGroup?.(value)\n  }, [onChangeGroup, setChecked, value, interactive])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setChecked(ev.target.checked)\n      onChangeGroup?.(value)\n    },\n    [onChangeGroup, setChecked, value],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      id,\n      form,\n      type: \"checkbox\",\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, ref, props.ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      ariaProps,\n      checked,\n      dataProps,\n      disabled,\n      eventProps,\n      form,\n      id,\n      name,\n      onChange,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getButtonProps: PropGetter<\n    \"button\",\n    undefined,\n    Merge<HTMLProps<\"button\">, { \"aria-label\": string }>\n  > = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      type: \"button\",\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": value?.toString() ?? t(\"Toggle button\"),\n      \"aria-pressed\": trulyChecked,\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(trulyChecked),\n      disabled,\n      tabIndex: interactive ? undefined : -1,\n      ...rest,\n      ...props,\n      onClick: handlerAll(rest.onClick, props.onClick, onClick),\n    }),\n    [\n      dataProps,\n      value,\n      trulyChecked,\n      active,\n      disabled,\n      rest,\n      onClick,\n      interactive,\n      t,\n    ],\n  )\n\n  return {\n    checked: trulyChecked,\n    setChecked,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UseToggleReturn = ReturnType<typeof useToggle>\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,EAAE,MAAMA,8BAAQ,SAAS;CAC/B,MAAM,EACJ,UAAU,eACV,UAAU,eACV,OAAO,YACP,UAAU,eACV,mBACEC,gDAAuB,IAAI,EAAE;CACjC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEC,sCAA8C;EAChD,UAAU;EACV,UAAU;EACV,GAAG;EACJ,CAAC;CACF,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,oDAAa,WAAW;CAC3C,MAAM,wCAA6B;AACjC,MAAI,CAAC,WACH,QAAO;MAEP,uDAAe,WAAW,GACtB,WAAW,SAAS,SAAS,GAAG,GAChC,UAAU;IAEf;EAAC;EAAY;EAAY;EAAS;EAAM,CAAC;AAE5C,KAAI,iEAA0B,MAAM,CAClC,SAAQ,KAAK,mDAAmD;AAElE,KAAI,MAAO,iBAAgB,QAAQ,IAAI,OAAO,WAAW;CAEzD,MAAM,uCAA4B;AAChC,MAAI,CAAC,YAAa;AAElB,cAAY,SAAS,CAAC,KAAK;AAC3B,kBAAgB,MAAM;IACrB;EAAC;EAAe;EAAY;EAAO;EAAY,CAAC;CAEnD,MAAM,mCACH,OAAsC;AACrC,aAAW,GAAG,OAAO,QAAQ;AAC7B,kBAAgB,MAAM;IAExB;EAAC;EAAe;EAAY;EAAM,CACnC;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,GAAGC;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAKC,sBAAU,UAAU,KAAKD,QAAM,IAAI;EACxC,4DAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAkCD,QAAO;EACL,SAAS;EACT;EACA,wCA9BC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,MAAM;GACN,iEAA0B,CAAC,YAAY;GACvC,cAAc,OAAO,UAAU,IAAI,EAAE,gBAAgB;GACrD,gBAAgB;GAChB,+DAAwB,OAAO;GAC/B,gEAAyB,aAAa;GACtC;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAGA;GACH,2DAAoB,KAAK,SAASA,QAAM,SAAS,QAAQ;GAC1D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMC;EACD"}
+{"version":3,"file":"use-toggle.cjs","names":["useI18n","useToggleGroupContext","useFieldProps","useControllableState","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","props","mergeRefs","mergeProps"],"sources":["../../../../src/components/toggle/use-toggle.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useToggleGroupContext } from \"./use-toggle-group\"\n\nexport interface UseToggleProps<Y extends string = string>\n  extends\n    FieldProps,\n    HTMLRefAttributes<\"input\">,\n    Omit<HTMLProps<\"button\">, \"onChange\" | \"ref\" | \"value\"> {\n  /**\n   * If `true`, the toggle button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the toggle button will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the toggle button will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The value of the toggle button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when checked state changes.\n   */\n  onChange?: (checked: boolean) => void\n}\n\nexport const useToggle = <Y extends string = string>(\n  props: UseToggleProps<Y> = {},\n) => {\n  const { t } = useI18n(\"toggle\")\n  const {\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    value: groupValue,\n    onChange: onChangeGroup,\n    onChangeMapRef,\n  } = useToggleGroupContext() ?? {}\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      active,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseToggleProps<Y>>({\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    ...props,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !(readOnly || disabled)\n  const controlled = !isUndefined(groupValue)\n  const trulyChecked = useMemo(() => {\n    if (!controlled) {\n      return checked\n    } else {\n      return isArray(groupValue)\n        ? groupValue.includes(value ?? \"\")\n        : value === groupValue\n    }\n  }, [controlled, groupValue, checked, value])\n\n  if (controlled && isUndefined(value))\n    console.warn(`Toggle: value is required. Please set the value.`)\n\n  if (value) onChangeMapRef?.current.set(value, setChecked)\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    setChecked((prev) => !prev)\n    onChangeGroup?.(value)\n  }, [onChangeGroup, setChecked, value, interactive])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setChecked(ev.target.checked)\n      onChangeGroup?.(value)\n    },\n    [onChangeGroup, setChecked, value],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      id,\n      form,\n      type: \"checkbox\",\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, ref, props.ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      ariaProps,\n      checked,\n      dataProps,\n      disabled,\n      eventProps,\n      form,\n      id,\n      name,\n      onChange,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getButtonProps: PropGetter<\n    \"button\",\n    undefined,\n    Merge<HTMLProps<\"button\">, { \"aria-label\": string }>\n  > = useCallback(\n    (props = {}): Merge<HTMLProps<\"button\">, { \"aria-label\": string }> => {\n      const ariaLabel = value?.toString() ?? t(\"Toggle button\")\n      const mergedProps = mergeProps(\n        dataProps,\n        {\n          type: \"button\",\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-label\": ariaLabel,\n          \"aria-pressed\": trulyChecked,\n          \"data-active\": dataAttr(active),\n          \"data-checked\": dataAttr(trulyChecked),\n          disabled,\n          tabIndex: interactive ? undefined : -1,\n        },\n        rest,\n        props,\n        { onClick },\n      )()\n\n      return {\n        ...mergedProps,\n        \"aria-label\": mergedProps[\"aria-label\"] ?? ariaLabel,\n      }\n    },\n    [\n      dataProps,\n      value,\n      trulyChecked,\n      active,\n      disabled,\n      rest,\n      onClick,\n      interactive,\n      t,\n    ],\n  )\n\n  return {\n    checked: trulyChecked,\n    setChecked,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UseToggleReturn = ReturnType<typeof useToggle>\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,EAAE,MAAMA,8BAAQ,SAAS;CAC/B,MAAM,EACJ,UAAU,eACV,UAAU,eACV,OAAO,YACP,UAAU,eACV,mBACEC,gDAAuB,IAAI,EAAE;CACjC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEC,sCAA8C;EAChD,UAAU;EACV,UAAU;EACV,GAAG;EACJ,CAAC;CACF,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,oDAAa,WAAW;CAC3C,MAAM,wCAA6B;AACjC,MAAI,CAAC,WACH,QAAO;MAEP,uDAAe,WAAW,GACtB,WAAW,SAAS,SAAS,GAAG,GAChC,UAAU;IAEf;EAAC;EAAY;EAAY;EAAS;EAAM,CAAC;AAE5C,KAAI,iEAA0B,MAAM,CAClC,SAAQ,KAAK,mDAAmD;AAElE,KAAI,MAAO,iBAAgB,QAAQ,IAAI,OAAO,WAAW;CAEzD,MAAM,uCAA4B;AAChC,MAAI,CAAC,YAAa;AAElB,cAAY,SAAS,CAAC,KAAK;AAC3B,kBAAgB,MAAM;IACrB;EAAC;EAAe;EAAY;EAAO;EAAY,CAAC;CAEnD,MAAM,mCACH,OAAsC;AACrC,aAAW,GAAG,OAAO,QAAQ;AAC7B,kBAAgB,MAAM;IAExB;EAAC;EAAe;EAAY;EAAM,CACnC;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,GAAGC;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAKC,sBAAU,UAAU,KAAKD,QAAM,IAAI;EACxC,4DAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA4CD,QAAO;EACL,SAAS;EACT;EACA,wCAxCC,UAAQ,EAAE,KAA2D;GACpE,MAAM,YAAY,OAAO,UAAU,IAAI,EAAE,gBAAgB;GACzD,MAAM,cAAcE,yBAClB,WACA;IACE,MAAM;IACN,iEAA0B,CAAC,YAAY;IACvC,cAAc;IACd,gBAAgB;IAChB,+DAAwB,OAAO;IAC/B,gEAAyB,aAAa;IACtC;IACA,UAAU,cAAc,SAAY;IACrC,EACD,MACAF,SACA,EAAE,SAAS,CACZ,EAAE;AAEH,UAAO;IACL,GAAG;IACH,cAAc,YAAY,iBAAiB;IAC5C;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMC;EACD"}

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

@@ -3,6 +3,8 @@
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { useUpdateEffect } from "../../utils/effect.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useCallback, useRef } from "react";
 
@@ -53,13 +55,11 @@ const useToggleGroup = ({ defaultValue, disabled, readOnly, value: valueProp, on
 		disabled,
 		readOnly,
 		value,
-		getGroupProps: useCallback((props) => ({
+		getGroupProps: useCallback((props) => mergeProps({
 			"data-disabled": (0, utils_exports.dataAttr)(disabled),
 			"data-readonly": (0, utils_exports.dataAttr)(readOnly),
-			role: "group",
-			...rest,
-			...props
-		}), [
+			role: "group"
+		}, rest, props)(), [
 			disabled,
 			readOnly,
 			rest

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

@@ -1 +1 @@
-{"version":3,"file":"use-toggle-group.js","names":["createContext","value"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  isArray,\n  isUndefined,\n  toArray,\n  useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n  onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n  disabled?: boolean\n  readOnly?: boolean\n  value?: string | string[]\n  onChange?: <Y extends string = string>(value: undefined | Y) => void\n}\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n  createContext<ToggleGroupContext>({\n    name: \"ToggleGroupContext\",\n    strict: false,\n  })\n\nexport { ToggleGroupContext, useToggleGroupContext }\n\nexport interface UseToggleGroupProps<\n  Y extends string | string[] = string,\n> extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\"> {\n  /**\n   * The initial value of the toggle button group.\n   */\n  defaultValue?: Y extends any[] ? Y : undefined | Y\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the toggle button group.\n   */\n  value?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The callback fired when any children toggle button is selected or unselected.\n   */\n  onChange?: (value: Y extends any[] ? Y : undefined | Y) => void\n}\n\nexport const useToggleGroup = <Y extends string | string[] = string>({\n  defaultValue,\n  disabled,\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseToggleGroupProps<Y>) => {\n  type Value = Y extends any[] ? Y : undefined | Y\n\n  const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n    new Map(),\n  )\n  const [value, setValue] = useControllableState<Value>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onReset = useCallback((targetValue?: string[]) => {\n    onChangeMapRef.current.forEach((onChange, value) => {\n      if (targetValue?.includes(value)) {\n        onChange(true)\n      } else {\n        onChange(false)\n      }\n    })\n  }, [])\n\n  const onChange = useCallback(\n    <M extends string = Y extends any[] ? Y[number] : Y>(\n      value: M | undefined,\n    ) => {\n      if (isUndefined(value)) return\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const included = prev.includes(value)\n\n          if (included) {\n            const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          } else {\n            const nextValue = [...prev, value]\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          }\n        } else {\n          if (String(value) === prev) {\n            onReset()\n\n            return undefined as Value\n          } else {\n            onReset([value])\n\n            return value as unknown as Value\n          }\n        }\n      })\n    },\n    [setValue, onReset],\n  )\n\n  useUpdateEffect(() => {\n    onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n    setValue(valueProp as Value)\n  }, [valueProp])\n\n  const getGroupProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"group\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, readOnly, rest],\n  )\n\n  return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":";;;;;;;;;AAuBA,MAAM,CAAC,oBAAoB,yBACzBA,gBAAkC;CAChC,MAAM;CACN,QAAQ;CACT,CAAC;AAiCJ,MAAa,kBAAwD,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,WACyB;CAG5B,MAAM,iBAAiB,uBACrB,IAAI,KAAK,CACV;CACD,MAAM,CAAC,OAAO,YAAY,qBAA4B;EACpD;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,UAAU,aAAa,gBAA2B;AACtD,iBAAe,QAAQ,SAAS,YAAU,YAAU;AAClD,OAAI,aAAa,SAASC,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;IAEjB;IACD,EAAE,CAAC;CAEN,MAAM,WAAW,aAEb,YACG;AACH,qCAAgBA,QAAM,CAAE;AAExB,YAAU,SAAS;AACjB,kCAAY,KAAK,CAGf,KAFiB,KAAK,SAASA,QAAM,EAEvB;IACZ,MAAM,YAAY,KAAK,QAAQ,cAAc,cAAcA,QAAM;AAEjE,YAAQ,UAAU;AAElB,WAAO;UACF;IACL,MAAM,YAAY,CAAC,GAAG,MAAMA,QAAM;AAElC,YAAQ,UAAU;AAElB,WAAO;;YAGL,OAAOA,QAAM,KAAK,MAAM;AAC1B,aAAS;AAET;UACK;AACL,YAAQ,CAACA,QAAM,CAAC;AAEhB,WAAOA;;IAGX;IAEJ,CAAC,UAAU,QAAQ,CACpB;AAED,uBAAsB;AACpB,UAAQ,gCAAa,UAAU,8BAAW,UAAU,GAAG,OAAU;AAEjE,WAAS,UAAmB;IAC3B,CAAC,UAAU,CAAC;AAaf,QAAO;EAAE;EAAU;EAAU;EAAO,eAXF,aAC/B,WAAW;GACV,6CAA0B,SAAS;GACnC,6CAA0B,SAAS;GACnC,MAAM;GACN,GAAG;GACH,GAAG;GACJ,GACD;GAAC;GAAU;GAAU;GAAK,CAC3B;EAEkD;EAAU;EAAgB"}
+{"version":3,"file":"use-toggle-group.js","names":["createContext","value"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  createContext,\n  dataAttr,\n  isArray,\n  isUndefined,\n  toArray,\n  useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n  onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n  disabled?: boolean\n  readOnly?: boolean\n  value?: string | string[]\n  onChange?: <Y extends string = string>(value: undefined | Y) => void\n}\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n  createContext<ToggleGroupContext>({\n    name: \"ToggleGroupContext\",\n    strict: false,\n  })\n\nexport { ToggleGroupContext, useToggleGroupContext }\n\nexport interface UseToggleGroupProps<\n  Y extends string | string[] = string,\n> extends Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"value\"> {\n  /**\n   * The initial value of the toggle button group.\n   */\n  defaultValue?: Y extends any[] ? Y : undefined | Y\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the toggle button group.\n   */\n  value?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The callback fired when any children toggle button is selected or unselected.\n   */\n  onChange?: (value: Y extends any[] ? Y : undefined | Y) => void\n}\n\nexport const useToggleGroup = <Y extends string | string[] = string>({\n  defaultValue,\n  disabled,\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseToggleGroupProps<Y>) => {\n  type Value = Y extends any[] ? Y : undefined | Y\n\n  const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n    new Map(),\n  )\n  const [value, setValue] = useControllableState<Value>({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const onReset = useCallback((targetValue?: string[]) => {\n    onChangeMapRef.current.forEach((onChange, value) => {\n      if (targetValue?.includes(value)) {\n        onChange(true)\n      } else {\n        onChange(false)\n      }\n    })\n  }, [])\n\n  const onChange = useCallback(\n    <M extends string = Y extends any[] ? Y[number] : Y>(\n      value: M | undefined,\n    ) => {\n      if (isUndefined(value)) return\n\n      setValue((prev) => {\n        if (isArray(prev)) {\n          const included = prev.includes(value)\n\n          if (included) {\n            const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          } else {\n            const nextValue = [...prev, value]\n\n            onReset(nextValue)\n\n            return nextValue as Value\n          }\n        } else {\n          if (String(value) === prev) {\n            onReset()\n\n            return undefined as Value\n          } else {\n            onReset([value])\n\n            return value as unknown as Value\n          }\n        }\n      })\n    },\n    [setValue, onReset],\n  )\n\n  useUpdateEffect(() => {\n    onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n    setValue(valueProp as Value)\n  }, [valueProp])\n\n  const getGroupProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,CAAC,oBAAoB,yBACzBA,gBAAkC;CAChC,MAAM;CACN,QAAQ;CACT,CAAC;AAiCJ,MAAa,kBAAwD,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,cACV,GAAG,WACyB;CAG5B,MAAM,iBAAiB,uBACrB,IAAI,KAAK,CACV;CACD,MAAM,CAAC,OAAO,YAAY,qBAA4B;EACpD;EACA,OAAO;EACP,UAAU;EACX,CAAC;CAEF,MAAM,UAAU,aAAa,gBAA2B;AACtD,iBAAe,QAAQ,SAAS,YAAU,YAAU;AAClD,OAAI,aAAa,SAASC,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;IAEjB;IACD,EAAE,CAAC;CAEN,MAAM,WAAW,aAEb,YACG;AACH,qCAAgBA,QAAM,CAAE;AAExB,YAAU,SAAS;AACjB,kCAAY,KAAK,CAGf,KAFiB,KAAK,SAASA,QAAM,EAEvB;IACZ,MAAM,YAAY,KAAK,QAAQ,cAAc,cAAcA,QAAM;AAEjE,YAAQ,UAAU;AAElB,WAAO;UACF;IACL,MAAM,YAAY,CAAC,GAAG,MAAMA,QAAM;AAElC,YAAQ,UAAU;AAElB,WAAO;;YAGL,OAAOA,QAAM,KAAK,MAAM;AAC1B,aAAS;AAET;UACK;AACL,YAAQ,CAACA,QAAM,CAAC;AAEhB,WAAOA;;IAGX;IAEJ,CAAC,UAAU,QAAQ,CACpB;AAED,uBAAsB;AACpB,UAAQ,gCAAa,UAAU,8BAAW,UAAU,GAAG,OAAU;AAEjE,WAAS,UAAmB;IAC3B,CAAC,UAAU,CAAC;AAgBf,QAAO;EAAE;EAAU;EAAU;EAAO,eAdF,aAC/B,UACC,WACE;GACE,6CAA0B,SAAS;GACnC,6CAA0B,SAAS;GACnC,MAAM;GACP,EACD,MACA,MACD,EAAE,EACL;GAAC;GAAU;GAAU;GAAK,CAC3B;EAEkD;EAAU;EAAgB"}

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

@@ -3,6 +3,8 @@
 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 "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
@@ -92,20 +94,23 @@ const useToggle = (props = {}) => {
 	return {
 		checked: trulyChecked,
 		setChecked,
-		getButtonProps: useCallback((props$1 = {}) => ({
-			...dataProps,
-			type: "button",
-			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
-			"aria-label": value?.toString() ?? t("Toggle button"),
-			"aria-pressed": trulyChecked,
-			"data-active": (0, utils_exports.dataAttr)(active),
-			"data-checked": (0, utils_exports.dataAttr)(trulyChecked),
-			disabled,
-			tabIndex: interactive ? void 0 : -1,
-			...rest,
-			...props$1,
-			onClick: (0, utils_exports.handlerAll)(rest.onClick, props$1.onClick, onClick)
-		}), [
+		getButtonProps: useCallback((props$1 = {}) => {
+			const ariaLabel = value?.toString() ?? t("Toggle button");
+			const mergedProps = mergeProps(dataProps, {
+				type: "button",
+				"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
+				"aria-label": ariaLabel,
+				"aria-pressed": trulyChecked,
+				"data-active": (0, utils_exports.dataAttr)(active),
+				"data-checked": (0, utils_exports.dataAttr)(trulyChecked),
+				disabled,
+				tabIndex: interactive ? void 0 : -1
+			}, rest, props$1, { onClick })();
+			return {
+				...mergedProps,
+				"aria-label": mergedProps["aria-label"] ?? ariaLabel
+			};
+		}, [
 			dataProps,
 			value,
 			trulyChecked,

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

@@ -1 +1 @@
-{"version":3,"file":"use-toggle.js","names":["getInputProps: PropGetter<\"input\">","props"],"sources":["../../../../src/components/toggle/use-toggle.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useToggleGroupContext } from \"./use-toggle-group\"\n\nexport interface UseToggleProps<Y extends string = string>\n  extends\n    FieldProps,\n    HTMLRefAttributes<\"input\">,\n    Omit<HTMLProps<\"button\">, \"onChange\" | \"ref\" | \"value\"> {\n  /**\n   * If `true`, the toggle button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the toggle button will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the toggle button will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The value of the toggle button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when checked state changes.\n   */\n  onChange?: (checked: boolean) => void\n}\n\nexport const useToggle = <Y extends string = string>(\n  props: UseToggleProps<Y> = {},\n) => {\n  const { t } = useI18n(\"toggle\")\n  const {\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    value: groupValue,\n    onChange: onChangeGroup,\n    onChangeMapRef,\n  } = useToggleGroupContext() ?? {}\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      active,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseToggleProps<Y>>({\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    ...props,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !(readOnly || disabled)\n  const controlled = !isUndefined(groupValue)\n  const trulyChecked = useMemo(() => {\n    if (!controlled) {\n      return checked\n    } else {\n      return isArray(groupValue)\n        ? groupValue.includes(value ?? \"\")\n        : value === groupValue\n    }\n  }, [controlled, groupValue, checked, value])\n\n  if (controlled && isUndefined(value))\n    console.warn(`Toggle: value is required. Please set the value.`)\n\n  if (value) onChangeMapRef?.current.set(value, setChecked)\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    setChecked((prev) => !prev)\n    onChangeGroup?.(value)\n  }, [onChangeGroup, setChecked, value, interactive])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setChecked(ev.target.checked)\n      onChangeGroup?.(value)\n    },\n    [onChangeGroup, setChecked, value],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      id,\n      form,\n      type: \"checkbox\",\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, ref, props.ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      ariaProps,\n      checked,\n      dataProps,\n      disabled,\n      eventProps,\n      form,\n      id,\n      name,\n      onChange,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getButtonProps: PropGetter<\n    \"button\",\n    undefined,\n    Merge<HTMLProps<\"button\">, { \"aria-label\": string }>\n  > = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      type: \"button\",\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": value?.toString() ?? t(\"Toggle button\"),\n      \"aria-pressed\": trulyChecked,\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(trulyChecked),\n      disabled,\n      tabIndex: interactive ? undefined : -1,\n      ...rest,\n      ...props,\n      onClick: handlerAll(rest.onClick, props.onClick, onClick),\n    }),\n    [\n      dataProps,\n      value,\n      trulyChecked,\n      active,\n      disabled,\n      rest,\n      onClick,\n      interactive,\n      t,\n    ],\n  )\n\n  return {\n    checked: trulyChecked,\n    setChecked,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UseToggleReturn = ReturnType<typeof useToggle>\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,EAAE,MAAM,QAAQ,SAAS;CAC/B,MAAM,EACJ,UAAU,eACV,UAAU,eACV,OAAO,YACP,UAAU,eACV,mBACE,uBAAuB,IAAI,EAAE;CACjC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAA8C;EAChD,UAAU;EACV,UAAU;EACV,GAAG;EACJ,CAAC;CACF,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,gCAAa,WAAW;CAC3C,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,WACH,QAAO;MAEP,mCAAe,WAAW,GACtB,WAAW,SAAS,SAAS,GAAG,GAChC,UAAU;IAEf;EAAC;EAAY;EAAY;EAAS;EAAM,CAAC;AAE5C,KAAI,6CAA0B,MAAM,CAClC,SAAQ,KAAK,mDAAmD;AAElE,KAAI,MAAO,iBAAgB,QAAQ,IAAI,OAAO,WAAW;CAEzD,MAAM,UAAU,kBAAkB;AAChC,MAAI,CAAC,YAAa;AAElB,cAAY,SAAS,CAAC,KAAK;AAC3B,kBAAgB,MAAM;IACrB;EAAC;EAAe;EAAY;EAAO;EAAY,CAAC;CAEnD,MAAM,WAAW,aACd,OAAsC;AACrC,aAAW,GAAG,OAAO,QAAQ;AAC7B,kBAAgB,MAAM;IAExB;EAAC;EAAe;EAAY;EAAM,CACnC;CAED,MAAMA,gBAAqC,aACxC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAK,UAAU,UAAU,KAAKA,QAAM,IAAI;EACxC,wCAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAkCD,QAAO;EACL,SAAS;EACT;EACA,gBA/BE,aACD,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,MAAM;GACN,6CAA0B,CAAC,YAAY;GACvC,cAAc,OAAO,UAAU,IAAI,EAAE,gBAAgB;GACrD,gBAAgB;GAChB,2CAAwB,OAAO;GAC/B,4CAAyB,aAAa;GACtC;GACA,UAAU,cAAc,SAAY;GACpC,GAAG;GACH,GAAGA;GACH,uCAAoB,KAAK,SAASA,QAAM,SAAS,QAAQ;GAC1D,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMC;EACD"}
+{"version":3,"file":"use-toggle.js","names":["getInputProps: PropGetter<\"input\">","props"],"sources":["../../../../src/components/toggle/use-toggle.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isUndefined,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useToggleGroupContext } from \"./use-toggle-group\"\n\nexport interface UseToggleProps<Y extends string = string>\n  extends\n    FieldProps,\n    HTMLRefAttributes<\"input\">,\n    Omit<HTMLProps<\"button\">, \"onChange\" | \"ref\" | \"value\"> {\n  /**\n   * If `true`, the toggle button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the toggle button will be checked.\n   */\n  checked?: boolean\n  /**\n   * If `true`, the toggle button will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * The value of the toggle button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when checked state changes.\n   */\n  onChange?: (checked: boolean) => void\n}\n\nexport const useToggle = <Y extends string = string>(\n  props: UseToggleProps<Y> = {},\n) => {\n  const { t } = useI18n(\"toggle\")\n  const {\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    value: groupValue,\n    onChange: onChangeGroup,\n    onChangeMapRef,\n  } = useToggleGroupContext() ?? {}\n  const {\n    props: {\n      id,\n      ref,\n      form,\n      name,\n      active,\n      checked: checkedProp,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps<HTMLElement, UseToggleProps<Y>>({\n    disabled: groupDisabled,\n    readOnly: groupReadOnly,\n    ...props,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n    onChange: onChangeProp,\n  })\n  const interactive = !(readOnly || disabled)\n  const controlled = !isUndefined(groupValue)\n  const trulyChecked = useMemo(() => {\n    if (!controlled) {\n      return checked\n    } else {\n      return isArray(groupValue)\n        ? groupValue.includes(value ?? \"\")\n        : value === groupValue\n    }\n  }, [controlled, groupValue, checked, value])\n\n  if (controlled && isUndefined(value))\n    console.warn(`Toggle: value is required. Please set the value.`)\n\n  if (value) onChangeMapRef?.current.set(value, setChecked)\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    setChecked((prev) => !prev)\n    onChangeGroup?.(value)\n  }, [onChangeGroup, setChecked, value, interactive])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setChecked(ev.target.checked)\n      onChangeGroup?.(value)\n    },\n    [onChangeGroup, setChecked, value],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...ariaProps,\n      ...dataProps,\n      ...eventProps,\n      id,\n      form,\n      type: \"checkbox\",\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, ref, props.ref),\n      onChange: handlerAll(props.onChange, onChange),\n    }),\n    [\n      ariaProps,\n      checked,\n      dataProps,\n      disabled,\n      eventProps,\n      form,\n      id,\n      name,\n      onChange,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getButtonProps: PropGetter<\n    \"button\",\n    undefined,\n    Merge<HTMLProps<\"button\">, { \"aria-label\": string }>\n  > = useCallback(\n    (props = {}): Merge<HTMLProps<\"button\">, { \"aria-label\": string }> => {\n      const ariaLabel = value?.toString() ?? t(\"Toggle button\")\n      const mergedProps = mergeProps(\n        dataProps,\n        {\n          type: \"button\",\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-label\": ariaLabel,\n          \"aria-pressed\": trulyChecked,\n          \"data-active\": dataAttr(active),\n          \"data-checked\": dataAttr(trulyChecked),\n          disabled,\n          tabIndex: interactive ? undefined : -1,\n        },\n        rest,\n        props,\n        { onClick },\n      )()\n\n      return {\n        ...mergedProps,\n        \"aria-label\": mergedProps[\"aria-label\"] ?? ariaLabel,\n      }\n    },\n    [\n      dataProps,\n      value,\n      trulyChecked,\n      active,\n      disabled,\n      rest,\n      onClick,\n      interactive,\n      t,\n    ],\n  )\n\n  return {\n    checked: trulyChecked,\n    setChecked,\n    getButtonProps,\n    getInputProps,\n  }\n}\n\nexport type UseToggleReturn = ReturnType<typeof useToggle>\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,EAAE,MAAM,QAAQ,SAAS;CAC/B,MAAM,EACJ,UAAU,eACV,UAAU,eACV,OAAO,YACP,UAAU,eACV,mBACE,uBAAuB,IAAI,EAAE;CACjC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,MACA,QACA,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAA8C;EAChD,UAAU;EACV,UAAU;EACV,GAAG;EACJ,CAAC;CACF,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,gCAAa,WAAW;CAC3C,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,WACH,QAAO;MAEP,mCAAe,WAAW,GACtB,WAAW,SAAS,SAAS,GAAG,GAChC,UAAU;IAEf;EAAC;EAAY;EAAY;EAAS;EAAM,CAAC;AAE5C,KAAI,6CAA0B,MAAM,CAClC,SAAQ,KAAK,mDAAmD;AAElE,KAAI,MAAO,iBAAgB,QAAQ,IAAI,OAAO,WAAW;CAEzD,MAAM,UAAU,kBAAkB;AAChC,MAAI,CAAC,YAAa;AAElB,cAAY,SAAS,CAAC,KAAK;AAC3B,kBAAgB,MAAM;IACrB;EAAC;EAAe;EAAY;EAAO;EAAY,CAAC;CAEnD,MAAM,WAAW,aACd,OAAsC;AACrC,aAAW,GAAG,OAAO,QAAQ;AAC7B,kBAAgB,MAAM;IAExB;EAAC;EAAe;EAAY;EAAM,CACnC;CAED,MAAMA,gBAAqC,aACxC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA;EACA,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA,GAAGC;EACH,KAAK,UAAU,UAAU,KAAKA,QAAM,IAAI;EACxC,wCAAqBA,QAAM,UAAU,SAAS;EAC/C,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AA4CD,QAAO;EACL,SAAS;EACT;EACA,gBAzCE,aACD,UAAQ,EAAE,KAA2D;GACpE,MAAM,YAAY,OAAO,UAAU,IAAI,EAAE,gBAAgB;GACzD,MAAM,cAAc,WAClB,WACA;IACE,MAAM;IACN,6CAA0B,CAAC,YAAY;IACvC,cAAc;IACd,gBAAgB;IAChB,2CAAwB,OAAO;IAC/B,4CAAyB,aAAa;IACtC;IACA,UAAU,cAAc,SAAY;IACrC,EACD,MACAA,SACA,EAAE,SAAS,CACZ,EAAE;AAEH,UAAO;IACL,GAAG;IACH,cAAc,YAAY,iBAAiB;IAC5C;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMC;EACD"}

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

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

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

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

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

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

package/dist/types/components/action-bar/action-bar.d.ts

@@ -4,10 +4,9 @@ import "../../core/index.js";
 import { ActionBarStyle } from "./action-bar.style.js";
 import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
-import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react30 from "react";
+import * as react946 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +28,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react30.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react946.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

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

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

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

@@ -3,13 +3,10 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { AlertStyle } from "./alert.style.js";
 import { IconProps } from "../icon/icon.js";
-import "../icon/index.js";
 import { LoadingProps } from "../loading/loading.js";
-import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
-import "../status/index.js";
 import "../../index.js";
-import * as react134 from "react";
+import * as react777 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +17,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react134.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react777.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

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

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

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

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

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

@@ -3,16 +3,14 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
-import "../popover/index.js";
 import { AutocompleteStyle } from "./autocomplete.style.js";
 import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
-import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react126 from "react";
+import * as react977 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react126.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react977.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

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

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

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

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