@dropi/ui 0.1.0

package/dist/esm/index.js

@@ -0,0 +1 @@
+

package/dist/esm/loader.js

@@ -0,0 +1,10 @@
+import { g as globalScripts, b as bootstrapLazy } from './index-DFz-gwFP.js';
+export { s as setNonce } from './index-DFz-gwFP.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/types/components/dropi-badge/dropi-badge.d.ts

@@ -0,0 +1,12 @@
+export type BadgeState = 'pending' | 'active' | 'canceled' | 'frozen';
+/**
+ * @component dropi-badge
+ * Status badge for user/account states.
+ */
+export declare class DropiBadge {
+    /** Badge state: pending | active | canceled | frozen */
+    state: BadgeState;
+    private stateText;
+    private renderIcon;
+    render(): any;
+}

package/dist/types/components/dropi-button/dropi-button.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown';
+export type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'large' | 'normal' | 'small';
+export type ButtonState = 'default' | 'disabled' | 'loading';
+/**
+ * @component dropi-button
+ * Primary action button with multiple types, severities, sizes and states.
+ * Supports pre/post icons and a loading spinner.
+ */
+export declare class DropiButton {
+    /** Visual color palette */
+    type: ButtonType;
+    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
+    severity: ButtonSeverity;
+    /** Button size */
+    size: ButtonSize;
+    /** Button state */
+    state: ButtonState;
+    /** Icon name to show before the text */
+    preIcon: string;
+    /** Icon name to show after the text */
+    postIcon: string;
+    /** Button label */
+    text: string;
+    /** Emitted on click (not emitted when disabled or loading) */
+    dropiClick: EventEmitter<MouseEvent>;
+    private readonly colorMap;
+    private get iconSize();
+    private get color();
+    private get fontColor();
+    private handleClick;
+    private renderLoadingSpinner;
+    render(): any;
+}

package/dist/types/components/dropi-checkbox/dropi-checkbox.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-checkbox
+ * A styled checkbox that emits change events.
+ * Supports form association via native `<input type="checkbox">` internals.
+ */
+export declare class DropiCheckbox {
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Whether the checkbox is disabled */
+    disabled: boolean;
+    /** Emitted when the checked state changes */
+    dropiChange: EventEmitter<boolean>;
+    private changeState;
+    render(): any;
+}

package/dist/types/components/dropi-icon/dropi-icon.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @component dropi-icon
+ * Renders an SVG icon from the Dropi sprite sheet.
+ * The sprite must be available at `assets/icons/sprite.svg`.
+ */
+export declare class DropiIcon {
+    el: HTMLElement;
+    /** Icon name matching the id in the SVG sprite */
+    name: string;
+    /** Width of the icon (CSS value) */
+    width: string;
+    /** Height of the icon (CSS value) */
+    height: string;
+    /**
+     * Color of the icon. Accepts:
+     * - Hex color: `#ff0000`
+     * - CSS variable name without `--`: `Primary-Primary-500`
+     * - `currentColor` to inherit
+     */
+    color: string;
+    colorChanged(): void;
+    componentDidLoad(): void;
+    private applyColor;
+    render(): any;
+}

