npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260429015927 → 2.2.1-dev-20260429022802 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs CHANGED Viewed

@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.cjs');
 const require_ref = require('../../utils/ref.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
 require('../../providers/i18n-provider/index.cjs');
@@ -112,21 +114,21 @@ const useSaturationSlider = (props = {}) => {
 		step,
 		v
 	]);
-	const getRootProps = (0, react.useCallback)((props$1 = {}) => ({
-		...dataProps,
-		...rest,
-		...props$1,
-		style: {
-			...rest.style,
-			...props$1.style,
-			"--x": `${Math.abs(s * 100)}%`,
-			"--y": `${Math.abs(100 - v * 100)}%`,
-			backgroundColor: `hsl(${h}, 100%, 50%)`,
-			backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
-		},
-		onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
-		onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
-	}), [
+	const getRootProps = (0, react.useCallback)((props$1 = {}) => {
+		return {
+			...require_props.mergeProps(dataProps, rest, props$1)(),
+			style: {
+				...rest.style,
+				...props$1.style,
+				"--x": `${Math.abs(s * 100)}%`,
+				"--y": `${Math.abs(100 - v * 100)}%`,
+				backgroundColor: `hsl(${h}, 100%, 50%)`,
+				backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
+			},
+			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
+			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
+		};
+	}, [
 		dataProps,
 		eventProps,
 		h,

package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","h","s","v","getRootProps: PropGetter","props","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","mergeRefs","getTrackProps: PropGetter"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: [number, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...rest,\n ...props,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }),\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","h","s","v","getRootProps: PropGetter","mergeProps","props","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","mergeRefs","getTrackProps: PropGetter"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: [number, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const merged = mergeProps(dataProps, rest, props)()\n\n return {\n ...merged,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

package/dist/esm/components/saturation-slider/use-saturation-slider.js CHANGED Viewed

@@ -3,6 +3,8 @@
 import { runKeyAction, visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import "../../providers/i18n-provider/index.js";
@@ -111,21 +113,21 @@ const useSaturationSlider = (props = {}) => {
 		step,
 		v
 	]);
-	const getRootProps = useCallback((props$1 = {}) => ({
-		...dataProps,
-		...rest,
-		...props$1,
-		style: {
-			...rest.style,
-			...props$1.style,
-			"--x": `${Math.abs(s * 100)}%`,
-			"--y": `${Math.abs(100 - v * 100)}%`,
-			backgroundColor: `hsl(${h}, 100%, 50%)`,
-			backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
-		},
-		onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
-		onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
-	}), [
+	const getRootProps = useCallback((props$1 = {}) => {
+		return {
+			...mergeProps(dataProps, rest, props$1)(),
+			style: {
+				...rest.style,
+				...props$1.style,
+				"--x": `${Math.abs(s * 100)}%`,
+				"--y": `${Math.abs(100 - v * 100)}%`,
+				backgroundColor: `hsl(${h}, 100%, 50%)`,
+				backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
+			},
+			onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
+			onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
+		};
+	}, [
 		dataProps,
 		eventProps,
 		h,

package/dist/esm/components/saturation-slider/use-saturation-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-saturation-slider.js","names":["h","s","v","getRootProps: PropGetter","props","getInputProps: PropGetter<\"input\">","getTrackProps: PropGetter"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: [number, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...rest,\n ...props,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }),\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-saturation-slider.js","names":["h","s","v","getRootProps: PropGetter","props","getInputProps: PropGetter<\"input\">","getTrackProps: PropGetter"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: [number, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const merged = mergeProps(dataProps, rest, props)()\n\n return {\n ...merged,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

@@ -3,13 +3,11 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { WithTransitionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { CollapseProps } from "../collapse/collapse.js";
-import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react147 from "react";
+import * as react1033 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react147.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1033.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 CHANGED Viewed

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