@dropi/ui 0.1.18 → 0.1.20

package/dist/collection/components/dropi-navbar/dropi-navbar.js

@@ -0,0 +1,286 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-navbar
+ * Top navigation bar with logo, nav items, notification bell, and user avatar.
+ */
+export class DropiNavbar {
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked. e.detail = item id */
+    dropiNavItemClick;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("nav", { key: '014281e03d0d6d2619add2319c3df90a5b6246a5', class: "navbar" }, h("div", { key: '4c1ac832042995edbe98e03d9ffd722879d7667c', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'b244829263b1fa8f10365be75f8e6a86780b23bb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '082a2ec0c22c31d0e50c6c4268deb91db91a4a0a', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'bb999a5b53a2e667715b8b8152e68f567bf6735d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt }))), items.length > 0 && (h("ul", { key: '0d8fc800d7e8eb42ba7971c323dcd7366c564c6f', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.dropiNavItemClick.emit(item.id), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'ce34e9989a27f875880cc674f68cd1348ba830ea', class: "navbar__right" }, h("button", { key: '8786409d275d115e363d4675d51d33a004881287', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '6d8475c54109cf3535464029d906779a1ef5613d', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'f38458c5cf0e805cf7bc20ca6d9c2f59570c2813', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'aa82799088ef91868967988a48b51d5426175733', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+            ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '512bb7945572d2a2c117d8fa27d82d1d53b78120', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'feac223f33239f1b1d2add2139aef3408a73de44', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+    }
+    static get is() { return "dropi-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-navbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-url",
+                "defaultValue": "''"
+            },
+            "logoAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo alt"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-alt",
+                "defaultValue": "'Logo'"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavItem[] | string",
+                    "resolved": "NavItem[] | string",
+                    "references": {
+                        "NavItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-navbar/dropi-navbar.tsx",
+                            "id": "src/components/dropi-navbar/dropi-navbar.tsx::NavItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation items (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "userName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-name",
+                "defaultValue": "''"
+            },
+            "userAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user-avatar",
+                "defaultValue": "''"
+            },
+            "notifications": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification count (0 = no badge)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications",
+                "defaultValue": "0"
+            },
+            "showMenuToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show menu toggle (mobile)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-menu-toggle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiNavItemClick",
+                "name": "dropiNavItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a nav item is clicked. e.detail = item id"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiNotificationsClick",
+                "name": "dropiNotificationsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when notification bell is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiUserClick",
+                "name": "dropiUserClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when avatar/user is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiMenuToggle",
+                "name": "dropiMenuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when mobile menu toggle clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.css

@@ -0,0 +1,67 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }
+
+.otp__label {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+  margin: 0;
+}
+
+.otp__inputs {
+  display: flex;
+  gap: var(--Size-4, 16px);
+}
+
+.otp__digit {
+  width: 56px;
+  height: 56px;
+  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);
+  border-radius: var(--Border-2, 8px);
+  text-align: center;
+  font-size: 22px;
+  font-weight: var(--font-weight-bold, 700);
+  font-family: inherit;
+  color: var(--Gray-Gray-800, #495057);
+  outline: none;
+  transition: border-color 0.15s ease;
+  background: var(--Neutral-White, #fff);
+}
+
+.otp__digit:focus { 
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+.otp__digit--filled { 
+  border: 1px solid var(--Success-Success-500, #0abb87); 
+  color: var(--Neutral-Neutral-900, #0e111a); 
+}
+.otp__digit--error { 
+  border: 1px solid var(--Error-Error-500, #f46a6b);
+}
+
+.otp__error {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+  text-align: center;
+}
+
+.otp__resend { text-align: center; }
+
+.otp__countdown {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.otp__resend-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+  cursor: pointer;
+  text-decoration: underline;
+}

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+const OTP_LENGTH = 6;
+const RESEND_SECONDS = 30;
+/**
+ * @component dropi-otp-send-code
+ * 6-digit OTP input with countdown timer and resend capability.
+ */
+export class DropiOtpSendCode {
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = true;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...this.digits];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...this.digitStates];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== ''))
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+    }
+    render() {
+        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
+        return (h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+                if (el)
+                    this.inputs[i] = el;
+            }, class: {
+                'otp__digit': true,
+                'otp__digit--filled': this.digitStates[i] === 'filled',
+                'otp__digit--error': this.error,
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+    }
+    static get is() { return "dropi-otp-send-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-otp-send-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "engine": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'email' | 'sms' | '2fa'",
+                    "resolved": "\"2fa\" | \"email\" | \"sms\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delivery method label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "engine",
+                "defaultValue": "'email'"
+            },
+            "labelContact": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Contact info (email/phone to show in label)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-contact",
+                "defaultValue": "''"
+            },
+            "showLabelContact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show contact label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label-contact",
+                "defaultValue": "true"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "digits": {},
+            "digitStates": {},
+            "countdown": {},
+            "canResend": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCodeCompleted",
+                "name": "dropiCodeCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when all 6 digits are entered. e.detail = the complete code string"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiResend",
+                "name": "dropiResend",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when resend is requested"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-paginator/dropi-paginator.css

@@ -19,12 +19,12 @@
 }
 
 .paginator-btn {
-  min-width: 32px;
+  width: 32px;
   height: 32px;
-  padding: 0 var(--Size-2, 8px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  background: var(--Neutral-White, #fff);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
   font-family: inherit;
@@ -32,12 +32,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition: background 0.15s ease;
 }
 
 .paginator-btn:hover:not(:disabled) {
   background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-300, #a3abbf);
 }
 
 .paginator-btn:disabled {
@@ -47,24 +46,28 @@
 
 .paginator-btn--active {
   background: var(--Primary-Primary-500, #f49a3d);
-  border-color: var(--Primary-Primary-500, #f49a3d);
   color: var(--Neutral-White, #fff);
   font-weight: var(--font-weight-bold, 700);
 }
 
 .paginator-btn--active:hover {
   background: var(--Primary-Primary-500, #f49a3d);
-  border-color: var(--Primary-Primary-500, #f49a3d);
 }
 
 .paginator-btn--arrow {
-  border-color: transparent;
-  background: transparent;
+  width: auto;
+  padding: 0 var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  gap: 4px;
 }
 
 .paginator-btn--arrow:hover:not(:disabled) {
   background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-100, #e6eaf2);
+}
+
+.paginator-label {
+  font-size: var(--font-size-s, 12px);
+  color: inherit;
 }
 
 .paginator-ellipsis {