package/dist/types/components/dropi-input/dropi-input.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';
+/**
+ * @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.
+ */
+export declare class DropiInput {
+    internals: ElementInternals;
+    /** Input id. Defaults to label value. */
+    inputId: string;
+    /** Name attribute for native form submission */
+    name: string;
+    /** Floating or fixed label text */
+    label: string;
+    /** Placeholder text (visible in fixedLabel mode or on focus) */
+    placeholder: string;
+    /** Current value (controlled) */
+    value: string;
+    /** Max character length */
+    maxlength: number;
+    /** Disable the input */
+    disabled: boolean;
+    /** Mark as required (shows asterisk when showAsterisk is true) */
+    required: boolean;
+    /** Show the required asterisk on the label */
+    showAsterisk: boolean;
+    /** Show label above the input (fixed), instead of floating inside */
+    fixedLabel: boolean;
+    /** Keyboard input mode hint */
+    inputMode: InputMode;
+    /** Show password visibility toggle (renders as password field) */
+    passwordInput: boolean;
+    /** Apply thousand separator formatting (e.g. 1,000,000) */
+    moneyFormat: boolean;
+    /** Apply thousand separator without currency symbol */
+    thousandSeparator: boolean;
+    /** Only allow numeric characters */
+    onlyNumbers: boolean;
+    /** Allow decimal point when onlyNumbers is true */
+    allowDecimals: boolean;
+    /** Only allow letter characters */
+    onlyLetters: boolean;
+    /** Icon name shown inside the input (only visible when value is not empty) */
+    icon: string;
+    /** Color token for the icon */
+    iconColor: string;
+    /** Mark the field as invalid (consumer-controlled) */
+    invalid: boolean;
+    /** Helper / error text shown below the field */
+    helperText: string;
+    /** Only show helperText when the field is invalid */
+    showHelperOnlyOnError: boolean;
+    private showPassword;
+    private touched;
+    /** Emitted on every keystroke with the current value */
+    dropiInput: EventEmitter<string>;
+    /** Emitted on blur with the final value */
+    dropiChange: EventEmitter<string>;
+    /** Emitted on focus */
+    dropiFocus: EventEmitter<void>;
+    /** Emitted on blur */
+    dropiBlur: EventEmitter<void>;
+    valueChanged(val: string): void;
+    disabledChanged(val: boolean): void;
+    componentWillLoad(): void;
+    private handleInput;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private togglePassword;
+    private filterNumbers;
+    private filterLetters;
+    private isAllowedNumberKey;
+    private isAllowedLetterKey;
+    private formatThousands;
+    private get resolvedId();
+    private get inputType();
+    private get showHelper();
+    private get isInvalid();
+    render(): any;
+}

package/dist/types/components/dropi-radio-button/dropi-radio-button.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-radio-button
+ * Styled radio button with label.
+ */
+export declare class DropiRadioButton {
+    /** Label text displayed next to the radio */
+    label: string;
+    /** Input name (for grouping radio buttons) */
+    name: string;
+    /** Input id */
+    inputId: string;
+    /** Whether this radio is selected */
+    checked: boolean;
+    /**
+     * Set to true to programmatically reset this radio to unchecked.
+     * Useful when the parent needs to clear a group.
+     */
+    resetTrigger: boolean;
+    /** Emitted when the radio is selected */
+    dropiChange: EventEmitter<Event>;
+    onResetTrigger(val: boolean): void;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/dropi-select/dropi-select.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SelectOption, SelectOptionGroup } from './select.types';
+/**
+ * @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' },
+ * ];
+ * ```
+ */
+export declare class DropiSelect {
+    el: HTMLElement;
+    internals: ElementInternals;
+    private buttonRef;
+    private scrollDebounce;
+    private hasEmittedScrollEnd;
+    private lastScrollTop;
+    label: string;
+    placeholder: string;
+    /** Array of SelectOption or SelectOptionGroup */
+    options: SelectOption[] | SelectOptionGroup[];
+    name: string;
+    disabled: boolean;
+    invalid: boolean;
+    errorText: string;
+    helperText: string;
+    showObligatory: boolean;
+    /** Enables text search inside the dropdown */
+    searchEnabled: boolean;
+    /** Allows selecting multiple options */
+    multiSelect: boolean;
+    /** Renders trigger without border (inline/dropdown style) */
+    dropdownType: boolean;
+    /** Show country flags next to option labels */
+    showCountryFlags: boolean;
+    /** Renders options as radio buttons with optional image */
+    radioOptions: boolean;
+    /** Placeholder inside the search field */
+    placeHolderSearch: string;
+    /** Icon name shown before the trigger label */
+    preIcon: string;
+    /** Pre-select an option by id */
+    defaultSelectedId: string | number;
+    /** Controlled selected option (single select) */
+    value: SelectOption | null;
+    private isOpen;
+    private selectedOption;
+    private multiSelected;
+    private filteredOptions;
+    private searchTerm;
+    private dropdownStyle;
+    /** Emitted when an option is selected (single) or selection changes (multi) */
+    dropiChange: EventEmitter<SelectOption | SelectOption[]>;
+    /** Emitted when the selection is cleared */
+    dropiClear: EventEmitter<void>;
+    /** Emitted on search input */
+    dropiSearch: EventEmitter<string>;
+    /** Emitted when the list is scrolled to the end */
+    dropiScrollEnd: EventEmitter<void>;
+    /** Emitted on Enter key inside search */
+    dropiKeyEnter: EventEmitter<KeyboardEvent>;
+    componentWillLoad(): void;
+    optionsChanged(): void;
+    private normalizeOptions;
+    defaultChanged(newId: string | number): void;
+    valueChanged(v: SelectOption | null): void;
+    /** Select an option by its id */
+    setById(id: string | number): Promise<void>;
+    /** Select an option by its label */
+    setByLabel(label: string): Promise<void>;
+    /** Clear the current selection */
+    clearSelection(): Promise<void>;
+    /** Reset multi-select state and show a placeholder label */
+    resetMultiSelect(_placeholder?: string): Promise<void>;
+    handleOutsideClick(e: MouseEvent): void;
+    private applyDefaultSelection;
+    private flatOptions;
+    private get isGrouped();
+    private get triggerLabel();
+    private openDropdown;
+    private closeDropdown;
+    private toggleDropdown;
+    private selectOption;
+    private isOptionChecked;
+    private handleSearch;
+    private handleScroll;
+    private renderTrigger;
+    private renderOption;
+    private renderDropdown;
+    render(): any;
+}

