41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import * as _chakra_ui_system from '@chakra-ui/system';
|
|
import { ThemingProps, HTMLChakraProps } from '@chakra-ui/system';
|
|
import { UsePinInputProps } from './use-pin-input.js';
|
|
import 'react';
|
|
import '@chakra-ui/descendant';
|
|
|
|
interface InputOptions {
|
|
/**
|
|
* The border color when the input is focused. Use color keys in `theme.colors`
|
|
* @example
|
|
* focusBorderColor = "blue.500"
|
|
*/
|
|
focusBorderColor?: string;
|
|
/**
|
|
* The border color when the input is invalid. Use color keys in `theme.colors`
|
|
* @example
|
|
* errorBorderColor = "red.500"
|
|
*/
|
|
errorBorderColor?: string;
|
|
}
|
|
interface PinInputProps extends UsePinInputProps, ThemingProps<"PinInput">, InputOptions {
|
|
/**
|
|
* The children of the pin input component
|
|
*/
|
|
children: React.ReactNode;
|
|
}
|
|
/**
|
|
* The `PinInput` component is similar to the Input component, but is optimized for entering sequences of digits quickly.
|
|
*
|
|
* @see Docs https://chakra-ui.com/docs/components/pin-input
|
|
*/
|
|
declare function PinInput(props: PinInputProps): JSX.Element;
|
|
declare namespace PinInput {
|
|
var displayName: string;
|
|
}
|
|
interface PinInputFieldProps extends HTMLChakraProps<"input"> {
|
|
}
|
|
declare const PinInputField: _chakra_ui_system.ComponentWithAs<"input", PinInputFieldProps>;
|
|
|
|
export { PinInput, PinInputField, PinInputFieldProps, PinInputProps };
|