@yamada-ui/react 2.2.1-dev-20260429022802 → 2.2.1-dev-20260429025711

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

@@ -6,6 +6,7 @@ const require_effect = require('../../utils/effect.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_environment_provider = require('../../core/system/environment-provider.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');
@@ -32,11 +33,7 @@ const useSteps = ({ count = 0, defaultIndex = 0, index: indexProp, orientation =
 	const onNext = (0, react.useCallback)(() => {
 		setIndex((index$1) => Math.min(count, index$1 + 1));
 	}, [count, setIndex]);
-	const getRootProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
-		...rest,
-		...props,
-		ref: require_ref.mergeRefs(ref, rest.ref)
-	}), [rest]);
+	const getRootProps = (0, react.useCallback)((props = {}) => require_props.mergeProps(rest, props)(), [rest]);
 	const getListProps = (0, react.useCallback)((props) => {
 		return {
 			"data-orientation": orientation,
@@ -104,17 +101,12 @@ const useStepsItem = ({ "aria-labelledby": ariaLabelledbyProp, index, ...rest })
 		id,
 		index
 	]);
-	const getRootProps = (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		return {
-			"aria-current": current ? "step" : void 0,
-			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby),
-			"data-orientation": orientation,
-			[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true),
-			...rest,
-			...props,
-			ref: require_ref.mergeRefs(ref, register)
-		};
-	}, [
+	const getRootProps = (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby, ...props } = {}) => require_props.mergeProps({
+		"aria-current": current ? "step" : void 0,
+		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby),
+		"data-orientation": orientation,
+		[statusDataAttr]: (0, require_utils_index.utils_exports.dataAttr)(true)
+	}, rest, props, { ref: require_ref.mergeRefs(ref, register) })(), [
 		ariaLabelledbyProp,
 		current,
 		orientation,

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

@@ -1 +1 @@
-{"version":3,"file":"use-steps.cjs","names":["createDescendants","createContext","useControllableState","indexProp","index","getRootProps: PropGetter","mergeRefs","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","useEnvironment","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => {\n      return {\n        \"aria-current\": current ? \"step\" : undefined,\n        \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n        \"data-orientation\": orientation,\n        [statusDataAttr]: dataAttr(true),\n        ...rest,\n        ...props,\n        ref: mergeRefs(ref, register),\n      }\n    },\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-steps.cjs","names":["createDescendants","createContext","useControllableState","indexProp","index","getRootProps: PropGetter","mergeProps","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","useEnvironment","getRootProps: PropGetter<\"li\">","mergeRefs","getTitleProps: PropGetter<\"h3\">"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}

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

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
@@ -31,51 +33,43 @@ const useSwitch = (props = {}) => {
 	const onKeyDown = (0, react.useCallback)((ev) => {
 		if (interactive && checkOnEnter && ev.key === "Enter") inputRef.current?.click();
 	}, [interactive, checkOnEnter]);
-	const getRootProps = (0, react.useCallback)((props$1 = {}) => ({
-		...dataProps,
+	const getRootProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, {
 		htmlFor: id,
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...rest,
-		...props$1
-	}), [
+		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked)
+	}, rest, props$1)(), [
 		checked,
 		rest,
 		id,
 		dataProps
 	]);
-	const getTrackProps = (0, react.useCallback)((props$1 = {}) => ({
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
-	const getThumbProps = (0, react.useCallback)((props$1 = {}) => ({
-		"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
+	const getTrackProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
+	const getThumbProps = (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
 	return {
 		checked,
-		getInputProps: (0, react.useCallback)((props$1 = {}) => ({
-			...ariaProps,
-			...dataProps,
-			id,
-			type: "checkbox",
-			name,
-			style: require_dom.visuallyHiddenAttributes.style,
-			checked,
-			disabled,
-			readOnly,
-			required,
-			role: "switch",
-			tabIndex: interactive ? 0 : -1,
-			value,
-			...props$1,
-			ref: require_ref.mergeRefs(inputRef, props$1.ref, ref),
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
-			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
-		}), [
+		getInputProps: (0, react.useCallback)((props$1 = {}) => {
+			return {
+				...require_props.mergeProps(ariaProps, dataProps, {
+					id,
+					type: "checkbox",
+					name,
+					style: require_dom.visuallyHiddenAttributes.style,
+					checked,
+					disabled,
+					readOnly,
+					required,
+					role: "switch",
+					tabIndex: interactive ? 0 : -1,
+					value
+				}, {
+					onBlur: eventProps.onBlur,
+					onFocus: eventProps.onFocus
+				}, props$1, {
+					onChange,
+					onKeyDown
+				})({ mergeRef: false }),
+				ref: require_ref.mergeRefs(inputRef, props$1.ref, ref)
+			};
+		}, [
 			ariaProps,
 			dataProps,
 			id,
@@ -91,11 +85,7 @@ const useSwitch = (props = {}) => {
 			onChange,
 			onKeyDown
 		]),
-		getLabelProps: (0, react.useCallback)((props$1 = {}) => ({
-			...dataProps,
-			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
-			...props$1
-		}), [dataProps, checked]),
+		getLabelProps: (0, react.useCallback)((props$1 = {}) => require_props.mergeProps(dataProps, { "data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked) }, props$1)(), [dataProps, checked]),
 		getRootProps,
 		getThumbProps,
 		getTrackProps

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

@@ -1 +1 @@
-{"version":3,"file":"use-switch.cjs","names":["useFieldProps","useControllableState","getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      htmlFor: id,\n      \"data-checked\": dataAttr(checked),\n      ...rest,\n      ...props,\n    }),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...ariaProps,\n      ...dataProps,\n      id,\n      type: \"checkbox\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      role: \"switch\",\n      tabIndex: interactive ? 0 : -1,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;AAyEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,oCACH,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMC,uCACH,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,SAAS;EACT,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGC;EACJ,GACD;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGD;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,wCACH,UAAQ,EAAE,MAAM;EACf,gEAAyB,QAAQ;EACjC,GAAG;EACH,GAAGF;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;AAmDD,QAAO;EACL;EACA,uCAlDC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC;GACA;GACA;GACA;GACA,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B;GACA,GAAGH;GACH,KAAKI,sBAAU,UAAUJ,QAAM,KAAK,IAAI;GACxC,0DAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoB,WAAW,SAASA,QAAM,QAAQ;GACtD,6DAAsBA,QAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,uCAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}
+{"version":3,"file":"use-switch.cjs","names":["useFieldProps","useControllableState","getRootProps: PropGetter<\"label\">","mergeProps","props","getTrackProps: PropGetter","getThumbProps: PropGetter","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACEA,sCAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,6BAAoC,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAcC,gEAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,oCACH,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMC,uCACH,UAAQ,EAAE,KACTC,yBACE,WACA;EAAE,SAAS;EAAI,gEAAyB,QAAQ;EAAE,EAClD,MACAC,QACD,EAAE,EACL;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,wCACH,UAAQ,EAAE,KACTF,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,wCACH,UAAQ,EAAE,KACTH,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;AAsDD,QAAO;EACL;EACA,uCArDC,UAAQ,EAAE,KAAK;AAsBd,UAAO;IACL,GAtBkBD,yBAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAOI,qCAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;KACD,EACD;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;KAAS,EAC1DH,SACA;KAAE;KAAU;KAAW,CACxB,CAAC,EAAE,UAAU,OAAO,CAAC;IAIpB,KAAKI,sBAAU,UAAUJ,QAAM,KAAK,IAAI;IACzC;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAWC,uCARC,UAAQ,EAAE,KACTD,yBAAW,WAAW,EAAE,gEAAyB,QAAQ,EAAE,EAAEC,QAAM,EAAE,EACvE,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}

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

@@ -5,6 +5,7 @@ import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.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";
@@ -31,11 +32,7 @@ const useSteps = ({ count = 0, defaultIndex = 0, index: indexProp, orientation =
 	const onNext = useCallback(() => {
 		setIndex((index$1) => Math.min(count, index$1 + 1));
 	}, [count, setIndex]);
-	const getRootProps = useCallback(({ ref, ...props } = {}) => ({
-		...rest,
-		...props,
-		ref: mergeRefs(ref, rest.ref)
-	}), [rest]);
+	const getRootProps = useCallback((props = {}) => mergeProps(rest, props)(), [rest]);
 	const getListProps = useCallback((props) => {
 		return {
 			"data-orientation": orientation,
@@ -103,17 +100,12 @@ const useStepsItem = ({ "aria-labelledby": ariaLabelledbyProp, index, ...rest })
 		id,
 		index
 	]);
-	const getRootProps = useCallback(({ ref, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
-		return {
-			"aria-current": current ? "step" : void 0,
-			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby),
-			"data-orientation": orientation,
-			[statusDataAttr]: (0, utils_exports.dataAttr)(true),
-			...rest,
-			...props,
-			ref: mergeRefs(ref, register)
-		};
-	}, [
+	const getRootProps = useCallback(({ ref, "aria-labelledby": ariaLabelledby, ...props } = {}) => mergeProps({
+		"aria-current": current ? "step" : void 0,
+		"aria-labelledby": (0, utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby),
+		"data-orientation": orientation,
+		[statusDataAttr]: (0, utils_exports.dataAttr)(true)
+	}, rest, props, { ref: mergeRefs(ref, register) })(), [
 		ariaLabelledbyProp,
 		current,
 		orientation,

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

@@ -1 +1 @@
-{"version":3,"file":"use-steps.js","names":["createContext","indexProp","index","getRootProps: PropGetter","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...rest,\n      ...props,\n      ref: mergeRefs(ref, rest.ref),\n    }),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => {\n      return {\n        \"aria-current\": current ? \"step\" : undefined,\n        \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n        \"data-orientation\": orientation,\n        [statusDataAttr]: dataAttr(true),\n        ...rest,\n        ...props,\n        ref: mergeRefs(ref, register),\n      }\n    },\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-steps.js","names":["createContext","indexProp","index","getRootProps: PropGetter","getListProps: PropGetter<\"ol\">","getContentProps: PropGetter<\"div\", { index?: number }>","getPrevTriggerProps: PropGetter<\"button\">","getRootProps: PropGetter<\"li\">","getTitleProps: PropGetter<\"h3\">"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}

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

@@ -3,6 +3,8 @@
 import { visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
 import "../field/index.js";
@@ -30,51 +32,43 @@ const useSwitch = (props = {}) => {
 	const onKeyDown = useCallback((ev) => {
 		if (interactive && checkOnEnter && ev.key === "Enter") inputRef.current?.click();
 	}, [interactive, checkOnEnter]);
-	const getRootProps = useCallback((props$1 = {}) => ({
-		...dataProps,
+	const getRootProps = useCallback((props$1 = {}) => mergeProps(dataProps, {
 		htmlFor: id,
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...rest,
-		...props$1
-	}), [
+		"data-checked": (0, utils_exports.dataAttr)(checked)
+	}, rest, props$1)(), [
 		checked,
 		rest,
 		id,
 		dataProps
 	]);
-	const getTrackProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
-	const getThumbProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
-		...dataProps,
-		...props$1
-	}), [checked, dataProps]);
+	const getTrackProps = useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
+	const getThumbProps = useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [checked, dataProps]);
 	return {
 		checked,
-		getInputProps: useCallback((props$1 = {}) => ({
-			...ariaProps,
-			...dataProps,
-			id,
-			type: "checkbox",
-			name,
-			style: visuallyHiddenAttributes.style,
-			checked,
-			disabled,
-			readOnly,
-			required,
-			role: "switch",
-			tabIndex: interactive ? 0 : -1,
-			value,
-			...props$1,
-			ref: mergeRefs(inputRef, props$1.ref, ref),
-			onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-			onChange: (0, utils_exports.handlerAll)(props$1.onChange, onChange),
-			onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
-			onKeyDown: (0, utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
-		}), [
+		getInputProps: useCallback((props$1 = {}) => {
+			return {
+				...mergeProps(ariaProps, dataProps, {
+					id,
+					type: "checkbox",
+					name,
+					style: visuallyHiddenAttributes.style,
+					checked,
+					disabled,
+					readOnly,
+					required,
+					role: "switch",
+					tabIndex: interactive ? 0 : -1,
+					value
+				}, {
+					onBlur: eventProps.onBlur,
+					onFocus: eventProps.onFocus
+				}, props$1, {
+					onChange,
+					onKeyDown
+				})({ mergeRef: false }),
+				ref: mergeRefs(inputRef, props$1.ref, ref)
+			};
+		}, [
 			ariaProps,
 			dataProps,
 			id,
@@ -90,11 +84,7 @@ const useSwitch = (props = {}) => {
 			onChange,
 			onKeyDown
 		]),
-		getLabelProps: useCallback((props$1 = {}) => ({
-			...dataProps,
-			"data-checked": (0, utils_exports.dataAttr)(checked),
-			...props$1
-		}), [dataProps, checked]),
+		getLabelProps: useCallback((props$1 = {}) => mergeProps(dataProps, { "data-checked": (0, utils_exports.dataAttr)(checked) }, props$1)(), [dataProps, checked]),
 		getRootProps,
 		getThumbProps,
 		getTrackProps

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

@@ -1 +1 @@
-{"version":3,"file":"use-switch.js","names":["getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      htmlFor: id,\n      \"data-checked\": dataAttr(checked),\n      ...rest,\n      ...props,\n    }),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-checked\": dataAttr(checked),\n      ...dataProps,\n      ...props,\n    }),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...ariaProps,\n      ...dataProps,\n      id,\n      type: \"checkbox\",\n      name,\n      style: visuallyHiddenAttributes.style,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      role: \"switch\",\n      tabIndex: interactive ? 0 : -1,\n      value,\n      ...props,\n      ref: mergeRefs(inputRef, props.ref, ref),\n      onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"data-checked\": dataAttr(checked),\n      ...props,\n    }),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;AAyEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,YAAY,aACf,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,MAAM;EACf,GAAG;EACH,SAAS;EACT,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGC;EACJ,GACD;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,gBAA4B,aAC/B,UAAQ,EAAE,MAAM;EACf,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGD;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,gBAA4B,aAC/B,UAAQ,EAAE,MAAM;EACf,4CAAyB,QAAQ;EACjC,GAAG;EACH,GAAGF;EACJ,GACD,CAAC,SAAS,UAAU,CACrB;AAmDD,QAAO;EACL;EACA,eAnDyC,aACxC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC;GACA;GACA;GACA;GACA,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B;GACA,GAAGA;GACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;GACxC,sCAAmB,WAAW,QAAQA,QAAM,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoB,WAAW,SAASA,QAAM,QAAQ;GACtD,yCAAsBA,QAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAcC,eAZwC,aACvC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,4CAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}
+{"version":3,"file":"use-switch.js","names":["getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;;AAqEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,YAAY,aACf,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KACT,WACE,WACA;EAAE,SAAS;EAAI,4CAAyB,QAAQ;EAAE,EAClD,MACAC,QACD,EAAE,EACL;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAMC,gBAA4B,aAC/B,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAED,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAED,MAAME,gBAA4B,aAC/B,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAEF,QAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;AAsDD,QAAO;EACL;EACA,eAtDyC,aACxC,UAAQ,EAAE,KAAK;AAsBd,UAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;KACD,EACD;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;KAAS,EAC1DA,SACA;KAAE;KAAU;KAAW,CACxB,CAAC,EAAE,UAAU,OAAO,CAAC;IAIpB,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;IACzC;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAWC,eATwC,aACvC,UAAQ,EAAE,KACT,WAAW,WAAW,EAAE,4CAAyB,QAAQ,EAAE,EAAEA,QAAM,EAAE,EACvE,CAAC,WAAW,QAAQ,CACrB;EAMC;EACA;EACA;EACD"}

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

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

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

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

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

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

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

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