1 line
3.0 KiB
Plaintext
1 line
3.0 KiB
Plaintext
{"version":3,"sources":["../src/pin-input.tsx"],"sourcesContent":["import {\n chakra,\n forwardRef,\n omitThemingProps,\n ThemingProps,\n useStyleConfig,\n HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { cx } from \"@chakra-ui/shared-utils\"\nimport { getValidChildren } from \"@chakra-ui/react-children-utils\"\nimport {\n PinInputDescendantsProvider,\n PinInputProvider,\n usePinInput,\n usePinInputField,\n UsePinInputProps,\n} from \"./use-pin-input\"\nimport { cloneElement } from \"react\"\n\ninterface InputOptions {\n /**\n * The border color when the input is focused. Use color keys in `theme.colors`\n * @example\n * focusBorderColor = \"blue.500\"\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid. Use color keys in `theme.colors`\n * @example\n * errorBorderColor = \"red.500\"\n */\n errorBorderColor?: string\n}\n\nexport interface PinInputProps\n extends UsePinInputProps,\n ThemingProps<\"PinInput\">,\n InputOptions {\n /**\n * The children of the pin input component\n */\n children: React.ReactNode\n}\n\n/**\n * The `PinInput` component is similar to the Input component, but is optimized for entering sequences of digits quickly.\n *\n * @see Docs https://chakra-ui.com/docs/components/pin-input\n */\nexport function PinInput(props: PinInputProps) {\n const styles = useStyleConfig(\"PinInput\", props)\n\n const { children, ...rest } = omitThemingProps(props)\n const { descendants, ...context } = usePinInput(rest)\n\n const clones = getValidChildren(children).map((child) =>\n cloneElement(child, { __css: styles }),\n )\n\n return (\n <PinInputDescendantsProvider value={descendants}>\n <PinInputProvider value={context}>{clones}</PinInputProvider>\n </PinInputDescendantsProvider>\n )\n}\n\nPinInput.displayName = \"PinInput\"\n\nexport interface PinInputFieldProps extends HTMLChakraProps<\"input\"> {}\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n function PinInputField(props, ref) {\n const inputProps = usePinInputField(props, ref)\n return (\n <chakra.input\n {...inputProps}\n className={cx(\"chakra-pin-input\", props.className)}\n />\n )\n },\n)\n\nPinInputField.displayName = \"PinInputField\"\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAQjC,SAAS,oBAAoB;AA4CvB;AAZC,SAAS,SAAS,OAAsB;AAC7C,QAAM,SAAS,eAAe,YAAY,KAAK;AAE/C,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI,iBAAiB,KAAK;AACpD,QAAM,EAAE,aAAa,GAAG,QAAQ,IAAI,YAAY,IAAI;AAEpD,QAAM,SAAS,iBAAiB,QAAQ,EAAE;AAAA,IAAI,CAAC,UAC7C,aAAa,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EACvC;AAEA,SACE,oBAAC,+BAA4B,OAAO,aAClC,8BAAC,oBAAiB,OAAO,SAAU,kBAAO,GAC5C;AAEJ;AAEA,SAAS,cAAc;AAIhB,IAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,OAAO,KAAK;AACjC,UAAM,aAAa,iBAAiB,OAAO,GAAG;AAC9C,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,GAAG,oBAAoB,MAAM,SAAS;AAAA;AAAA,IACnD;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":["PinInputField"]} |