@yamada-ui/react/dist/esm/components/pin-input/pin-input.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { getValidChildren } from "../../utils/children.js";
import { mergeRefs } from "../../utils/ref.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useFieldProps } from "../field/use-field-props.js";
import { Input } from "../input/input.js";
import { Group } from "../group/group.js";
import { pinInputStyle } from "./pin-input.style.js";
import { PinInputDescendantsContext, usePinInput, usePinInputDescendant } from "./use-pin-input.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/pin-input/pin-input.tsx
const { ComponentContext, PropsContext: PinInputPropsContext, useComponentContext, usePropsContext: usePinInputPropsContext, withContext, withProvider } = createSlotComponent("pin-input", pinInputStyle);
/**
* `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
*
* @see https://yamada-ui.com/docs/components/pin-input
*/
const PinInputRoot = withProvider(({ children, errorBorderColor, focusBorderColor, items = 4,...rest }) => {
	const { descendants, getInputProps, getRootProps } = usePinInput(rest);
	const cloneChildren = useMemo(() => {
		const validChildren = getValidChildren(children);
		if (validChildren.length) return validChildren;
		else return Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx(PinInputField, { index }, index));
	}, [children, items]);
	return /* @__PURE__ */ jsx(PinInputDescendantsContext, {
		value: descendants,
		children: /* @__PURE__ */ jsx(ComponentContext, {
			value: useMemo(() => ({
				errorBorderColor,
				focusBorderColor,
				getInputProps
			}), [
				getInputProps,
				errorBorderColor,
				focusBorderColor
			]),
			children: /* @__PURE__ */ jsx(Group, {
				...getRootProps(),
				children: cloneChildren
			})
		})
	});
}, "root")();
const PinInputField = withContext(Input, "field")(void 0, ({ ref, index,...rest }) => {
	const { errorBorderColor, focusBorderColor, getInputProps } = useComponentContext();
	const { register } = usePinInputDescendant();
	const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest);
	return { ...getInputProps({
		errorBorderColor,
		focusBorderColor,
		...ariaProps,
		...dataProps,
		...eventProps,
		...props,
		ref: mergeRefs(register, ref),
		index
	}) };
});

//#endregion
export { PinInputField, PinInputPropsContext, PinInputRoot, usePinInputPropsContext };
//# sourceMappingURL=pin-input.js.map