import { EventName } from '@lit/react'; import { default as Component } from '../../components/checkbox/checkbox.component.js'; import { DdsChangeEvent, DdsBlurEvent, DdsFocusEvent, DdsInputEvent } from '../../events/events'; export type { DdsChangeEvent } from '../../events/events'; export type { DdsBlurEvent } from '../../events/events'; export type { DdsFocusEvent } from '../../events/events'; export type { DdsInputEvent } from '../../events/events'; /** * `dap-ds-checkbox` * @summary A checkbox is a form element that allows the user to select one or more options from a set. * @element dap-ds-checkbox * @title - Checkbox * * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked. * @event {{ void }} dds-blur - Emitted when the checkbox loses focus. * @event {{ void }} dds-focus - Emitted when the checkbox gains focus. * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the checkbox receives input. * * @property {string} name - The name of the checkbox. * @property {string} value - The value of the checkbox. * @property {boolean} checked - Whether the checkbox is checked. * @property {string} label - The label of the checkbox. * @property {string} description - The description of the checkbox. * @property {boolean} disabled - Whether the checkbox is disabled. * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form). * @property {boolean} required - Whether the checkbox is required. * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"). * @property {'left' | 'right'} labelPlacement - The placement of the label. * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description. * @property {boolean} subtle - The weight of the label. * @property {string} feedback - The feedback of the checkbox. * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox. * @property {boolean} invalid - The invalid state of the checkbox. * @property {boolean} optional - The optional state of the checkbox. * @property {string} optionalLabel - The optional label of the checkbox. * * @csspart base - The main checkbox container. * @csspart label - The label of the checkbox. * @csspart input - The input of the checkbox. * @csspart control - The control of the checkbox. * @csspart icon - The icon of the checkbox. * @csspart icon-base - The base icon container. * @csspart label-container - The label container of the checkbox. * @csspart description - The description of the checkbox. * @csspart readonly - The readonly state of the checkbox. * * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500)) * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large)) * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. (default: var(--dds-radius-small)) * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. (default: var(--dds-border-neutral-base)) * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. (default: transparent) * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled)) * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium)) * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium)) * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong)) * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong)) * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted)) * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted)) * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted)) * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base)) * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base)) * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium)) * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium)) * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong)) * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong)) * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled)) * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled)) * @cssproperty --dds-checkbox-readonly-border-color - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle)) * @cssproperty --dds-checkbox-readonly-background-color - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle)) * @cssproperty --dds-checkbox-readonly-icon-color - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base)) */ declare const reactWrapper: import('@lit/react').ReactWebComponent; onDdsBlur: EventName; onDdsFocus: EventName; onDdsInput: EventName; }>; export default reactWrapper;