@yamada-ui/react 2.2.1-dev-20260428070134 → 2.2.1-dev-20260428080915

package/dist/cjs/components/color-selector/use-color-selector.cjs

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.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');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
@@ -92,12 +94,10 @@ const useColorSelector = ({ fallbackValue = "#FFFFFF", defaultValue = fallbackVa
 		if (activeRef.current) return;
 		if (valueProp) setHsva((0, require_utils_index.utils_exports.parseToHsv)(valueProp, fallbackValue));
 	}, [valueProp]);
-	const getRootProps = (0, react.useCallback)((props = {}) => ({
+	const getRootProps = (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),
-		...rest,
-		...props
-	}), [
+		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly)
+	}, rest, props)(), [
 		disabled,
 		readOnly,
 		rest

package/dist/cjs/components/color-selector/use-color-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  >","getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  >","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...rest,\n      ...props,\n    }),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}
+{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","value","h","s","v","a","getRootProps: PropGetter","mergeProps","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  >","getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  >","getEyeDropperProps: PropGetter","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}

package/dist/cjs/components/segmented-control/use-segmented-control.cjs

@@ -5,6 +5,8 @@ const require_context = require('../../utils/context.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_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
 let react = require("react");
@@ -22,17 +24,15 @@ const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "
 	const descendants = useSegmentedControlDescendants();
 	id ??= uuid;
 	name ??= uuid;
-	const getRootProps = (0, react.useCallback)((props) => ({
+	const getRootProps = (0, react.useCallback)((props) => require_props.mergeProps({
 		id,
 		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
 		"aria-orientation": orientation,
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
 		"data-orientation": orientation,
 		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
-		role: "radiogroup",
-		...rest,
-		...props
-	}), [
+		role: "radiogroup"
+	}, rest, props)(), [
 		disabled,
 		id,
 		orientation,
@@ -61,17 +61,15 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps, ...res
 	const onChange = (0, react.useCallback)((ev) => {
 		setValue(ev.target.value);
 	}, [setValue]);
-	const getLabelProps = (0, react.useCallback)((props) => ({
+	const getLabelProps = (0, react.useCallback)((props) => require_props.mergeProps({
 		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
 		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
 		"data-orientation": orientation,
 		"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(trulyReadOnly),
 		"data-root-disabled": (0, require_utils_index.utils_exports.dataAttr)(rootDisabled),
-		"data-root-readonly": (0, require_utils_index.utils_exports.dataAttr)(rootReadOnly),
-		...props,
-		...rest
-	}), [
+		"data-root-readonly": (0, require_utils_index.utils_exports.dataAttr)(rootReadOnly)
+	}, rest, props)(), [
 		orientation,
 		trulyDisabled,
 		trulyReadOnly,

package/dist/cjs/components/segmented-control/use-segmented-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-segmented-control.cjs","names":["createContext","createDescendants","useControllableState","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,CAAC,yBAAyB,8BAC9BA,8BAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACdC,uDAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,yBAAc;CACpB,MAAM,CAAC,OAAO,YAAYC,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,uCACH,WAAW;EACV;EACA,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;EACJ,GACD;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,mCACH,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,wCACH,WAAW;EACV,iEAA0B,cAAc;EACxC,gEAAyB,QAAQ;EACjC,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,sEAA+B,aAAa;EAC5C,sEAA+B,aAAa;EAC5C,GAAG;EACH,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,uCAnCC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAOC,qCAAyB;GAChC,iEAA0B,cAAc;GACxC,gEAAyB,QAAQ;GACjC,iEAA0B,cAAc;GACxC,oBAAoB;GACpB,iEAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,UAAU,IAAI;GAC7B,4DAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}
+{"version":3,"file":"use-segmented-control.cjs","names":["createContext","createDescendants","useControllableState","getRootProps: PropGetter","mergeProps","getLabelProps: PropGetter<\"label\">","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          id,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(disabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-disabled\": dataAttr(trulyDisabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(trulyReadOnly),\n          \"data-root-disabled\": dataAttr(rootDisabled),\n          \"data-root-readonly\": dataAttr(rootReadOnly),\n        },\n        rest,\n        props,\n      )(),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,8BAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACdC,uDAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,yBAAc;CACpB,MAAM,CAAC,OAAO,YAAYC,gEAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,uCACH,UACCC,yBACE;EACE;EACA,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,oBAAoB;EACpB,iEAA0B,SAAS;EACnC,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,mCACH,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,wCACH,UACCD,yBACE;EACE,iEAA0B,cAAc;EACxC,gEAAyB,QAAQ;EACjC,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,sEAA+B,aAAa;EAC5C,sEAA+B,aAAa;EAC7C,EACD,MACA,MACD,EAAE,EACL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,uCAnCC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAOE,qCAAyB;GAChC,iEAA0B,cAAc;GACxC,gEAAyB,QAAQ;GACjC,iEAA0B,cAAc;GACxC,oBAAoB;GACpB,iEAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,UAAU,IAAI;GAC7B,4DAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}

package/dist/esm/components/color-selector/use-color-selector.js

@@ -3,6 +3,8 @@
 import { runKeyAction } from "../../utils/dom.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 { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
@@ -91,12 +93,10 @@ const useColorSelector = ({ fallbackValue = "#FFFFFF", defaultValue = fallbackVa
 		if (activeRef.current) return;
 		if (valueProp) setHsva((0, utils_exports.parseToHsv)(valueProp, fallbackValue));
 	}, [valueProp]);
-	const getRootProps = useCallback((props = {}) => ({
+	const getRootProps = useCallback((props = {}) => mergeProps({
 		"data-disabled": (0, utils_exports.dataAttr)(disabled),
-		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
-		...rest,
-		...props
-	}), [
+		"data-readonly": (0, utils_exports.dataAttr)(readOnly)
+	}, rest, props)(), [
 		disabled,
 		readOnly,
 		rest

package/dist/esm/components/color-selector/use-color-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-selector.js","names":["value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  >","getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  >","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...rest,\n      ...props,\n    }),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}
+{"version":3,"file":"use-color-selector.js","names":["value","h","s","v","a","getRootProps: PropGetter","getSaturationSliderProps: PropGetter<UseSaturationSliderProps>","getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  >","getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  >","getEyeDropperProps: PropGetter"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}

package/dist/esm/components/segmented-control/use-segmented-control.js

@@ -4,6 +4,8 @@ import { createContext as createContext$1 } from "../../utils/context.js";
 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 { createDescendants } from "../../hooks/use-descendants/index.js";
 import { useCallback, useId } from "react";
@@ -21,17 +23,15 @@ const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "
 	const descendants = useSegmentedControlDescendants();
 	id ??= uuid;
 	name ??= uuid;
-	const getRootProps = useCallback((props) => ({
+	const getRootProps = useCallback((props) => mergeProps({
 		id,
 		"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
 		"aria-orientation": orientation,
 		"data-disabled": (0, utils_exports.dataAttr)(disabled),
 		"data-orientation": orientation,
 		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
-		role: "radiogroup",
-		...rest,
-		...props
-	}), [
+		role: "radiogroup"
+	}, rest, props)(), [
 		disabled,
 		id,
 		orientation,
@@ -60,17 +60,15 @@ const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps, ...res
 	const onChange = useCallback((ev) => {
 		setValue(ev.target.value);
 	}, [setValue]);
-	const getLabelProps = useCallback((props) => ({
+	const getLabelProps = useCallback((props) => mergeProps({
 		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
 		"data-checked": (0, utils_exports.dataAttr)(checked),
 		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
 		"data-orientation": orientation,
 		"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
 		"data-root-disabled": (0, utils_exports.dataAttr)(rootDisabled),
-		"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly),
-		...props,
-		...rest
-	}), [
+		"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly)
+	}, rest, props)(), [
 		orientation,
 		trulyDisabled,
 		trulyReadOnly,

package/dist/esm/components/segmented-control/use-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-segmented-control.js","names":["createContext","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      id,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"radiogroup\",\n      ...rest,\n      ...props,\n    }),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      \"data-root-disabled\": dataAttr(rootDisabled),\n      \"data-root-readonly\": dataAttr(rootReadOnly),\n      ...props,\n      ...rest,\n    }),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,CAAC,yBAAyB,8BAC9BA,gBAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACd,mBAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,OAAO,OAAO;CACpB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,eAA2B,aAC9B,WAAW;EACV;EACA,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;EACJ,GACD;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,WAAW,aACd,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,gBAAqC,aACxC,WAAW;EACV,6CAA0B,cAAc;EACxC,4CAAyB,QAAQ;EACjC,6CAA0B,cAAc;EACxC,oBAAoB;EACpB,6CAA0B,cAAc;EACxC,kDAA+B,aAAa;EAC5C,kDAA+B,aAAa;EAC5C,GAAG;EACH,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,eApCyC,aACxC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,6CAA0B,cAAc;GACxC,4CAAyB,QAAQ;GACjC,6CAA0B,cAAc;GACxC,oBAAoB;GACpB,6CAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAK,UAAU,UAAU,IAAI;GAC7B,wCAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}
+{"version":3,"file":"use-segmented-control.js","names":["createContext","getRootProps: PropGetter","getLabelProps: PropGetter<\"label\">"],"sources":["../../../../src/components/segmented-control/use-segmented-control.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\n\ninterface SegmentedControlContext extends Omit<\n  UseSegmentedControlReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [SegmentedControlContext, useSegmentedControlContext] =\n  createContext<SegmentedControlContext>({\n    name: \"SegmentedControlContext\",\n  })\n\nexport { SegmentedControlContext, useSegmentedControlContext }\n\nconst {\n  DescendantsContext: SegmentedControlDescendantsContext,\n  useDescendant: useSegmentedControlDescendant,\n  useDescendants: useSegmentedControlDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n  SegmentedControlDescendantsContext,\n  useSegmentedControlDescendant,\n  useSegmentedControlDescendants,\n}\n\nexport interface UseSegmentedControlProps<\n  Y extends string = string,\n> extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the segmented control.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, the segmented control will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The orientation of the segmented control.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * If `true`, the segmented control will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the segmented control.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useSegmentedControl = <Y extends string = string>({\n  id,\n  name,\n  defaultValue,\n  disabled,\n  orientation = \"horizontal\",\n  readOnly,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...rest\n}: UseSegmentedControlProps<Y> = {}) => {\n  const uuid = useId()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const descendants = useSegmentedControlDescendants()\n\n  id ??= uuid\n  name ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          id,\n          \"aria-disabled\": ariaAttr(disabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(disabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"radiogroup\",\n        },\n        rest,\n        props,\n      )(),\n    [disabled, id, orientation, readOnly, rest],\n  )\n\n  return {\n    id,\n    name,\n    descendants,\n    disabled,\n    orientation,\n    readOnly,\n    setValue,\n    value,\n    getRootProps,\n  }\n}\n\nexport type UseSegmentedControlReturn = ReturnType<typeof useSegmentedControl>\n\nexport interface UseSegmentedControlItemProps<Y extends string = string>\n  extends HTMLProps<\"label\">, Pick<FieldProps, \"disabled\" | \"readOnly\"> {\n  /**\n   * The value of the segmented control item.\n   */\n  value: Y\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLProps<\"input\">\n}\n\nexport const useSegmentedControlItem = <Y extends string = string>({\n  disabled,\n  readOnly,\n  value,\n  inputProps,\n  ...rest\n}: UseSegmentedControlItemProps<Y>) => {\n  const {\n    name,\n    disabled: rootDisabled,\n    orientation,\n    readOnly: rootReadOnly,\n    setValue,\n    value: selectedValue,\n  } = useSegmentedControlContext()\n  const { register } = useSegmentedControlDescendant({\n    disabled: disabled || readOnly,\n  })\n  const checked = value === selectedValue\n  const trulyDisabled = disabled ?? rootDisabled\n  const trulyReadOnly = readOnly ?? rootReadOnly\n  const interactive = !(trulyReadOnly || trulyDisabled)\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      setValue(ev.target.value)\n    },\n    [setValue],\n  )\n\n  const getLabelProps: PropGetter<\"label\"> = useCallback(\n    (props) =>\n      mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"data-checked\": dataAttr(checked),\n          \"data-disabled\": dataAttr(trulyDisabled),\n          \"data-orientation\": orientation,\n          \"data-readonly\": dataAttr(trulyReadOnly),\n          \"data-root-disabled\": dataAttr(rootDisabled),\n          \"data-root-readonly\": dataAttr(rootReadOnly),\n        },\n        rest,\n        props,\n      )(),\n    [\n      orientation,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      rootDisabled,\n      rootReadOnly,\n      rest,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      type: \"radio\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"data-checked\": dataAttr(checked),\n      \"data-disabled\": dataAttr(trulyDisabled),\n      \"data-orientation\": orientation,\n      \"data-readonly\": dataAttr(trulyReadOnly),\n      checked,\n      disabled: trulyDisabled || trulyReadOnly,\n      readOnly: trulyReadOnly,\n      tabIndex: interactive ? undefined : -1,\n      value,\n      ...inputProps,\n      ...props,\n      ref: mergeRefs(register, ref),\n      onChange: handlerAll(props.onChange, inputProps?.onChange, onChange),\n    }),\n    [\n      orientation,\n      name,\n      trulyDisabled,\n      trulyReadOnly,\n      checked,\n      interactive,\n      value,\n      inputProps,\n      register,\n      onChange,\n    ],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseSegmentedControlItemReturn = ReturnType<\n  typeof useSegmentedControlItem\n>\n"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,CAAC,yBAAyB,8BAC9BA,gBAAuC,EACrC,MAAM,2BACP,CAAC;AAIJ,MAAM,EACJ,oBAAoB,oCACpB,eAAe,+BACf,gBAAgB,mCACd,mBAAqC;AA+CzC,MAAa,uBAAkD,EAC7D,IACA,MACA,cACA,UACA,cAAc,cACd,UACA,OAAO,WACP,UAAU,cACV,GAAG,SAC4B,EAAE,KAAK;CACtC,MAAM,OAAO,OAAO;CACpB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,cAAc,gCAAgC;AAEpD,QAAO;AACP,UAAS;CAET,MAAMC,eAA2B,aAC9B,UACC,WACE;EACE;EACA,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,oBAAoB;EACpB,6CAA0B,SAAS;EACnC,MAAM;EACP,EACD,MACA,MACD,EAAE,EACL;EAAC;EAAU;EAAI;EAAa;EAAU;EAAK,CAC5C;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAiBH,MAAa,2BAAsD,EACjE,UACA,UACA,OACA,YACA,GAAG,WACkC;CACrC,MAAM,EACJ,MACA,UAAU,cACV,aACA,UAAU,cACV,UACA,OAAO,kBACL,4BAA4B;CAChC,MAAM,EAAE,aAAa,8BAA8B,EACjD,UAAU,YAAY,UACvB,CAAC;CACF,MAAM,UAAU,UAAU;CAC1B,MAAM,gBAAgB,YAAY;CAClC,MAAM,gBAAgB,YAAY;CAClC,MAAM,cAAc,EAAE,iBAAiB;CAEvC,MAAM,WAAW,aACd,OAAsC;AACrC,WAAS,GAAG,OAAO,MAAM;IAE3B,CAAC,SAAS,CACX;CAED,MAAMC,gBAAqC,aACxC,UACC,WACE;EACE,6CAA0B,cAAc;EACxC,4CAAyB,QAAQ;EACjC,6CAA0B,cAAc;EACxC,oBAAoB;EACpB,6CAA0B,cAAc;EACxC,kDAA+B,aAAa;EAC5C,kDAA+B,aAAa;EAC7C,EACD,MACA,MACD,EAAE,EACL;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAoCD,QAAO;EACL;EACA,eApCyC,aACxC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;GAC3B,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,6CAA0B,cAAc;GACxC,4CAAyB,QAAQ;GACjC,6CAA0B,cAAc;GACxC,oBAAoB;GACpB,6CAA0B,cAAc;GACxC;GACA,UAAU,iBAAiB;GAC3B,UAAU;GACV,UAAU,cAAc,SAAY;GACpC;GACA,GAAG;GACH,GAAG;GACH,KAAK,UAAU,UAAU,IAAI;GAC7B,wCAAqB,MAAM,UAAU,YAAY,UAAU,SAAS;GACrE,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAKC;EACD"}

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

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

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

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react417 from "react";
+import * as react86 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react417.Context<{
+declare const AccordionDescendantsContext: react86.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: react417.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) => react417.RefCallback<HTMLButtonElement>;
+    } | undefined) => react86.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: react417.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) => react417.RefCallback<HTMLButtonElement>;
+      } | undefined) => react86.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react417.RefCallback<HTMLButtonElement>;
+    register: react86.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: react417.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) => react417.RefCallback<HTMLButtonElement>;
+    } | undefined) => react86.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: react417.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react86.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react417.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react86.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) => react417.RefCallback<HTMLButtonElement>;
+    } | undefined) => react86.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: react417.Dispatch<react417.SetStateAction<number>>;
-  setIndex: react417.Dispatch<react417.SetStateAction<number | number[]>>;
+  setFocusedIndex: react86.Dispatch<react86.SetStateAction<number>>;
+  setIndex: react86.Dispatch<react86.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react352 from "react";
+import * as react85 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react352.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react85.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

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

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

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react354 from "react";
+import * as react83 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react354.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react83.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

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react355 from "react";
+import * as react82 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react355.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react82.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 react353 from "react";
+import * as react108 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: react353.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react108.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

@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react341 from "react";
+import * as react81 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react341.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react81.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" | "field" | "root" | "indicator" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "field" | "root" | "indicator" | "valueText" | "empty">>, {
+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";