npm - @yamada-ui/react - Versions diffs - 2.2.1-dev-20260428092839 → 2.2.1-dev-20260428095646 - Mend

@yamada-ui/react 2.2.1-dev-20260428092839 → 2.2.1-dev-20260428095646

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 (216) hide show

package/dist/cjs/components/pin-input/use-pin-input.cjs CHANGED Viewed

@@ -3,6 +3,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_dom = require('../../utils/dom.cjs');
 const require_utils_index = require('../../utils/index.cjs');
+const require_props = require('../../core/components/props.cjs');
+require('../../core/index.cjs');
 const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
 const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
@@ -132,11 +134,7 @@ const usePinInput = (props = {}) => {
 		if (!firstValue) return;
 		requestAnimationFrame(() => firstValue.node.focus());
 	}, [autoFocus, descendants]);
-	const getRootProps = (0, react.useCallback)((props$1) => ({
-		role: "group",
-		...rest,
-		...props$1
-	}), [rest]);
+	const getRootProps = (0, react.useCallback)((props$1) => require_props.mergeProps({ role: "group" }, rest, props$1)(), [rest]);
 	return {
 		descendants,
 		items,

package/dist/cjs/components/pin-input/use-pin-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","values","value","nextValue","index","ev","getRootProps: PropGetter","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n role: \"group\",\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-pin-input.cjs","names":["createDescendants","useFieldProps","useControllableState","values","value","nextValue","index","ev","getRootProps: PropGetter","mergeProps","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps({ role: \"group\" }, rest, props)(),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":"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"}

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

@@ -6,6 +6,8 @@ const require_context = require('../../utils/context.cjs');
 const require_effect = require('../../utils/effect.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');
 let react = require("react");
 let motion_react = require("motion/react");
@@ -72,16 +74,14 @@ const useReorder = ({ ref, children, item, items = [], orientation = "vertical",
 		children: cloneChildren,
 		orientation,
 		values,
-		getRootProps: (0, react.useCallback)((props = {}) => ({
+		getRootProps: (0, react.useCallback)((props = {}) => require_props.mergeProps({
 			axis,
-			values,
-			...rest,
-			...props,
-			ref: require_ref.mergeRefs(props.ref, ref),
-			onMouseUp: (0, require_utils_index.utils_exports.handlerAll)(props.onMouseUp, rest.onMouseUp, onCompleteReorder),
-			onReorder: (0, require_utils_index.utils_exports.handlerAll)(props.onReorder, rest.onReorder, onReorder),
-			onTouchEnd: (0, require_utils_index.utils_exports.handlerAll)(props.onTouchEnd, rest.onTouchEnd, onCompleteReorder)
-		}), [
+			values
+		}, rest, props, { ref }, {
+			onMouseUp: onCompleteReorder,
+			onReorder,
+			onTouchEnd: onCompleteReorder
+		})(), [
 			rest,
 			ref,
 			onCompleteReorder,
@@ -119,14 +119,13 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 		getItemProps: (0, react.useCallback)((props = {}) => {
 			const children = props.children ?? rest.children ?? label;
 			return {
-				"data-has-trigger": (0, require_utils_index.utils_exports.dataAttr)(hasTrigger),
-				"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
-				dragControls,
-				dragListener: !hasTrigger,
-				value: value ?? getAlternativeValue({ children }),
-				...props,
-				...rest,
-				ref: require_ref.mergeRefs(props.ref, ref),
+				...require_props.mergeProps({
+					"data-has-trigger": (0, require_utils_index.utils_exports.dataAttr)(hasTrigger),
+					"data-selected": (0, require_utils_index.utils_exports.dataAttr)(drag),
+					dragControls,
+					dragListener: !hasTrigger,
+					value: value ?? getAlternativeValue({ children })
+				}, props, rest, { ref })(),
 				style: {
 					x,
 					y,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","values","mergeRefs","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" \| \"onReorder\" \| \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) => ({\n axis,\n values,\n ...rest,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n onTouchEnd: handlerAll(\n props.onTouchEnd,\n rest.onTouchEnd,\n onCompleteReorder,\n ),\n }),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n return {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n ...props,\n ...rest,\n ref: mergeRefs(props.ref, ref),\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","values","mergeProps","x","y","mergeRefs"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" \| \"onReorder\" \| \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) =>\n mergeProps(\n { axis, values },\n rest,\n props,\n { ref },\n {\n onMouseUp: onCompleteReorder,\n onReorder,\n onTouchEnd: onCompleteReorder,\n },\n )(),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n const merged = mergeProps(\n {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n },\n props,\n rest,\n { ref },\n )()\n\n return {\n ...merged,\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,uBAAuB,EAAE,UAAU,UAAgB,EAAE,KACzD,eAAe,YAAY,MAAM;AAEnC,MAAM,kBAAkB,0DACb,MAAM,mDAAY,MAAM,GAAG,KAAK,UAAU,MAAM,GAAG;AAa9D,MAAM,CAAC,gBAAgB,qBAAqBA,8BAA8B,EACxE,MAAM,kBACP,CAAC;AAQF,MAAM,CAAC,oBAAoB,yBACzBA,8BAAkC,EAChC,MAAM,sBACP,CAAC;AAiCJ,MAAa,cAA0B,EACrC,KACA,UACA,MACA,QAAQ,EAAE,EACV,cAAc,YACd,UACA,kBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,OAAO,gBAAgB,aAAa,MAAM;CAChD,MAAM,gBAAgBC,kCAAiB,SAAS;CAChD,MAAM,cAAc,CAAC,CAAC,cAAc;CACpC,MAAM,yCAA8B;EAClC,MAAMC,WAAS,cACX,cAAc,KACX,EAAE,YAAY,MAAM,SAAS,oBAAoB,MAAM,CACzD,GACD,MAAM,KAAK,UAAU,MAAM,SAAS,oBAAoB,MAAM,CAAC;EAEnE,MAAM,mBAAmBA,SAAO,QAC7B,OAAO,OAAO,SACb,KAAK,QAAQ,MAAM,KAAK,SAAS,UAAU,KAAK,YAAY,MAAM,CACrE;AAED,MAAI,iBAAiB,OACnB,SAAQ,KACN,mFAAmF,iBAAiB,KAClG,OACD,CAAC,IACH;AAEH,SAAO,MAAM,KAAK,IAAI,IAAIA,SAAO,CAAC;IACjC;EAAC;EAAa;EAAe;EAAM,CAAC;CACvC,MAAM,oCAAyB;AAC7B,SAAO,OAAO,YACZ,cAAc,KAAK,UAAU,CAC3B,eAAe,MAAM,MAAM,MAAM,IAC/B,eAAe,oBAAoB,MAAM,MAAM,CAAC,EAClD,MACD,CAAC,CACH;IACA,CAAC,cAAc,CAAC;CACnB,MAAM,mCAAwB;AAC5B,SAAO,OAAO,YACZ,MAAM,KAAK,UAAU,CACnB,eAAe,MAAM,MAAM,IACzB,eAAe,oBAAoB,MAAM,CAAC,EAC5C,MACD,CAAC,CACH;IACA,CAAC,MAAM,CAAC;CACX,MAAM,sCAAgC,cAAc;CACpD,MAAM,CAAC,QAAQ,iCAA2B,cAAc;CACxD,MAAM,+BAAyB,cAAc;CAC7C,MAAM,yCAEF,OAAO,KAAK,UAAU;AACpB,MAAI,YACF,QAAO,SAAS,eAAe,MAAM;OAChC;GACL,MAAM,QAAQ,QAAQ,eAAe,MAAM;AAE3C,UAAO,SAAS,+BACC,MAAM;IAAE,KAAK,eAAe,MAAM,MAAM;IAAE,GAAG;IAAO,CAAC,GAClE;;GAEN,EACJ;EAAC;EAAQ;EAAa;EAAU;EAAS;EAAK,CAC/C;CAED,MAAM,oCACH,cAAmB;AAClB,YAAU,UAAU;AAEpB,aAAW,UAAU;IAEvB,CAAC,SAAS,CACX;CAED,MAAM,iDAAsC;AAG1C,MAFc,KAAK,UAAU,WAAW,QAAQ,KAAK,KAAK,UAAU,OAAO,CAEhE;AAEX,aAAW,UAAU;AAErB,qBAAmB,OAAO;IACzB,CAAC,kBAAkB,OAAO,CAAC;AAE9B,sCAAsB;AAKpB,MAHE,KAAK,UAAU,cAAc,KAC7B,KAAK,UAAU,kBAAkB,QAAQ,CAEhC;AAEX,aAAW,UAAU;AACrB,oBAAkB,UAAU;AAE5B,YAAU,cAAc;IACvB,CAAC,cAAc,CAAC;AAsBnB,QAAO;EAAE,UAAU;EAAe;EAAa;EAAQ,sCAfpD,QAAQ,EAAE,KACTC,yBACE;GAAE;GAAM;GAAQ,EAChB,MACA,OACA,EAAE,KAAK,EACP;GACE,WAAW;GACX;GACA,YAAY;GACb,CACF,EAAE,EACL;GAAC;GAAM;GAAK;GAAmB;GAAW;GAAM;GAAO,CACxD;EAEoE;;AAgBvE,MAAa,kBAA8B,EACzC,KACA,OACA,OACA,GAAG,WACyB;CAC5B,MAAM,EAAE,gBAAgB,mBAAmB;CAC3C,MAAM,kDAAgC;CACtC,MAAM,CAAC,YAAY,qCAAmC,MAAM;CAC5D,MAAM,CAAC,MAAM,+BAA6B,MAAM;CAChD,MAAM,qCAAmB,EAAE;CAC3B,MAAM,qCAAmB,EAAE;CAE3B,MAAM,mCACH,SAA6B,cAAc,CAAC,CAAC,KAAK,EACnD,EAAE,CACH;AAED,4BAAgB;EACd,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,aAAc,SAAQC,QAAM,EAAE;IAClD;EACF,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,WAAY,SAAQC,QAAM,EAAE;IAChD;AAEF,eAAa;AACX,iBAAc;AACd,iBAAc;;IAEf;EAAC;EAAa;EAAG;EAAE,CAAC;AA6CvB,QAAO;EAAE,sCArCN,QAAQ,EAAE,KAAK;GACd,MAAM,WAAW,MAAM,YAAY,KAAK,YAAY;AAepD,UAAO;IACL,GAdaF,yBACb;KACE,oEAA6B,WAAW;KACxC,iEAA0B,KAAK;KAC/B;KACA,cAAc,CAAC;KACf,OAAO,SAAS,oBAAoB,EAAE,UAAU,CAAC;KAClD,EACD,OACA,MACA,EAAE,KAAK,CACR,EAAE;IAID,OAAO;KAAE;KAAG;KAAG,GAAG,MAAM;KAAO,GAAG,KAAK;KAAO;IAC9C;IACD;KAEH;GAAC;GAAK;GAAM;GAAc;GAAY;GAAO;GAAG;GAAG;GAAM;GAAM,CAChE;EAcsB,yCAXpB,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,KAAKG,sBAAU,UAAU,MAAM,IAAI;GACnC,iEAA0B,KAAK;GAC/B,iEAA0B,MAAM,gBAAgB,OAC9C,aAAa,MAAM,GAAG,CACvB;GACF,GACD;GAAC;GAAM;GAAc;GAAS,CAC/B;EAEuC"}

package/dist/esm/components/pin-input/use-pin-input.js CHANGED Viewed

@@ -2,6 +2,8 @@
 import { runKeyAction } from "../../utils/dom.js";
 import { utils_exports } from "../../utils/index.js";
+import { mergeProps } from "../../core/components/props.js";
+import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { createDescendants } from "../../hooks/use-descendants/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
@@ -131,11 +133,7 @@ const usePinInput = (props = {}) => {
 		if (!firstValue) return;
 		requestAnimationFrame(() => firstValue.node.focus());
 	}, [autoFocus, descendants]);
-	const getRootProps = useCallback((props$1) => ({
-		role: "group",
-		...rest,
-		...props$1
-	}), [rest]);
+	const getRootProps = useCallback((props$1) => mergeProps({ role: "group" }, rest, props$1)(), [rest]);
 	return {
 		descendants,
 		items,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-pin-input.js","names":["values","value","nextValue","index","ev","getRootProps: PropGetter","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n role: \"group\",\n ...rest,\n ...props,\n }),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-pin-input.js","names":["values","value","nextValue","index","ev","getRootProps: PropGetter","props"],"sources":["../../../../src/components/pin-input/use-pin-input.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { cx, filterUndefined, handlerAll, runKeyAction } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst {\n DescendantsContext: PinInputDescendantsContext,\n useDescendant: usePinInputDescendant,\n useDescendants: usePinInputDescendants,\n} = createDescendants<HTMLInputElement>()\n\nexport {\n PinInputDescendantsContext,\n usePinInputDescendant,\n usePinInputDescendants,\n}\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: UsePinInputProps[\"type\"]) => {\n const NUMERIC_REGEX = /^[0-9]+$/\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n return regex.test(value)\n}\n\nexport interface UsePinInputProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"mask\" \| \"onChange\" \| \"value\">,\n FieldProps {\n /*\n If `true`, the pin input receives focus on mount.\n \n @default false\n /\n autoFocus?: boolean\n /\n The initial value of the pin input.\n /\n defaultValue?: string\n /\n The top-level id string that will be applied to the input fields.\n * The index of the input will be appended to this top-level id.\n /\n id?: string\n /\n The number of inputs to display.\n \n @default 4\n /\n items?: number\n /\n If `true`, focus will move automatically to the next input once filled.\n \n @default true\n /\n manageFocus?: boolean\n /\n If `true`, the input's value will be masked just like `type=password`.\n /\n mask?: boolean\n /\n If `true`, the pin input component signals to its fields that they should.\n /\n otp?: boolean\n /\n The placeholder for the pin input.\n \n @default '◯'\n /\n placeholder?: string\n /\n The type of values the pin-input should allow.\n \n @default 'number'\n /\n type?: \"alphanumeric\" \| \"number\"\n /\n The value of the pin input.\n /\n value?: string\n /\n Function called on input change.\n /\n onChange?: (value: string) => void\n /\n Function called when all inputs have valid values.\n */\n onComplete?: (value: string) => void\n}\n\nexport const usePinInput = (props: UsePinInputProps = {}) => {\n const uuid = useId()\n const {\n context: { labelId } = {},\n props: {\n id = uuid,\n type = \"number\",\n autoFocus,\n defaultValue,\n disabled,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"◯\",\n readOnly,\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const descendants = usePinInputDescendants()\n const [moveFocus, setMoveFocus] = useState<boolean>(true)\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n const [values, setValues] = useControllableState<string[]>({\n defaultValue: toArray(defaultValue) \|\| [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(values.join(\"\")),\n })\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus \|\| !manageFocus) return\n\n const next = descendants.nextValue(index, false)\n\n if (!next) return\n\n requestAnimationFrame(() => next.node.focus())\n },\n [descendants, moveFocus, manageFocus],\n )\n\n const focusInputField = useCallback(\n (direction: \"next\" \| \"prev\", index: number) => {\n const input =\n direction === \"next\"\n ? descendants.nextValue(index, false)\n : descendants.prevValue(index, false)\n\n if (!input) return\n\n const valueLength = input.node.value.length\n\n requestAnimationFrame(() => {\n input.node.focus()\n input.node.setSelectionRange(0, valueLength)\n })\n },\n [descendants],\n )\n\n const setValue = useCallback(\n (value: string, index: number, focus = true) => {\n let nextValues = [...values]\n\n nextValues[index] = value\n\n setValues(nextValues)\n\n nextValues = nextValues.filter(Boolean)\n\n const complete = value !== \"\" && nextValues.length === descendants.count()\n\n if (complete) {\n onComplete?.(nextValues.join(\"\"))\n descendants.value(index)?.node.blur()\n } else if (focus) {\n focusNext(index)\n }\n },\n [values, setValues, descendants, onComplete, focusNext],\n )\n\n const getNextValue = useCallback(\n (value: string \| undefined, eventValue: string) => {\n let nextValue = eventValue\n\n if (!value?.length) return nextValue\n\n if (value.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ target }: ChangeEvent<HTMLInputElement>) => {\n const eventValue = target.value\n const currentValue = values[index]\n const nextValue = getNextValue(currentValue, eventValue)\n\n if (nextValue === \"\") {\n setValue(\"\", index)\n\n return\n }\n\n if (eventValue.length > 2) {\n if (!validate(eventValue, type)) return\n\n const nextValue = eventValue\n .split(\"\")\n .filter((_, index) => index < descendants.count())\n\n setValues(nextValue)\n\n if (nextValue.length === descendants.count()) {\n onComplete?.(nextValue.join(\"\"))\n descendants.value(index)?.node.blur()\n }\n } else {\n if (validate(nextValue, type)) setValue(nextValue, index)\n\n setMoveFocus(true)\n }\n },\n [descendants, getNextValue, onComplete, setValue, setValues, type, values],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLInputElement>) => {\n if (!manageFocus) return\n\n runKeyAction(\n ev,\n {\n ArrowLeft: (ev) => {\n ev.preventDefault()\n focusInputField(\"prev\", index)\n },\n ArrowRight: (ev) => {\n ev.preventDefault()\n focusInputField(\"next\", index)\n },\n Backspace: (ev) => {\n if ((ev.target as HTMLInputElement).value === \"\") {\n const prevInput = descendants.prevValue(index, false)\n\n if (!prevInput) return\n\n setValue(\"\", index - 1, false)\n prevInput.node.focus()\n setMoveFocus(true)\n } else {\n setMoveFocus(false)\n }\n },\n },\n { preventDefault: false },\n )\n },\n [descendants, focusInputField, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n useEffect(() => {\n if (!autoFocus) return\n\n const firstValue = descendants.firstValue()\n\n if (!firstValue) return\n\n requestAnimationFrame(() => firstValue.node.focus())\n }, [autoFocus, descendants])\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps({ role: \"group\" }, rest, props)(),\n [rest],\n )\n\n const getInputProps: RequiredPropGetter<\"input\", { index: number }> =\n useCallback(\n ({ \"aria-labelledby\": ariaLabelledby, index, ...props }) => ({\n ...ariaProps,\n ...dataProps,\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n \"aria-labelledby\": cx(ariaLabelledby, labelId),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n disabled,\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n readOnly,\n value: values[index] \|\| \"\",\n ...filterUndefined(props),\n id: `${id}${index ? `-${index}` : \"\"}`,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n ariaProps,\n dataProps,\n eventProps,\n mask,\n type,\n labelId,\n otp,\n disabled,\n focusedIndex,\n readOnly,\n placeholder,\n values,\n id,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n ],\n )\n\n return {\n descendants,\n items,\n getInputProps,\n getRootProps,\n }\n}\n\nexport type UsePinInputReturn = ReturnType<typeof usePinInput>\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,EACJ,oBAAoB,4BACpB,eAAe,uBACf,gBAAgB,2BACd,mBAAqC;AAQzC,MAAM,WAAW,UAAmB,OAAO,MAAM,GAAG;AAEpD,MAAM,YAAY,OAAe,SAAmC;AAMlE,SAFc,SAAS,iBAFK,oBADN,YAKT,KAAK,MAAM;;AAoE1B,MAAa,eAAe,QAA0B,EAAE,KAAK;CAC3D,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,SAAS,EAAE,YAAY,EAAE,EACzB,OAAO,EACL,KAAK,MACL,OAAO,UACP,WACA,cACA,UACA,QAAQ,GACR,cAAc,MACd,MACA,MAAM,OACN,cAAc,KACd,UACA,OACA,UAAU,cACV,YACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,wBAAwB;CAC5C,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAiB,GAAG;CAC5D,MAAM,CAAC,QAAQ,aAAa,qBAA+B;EACzD,cAAc,QAAQ,aAAa,IAAI,EAAE;EACzC,OAAO,QAAQ,MAAM;EACrB,WAAW,aAAW,eAAeA,SAAO,KAAK,GAAG,CAAC;EACtD,CAAC;CAEF,MAAM,YAAY,aACf,UAAkB;AACjB,MAAI,CAAC,aAAa,CAAC,YAAa;EAEhC,MAAM,OAAO,YAAY,UAAU,OAAO,MAAM;AAEhD,MAAI,CAAC,KAAM;AAEX,8BAA4B,KAAK,KAAK,OAAO,CAAC;IAEhD;EAAC;EAAa;EAAW;EAAY,CACtC;CAED,MAAM,kBAAkB,aACrB,WAA4B,UAAkB;EAC7C,MAAM,QACJ,cAAc,SACV,YAAY,UAAU,OAAO,MAAM,GACnC,YAAY,UAAU,OAAO,MAAM;AAEzC,MAAI,CAAC,MAAO;EAEZ,MAAM,cAAc,MAAM,KAAK,MAAM;AAErC,8BAA4B;AAC1B,SAAM,KAAK,OAAO;AAClB,SAAM,KAAK,kBAAkB,GAAG,YAAY;IAC5C;IAEJ,CAAC,YAAY,CACd;CAED,MAAM,WAAW,aACd,SAAe,OAAe,QAAQ,SAAS;EAC9C,IAAI,aAAa,CAAC,GAAG,OAAO;AAE5B,aAAW,SAASC;AAEpB,YAAU,WAAW;AAErB,eAAa,WAAW,OAAO,QAAQ;AAIvC,MAFiBA,YAAU,MAAM,WAAW,WAAW,YAAY,OAAO,EAE5D;AACZ,gBAAa,WAAW,KAAK,GAAG,CAAC;AACjC,eAAY,MAAM,MAAM,EAAE,KAAK,MAAM;aAC5B,MACT,WAAU,MAAM;IAGpB;EAAC;EAAQ;EAAW;EAAa;EAAY;EAAU,CACxD;CAED,MAAM,eAAe,aAClB,SAA2B,eAAuB;EACjD,IAAI,YAAY;AAEhB,MAAI,CAACA,SAAO,OAAQ,QAAO;AAE3B,MAAIA,QAAM,WAAW,WAAW,OAAO,EAAE,CAAC,CACxC,aAAY,WAAW,OAAO,EAAE;WACvBA,QAAM,WAAW,WAAW,OAAO,EAAE,CAAC,CAC/C,aAAY,WAAW,OAAO,EAAE;AAGlC,SAAO;IAET,EAAE,CACH;CAED,MAAM,WAAW,aACd,WACE,EAAE,aAA4C;EAC7C,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe,OAAO;EAC5B,MAAM,YAAY,aAAa,cAAc,WAAW;AAExD,MAAI,cAAc,IAAI;AACpB,YAAS,IAAI,MAAM;AAEnB;;AAGF,MAAI,WAAW,SAAS,GAAG;AACzB,OAAI,CAAC,SAAS,YAAY,KAAK,CAAE;GAEjC,MAAMC,cAAY,WACf,MAAM,GAAG,CACT,QAAQ,GAAG,YAAUC,UAAQ,YAAY,OAAO,CAAC;AAEpD,aAAUD,YAAU;AAEpB,OAAIA,YAAU,WAAW,YAAY,OAAO,EAAE;AAC5C,iBAAaA,YAAU,KAAK,GAAG,CAAC;AAChC,gBAAY,MAAM,MAAM,EAAE,KAAK,MAAM;;SAElC;AACL,OAAI,SAAS,WAAW,KAAK,CAAE,UAAS,WAAW,MAAM;AAEzD,gBAAa,KAAK;;IAGxB;EAAC;EAAa;EAAc;EAAY;EAAU;EAAW;EAAM;EAAO,CAC3E;CAED,MAAM,YAAY,aACf,WAAmB,OAAwC;AAC1D,MAAI,CAAC,YAAa;AAElB,eACE,IACA;GACE,YAAY,SAAO;AACjB,SAAG,gBAAgB;AACnB,oBAAgB,QAAQ,MAAM;;GAEhC,aAAa,SAAO;AAClB,SAAG,gBAAgB;AACnB,oBAAgB,QAAQ,MAAM;;GAEhC,YAAY,SAAO;AACjB,QAAKE,KAAG,OAA4B,UAAU,IAAI;KAChD,MAAM,YAAY,YAAY,UAAU,OAAO,MAAM;AAErD,SAAI,CAAC,UAAW;AAEhB,cAAS,IAAI,QAAQ,GAAG,MAAM;AAC9B,eAAU,KAAK,OAAO;AACtB,kBAAa,KAAK;UAElB,cAAa,MAAM;;GAGxB,EACD,EAAE,gBAAgB,OAAO,CAC1B;IAEH;EAAC;EAAa;EAAiB;EAAa;EAAS,CACtD;CAED,MAAM,UAAU,aACb,gBAAwB,gBAAgB,MAAM,EAC/C,EAAE,CACH;CAED,MAAM,SAAS,kBAAkB,gBAAgB,GAAG,EAAE,EAAE,CAAC;AAEzD,iBAAgB;AACd,MAAI,CAAC,UAAW;EAEhB,MAAM,aAAa,YAAY,YAAY;AAE3C,MAAI,CAAC,WAAY;AAEjB,8BAA4B,WAAW,KAAK,OAAO,CAAC;IACnD,CAAC,WAAW,YAAY,CAAC;CAE5B,MAAMC,eAA2B,aAC9B,YAAU,WAAW,EAAE,MAAM,SAAS,EAAE,MAAMC,QAAM,EAAE,EACvD,CAAC,KAAK,CACP;AA8CD,QAAO;EACL;EACA;EACA,eA9CA,aACG,EAAE,mBAAmB,gBAAgB,OAAO,GAAGA,eAAa;GAC3D,GAAG;GACH,GAAG;GACH,MAAM,OAAO,aAAa,SAAS,WAAW,QAAQ;GACtD,yCAAsB,gBAAgB,QAAQ;GAC9C,cAAc,MAAM,kBAAkB;GACtC;GACA,WAAW,SAAS,WAAW,YAAY;GAC3C,aACE,iBAAiB,SAAS,CAAC,YAAY,CAACA,QAAM,WAC1C,KACA;GACN;GACA,OAAO,OAAO,UAAU;GACxB,sCAAmBA,QAAM;GACzB,IAAI,GAAG,KAAK,QAAQ,IAAI,UAAU;GAClC,sCAAmB,WAAW,QAAQA,QAAM,QAAQ,OAAO;GAC3D,wCAAqBA,QAAM,UAAU,SAAS,MAAM,CAAC;GACrD,uCAAoB,WAAW,SAASA,QAAM,SAAS,QAAQ,MAAM,CAAC;GACtE,yCAAsBA,QAAM,WAAW,UAAU,MAAM,CAAC;GACzD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAMD;EACD"}

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

@@ -5,6 +5,8 @@ import { createContext as createContext$1 } from "../../utils/context.js";
 import { useUpdateEffect } from "../../utils/effect.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 { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDragControls, useMotionValue } from "motion/react";
@@ -71,16 +73,14 @@ const useReorder = ({ ref, children, item, items = [], orientation = "vertical",
 		children: cloneChildren,
 		orientation,
 		values,
-		getRootProps: useCallback((props = {}) => ({
+		getRootProps: useCallback((props = {}) => mergeProps({
 			axis,
-			values,
-			...rest,
-			...props,
-			ref: mergeRefs(props.ref, ref),
-			onMouseUp: (0, utils_exports.handlerAll)(props.onMouseUp, rest.onMouseUp, onCompleteReorder),
-			onReorder: (0, utils_exports.handlerAll)(props.onReorder, rest.onReorder, onReorder),
-			onTouchEnd: (0, utils_exports.handlerAll)(props.onTouchEnd, rest.onTouchEnd, onCompleteReorder)
-		}), [
+			values
+		}, rest, props, { ref }, {
+			onMouseUp: onCompleteReorder,
+			onReorder,
+			onTouchEnd: onCompleteReorder
+		})(), [
 			rest,
 			ref,
 			onCompleteReorder,
@@ -118,14 +118,13 @@ const useReorderItem = ({ ref, label, value, ...rest }) => {
 		getItemProps: useCallback((props = {}) => {
 			const children = props.children ?? rest.children ?? label;
 			return {
-				"data-has-trigger": (0, utils_exports.dataAttr)(hasTrigger),
-				"data-selected": (0, utils_exports.dataAttr)(drag),
-				dragControls,
-				dragListener: !hasTrigger,
-				value: value ?? getAlternativeValue({ children }),
-				...props,
-				...rest,
-				ref: mergeRefs(props.ref, ref),
+				...mergeProps({
+					"data-has-trigger": (0, utils_exports.dataAttr)(hasTrigger),
+					"data-selected": (0, utils_exports.dataAttr)(drag),
+					dragControls,
+					dragListener: !hasTrigger,
+					value: value ?? getAlternativeValue({ children })
+				}, props, rest, { ref })(),
 				style: {
 					x,
 					y,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-reorder.js","names":["createContext","values","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" \| \"onReorder\" \| \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) => ({\n axis,\n values,\n ...rest,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n onTouchEnd: handlerAll(\n props.onTouchEnd,\n rest.onTouchEnd,\n onCompleteReorder,\n ),\n }),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n return {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n ...props,\n ...rest,\n ref: mergeRefs(props.ref, ref),\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-reorder.js","names":["createContext","values","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" \| \"onReorder\" \| \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) =>\n mergeProps(\n { axis, values },\n rest,\n props,\n { ref },\n {\n onMouseUp: onCompleteReorder,\n onReorder,\n onTouchEnd: onCompleteReorder,\n },\n )(),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n const merged = mergeProps(\n {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n },\n props,\n rest,\n { ref },\n )()\n\n return {\n ...merged,\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":"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"}

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

@@ -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 react1224 from "react";
+import * as react1184 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: react1224.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1184.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 CHANGED Viewed

@@ -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" | "icon" | "panel" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "icon" | "panel" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "icon" | "panel" | "root" | "item">>, {
   panel: {
     button: {
       rounded: "l2";

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

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

@@ -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 react136 from "react";
+import * as react1217 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: react136.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react1217.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

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

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

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

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

package/dist/types/components/alert/alert.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "icon" | "loading" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "icon" | "loading" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "icon" | "loading" | "description" | "root">>, {
   island: {
     description: {
       color: "fg.muted";

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

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