@dropi/ui 0.1.0

package/dist/esm/dropi-button.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--Size-3, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:400;font-size:14px;background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+
+const DropiButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClick = createEvent(this, "dropiClick");
+    }
+    /** Visual color palette */
+    type = 'default';
+    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
+    severity = 'primary';
+    /** Button size */
+    size = 'normal';
+    /** Button state */
+    state = 'default';
+    /** Icon name to show before the text */
+    preIcon = '';
+    /** Icon name to show after the text */
+    postIcon = '';
+    /** Button label */
+    text = '';
+    /** Emitted on click (not emitted when disabled or loading) */
+    dropiClick;
+    colorMap = {
+        default: 'Primary-Primary-',
+        success: 'Success-Success-',
+        error: 'Error-Error-',
+        info: 'Info-Info-',
+        legacy: 'Secondary-Secondary-',
+        warning: 'Warning-Warning-',
+        dropdown: 'Gray-Gray-',
+    };
+    get iconSize() {
+        if (this.size === 'large')
+            return '24px';
+        if (this.size === 'small')
+            return '16px';
+        return '18px';
+    }
+    get color() {
+        const intensity = this.state === 'disabled' ? '300' : '500';
+        return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;
+    }
+    get fontColor() {
+        if (this.severity === 'tertiary') {
+            return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
+        }
+        if (this.severity === 'secondary')
+            return this.color;
+        return 'Neutral-White';
+    }
+    handleClick(e) {
+        if (this.state !== 'disabled' && this.state !== 'loading') {
+            this.dropiClick.emit(e);
+        }
+    }
+    renderLoadingSpinner() {
+        return (h("svg", { class: "spin", width: this.iconSize, height: this.iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z", fill: `var(--${this.fontColor})` })));
+    }
+    render() {
+        const isDisabled = this.state === 'disabled' || this.state === 'loading';
+        const hasText = this.text !== '';
+        const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
+        const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
+        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+                btn: true,
+                'without-text': !hasText,
+                [this.severity]: true,
+                [this.type]: true,
+                [this.size]: true,
+                [this.state]: true,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+    }
+};
+DropiButton.style = dropiButtonCss();
+
+export { DropiButton as dropi_button };

package/dist/esm/dropi-checkbox.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
+
+const DropiCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+    }
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Whether the checkbox is disabled */
+    disabled = false;
+    /** Emitted when the checked state changes */
+    dropiChange;
+    changeState() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dropiChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: 'e5c7ef2fd09e5e18b71cbbdd96cc13d4fd99b8a5', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '2b6a006125e8e68fbba9285451d0d7a578c183d2', class: {
+                check: true,
+                isCheck: this.checked,
+                noCheck: !this.checked,
+                disabled: this.disabled,
+            } }, h("svg", { key: 'ce19f7e7e1159ee2915a78827775bd969484aa4a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'f41304ce433c5ea47f8eb964278e1a4c2c8184b2', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+    }
+    static get formAssociated() { return true; }
+};
+DropiCheckbox.style = dropiCheckboxCss();
+
+export { DropiCheckbox as dropi_checkbox };

package/dist/esm/dropi-icon.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, a as getElement, h } from './index-DFz-gwFP.js';
+
+const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor)}svg{fill:inherit}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+
+const DropiIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Icon name matching the id in the SVG sprite */
+    name = '';
+    /** Width of the icon (CSS value) */
+    width = '24px';
+    /** Height of the icon (CSS value) */
+    height = '24px';
+    /**
+     * Color of the icon. Accepts:
+     * - Hex color: `#ff0000`
+     * - CSS variable name without `--`: `Primary-Primary-500`
+     * - `currentColor` to inherit
+     */
+    color = 'currentColor';
+    colorChanged() {
+        this.applyColor();
+    }
+    componentDidLoad() {
+        this.applyColor();
+    }
+    applyColor() {
+        const fill = this.color.startsWith('#')
+            ? this.color
+            : this.color === 'currentColor'
+                ? 'currentColor'
+                : `var(--${this.color})`;
+        this.el.style.setProperty('--icon-fill', fill);
+    }
+    render() {
+        return (h("svg", { key: 'e71bfb0be9f68882bbd7314d0f6f3fd877fccf07', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'e6905c3ba9c68f463db62cde2cd64ce51093c2c0', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+    }
+    static get watchers() { return {
+        "color": [{
+                "colorChanged": 0
+            }]
+    }; }
+};
+DropiIcon.style = dropiIconCss();
+
+export { DropiIcon as dropi_icon };

package/dist/esm/dropi-input.entry.js

@@ -0,0 +1,208 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiInputCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px;text-align:left}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%;text-align:left}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+
+const DropiInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    // ── Identification ──────────────────────────────────────────
+    /** Input id. Defaults to label value. */
+    inputId = '';
+    /** Name attribute for native form submission */
+    name = '';
+    // ── Content ─────────────────────────────────────────────────
+    /** Floating or fixed label text */
+    label = '';
+    /** Placeholder text (visible in fixedLabel mode or on focus) */
+    placeholder = ' ';
+    /** Current value (controlled) */
+    value = '';
+    /** Max character length */
+    maxlength;
+    // ── Behavior ────────────────────────────────────────────────
+    /** Disable the input */
+    disabled = false;
+    /** Mark as required (shows asterisk when showAsterisk is true) */
+    required = false;
+    /** Show the required asterisk on the label */
+    showAsterisk = true;
+    /** Show label above the input (fixed), instead of floating inside */
+    fixedLabel = false;
+    /** Keyboard input mode hint */
+    inputMode = 'text';
+    // ── Input type modifiers ────────────────────────────────────
+    /** Show password visibility toggle (renders as password field) */
+    passwordInput = false;
+    /** Apply thousand separator formatting (e.g. 1,000,000) */
+    moneyFormat = false;
+    /** Apply thousand separator without currency symbol */
+    thousandSeparator = false;
+    /** Only allow numeric characters */
+    onlyNumbers = false;
+    /** Allow decimal point when onlyNumbers is true */
+    allowDecimals = false;
+    /** Only allow letter characters */
+    onlyLetters = false;
+    // ── Icon ────────────────────────────────────────────────────
+    /** Icon name shown inside the input (only visible when value is not empty) */
+    icon = '';
+    /** Color token for the icon */
+    iconColor = 'Gray-Gray-400';
+    // ── Validation ──────────────────────────────────────────────
+    /** Mark the field as invalid (consumer-controlled) */
+    invalid = false;
+    /** Helper / error text shown below the field */
+    helperText = '';
+    /** Only show helperText when the field is invalid */
+    showHelperOnlyOnError = false;
+    // ── Internal state ──────────────────────────────────────────
+    showPassword = false;
+    touched = false;
+    // ── Events ──────────────────────────────────────────────────
+    /** Emitted on every keystroke with the current value */
+    dropiInput;
+    /** Emitted on blur with the final value */
+    dropiChange;
+    /** Emitted on focus */
+    dropiFocus;
+    /** Emitted on blur */
+    dropiBlur;
+    valueChanged(val) {
+        this.internals.setFormValue(val);
+    }
+    disabledChanged(val) {
+        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.value ?? '');
+    }
+    // ── Handlers ────────────────────────────────────────────────
+    handleInput(e) {
+        let val = e.target.value;
+        if (this.onlyNumbers)
+            val = this.filterNumbers(val);
+        if (this.onlyLetters)
+            val = this.filterLetters(val);
+        if (this.moneyFormat || this.thousandSeparator)
+            val = this.formatThousands(val, this.moneyFormat);
+        this.value = val;
+        this.internals.setFormValue(val);
+        this.dropiInput.emit(val);
+    }
+    handleKeyDown(e) {
+        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+            e.preventDefault();
+        }
+        if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
+            e.preventDefault();
+        }
+    }
+    handleFocus() {
+        this.dropiFocus.emit();
+    }
+    handleBlur() {
+        this.touched = true;
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
+    }
+    togglePassword() {
+        if (this.disabled)
+            return;
+        this.showPassword = !this.showPassword;
+    }
+    // ── Helpers ─────────────────────────────────────────────────
+    filterNumbers(val) {
+        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
+        return val.replace(pattern, '');
+    }
+    filterLetters(val) {
+        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
+    }
+    isAllowedNumberKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true; // copy/paste/select-all
+        if (/^[0-9]$/.test(e.key))
+            return true;
+        if (this.allowDecimals && e.key === '.')
+            return true;
+        return false;
+    }
+    isAllowedLetterKey(e) {
+        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
+        if (allowed.includes(e.key))
+            return true;
+        if (e.ctrlKey || e.metaKey)
+            return true;
+        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
+    }
+    formatThousands(val, withCurrency) {
+        const raw = val.replace(/[^0-9.]/g, '');
+        const [integer, decimal] = raw.split('.');
+        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
+        return withCurrency ? `$${result}` : result;
+    }
+    // ── Computed ─────────────────────────────────────────────────
+    get resolvedId() {
+        return this.inputId || this.label;
+    }
+    get inputType() {
+        if (this.passwordInput)
+            return this.showPassword ? 'text' : 'password';
+        return 'text';
+    }
+    get showHelper() {
+        if (!this.helperText)
+            return false;
+        if (this.showHelperOnlyOnError)
+            return this.invalid && this.touched;
+        return true;
+    }
+    get isInvalid() {
+        return this.invalid && this.touched;
+    }
+    // ── Render ───────────────────────────────────────────────────
+    render() {
+        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
+        const showIconInline = !!this.icon && !!this.value;
+        return (h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+                'form-control': true,
+                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
+                'form-control-invalid': this.isInvalid,
+                'padding-icon': showIconInline,
+                'text-password': this.passwordInput && !this.showPassword,
+                'fixed-label-input': this.fixedLabel,
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', class: {
+                'disabled-helper': this.disabled,
+                'invalid-color': this.isInvalid,
+            } }, this.helperText)))))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }]
+    }; }
+};
+DropiInput.style = dropiInputCss();
+
+export { DropiInput as dropi_input };

