{"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"]}