@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
72 lines (68 loc) • 3.13 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_input = require('../input/input.cjs');
const require_group = require('../group/group.cjs');
const require_pin_input_style = require('./pin-input.style.cjs');
const require_use_pin_input = require('./use-pin-input.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/pin-input/pin-input.tsx
const { ComponentContext, PropsContext: PinInputPropsContext, useComponentContext, usePropsContext: usePinInputPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("pin-input", require_pin_input_style.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 } = require_use_pin_input.usePinInput(rest);
const cloneChildren = (0, react.useMemo)(() => {
const validChildren = require_children.getValidChildren(children);
if (validChildren.length) return validChildren;
else return Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinInputField, { index }, index));
}, [children, items]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_pin_input.PinInputDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
errorBorderColor,
focusBorderColor,
getInputProps
}), [
getInputProps,
errorBorderColor,
focusBorderColor
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
...getRootProps(),
children: cloneChildren
})
})
});
}, "root")();
const PinInputField = withContext(require_input.Input, "field")(void 0, ({ ref, index,...rest }) => {
const { errorBorderColor, focusBorderColor, getInputProps } = useComponentContext();
const { register } = require_use_pin_input.usePinInputDescendant();
const { props, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(rest);
return { ...getInputProps({
errorBorderColor,
focusBorderColor,
...ariaProps,
...dataProps,
...eventProps,
...props,
ref: require_ref.mergeRefs(register, ref),
index
}) };
});
//#endregion
exports.PinInputField = PinInputField;
exports.PinInputPropsContext = PinInputPropsContext;
exports.PinInputRoot = PinInputRoot;
exports.usePinInputPropsContext = usePinInputPropsContext;
//# sourceMappingURL=pin-input.cjs.map