@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 4.72 kB
Source Map (JSON)
{"version":3,"file":"pin-input.cjs","names":["createSlotComponent","pinInputStyle","usePinInput","getValidChildren","PinInputDescendantsContext","Group","Input","usePinInputDescendant","useFieldProps","mergeRefs"],"sources":["../../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n RequiredPropGetter,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { InputProps, UseInputBorderProps } from \"../input\"\nimport type { PinInputStyle } from \"./pin-input.style\"\nimport type { UsePinInputProps } from \"./use-pin-input\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { Group } from \"../group\"\nimport { Input } from \"../input\"\nimport { pinInputStyle } from \"./pin-input.style\"\nimport {\n PinInputDescendantsContext,\n usePinInput,\n usePinInputDescendant,\n} from \"./use-pin-input\"\n\ninterface ComponentContext extends UseInputBorderProps {\n getInputProps: RequiredPropGetter<\"input\", { index: number }>\n}\n\nexport interface PinInputRootProps\n extends Omit<\n WithoutThemeProps<GroupProps, PinInputStyle>,\n \"defaultValue\" | \"mask\" | \"onChange\"\n >,\n ThemeProps<PinInputStyle>,\n UseInputBorderProps,\n UsePinInputProps {\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\n}\n\nconst {\n ComponentContext,\n PropsContext: PinInputPropsContext,\n useComponentContext,\n usePropsContext: usePinInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PinInputRootProps, PinInputStyle, ComponentContext>(\n \"pin-input\",\n pinInputStyle,\n)\n\nexport { PinInputPropsContext, usePinInputPropsContext }\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see https://yamada-ui.com/docs/components/pin-input\n */\nexport const PinInputRoot = withProvider<\"div\", PinInputRootProps>(\n ({ children, errorBorderColor, focusBorderColor, items = 4, ...rest }) => {\n const { descendants, getInputProps, getRootProps } = usePinInput(rest)\n const cloneChildren = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n if (validChildren.length) {\n return validChildren\n } else {\n return Array.from({ length: items }, (_, index) => (\n <PinInputField key={index} index={index} />\n ))\n }\n }, [children, items])\n const context = useMemo(\n () => ({ errorBorderColor, focusBorderColor, getInputProps }),\n [getInputProps, errorBorderColor, focusBorderColor],\n )\n\n return (\n <PinInputDescendantsContext value={descendants}>\n <ComponentContext value={context}>\n <Group {...getRootProps()}>{cloneChildren}</Group>\n </ComponentContext>\n </PinInputDescendantsContext>\n )\n },\n \"root\",\n)()\n\nexport interface PinInputFieldProps extends InputProps {\n /**\n * The index of the pin input field.\n */\n index: number\n}\n\nexport const PinInputField = withContext<\"input\", PinInputFieldProps>(\n Input,\n \"field\",\n)(undefined, ({ ref, index, ...rest }) => {\n const { errorBorderColor, focusBorderColor, getInputProps } =\n useComponentContext()\n const { register } = usePinInputDescendant()\n const { props, ariaProps, dataProps, eventProps } = useFieldProps(rest)\n\n return {\n ...getInputProps({\n errorBorderColor,\n focusBorderColor,\n ...ariaProps,\n ...dataProps,\n ...eventProps,\n ...props,\n ref: mergeRefs(register, ref),\n index,\n }),\n }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,aACAC,sCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,QAAQ,EAAG,GAAG,WAAW;CACxE,MAAM,EAAE,aAAa,eAAe,iBAAiBC,kCAAY,KAAK;CACtE,MAAM,yCAA8B;EAClC,MAAM,gBAAgBC,kCAAiB,SAAS;AAEhD,MAAI,cAAc,OAChB,QAAO;MAEP,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,UACvC,2CAAC,iBAAiC,SAAd,MAAuB,CAC3C;IAEH,CAAC,UAAU,MAAM,CAAC;AAMrB,QACE,2CAACC;EAA2B,OAAO;YACjC,2CAAC;GAAiB,iCANb;IAAE;IAAkB;IAAkB;IAAe,GAC5D;IAAC;IAAe;IAAkB;IAAiB,CACpD;aAKK,2CAACC;IAAM,GAAI,cAAc;cAAG;KAAsB;IACjC;GACQ;GAGjC,OACD,EAAE;AASH,MAAa,gBAAgB,YAC3BC,qBACA,QACD,CAAC,SAAY,EAAE,KAAK,MAAO,GAAG,WAAW;CACxC,MAAM,EAAE,kBAAkB,kBAAkB,kBAC1C,qBAAqB;CACvB,MAAM,EAAE,aAAaC,6CAAuB;CAC5C,MAAM,EAAE,OAAO,WAAW,WAAW,eAAeC,sCAAc,KAAK;AAEvE,QAAO,EACL,GAAG,cAAc;EACf;EACA;EACA,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAKC,sBAAU,UAAU,IAAI;EAC7B;EACD,CAAC,EACH;EACD"}