package/dist/types/components/dropi-select/select.types.d.ts

@@ -0,0 +1,23 @@
+export interface SelectOption {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+    /** ISO-2 country code for flag display */
+    countryCode?: string;
+    /** Short label shown when flags are active */
+    shortLabel?: string;
+    /** Icon name shown before label */
+    preIcon?: string;
+    /** Image URL for radio-style options */
+    imageUrl?: string;
+    /** Secondary label shown alongside main label */
+    secondLabel?: string;
+    /** Internal: whether checked in multiSelect mode */
+    checked?: boolean;
+    /** Internal: whether image failed to load */
+    isFallback?: boolean;
+}
+export interface SelectOptionGroup {
+    category: string;
+    options: SelectOption[];
+}

package/dist/types/components/dropi-switch/dropi-switch.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-switch
+ * Toggle switch component. Emits dropiChange on toggle.
+ */
+export declare class DropiSwitch {
+    /** Whether the switch is on */
+    isChecked: boolean;
+    /** Whether the switch is disabled */
+    disabled: boolean;
+    /** Emitted when the toggle state changes */
+    dropiChange: EventEmitter<boolean>;
+    private onToggleChange;
+    render(): any;
+}

package/dist/types/components/dropi-tag/dropi-tag.d.ts

@@ -0,0 +1,25 @@
+export type TagState = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';
+export type TagType = 'primary' | 'secondary';
+/**
+ * @component dropi-tag
+ * Colored tag/chip for statuses, categories, and labels.
+ */
+export declare class DropiTag {
+    /** primary (filled) | secondary (soft) */
+    type: TagType;
+    /** Color state of the tag */
+    state: TagState;
+    /** Whether to show the icon */
+    showIcon: boolean;
+    /** Icon name from the sprite */
+    icon: string;
+    /** Label text */
+    text: string;
+    private readonly colorMap;
+    propsChanged(): void;
+    private get bgColor();
+    private get textColor();
+    private get iconColor();
+    private get hasContent();
+    render(): any;
+}

package/dist/types/components/dropi-text-area/dropi-text-area.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ResizeMode = 'none' | 'both' | 'horizontal' | 'vertical';
+/**
+ * @component dropi-text-area
+ * Multi-line text area with label, char counter, validation states,
+ * helper text, and native form association.
+ */
+export declare class DropiTextArea {
+    internals: ElementInternals;
+    /** Input id. Defaults to label. */
+    inputId: string;
+    /** Name for native form submission */
+    name: string;
+    /** Label shown above the textarea */
+    label: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Current value (controlled) */
+    value: string;
+    /** Max character length */
+    maxlength: number;
+    /** Min character length */
+    minlength: number;
+    /** Number of visible rows */
+    rows: number;
+    /** Resize behavior */
+    resize: ResizeMode;
+    /** Disable the textarea */
+    disabled: boolean;
+    /** Mark as required */
+    required: boolean;
+    /** Show the required asterisk */
+    showAsterisk: boolean;
+    /** Helper / error text below the field */
+    helperText: string;
+    /** Mark the field as invalid (consumer-controlled) */
+    invalid: boolean;
+    private touched;
+    /** Emitted on every keystroke */
+    dropiInput: EventEmitter<string>;
+    /** Emitted on blur */
+    dropiChange: EventEmitter<string>;
+    dropiFocus: EventEmitter<void>;
+    dropiBlur: EventEmitter<void>;
+    valueChanged(val: string): void;
+    componentWillLoad(): void;
+    private handleInput;
+    private handleBlur;
+    private get resolvedId();
+    private get isInvalid();
+    private get charCount();
+    render(): any;
+}