dap-design-system/dist/react/dap-ds-code-puncher/index.d.ts

Official design system for the DÁP (dap.gov.hu)

import { EventName } from '@lit/react';
import { default as Component } from '../../components/code-puncher/code-puncher.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 {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)
* @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} requiredLabel - Indicator of required text. (default: '*')
* @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<Component, {
    onDdsInput: EventName<DdsInputEvent>;
    onDdsChange: EventName<DdsChangeEvent>;
    onDdsComplete: EventName<DdsCompleteEvent>;
    onDdsFocus: EventName<DdsFocusEvent>;
    onDdsBlur: EventName<DdsBlurEvent>;
}>;
export default reactWrapper;