package/dist/esm/dropi-radio-button.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+
+const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;width:20px;height:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
+
+const DropiRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange");
+    }
+    /** Label text displayed next to the radio */
+    label = '';
+    /** Input name (for grouping radio buttons) */
+    name = 'radio';
+    /** Input id */
+    inputId = 'radioButton';
+    /** Whether this radio is selected */
+    checked = false;
+    /**
+     * Set to true to programmatically reset this radio to unchecked.
+     * Useful when the parent needs to clear a group.
+     */
+    resetTrigger = false;
+    /** Emitted when the radio is selected */
+    dropiChange;
+    onResetTrigger(val) {
+        if (val)
+            this.checked = false;
+    }
+    handleChange(e) {
+        this.checked = e.target.checked;
+        this.dropiChange.emit(e);
+    }
+    render() {
+        return (h("div", { key: '3b31699bf088bee52465981074c0aea48b6fe112', class: "dropi-radio-button" }, h("label", { key: '072d19bd9c88739b849db0e264c65183eaab2132', htmlFor: this.inputId }, h("input", { key: '82d1600002e9dc2795cdc5c731997742adc8e2db', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "resetTrigger": [{
+                "onResetTrigger": 0
+            }]
+    }; }
+};
+DropiRadioButton.style = dropiRadioButtonCss();
+
+export { DropiRadioButton as dropi_radio_button };