@cerberus-design/react/dist/components/pin-input/input.js

The Cerberus Design React component library.

import { jsxs, jsx } from 'react/jsx-runtime';
import { PinInputParts } from './parts.js';

function PinInput(props) {
  const { size, ...rootProps } = props;
  const count = rootProps.count ?? 3;
  return /* @__PURE__ */ jsxs(PinInputParts.Root, { placeholder: "", size, ...rootProps, children: [
    /* @__PURE__ */ jsx(PinInputParts.Control, { children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(PinInputParts.Input, { index, size }, index)) }),
    /* @__PURE__ */ jsx(PinInputParts.HiddenInput, {})
  ] });
}

export { PinInput };