@dropi/ui 0.1.0

package/dist/types/components.d.ts

@@ -0,0 +1,1549 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { BadgeState } from "./components/dropi-badge/dropi-badge";
+import { ButtonSeverity, ButtonSize, ButtonState, ButtonType } from "./components/dropi-button/dropi-button";
+import { InputMode } from "./components/dropi-input/dropi-input";
+import { Event } from "./stencil-public-runtime";
+import { SelectOption, SelectOptionGroup } from "./components/dropi-select/select.types";
+import { TagState, TagType } from "./components/dropi-tag/dropi-tag";
+import { ResizeMode } from "./components/dropi-text-area/dropi-text-area";
+export { BadgeState } from "./components/dropi-badge/dropi-badge";
+export { ButtonSeverity, ButtonSize, ButtonState, ButtonType } from "./components/dropi-button/dropi-button";
+export { InputMode } from "./components/dropi-input/dropi-input";
+export { Event } from "./stencil-public-runtime";
+export { SelectOption, SelectOptionGroup } from "./components/dropi-select/select.types";
+export { TagState, TagType } from "./components/dropi-tag/dropi-tag";
+export { ResizeMode } from "./components/dropi-text-area/dropi-text-area";
+export namespace Components {
+    /**
+     * @component dropi-badge
+     * Status badge for user/account states.
+     */
+    interface DropiBadge {
+        /**
+          * Badge state: pending | active | canceled | frozen
+          * @default 'pending'
+         */
+        "state": BadgeState;
+    }
+    /**
+     * @component dropi-button
+     * Primary action button with multiple types, severities, sizes and states.
+     * Supports pre/post icons and a loading spinner.
+     */
+    interface DropiButton {
+        /**
+          * Icon name to show after the text
+          * @default ''
+         */
+        "postIcon": string;
+        /**
+          * Icon name to show before the text
+          * @default ''
+         */
+        "preIcon": string;
+        /**
+          * Primary (filled) | Secondary (outlined) | Tertiary (ghost)
+          * @default 'primary'
+         */
+        "severity": ButtonSeverity;
+        /**
+          * Button size
+          * @default 'normal'
+         */
+        "size": ButtonSize;
+        /**
+          * Button state
+          * @default 'default'
+         */
+        "state": ButtonState;
+        /**
+          * Button label
+          * @default ''
+         */
+        "text": string;
+        /**
+          * Visual color palette
+          * @default 'default'
+         */
+        "type": ButtonType;
+    }
+    /**
+     * @component dropi-checkbox
+     * A styled checkbox that emits change events.
+     * Supports form association via native `<input type="checkbox">` internals.
+     */
+    interface DropiCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled": boolean;
+    }
+    /**
+     * @component dropi-icon
+     * Renders an SVG icon from the Dropi sprite sheet.
+     * The sprite must be available at `assets/icons/sprite.svg`.
+     */
+    interface DropiIcon {
+        /**
+          * Color of the icon. Accepts: - Hex color: `#ff0000` - CSS variable name without `--`: `Primary-Primary-500` - `currentColor` to inherit
+          * @default 'currentColor'
+         */
+        "color": string;
+        /**
+          * Height of the icon (CSS value)
+          * @default '24px'
+         */
+        "height": string;
+        /**
+          * Icon name matching the id in the SVG sprite
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Width of the icon (CSS value)
+          * @default '24px'
+         */
+        "width": string;
+    }
+    /**
+     * @component dropi-input
+     * Text input with floating label, validation states, password toggle,
+     * number/letter restrictions, thousand separator, and native form association.
+     * ## Form usage (native HTML form)
+     * ```html
+     * <form>
+     * <dropi-input name="email" label="Email" required></dropi-input>
+     * </form>
+     * ```
+     * ## Controlled usage (React / Vue / Angular)
+     * Pass `value` and listen to `dropiInput` to update.
+     */
+    interface DropiInput {
+        /**
+          * Allow decimal point when onlyNumbers is true
+          * @default false
+         */
+        "allowDecimals": boolean;
+        /**
+          * Disable the input
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Show label above the input (fixed), instead of floating inside
+          * @default false
+         */
+        "fixedLabel": boolean;
+        /**
+          * Helper / error text shown below the field
+          * @default ''
+         */
+        "helperText": string;
+        /**
+          * Icon name shown inside the input (only visible when value is not empty)
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Color token for the icon
+          * @default 'Gray-Gray-400'
+         */
+        "iconColor": string;
+        /**
+          * Input id. Defaults to label value.
+          * @default ''
+         */
+        "inputId": string;
+        /**
+          * Keyboard input mode hint
+          * @default 'text'
+         */
+        "inputMode": InputMode;
+        /**
+          * Mark the field as invalid (consumer-controlled)
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * Floating or fixed label text
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Max character length
+         */
+        "maxlength": number;
+        /**
+          * Apply thousand separator formatting (e.g. 1,000,000)
+          * @default false
+         */
+        "moneyFormat": boolean;
+        /**
+          * Name attribute for native form submission
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Only allow letter characters
+          * @default false
+         */
+        "onlyLetters": boolean;
+        /**
+          * Only allow numeric characters
+          * @default false
+         */
+        "onlyNumbers": boolean;
+        /**
+          * Show password visibility toggle (renders as password field)
+          * @default false
+         */
+        "passwordInput": boolean;
+        /**
+          * Placeholder text (visible in fixedLabel mode or on focus)
+          * @default ' '
+         */
+        "placeholder": string;
+        /**
+          * Mark as required (shows asterisk when showAsterisk is true)
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Show the required asterisk on the label
+          * @default true
+         */
+        "showAsterisk": boolean;
+        /**
+          * Only show helperText when the field is invalid
+          * @default false
+         */
+        "showHelperOnlyOnError": boolean;
+        /**
+          * Apply thousand separator without currency symbol
+          * @default false
+         */
+        "thousandSeparator": boolean;
+        /**
+          * Current value (controlled)
+          * @default ''
+         */
+        "value": string;
+    }
+    /**
+     * @component dropi-radio-button
+     * Styled radio button with label.
+     */
+    interface DropiRadioButton {
+        /**
+          * Whether this radio is selected
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Input id
+          * @default 'radioButton'
+         */
+        "inputId": string;
+        /**
+          * Label text displayed next to the radio
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Input name (for grouping radio buttons)
+          * @default 'radio'
+         */
+        "name": string;
+        /**
+          * Set to true to programmatically reset this radio to unchecked. Useful when the parent needs to clear a group.
+          * @default false
+         */
+        "resetTrigger": boolean;
+    }
+    /**
+     * @component dropi-select
+     * Feature-rich select with support for:
+     * - Single / multi select
+     * - Grouped options
+     * - Search / filter
+     * - Country flags
+     * - Radio-style options with images
+     * - Inline (dropdownType) or bordered trigger
+     * - Native form association
+     * ## Usage
+     * Options must be set via JS property (not HTML attribute) for object arrays:
+     * ```js
+     * document.querySelector('dropi-select').options = [
+     * { id: 1, label: 'Option A' },
+     * { id: 2, label: 'Option B' },
+     * ];
+     * ```
+     */
+    interface DropiSelect {
+        /**
+          * Clear the current selection
+         */
+        "clearSelection": () => Promise<void>;
+        /**
+          * Pre-select an option by id
+          * @default ''
+         */
+        "defaultSelectedId": string | number;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Renders trigger without border (inline/dropdown style)
+          * @default false
+         */
+        "dropdownType": boolean;
+        /**
+          * @default ''
+         */
+        "errorText": string;
+        /**
+          * @default ''
+         */
+        "helperText": string;
+        /**
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Allows selecting multiple options
+          * @default false
+         */
+        "multiSelect": boolean;
+        /**
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Array of SelectOption or SelectOptionGroup
+          * @default []
+         */
+        "options": SelectOption[] | SelectOptionGroup[];
+        /**
+          * Placeholder inside the search field
+          * @default 'Buscar'
+         */
+        "placeHolderSearch": string;
+        /**
+          * @default 'Seleccionar'
+         */
+        "placeholder": string;
+        /**
+          * Icon name shown before the trigger label
+          * @default ''
+         */
+        "preIcon": string;
+        /**
+          * Renders options as radio buttons with optional image
+          * @default false
+         */
+        "radioOptions": boolean;
+        /**
+          * Reset multi-select state and show a placeholder label
+         */
+        "resetMultiSelect": (_placeholder?: string) => Promise<void>;
+        /**
+          * Enables text search inside the dropdown
+          * @default false
+         */
+        "searchEnabled": boolean;
+        /**
+          * Select an option by its id
+         */
+        "setById": (id: string | number) => Promise<void>;
+        /**
+          * Select an option by its label
+         */
+        "setByLabel": (label: string) => Promise<void>;
+        /**
+          * Show country flags next to option labels
+          * @default false
+         */
+        "showCountryFlags": boolean;
+        /**
+          * @default false
+         */
+        "showObligatory": boolean;
+        /**
+          * Controlled selected option (single select)
+          * @default null
+         */
+        "value": SelectOption | null;
+    }
+    /**
+     * @component dropi-switch
+     * Toggle switch component. Emits dropiChange on toggle.
+     */
+    interface DropiSwitch {
+        /**
+          * Whether the switch is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the switch is on
+          * @default false
+         */
+        "isChecked": boolean;
+    }
+    /**
+     * @component dropi-tag
+     * Colored tag/chip for statuses, categories, and labels.
+     */
+    interface DropiTag {
+        /**
+          * Icon name from the sprite
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Whether to show the icon
+          * @default false
+         */
+        "showIcon": boolean;
+        /**
+          * Color state of the tag
+          * @default 'default'
+         */
+        "state": TagState;
+        /**
+          * Label text
+          * @default ''
+         */
+        "text": string;
+        /**
+          * primary (filled) | secondary (soft)
+          * @default 'primary'
+         */
+        "type": TagType;
+    }
+    /**
+     * @component dropi-text-area
+     * Multi-line text area with label, char counter, validation states,
+     * helper text, and native form association.
+     */
+    interface DropiTextArea {
+        /**
+          * Disable the textarea
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Helper / error text below the field
+          * @default ''
+         */
+        "helperText": string;
+        /**
+          * Input id. Defaults to label.
+          * @default ''
+         */
+        "inputId": string;
+        /**
+          * Mark the field as invalid (consumer-controlled)
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * Label shown above the textarea
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Max character length
+         */
+        "maxlength": number;
+        /**
+          * Min character length
+          * @default 0
+         */
+        "minlength": number;
+        /**
+          * Name for native form submission
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Placeholder text
+          * @default ''
+         */
+        "placeholder": string;
+        /**
+          * Mark as required
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Resize behavior
+          * @default 'vertical'
+         */
+        "resize": ResizeMode;
+        /**
+          * Number of visible rows
+          * @default 4
+         */
+        "rows": number;
+        /**
+          * Show the required asterisk
+          * @default false
+         */
+        "showAsterisk": boolean;
+        /**
+          * Current value (controlled)
+          * @default ''
+         */
+        "value": string;
+    }
+}
+export interface DropiButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiButtonElement;
+}
+export interface DropiCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiCheckboxElement;
+}
+export interface DropiInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiInputElement;
+}
+export interface DropiRadioButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiRadioButtonElement;
+}
+export interface DropiSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiSelectElement;
+}
+export interface DropiSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiSwitchElement;
+}
+export interface DropiTextAreaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiTextAreaElement;
+}
+declare global {
+    /**
+     * @component dropi-badge
+     * Status badge for user/account states.
+     */
+    interface HTMLDropiBadgeElement extends Components.DropiBadge, HTMLStencilElement {
+    }
+    var HTMLDropiBadgeElement: {
+        prototype: HTMLDropiBadgeElement;
+        new (): HTMLDropiBadgeElement;
+    };
+    interface HTMLDropiButtonElementEventMap {
+        "dropiClick": MouseEvent;
+    }
+    /**
+     * @component dropi-button
+     * Primary action button with multiple types, severities, sizes and states.
+     * Supports pre/post icons and a loading spinner.
+     */
+    interface HTMLDropiButtonElement extends Components.DropiButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiButtonElementEventMap>(type: K, listener: (this: HTMLDropiButtonElement, ev: DropiButtonCustomEvent<HTMLDropiButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiButtonElementEventMap>(type: K, listener: (this: HTMLDropiButtonElement, ev: DropiButtonCustomEvent<HTMLDropiButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiButtonElement: {
+        prototype: HTMLDropiButtonElement;
+        new (): HTMLDropiButtonElement;
+    };
+    interface HTMLDropiCheckboxElementEventMap {
+        "dropiChange": boolean;
+    }
+    /**
+     * @component dropi-checkbox
+     * A styled checkbox that emits change events.
+     * Supports form association via native `<input type="checkbox">` internals.
+     */
+    interface HTMLDropiCheckboxElement extends Components.DropiCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiCheckboxElementEventMap>(type: K, listener: (this: HTMLDropiCheckboxElement, ev: DropiCheckboxCustomEvent<HTMLDropiCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiCheckboxElementEventMap>(type: K, listener: (this: HTMLDropiCheckboxElement, ev: DropiCheckboxCustomEvent<HTMLDropiCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiCheckboxElement: {
+        prototype: HTMLDropiCheckboxElement;
+        new (): HTMLDropiCheckboxElement;
+    };
+    /**
+     * @component dropi-icon
+     * Renders an SVG icon from the Dropi sprite sheet.
+     * The sprite must be available at `assets/icons/sprite.svg`.
+     */
+    interface HTMLDropiIconElement extends Components.DropiIcon, HTMLStencilElement {
+    }
+    var HTMLDropiIconElement: {
+        prototype: HTMLDropiIconElement;
+        new (): HTMLDropiIconElement;
+    };
+    interface HTMLDropiInputElementEventMap {
+        "dropiInput": string;
+        "dropiChange": string;
+        "dropiFocus": void;
+        "dropiBlur": void;
+    }
+    /**
+     * @component dropi-input
+     * Text input with floating label, validation states, password toggle,
+     * number/letter restrictions, thousand separator, and native form association.
+     * ## Form usage (native HTML form)
+     * ```html
+     * <form>
+     * <dropi-input name="email" label="Email" required></dropi-input>
+     * </form>
+     * ```
+     * ## Controlled usage (React / Vue / Angular)
+     * Pass `value` and listen to `dropiInput` to update.
+     */
+    interface HTMLDropiInputElement extends Components.DropiInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiInputElementEventMap>(type: K, listener: (this: HTMLDropiInputElement, ev: DropiInputCustomEvent<HTMLDropiInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiInputElementEventMap>(type: K, listener: (this: HTMLDropiInputElement, ev: DropiInputCustomEvent<HTMLDropiInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiInputElement: {
+        prototype: HTMLDropiInputElement;
+        new (): HTMLDropiInputElement;
+    };
+    interface HTMLDropiRadioButtonElementEventMap {
+        "dropiChange": Event;
+    }
+    /**
+     * @component dropi-radio-button
+     * Styled radio button with label.
+     */
+    interface HTMLDropiRadioButtonElement extends Components.DropiRadioButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiRadioButtonElementEventMap>(type: K, listener: (this: HTMLDropiRadioButtonElement, ev: DropiRadioButtonCustomEvent<HTMLDropiRadioButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiRadioButtonElementEventMap>(type: K, listener: (this: HTMLDropiRadioButtonElement, ev: DropiRadioButtonCustomEvent<HTMLDropiRadioButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiRadioButtonElement: {
+        prototype: HTMLDropiRadioButtonElement;
+        new (): HTMLDropiRadioButtonElement;
+    };
+    interface HTMLDropiSelectElementEventMap {
+        "dropiChange": SelectOption | SelectOption[];
+        "dropiClear": void;
+        "dropiSearch": string;
+        "dropiScrollEnd": void;
+        "dropiKeyEnter": KeyboardEvent;
+    }
+    /**
+     * @component dropi-select
+     * Feature-rich select with support for:
+     * - Single / multi select
+     * - Grouped options
+     * - Search / filter
+     * - Country flags
+     * - Radio-style options with images
+     * - Inline (dropdownType) or bordered trigger
+     * - Native form association
+     * ## Usage
+     * Options must be set via JS property (not HTML attribute) for object arrays:
+     * ```js
+     * document.querySelector('dropi-select').options = [
+     * { id: 1, label: 'Option A' },
+     * { id: 2, label: 'Option B' },
+     * ];
+     * ```
+     */
+    interface HTMLDropiSelectElement extends Components.DropiSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiSelectElementEventMap>(type: K, listener: (this: HTMLDropiSelectElement, ev: DropiSelectCustomEvent<HTMLDropiSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiSelectElementEventMap>(type: K, listener: (this: HTMLDropiSelectElement, ev: DropiSelectCustomEvent<HTMLDropiSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiSelectElement: {
+        prototype: HTMLDropiSelectElement;
+        new (): HTMLDropiSelectElement;
+    };
+    interface HTMLDropiSwitchElementEventMap {
+        "dropiChange": boolean;
+    }
+    /**
+     * @component dropi-switch
+     * Toggle switch component. Emits dropiChange on toggle.
+     */
+    interface HTMLDropiSwitchElement extends Components.DropiSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiSwitchElementEventMap>(type: K, listener: (this: HTMLDropiSwitchElement, ev: DropiSwitchCustomEvent<HTMLDropiSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiSwitchElementEventMap>(type: K, listener: (this: HTMLDropiSwitchElement, ev: DropiSwitchCustomEvent<HTMLDropiSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiSwitchElement: {
+        prototype: HTMLDropiSwitchElement;
+        new (): HTMLDropiSwitchElement;
+    };
+    /**
+     * @component dropi-tag
+     * Colored tag/chip for statuses, categories, and labels.
+     */
+    interface HTMLDropiTagElement extends Components.DropiTag, HTMLStencilElement {
+    }
+    var HTMLDropiTagElement: {
+        prototype: HTMLDropiTagElement;
+        new (): HTMLDropiTagElement;
+    };
+    interface HTMLDropiTextAreaElementEventMap {
+        "dropiInput": string;
+        "dropiChange": string;
+        "dropiFocus": void;
+        "dropiBlur": void;
+    }
+    /**
+     * @component dropi-text-area
+     * Multi-line text area with label, char counter, validation states,
+     * helper text, and native form association.
+     */
+    interface HTMLDropiTextAreaElement extends Components.DropiTextArea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiTextAreaElementEventMap>(type: K, listener: (this: HTMLDropiTextAreaElement, ev: DropiTextAreaCustomEvent<HTMLDropiTextAreaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiTextAreaElementEventMap>(type: K, listener: (this: HTMLDropiTextAreaElement, ev: DropiTextAreaCustomEvent<HTMLDropiTextAreaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiTextAreaElement: {
+        prototype: HTMLDropiTextAreaElement;
+        new (): HTMLDropiTextAreaElement;
+    };
+    interface HTMLElementTagNameMap {
+        "dropi-badge": HTMLDropiBadgeElement;
+        "dropi-button": HTMLDropiButtonElement;
+        "dropi-checkbox": HTMLDropiCheckboxElement;
+        "dropi-icon": HTMLDropiIconElement;
+        "dropi-input": HTMLDropiInputElement;
+        "dropi-radio-button": HTMLDropiRadioButtonElement;
+        "dropi-select": HTMLDropiSelectElement;
+        "dropi-switch": HTMLDropiSwitchElement;
+        "dropi-tag": HTMLDropiTagElement;
+        "dropi-text-area": HTMLDropiTextAreaElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * @component dropi-badge
+     * Status badge for user/account states.
+     */
+    interface DropiBadge {
+        /**
+          * Badge state: pending | active | canceled | frozen
+          * @default 'pending'
+         */
+        "state"?: BadgeState;
+    }
+    /**
+     * @component dropi-button
+     * Primary action button with multiple types, severities, sizes and states.
+     * Supports pre/post icons and a loading spinner.
+     */
+    interface DropiButton {
+        /**
+          * Emitted on click (not emitted when disabled or loading)
+         */
+        "onDropiClick"?: (event: DropiButtonCustomEvent<MouseEvent>) => void;
+        /**
+          * Icon name to show after the text
+          * @default ''
+         */
+        "postIcon"?: string;
+        /**
+          * Icon name to show before the text
+          * @default ''
+         */
+        "preIcon"?: string;
+        /**
+          * Primary (filled) | Secondary (outlined) | Tertiary (ghost)
+          * @default 'primary'
+         */
+        "severity"?: ButtonSeverity;
+        /**
+          * Button size
+          * @default 'normal'
+         */
+        "size"?: ButtonSize;
+        /**
+          * Button state
+          * @default 'default'
+         */
+        "state"?: ButtonState;
+        /**
+          * Button label
+          * @default ''
+         */
+        "text"?: string;
+        /**
+          * Visual color palette
+          * @default 'default'
+         */
+        "type"?: ButtonType;
+    }
+    /**
+     * @component dropi-checkbox
+     * A styled checkbox that emits change events.
+     * Supports form association via native `<input type="checkbox">` internals.
+     */
+    interface DropiCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checked state changes
+         */
+        "onDropiChange"?: (event: DropiCheckboxCustomEvent<boolean>) => void;
+    }
+    /**
+     * @component dropi-icon
+     * Renders an SVG icon from the Dropi sprite sheet.
+     * The sprite must be available at `assets/icons/sprite.svg`.
+     */
+    interface DropiIcon {
+        /**
+          * Color of the icon. Accepts: - Hex color: `#ff0000` - CSS variable name without `--`: `Primary-Primary-500` - `currentColor` to inherit
+          * @default 'currentColor'
+         */
+        "color"?: string;
+        /**
+          * Height of the icon (CSS value)
+          * @default '24px'
+         */
+        "height"?: string;
+        /**
+          * Icon name matching the id in the SVG sprite
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Width of the icon (CSS value)
+          * @default '24px'
+         */
+        "width"?: string;
+    }
+    /**
+     * @component dropi-input
+     * Text input with floating label, validation states, password toggle,
+     * number/letter restrictions, thousand separator, and native form association.
+     * ## Form usage (native HTML form)
+     * ```html
+     * <form>
+     * <dropi-input name="email" label="Email" required></dropi-input>
+     * </form>
+     * ```
+     * ## Controlled usage (React / Vue / Angular)
+     * Pass `value` and listen to `dropiInput` to update.
+     */
+    interface DropiInput {
+        /**
+          * Allow decimal point when onlyNumbers is true
+          * @default false
+         */
+        "allowDecimals"?: boolean;
+        /**
+          * Disable the input
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Show label above the input (fixed), instead of floating inside
+          * @default false
+         */
+        "fixedLabel"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Helper / error text shown below the field
+          * @default ''
+         */
+        "helperText"?: string;
+        /**
+          * Icon name shown inside the input (only visible when value is not empty)
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * Color token for the icon
+          * @default 'Gray-Gray-400'
+         */
+        "iconColor"?: string;
+        /**
+          * Input id. Defaults to label value.
+          * @default ''
+         */
+        "inputId"?: string;
+        /**
+          * Keyboard input mode hint
+          * @default 'text'
+         */
+        "inputMode"?: InputMode;
+        /**
+          * Mark the field as invalid (consumer-controlled)
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Floating or fixed label text
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Max character length
+         */
+        "maxlength"?: number;
+        /**
+          * Apply thousand separator formatting (e.g. 1,000,000)
+          * @default false
+         */
+        "moneyFormat"?: boolean;
+        /**
+          * Name attribute for native form submission
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted on blur
+         */
+        "onDropiBlur"?: (event: DropiInputCustomEvent<void>) => void;
+        /**
+          * Emitted on blur with the final value
+         */
+        "onDropiChange"?: (event: DropiInputCustomEvent<string>) => void;
+        /**
+          * Emitted on focus
+         */
+        "onDropiFocus"?: (event: DropiInputCustomEvent<void>) => void;
+        /**
+          * Emitted on every keystroke with the current value
+         */
+        "onDropiInput"?: (event: DropiInputCustomEvent<string>) => void;
+        /**
+          * Only allow letter characters
+          * @default false
+         */
+        "onlyLetters"?: boolean;
+        /**
+          * Only allow numeric characters
+          * @default false
+         */
+        "onlyNumbers"?: boolean;
+        /**
+          * Show password visibility toggle (renders as password field)
+          * @default false
+         */
+        "passwordInput"?: boolean;
+        /**
+          * Placeholder text (visible in fixedLabel mode or on focus)
+          * @default ' '
+         */
+        "placeholder"?: string;
+        /**
+          * Mark as required (shows asterisk when showAsterisk is true)
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Show the required asterisk on the label
+          * @default true
+         */
+        "showAsterisk"?: boolean;
+        /**
+          * Only show helperText when the field is invalid
+          * @default false
+         */
+        "showHelperOnlyOnError"?: boolean;
+        /**
+          * Apply thousand separator without currency symbol
+          * @default false
+         */
+        "thousandSeparator"?: boolean;
+        /**
+          * Current value (controlled)
+          * @default ''
+         */
+        "value"?: string;
+    }
+    /**
+     * @component dropi-radio-button
+     * Styled radio button with label.
+     */
+    interface DropiRadioButton {
+        /**
+          * Whether this radio is selected
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the element.
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Input id
+          * @default 'radioButton'
+         */
+        "inputId"?: string;
+        /**
+          * Label text displayed next to the radio
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Input name (for grouping radio buttons)
+          * @default 'radio'
+         */
+        "name"?: string;
+        /**
+          * Emitted when the radio is selected
+         */
+        "onDropiChange"?: (event: DropiRadioButtonCustomEvent<Event>) => void;
+        /**
+          * Set to true to programmatically reset this radio to unchecked. Useful when the parent needs to clear a group.
+          * @default false
+         */
+        "resetTrigger"?: boolean;
+    }
+    /**
+     * @component dropi-select
+     * Feature-rich select with support for:
+     * - Single / multi select
+     * - Grouped options
+     * - Search / filter
+     * - Country flags
+     * - Radio-style options with images
+     * - Inline (dropdownType) or bordered trigger
+     * - Native form association
+     * ## Usage
+     * Options must be set via JS property (not HTML attribute) for object arrays:
+     * ```js
+     * document.querySelector('dropi-select').options = [
+     * { id: 1, label: 'Option A' },
+     * { id: 2, label: 'Option B' },
+     * ];
+     * ```
+     */
+    interface DropiSelect {
+        /**
+          * Pre-select an option by id
+          * @default ''
+         */
+        "defaultSelectedId"?: string | number;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Renders trigger without border (inline/dropdown style)
+          * @default false
+         */
+        "dropdownType"?: boolean;
+        /**
+          * @default ''
+         */
+        "errorText"?: string;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * @default ''
+         */
+        "helperText"?: string;
+        /**
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Allows selecting multiple options
+          * @default false
+         */
+        "multiSelect"?: boolean;
+        /**
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Emitted when an option is selected (single) or selection changes (multi)
+         */
+        "onDropiChange"?: (event: DropiSelectCustomEvent<SelectOption | SelectOption[]>) => void;
+        /**
+          * Emitted when the selection is cleared
+         */
+        "onDropiClear"?: (event: DropiSelectCustomEvent<void>) => void;
+        /**
+          * Emitted on Enter key inside search
+         */
+        "onDropiKeyEnter"?: (event: DropiSelectCustomEvent<KeyboardEvent>) => void;
+        /**
+          * Emitted when the list is scrolled to the end
+         */
+        "onDropiScrollEnd"?: (event: DropiSelectCustomEvent<void>) => void;
+        /**
+          * Emitted on search input
+         */
+        "onDropiSearch"?: (event: DropiSelectCustomEvent<string>) => void;
+        /**
+          * Array of SelectOption or SelectOptionGroup
+          * @default []
+         */
+        "options"?: SelectOption[] | SelectOptionGroup[];
+        /**
+          * Placeholder inside the search field
+          * @default 'Buscar'
+         */
+        "placeHolderSearch"?: string;
+        /**
+          * @default 'Seleccionar'
+         */
+        "placeholder"?: string;
+        /**
+          * Icon name shown before the trigger label
+          * @default ''
+         */
+        "preIcon"?: string;
+        /**
+          * Renders options as radio buttons with optional image
+          * @default false
+         */
+        "radioOptions"?: boolean;
+        /**
+          * Enables text search inside the dropdown
+          * @default false
+         */
+        "searchEnabled"?: boolean;
+        /**
+          * Show country flags next to option labels
+          * @default false
+         */
+        "showCountryFlags"?: boolean;
+        /**
+          * @default false
+         */
+        "showObligatory"?: boolean;
+        /**
+          * Controlled selected option (single select)
+          * @default null
+         */
+        "value"?: SelectOption | null;
+    }
+    /**
+     * @component dropi-switch
+     * Toggle switch component. Emits dropiChange on toggle.
+     */
+    interface DropiSwitch {
+        /**
+          * Whether the switch is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Whether the switch is on
+          * @default false
+         */
+        "isChecked"?: boolean;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the toggle state changes
+         */
+        "onDropiChange"?: (event: DropiSwitchCustomEvent<boolean>) => void;
+    }
+    /**
+     * @component dropi-tag
+     * Colored tag/chip for statuses, categories, and labels.
+     */
+    interface DropiTag {
+        /**
+          * Icon name from the sprite
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * Whether to show the icon
+          * @default false
+         */
+        "showIcon"?: boolean;
+        /**
+          * Color state of the tag
+          * @default 'default'
+         */
+        "state"?: TagState;
+        /**
+          * Label text
+          * @default ''
+         */
+        "text"?: string;
+        /**
+          * primary (filled) | secondary (soft)
+          * @default 'primary'
+         */
+        "type"?: TagType;
+    }
+    /**
+     * @component dropi-text-area
+     * Multi-line text area with label, char counter, validation states,
+     * helper text, and native form association.
+     */
+    interface DropiTextArea {
+        /**
+          * Disable the textarea
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Helper / error text below the field
+          * @default ''
+         */
+        "helperText"?: string;
+        /**
+          * Input id. Defaults to label.
+          * @default ''
+         */
+        "inputId"?: string;
+        /**
+          * Mark the field as invalid (consumer-controlled)
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Label shown above the textarea
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Max character length
+         */
+        "maxlength"?: number;
+        /**
+          * Min character length
+          * @default 0
+         */
+        "minlength"?: number;
+        /**
+          * Name for native form submission
+          * @default ''
+         */
+        "name"?: string;
+        "onDropiBlur"?: (event: DropiTextAreaCustomEvent<void>) => void;
+        /**
+          * Emitted on blur
+         */
+        "onDropiChange"?: (event: DropiTextAreaCustomEvent<string>) => void;
+        "onDropiFocus"?: (event: DropiTextAreaCustomEvent<void>) => void;
+        /**
+          * Emitted on every keystroke
+         */
+        "onDropiInput"?: (event: DropiTextAreaCustomEvent<string>) => void;
+        /**
+          * Placeholder text
+          * @default ''
+         */
+        "placeholder"?: string;
+        /**
+          * Mark as required
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Resize behavior
+          * @default 'vertical'
+         */
+        "resize"?: ResizeMode;
+        /**
+          * Number of visible rows
+          * @default 4
+         */
+        "rows"?: number;
+        /**
+          * Show the required asterisk
+          * @default false
+         */
+        "showAsterisk"?: boolean;
+        /**
+          * Current value (controlled)
+          * @default ''
+         */
+        "value"?: string;
+    }
+
+    interface DropiBadgeAttributes {
+        "state": BadgeState;
+    }
+    interface DropiButtonAttributes {
+        "type": ButtonType;
+        "severity": ButtonSeverity;
+        "size": ButtonSize;
+        "state": ButtonState;
+        "preIcon": string;
+        "postIcon": string;
+        "text": string;
+    }
+    interface DropiCheckboxAttributes {
+        "checked": boolean;
+        "disabled": boolean;
+    }
+    interface DropiIconAttributes {
+        "name": string;
+        "width": string;
+        "height": string;
+        "color": string;
+    }
+    interface DropiInputAttributes {
+        "inputId": string;
+        "name": string;
+        "label": string;
+        "placeholder": string;
+        "value": string;
+        "maxlength": number;
+        "disabled": boolean;
+        "required": boolean;
+        "showAsterisk": boolean;
+        "fixedLabel": boolean;
+        "inputMode": InputMode;
+        "passwordInput": boolean;
+        "moneyFormat": boolean;
+        "thousandSeparator": boolean;
+        "onlyNumbers": boolean;
+        "allowDecimals": boolean;
+        "onlyLetters": boolean;
+        "icon": string;
+        "iconColor": string;
+        "invalid": boolean;
+        "helperText": string;
+        "showHelperOnlyOnError": boolean;
+    }
+    interface DropiRadioButtonAttributes {
+        "label": string;
+        "name": string;
+        "inputId": string;
+        "checked": boolean;
+        "resetTrigger": boolean;
+    }
+    interface DropiSelectAttributes {
+        "label": string;
+        "placeholder": string;
+        "name": string;
+        "disabled": boolean;
+        "invalid": boolean;
+        "errorText": string;
+        "helperText": string;
+        "showObligatory": boolean;
+        "searchEnabled": boolean;
+        "multiSelect": boolean;
+        "dropdownType": boolean;
+        "showCountryFlags": boolean;
+        "radioOptions": boolean;
+        "placeHolderSearch": string;
+        "preIcon": string;
+        "defaultSelectedId": string;
+    }
+    interface DropiSwitchAttributes {
+        "isChecked": boolean;
+        "disabled": boolean;
+    }
+    interface DropiTagAttributes {
+        "type": TagType;
+        "state": TagState;
+        "showIcon": boolean;
+        "icon": string;
+        "text": string;
+    }
+    interface DropiTextAreaAttributes {
+        "inputId": string;
+        "name": string;
+        "label": string;
+        "placeholder": string;
+        "value": string;
+        "maxlength": number;
+        "minlength": number;
+        "rows": number;
+        "resize": ResizeMode;
+        "disabled": boolean;
+        "required": boolean;
+        "showAsterisk": boolean;
+        "helperText": string;
+        "invalid": boolean;
+    }
+
+    interface IntrinsicElements {
+        "dropi-badge": Omit<DropiBadge, keyof DropiBadgeAttributes> & { [K in keyof DropiBadge & keyof DropiBadgeAttributes]?: DropiBadge[K] } & { [K in keyof DropiBadge & keyof DropiBadgeAttributes as `attr:${K}`]?: DropiBadgeAttributes[K] } & { [K in keyof DropiBadge & keyof DropiBadgeAttributes as `prop:${K}`]?: DropiBadge[K] };
+        "dropi-button": Omit<DropiButton, keyof DropiButtonAttributes> & { [K in keyof DropiButton & keyof DropiButtonAttributes]?: DropiButton[K] } & { [K in keyof DropiButton & keyof DropiButtonAttributes as `attr:${K}`]?: DropiButtonAttributes[K] } & { [K in keyof DropiButton & keyof DropiButtonAttributes as `prop:${K}`]?: DropiButton[K] };
+        "dropi-checkbox": Omit<DropiCheckbox, keyof DropiCheckboxAttributes> & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes]?: DropiCheckbox[K] } & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes as `attr:${K}`]?: DropiCheckboxAttributes[K] } & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes as `prop:${K}`]?: DropiCheckbox[K] };
+        "dropi-icon": Omit<DropiIcon, keyof DropiIconAttributes> & { [K in keyof DropiIcon & keyof DropiIconAttributes]?: DropiIcon[K] } & { [K in keyof DropiIcon & keyof DropiIconAttributes as `attr:${K}`]?: DropiIconAttributes[K] } & { [K in keyof DropiIcon & keyof DropiIconAttributes as `prop:${K}`]?: DropiIcon[K] };
+        "dropi-input": Omit<DropiInput, keyof DropiInputAttributes> & { [K in keyof DropiInput & keyof DropiInputAttributes]?: DropiInput[K] } & { [K in keyof DropiInput & keyof DropiInputAttributes as `attr:${K}`]?: DropiInputAttributes[K] } & { [K in keyof DropiInput & keyof DropiInputAttributes as `prop:${K}`]?: DropiInput[K] };
+        "dropi-radio-button": Omit<DropiRadioButton, keyof DropiRadioButtonAttributes> & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes]?: DropiRadioButton[K] } & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes as `attr:${K}`]?: DropiRadioButtonAttributes[K] } & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes as `prop:${K}`]?: DropiRadioButton[K] };
+        "dropi-select": Omit<DropiSelect, keyof DropiSelectAttributes> & { [K in keyof DropiSelect & keyof DropiSelectAttributes]?: DropiSelect[K] } & { [K in keyof DropiSelect & keyof DropiSelectAttributes as `attr:${K}`]?: DropiSelectAttributes[K] } & { [K in keyof DropiSelect & keyof DropiSelectAttributes as `prop:${K}`]?: DropiSelect[K] };
+        "dropi-switch": Omit<DropiSwitch, keyof DropiSwitchAttributes> & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes]?: DropiSwitch[K] } & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes as `attr:${K}`]?: DropiSwitchAttributes[K] } & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes as `prop:${K}`]?: DropiSwitch[K] };
+        "dropi-tag": Omit<DropiTag, keyof DropiTagAttributes> & { [K in keyof DropiTag & keyof DropiTagAttributes]?: DropiTag[K] } & { [K in keyof DropiTag & keyof DropiTagAttributes as `attr:${K}`]?: DropiTagAttributes[K] } & { [K in keyof DropiTag & keyof DropiTagAttributes as `prop:${K}`]?: DropiTag[K] };
+        "dropi-text-area": Omit<DropiTextArea, keyof DropiTextAreaAttributes> & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes]?: DropiTextArea[K] } & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes as `attr:${K}`]?: DropiTextAreaAttributes[K] } & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes as `prop:${K}`]?: DropiTextArea[K] };
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @component dropi-badge
+             * Status badge for user/account states.
+             */
+            "dropi-badge": LocalJSX.IntrinsicElements["dropi-badge"] & JSXBase.HTMLAttributes<HTMLDropiBadgeElement>;
+            /**
+             * @component dropi-button
+             * Primary action button with multiple types, severities, sizes and states.
+             * Supports pre/post icons and a loading spinner.
+             */
+            "dropi-button": LocalJSX.IntrinsicElements["dropi-button"] & JSXBase.HTMLAttributes<HTMLDropiButtonElement>;
+            /**
+             * @component dropi-checkbox
+             * A styled checkbox that emits change events.
+             * Supports form association via native `<input type="checkbox">` internals.
+             */
+            "dropi-checkbox": LocalJSX.IntrinsicElements["dropi-checkbox"] & JSXBase.HTMLAttributes<HTMLDropiCheckboxElement>;
+            /**
+             * @component dropi-icon
+             * Renders an SVG icon from the Dropi sprite sheet.
+             * The sprite must be available at `assets/icons/sprite.svg`.
+             */
+            "dropi-icon": LocalJSX.IntrinsicElements["dropi-icon"] & JSXBase.HTMLAttributes<HTMLDropiIconElement>;
+            /**
+             * @component dropi-input
+             * Text input with floating label, validation states, password toggle,
+             * number/letter restrictions, thousand separator, and native form association.
+             * ## Form usage (native HTML form)
+             * ```html
+             * <form>
+             * <dropi-input name="email" label="Email" required></dropi-input>
+             * </form>
+             * ```
+             * ## Controlled usage (React / Vue / Angular)
+             * Pass `value` and listen to `dropiInput` to update.
+             */
+            "dropi-input": LocalJSX.IntrinsicElements["dropi-input"] & JSXBase.HTMLAttributes<HTMLDropiInputElement>;
+            /**
+             * @component dropi-radio-button
+             * Styled radio button with label.
+             */
+            "dropi-radio-button": LocalJSX.IntrinsicElements["dropi-radio-button"] & JSXBase.HTMLAttributes<HTMLDropiRadioButtonElement>;
+            /**
+             * @component dropi-select
+             * Feature-rich select with support for:
+             * - Single / multi select
+             * - Grouped options
+             * - Search / filter
+             * - Country flags
+             * - Radio-style options with images
+             * - Inline (dropdownType) or bordered trigger
+             * - Native form association
+             * ## Usage
+             * Options must be set via JS property (not HTML attribute) for object arrays:
+             * ```js
+             * document.querySelector('dropi-select').options = [
+             * { id: 1, label: 'Option A' },
+             * { id: 2, label: 'Option B' },
+             * ];
+             * ```
+             */
+            "dropi-select": LocalJSX.IntrinsicElements["dropi-select"] & JSXBase.HTMLAttributes<HTMLDropiSelectElement>;
+            /**
+             * @component dropi-switch
+             * Toggle switch component. Emits dropiChange on toggle.
+             */
+            "dropi-switch": LocalJSX.IntrinsicElements["dropi-switch"] & JSXBase.HTMLAttributes<HTMLDropiSwitchElement>;
+            /**
+             * @component dropi-tag
+             * Colored tag/chip for statuses, categories, and labels.
+             */
+            "dropi-tag": LocalJSX.IntrinsicElements["dropi-tag"] & JSXBase.HTMLAttributes<HTMLDropiTagElement>;
+            /**
+             * @component dropi-text-area
+             * Multi-line text area with label, char counter, validation states,
+             * helper text, and native form association.
+             */
+            "dropi-text-area": LocalJSX.IntrinsicElements["dropi-text-area"] & JSXBase.HTMLAttributes<HTMLDropiTextAreaElement>;
+        }
+    }
+}