import { EventName } from '@lit/react'; import { default as Component } from '../../components/code-puncher/code-puncher.component.js'; import { DdsInputEvent, DdsChangeEvent, DdsCompleteEvent, DdsFocusEvent, DdsBlurEvent } from '../../events/events'; export type { DdsInputEvent } from '../../events/events'; export type { DdsChangeEvent } from '../../events/events'; export type { DdsCompleteEvent } from '../../events/events'; export type { DdsFocusEvent } from '../../events/events'; export type { DdsBlurEvent } from '../../events/events'; /** * `dap-ds-code-puncher` * @summary A composable PIN/OTP input component for entering verification codes. * @element dap-ds-code-puncher * @title - Code Puncher * @group code-puncher * * @property {string} value - The complete code value. * @property {boolean} mask - Mask input like password. Default is false. * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'. * @property {string} placeholder - Placeholder character for empty slots. * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'. * @property {string} label - The label of the component. * @property {string} description - The description of the component. * @property {string} tooltip - The tooltip of the component. * @property {string} feedback - The feedback message. * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type. * @property {'success' | 'error'} status - The status of the component. * @property {boolean} disabled - Disable all slots. Default is false. * @property {boolean} readonly - Read-only state. Default is false. * @property {boolean} required - Required for form validation. Default is false. * @property {string} name - Form element name. * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'. * * @event {{ value: string, index: number }} dds-input - Fires on each digit input. * @event {{ value: string }} dds-change - Fires when value changes. * @event {{ value: string }} dds-complete - Fires when all slots are filled. * @event dds-focus - Fires when component gains focus. * @event dds-blur - Fires when component loses focus. * * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements. * * @csspart base - The main container. * @csspart slots - The slots container. * @csspart label - The label element. * @csspart description - The description element. * @csspart feedback - The feedback element. */ declare const reactWrapper: import('@lit/react').ReactWebComponent; onDdsChange: EventName; onDdsComplete: EventName; onDdsFocus: EventName; onDdsBlur: EventName; }>; export default reactWrapper;