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

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

import { EventName } from '@lit/react';
import { default as Component } from '../../components/chip/chip.js';
import { DdsRemoveEvent, DdsSelectEvent } from '../../events/events';
export type { DdsRemoveEvent } from '../../events/events';
export type { DdsSelectEvent } from '../../events/events';
/**
* `dap-ds-chip`
* @summary A chip is a small status descriptor for UI elements.
* @element dap-ds-chip
* @title - Chip
*
* @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @event {{ value: string }} dds-remove - Fired when the chip is removed
* @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected
*
* @csspart base - The base part
* @csspart content-container - The container for the content
* @csspart remove-button - The remove button
* @csspart remove-icon - The icon of the remove icon
* @csspart remove-icon-base - The base of the remove icon
* @csspart remove-icon-base-base - The base of the remove icon base
*
* @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))
* @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))
* @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))
* @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)
* @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)
* @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))
* @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))
* @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))
* @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))
* @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))
* @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))
* @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))
* @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))
* @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))
* @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))
* @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))
*
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
    onDdsRemove: EventName<DdsRemoveEvent>;
    onDdsSelect: EventName<DdsSelectEvent>;
}>;
export default reactWrapper;