atomicuilibrary 0.0.1

package/dist/esm/ui-navigation-item.entry.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, c as createEvent, h } from './index-DUsoYu9r.js';
+
+const navigationItemCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.nav-item{display:flex;flex-direction:column;cursor:pointer;border-radius:12px;margin-bottom:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;user-select:none;width:100%}.item-content{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;color:var(--nav-text-dim);transition:all 0.3s ease;position:relative;z-index:2;border-radius:10px}:host([orientation=horizontal]){display:flex;align-items:center;height:64px}:host([orientation=horizontal]) .nav-item{margin-bottom:0;height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .item-content{height:100%;padding:0 12px;justify-content:center}.nav-item:hover .item-content{background:var(--nav-hover-bg);color:var(--nav-text)}.nav-item.active .item-content,.nav-item.active-parent .item-content{background:var(--nav-active-bg);color:var(--nav-accent);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.nav-item.active::before,.nav-item.active-parent::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--nav-accent);z-index:3}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;transition:transform 0.3s ease}.nav-item:hover .nav-icon{transform:scale(1.1)}.nav-item.active .nav-icon,.nav-item.active-parent .nav-icon{color:var(--nav-accent);transform:scale(1.1)}.nav-item.active .nav-icon svg,.nav-item.active-parent .nav-icon svg{filter:drop-shadow(0 0 5px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.nav-label{font-size:14px;font-weight:500;white-space:nowrap;flex:1;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis}.nav-badge{background:var(--nav-accent-gradient);color:var(--text-standard, #ffffff);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:auto;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.nav-arrow{margin-left:auto;font-size:10px;color:var(--nav-text-dim);transition:transform 0.3s ease}.nav-item.open>.item-content .nav-arrow{transform:rotate(90deg)}.nav-submenu{list-style:none;margin:0;padding:0 0 8px 12px;overflow:hidden}.nav-item.collapsed .nav-label,.nav-item.collapsed .nav-badge,.nav-item.collapsed .nav-arrow,.nav-item.collapsed .nav-submenu:not(.floating-popover){display:none}.nav-item.collapsed .item-content{justify-content:center;padding:0;width:100%}:host([indentation="1"]) .nav-item{margin-left:8px;border-radius:8px}:host([indentation="1"]) .item-content{height:38px;font-size:13px}:host([indentation="1"]) .nav-item.active::before{width:2px;top:10px;bottom:10px}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-item.open .nav-submenu navigation-item{animation:slideDown 0.3s ease forwards}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover{background:var(--bg-primary, #1e293b) !important;z-index:2500 !important;box-shadow:0 10px 40px rgba(0, 0, 0, 0.5) !important;width:220px !important;display:flex !important;flex-direction:column !important;max-height:calc(100vh - 32px) !important;overflow-y:auto !important;overflow-x:hidden !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:not(.placement-top),:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-bottom{top:0;bottom:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top{bottom:0;top:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top::before{top:auto !important;bottom:18px !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar{width:6px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-track{background:transparent;border-radius:12px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb{background:rgba(148, 163, 184, 0.5);border-radius:12px;transition:background 0.3s ease}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb:hover{background:rgba(148, 163, 184, 0.8)}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover navigation-item,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover>navigation-item{display:block !important;width:100% !important;height:auto !important;min-height:40px !important;opacity:1 !important;visibility:visible !important;flex-shrink:0 !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:hover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.is-visible{visibility:visible !important;opacity:1 !important;pointer-events:auto !important;transform:translateX(0) translateY(0) !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering{overflow:visible !important;z-index:1001 !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::after{content:"";position:absolute;left:-25px;top:0;width:30px;height:100%;pointer-events:auto;background:transparent;z-index:2001}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu:not(.floating-popover){display:none !important}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top.is-visible{transform:translateX(0)}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::before{top:auto;bottom:18px}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::after{top:auto;bottom:0;height:100%}.nav-submenu.floating-popover::after{content:"";position:absolute;top:-20px;bottom:-20px;left:-24px;width:24px;background:transparent;z-index:-1}.nav-item:hover,.nav-item.hovering{z-index:1000;overflow:visible !important}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:100%;margin-left:12px;top:0}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading)::before{display:block;}.nav-submenu.floating-popover.cascading{left:100%;margin-left:4px;top:-4px;}.nav-submenu.floating-popover.cascading::before{top:18px;left:-6px}.popover-header{padding:12px 16px;font-size:11px;font-weight:700;color:var(--nav-text-dim);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255, 255, 255, 0.05);margin-bottom:4px;user-select:none;pointer-events:none}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--bg-primary, #1e293b);color:var(--text-standard, #f8fafc);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;margin-left:8px;pointer-events:none;animation:fadeIn 0.2s ease forwards}.nav-submenu.floating-popover::before,.nav-tooltip::before{content:"";position:absolute;left:-6px;top:18px;width:12px;height:12px;background:var(--bg-primary, #1e293b);transform:rotate(45deg);border-left:1px solid rgba(255, 255, 255, 0.1);border-bottom:1px solid rgba(255, 255, 255, 0.1);z-index:-1}.nav-tooltip::before{top:50%;margin-top:-6px}:host([orientation=horizontal]) .nav-submenu.floating-popover::before{content:"" !important;display:block !important;visibility:visible !important;opacity:1 !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;margin:0 !important;width:12px !important;height:12px !important;background:var(--bg-primary, #1e293b) !important;transform:translateX(-50%) rotate(45deg) !important;border:none !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important;pointer-events:none !important}@keyframes fadeIn{from{opacity:0;transform:translateY(-50%) translateX(-5px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.nav-submenu.floating-popover ::slotted(navigation-item),.nav-submenu.floating-popover navigation-item{margin-left:0 !important}.nav-item.collapsed:hover{overflow:visible}.nav-item.in-popover .item-content{height:40px;padding:0 12px;border-radius:8px}.nav-item.in-popover{margin-left:0 !important;margin-bottom:2px}.nav-item.in-popover.active .item-content{background:var(--nav-active-bg);border:1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.nav-item.in-popover.active .nav-label{color:var(--nav-accent) !important;font-weight:700}.nav-item.in-popover.active::before{top:8px;bottom:8px;width:3px}.nav-arrow.cascading{margin-left:auto;opacity:0.5;transition:transform 0.3s ease}.nav-item.placement-top .nav-arrow.cascading,.nav-submenu.placement-top .nav-arrow.cascading{transform:rotate(-90deg);}.nav-submenu:not(.placement-top) .nav-arrow.cascading{transform:rotate(0deg)}:host([indentation="0"]) .nav-item.in-popover{margin-left:0}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:var(--text-standard, #ffffff) !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4)}.nav-item.is-user-profile .nav-icon svg{width:18px;height:18px}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-text)}:host([orientation=horizontal]){height:100%}:host([orientation=horizontal]) .nav-item{height:100%;flex-direction:row;align-items:center;justify-content:center;margin-bottom:0;border-radius:0;padding:0 4px}:host([orientation=horizontal]) .item-content{height:100%;padding:0 16px;border-radius:0;font-weight:600;transition:all 0.2s ease}:host([orientation=horizontal]) .nav-item:hover .item-content{background:rgba(255, 255, 255, 0.08)}:host([orientation=horizontal]) .nav-item.active::before,:host([orientation=horizontal]) .nav-item.active-parent::before{top:auto;bottom:0;left:0;right:0;width:100%;height:3px;border-radius:4px 4px 0 0}:host([orientation=horizontal]) .nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:0 !important;top:100% !important;bottom:auto !important;margin-left:0 !important;margin-top:8px !important;transform:translateY(-5px)}:host([orientation=horizontal][indentation="0"]) .nav-arrow{transform:rotate(90deg);}:host([orientation=horizontal][indentation="0"]) .nav-item.open>.item-content .nav-arrow{transform:rotate(-90deg);}:host([orientation=horizontal][indentation="1"]) .nav-arrow.cascading,:host([orientation=horizontal][indentation="2"]) .nav-arrow.cascading{transform:rotate(0deg);}:host([orientation=horizontal]) .nav-submenu.floating-popover::after{top:-12px;left:0;right:0;height:12px;width:100%}:host([orientation=horizontal]) .nav-submenu.floating-popover:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-bottom:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-top:not(.cascading)::before{content:"" !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:translateX(-50%) rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;border-left:none !important;border-bottom:none !important;z-index:-1 !important}:host([orientation=horizontal]) .nav-submenu.floating-popover.cascading::before{content:"" !important;position:absolute !important;left:-6px !important;right:auto !important;top:18px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:none !important;border-right:none !important;border-left:1px solid rgba(255, 255, 255, 0.1) !important;border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important}`;
+
+const NavigationItemComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.navItemClick = createEvent(this, "navItemClick");
+        this.submenuToggle = createEvent(this, "submenuToggle");
+        this.popoverStateChange = createEvent(this, "popoverStateChange");
+    }
+    item;
+    collapsed = false;
+    active = false;
+    activeId = '';
+    open = false;
+    animationDuration = 350;
+    indentation = 0;
+    forcePopover = false;
+    orientation = 'vertical';
+    iconLibrary = 'default';
+    isHovering = false;
+    popoverPlacement = 'bottom';
+    hoverTimeout;
+    navItemClick;
+    submenuToggle;
+    popoverStateChange;
+    handleMouseEnter = (ev) => {
+        if (this.hoverTimeout)
+            clearTimeout(this.hoverTimeout);
+        // Always set hovering state
+        this.isHovering = true;
+        // Edge detection: for horizontal mode, always open at bottom
+        // For vertical mode, check if we are in the bottom 40% of the screen
+        if (this.orientation === 'horizontal') {
+            this.popoverPlacement = 'bottom';
+        }
+        else {
+            const trigger = ev.currentTarget;
+            const rect = trigger.getBoundingClientRect();
+            const winHeight = window.innerHeight;
+            this.popoverPlacement = rect.top > winHeight * 0.6 ? 'top' : 'bottom';
+        }
+        const hasChildren = this.item.children && this.item.children.length > 0;
+        // Trigger popover for: collapsed sidebar, forced popover, OR footer items (placement-top)
+        // This ensures user profile in expanded mode still uses popover with edge detection
+        if ((this.collapsed || this.forcePopover || this.popoverPlacement === 'top') && hasChildren) {
+            this.popoverStateChange.emit(true);
+        }
+    };
+    handleMouseLeave = () => {
+        this.hoverTimeout = setTimeout(() => {
+            this.isHovering = false;
+            this.popoverStateChange.emit(false);
+        }, 50);
+    };
+    hasActiveChild(items = this.item.children) {
+        if (!items)
+            return false;
+        return items.some(child => child.id === this.activeId ||
+            (child.children && this.hasActiveChild(child.children)));
+    }
+    handleClick = () => {
+        const hasChildren = this.item.children && this.item.children.length > 0;
+        // If it's a popover-only item (collapsed or forced), clicking should not toggle accordion
+        if (hasChildren && (this.collapsed || this.forcePopover)) {
+            return;
+        }
+        if (hasChildren) {
+            this.submenuToggle.emit(this.item.id);
+        }
+        else {
+            this.navItemClick.emit(this.item);
+        }
+    };
+    render() {
+        const hasChildren = this.item.children && this.item.children.length > 0;
+        const isDirectlyActive = this.active || this.item.id === this.activeId;
+        const isParentOfActive = this.hasActiveChild();
+        const isPopoverMode = this.forcePopover || this.item.id === 'user-profile';
+        return (h("li", { key: 'b344aa6c6a2034b11c7bfb861ef51d24fb1ddc21', class: {
+                'nav-item': true,
+                'active': isDirectlyActive,
+                'active-parent': isParentOfActive,
+                'disabled': this.item.disabled,
+                'has-children': hasChildren,
+                'open': this.open && !isPopoverMode,
+                'collapsed': this.collapsed,
+                'hovering': this.isHovering,
+                'in-popover': this.forcePopover,
+                'is-user-profile': this.item.id === 'user-profile',
+                'placement-top': this.popoverPlacement === 'top',
+                'placement-bottom': this.popoverPlacement === 'bottom'
+            }, tabindex: this.item.disabled ? -1 : 0, "aria-disabled": this.item.disabled ? 'true' : 'false', "aria-expanded": (this.open && !isPopoverMode) ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f511c50817c20785b2ea46afe2df07a7f5508818', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter')
+                    this.handleClick();
+            } }, this.item.icon && (h("span", { key: '20bf50d7db7d55522e8bc9c1433bbeaf71639fa5', class: "nav-icon" }, h("ui-icon", { key: 'b1316aec36a00d9bd44b3a89072fa6a39b282490', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: 'c2d027a25fa696b59231c99283761b03f637f603', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '0e89b2789f06b330f445588316008d6d0d2418f6', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: '4d124c918ab7092a639d1026ec1ca964511da10c', class: "nav-arrow" }, h("ui-icon", { key: '9cc46d50a9a8b76d439def8e56774fc5b9855dfd', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: 'e47643bc3dcf1a1b5b872d1114730f3c03e5bf80', class: "nav-arrow cascading" }, h("ui-icon", { key: '7de0a36cdbc167332010d3191199d6c16d4f66a0', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: 'b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458', class: "nav-tooltip" }, this.item.label))));
+    }
+};
+NavigationItemComponent.style = navigationItemCss();
+
+export { NavigationItemComponent as ui_navigation_item };

package/dist/esm/ui-number-input.entry.js

@@ -0,0 +1,189 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
+
+const numberInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host.full-width{width:100%}:host.full-width .ni-wrapper{width:100%}.ni-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--ui-text-primary, var(--text-primary, #111827)));margin-bottom:8px;transition:color 0.2s ease}.ni-wrapper{display:inline-flex;align-items:center;border:1.5px solid var(--ui-border-default, var(--border-strong, #d1d5db));border-radius:10px;background:var(--ui-bg-var(--bg-primary, #ffffff), var(--bg-primary, #ffffff));transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused{border-color:var(--ui-color-primary, var(--color-primary, #10b981));box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12), 0 4px 12px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused .ni-label{color:var(--ui-color-primary, var(--color-primary, #10b981))}.ni-wrapper.ni-error{border-color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error .ni-label{color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error.ni-focused{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.12)}.ni-wrapper.ni-disabled{background:var(--ui-bg-muted, var(--bg-primary, #f9fafb));opacity:0.65;pointer-events:none;cursor:not-allowed}.ni-wrapper.ni-sm{height:32px;font-size:12px;border-radius:6px}.ni-wrapper.ni-md{height:40px;font-size:14px}.ni-wrapper.ni-lg{height:48px;font-size:16px;border-radius:12px}.ni-wrapper.ni-plain{border:none;background:transparent;box-shadow:none;height:auto;overflow:visible}.ni-wrapper.ni-plain.ni-focused{box-shadow:none}.ni-btn{display:flex;align-items:center;justify-content:center;width:36px;height:100%;border:none;background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s, color 0.15s;flex-shrink:0;line-height:1}.ni-btn:hover:not(:disabled){background:var(--bg-primary, #e5e7eb);color:var(--bg-primary, #111)}.ni-btn:active:not(:disabled){background:var(--bg-secondary, #d1d5db)}.ni-btn:disabled{opacity:0.4;cursor:not-allowed}.ni-btn.ni-dec{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-btn.ni-inc{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker{display:flex;flex-direction:column;height:100%;border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker .ni-btn{width:28px;height:50%;font-size:9px}.ni-stacker .ni-btn.ni-inc-sm{border-bottom:1px solid var(--border-default, #e5e7eb);border-radius:0}.ni-stacker .ni-btn.ni-dec-sm{border-radius:0}.ni-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:inherit;color:var(--text-primary, #111827);text-align:center;padding:0 8px;appearance:textfield;-moz-appearance:textfield}.ni-input::-webkit-outer-spin-button,.ni-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ni-affix{padding:0 8px;color:var(--label-subtitle-color, var(--text-muted, #6b7280));font-size:13px;white-space:nowrap;background:var(--bg-primary, #f9fafb);height:100%;display:flex;align-items:center}.ni-affix.ni-prefix{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-affix.ni-suffix{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-helper{font-size:12px;margin-top:5px;color:var(--label-subtitle-color, var(--text-muted, #6b7280))}.ni-helper.ni-helper-error{color:var(--color-danger, #ef4444)}`;
+
+const NumberInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.numberChange = createEvent(this, "numberChange");
+        this.numberInput = createEvent(this, "numberInput");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    /** Whether to show the type-based prefix icon (e.g. hash for numbers) */
+    showTypeIcon = false;
+    /** Prefix icon to display */
+    prefixIcon = '';
+    /** Name of the input */
+    name;
+    /** Current value */
+    value = 0;
+    /** Minimum value */
+    min = -Infinity;
+    /** Maximum value */
+    max = Infinity;
+    /** Step amount */
+    step = 1;
+    /** Label text */
+    label = '';
+    /** Placeholder */
+    placeholder = '0';
+    /** Disabled state */
+    disabled = false;
+    /** Readonly state */
+    readonly = false;
+    /** Size variant */
+    size = 'md';
+    /** Style variant */
+    variant = 'default';
+    /** Prefix text/symbol (e.g. '$') */
+    prefixText = '';
+    /** Suffix text/symbol (e.g. 'kg') */
+    suffixText = '';
+    /** Helper text below input */
+    helperText = '';
+    /** Error text — also sets error state */
+    errorText = '';
+    /** Number of decimal places (-1 = no rounding) */
+    precision = -1;
+    /** Show stepper buttons */
+    showStepper = false;
+    /** Controls layout of stepper: 'sides' | 'right' | 'none' */
+    stepperLayout = 'sides';
+    /** Keyboard shortcut: scroll wheel to change value */
+    scrollWheel = true;
+    /** Full width */
+    fullWidth = false;
+    /** RTL support */
+    rtl = false;
+    inputValue = '0';
+    isFocused = false;
+    stepperInterval;
+    numberChange;
+    numberInput;
+    componentWillLoad() {
+        if (this.variant === 'plain') {
+            this.showStepper = false;
+        }
+        this.inputValue = this.format(this.value);
+        this.internals.setFormValue(this.value.toString());
+    }
+    valueChanged(val) {
+        this.inputValue = this.format(val);
+        this.internals.setFormValue(val.toString());
+    }
+    format(val) {
+        if (this.precision >= 0)
+            return val.toFixed(this.precision);
+        return String(val);
+    }
+    clamp(val) {
+        return Math.min(this.max, Math.max(this.min, val));
+    }
+    increment = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const next = this.clamp(this.value + this.step);
+        this.value = next;
+        this.numberChange.emit(next);
+    };
+    decrement = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const next = this.clamp(this.value - this.step);
+        this.value = next;
+        this.numberChange.emit(next);
+    };
+    startStepping = (dir) => {
+        if (this.disabled || this.readonly)
+            return;
+        const fn = dir === 'inc' ? this.increment : this.decrement;
+        fn();
+        this.stepperInterval = setInterval(fn, 100);
+    };
+    stopStepping = () => {
+        clearInterval(this.stepperInterval);
+    };
+    handleInput = (e) => {
+        const raw = e.detail;
+        this.inputValue = raw;
+        const parsed = parseFloat(raw);
+        if (!isNaN(parsed)) {
+            this.value = parsed;
+            this.numberInput.emit(parsed);
+        }
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        const parsed = parseFloat(this.inputValue);
+        if (isNaN(parsed)) {
+            this.value = this.clamp(0);
+        }
+        else {
+            this.value = this.clamp(parsed);
+        }
+        this.inputValue = this.format(this.value);
+        this.numberChange.emit(this.value);
+    };
+    handleWheel = (e) => {
+        if (!this.scrollWheel || this.disabled || !this.isFocused)
+            return;
+        e.preventDefault();
+        if (e.deltaY < 0)
+            this.increment();
+        else
+            this.decrement();
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.increment();
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.decrement();
+        }
+    };
+    render() {
+        const isError = !!this.errorText;
+        const isRight = this.stepperLayout === 'right';
+        return (h(Host, { key: '34a35f828baa751fbaab05db0ea6d7e4eb42281e', class: { 'full-width': this.fullWidth } }, this.label && h("label", { key: '756934f01225ddbdd8235fc9081177dedc004531', class: "ni-label" }, this.label), h("div", { key: '822ac22167cb75cdcb16274d4a5fa95291875cc9', class: {
+                'ni-wrapper': true,
+                [`ni-${this.size}`]: true,
+                'ni-error': isError,
+                'ni-disabled': this.disabled,
+                'ni-focused': this.isFocused,
+                'ni-right': isRight,
+                'ni-rtl': this.rtl,
+                'ni-plain': this.variant === 'plain',
+            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: '714881b359dfc953c8b6f93fb0295c0ae2f134ea', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), h("ui-input", { key: 'b2d56228f500995d4f6fbd78c639e6383c36bd3e', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (h("div", { key: 'e400b4eea2656a85a5c5df3487ead9f45367100b', class: "ni-stacker" }, h("ui-button", { key: '9cd89756bc4792dccc9657ca39b6d6cff2a9e819', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), h("ui-button", { key: '42248f0ccc65d42c903775f8e5fcbd97f76e04e7', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: 'dbf5c5d29bf6945baaaa96a46915440088f2509f', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (h("div", { key: 'f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
+    }
+    renderPrefix() {
+        const hasPrefix = this.prefixText || this.prefixIcon;
+        const showDefaultIcon = this.showTypeIcon && !hasPrefix;
+        if (!hasPrefix && !showDefaultIcon)
+            return null;
+        return (h("span", { class: "ni-affix ni-prefix" }, this.prefixText && h("span", null, this.prefixText), (this.prefixIcon || showDefaultIcon) && (h("ui-icon", { library: "lucide", name: this.prefixIcon || 'hash', size: "14px" }))));
+    }
+    renderSuffix() {
+        if (!this.suffixText)
+            return null;
+        return h("span", { class: "ni-affix ni-suffix" }, this.suffixText);
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+NumberInput.style = numberInputCss();
+
+export { NumberInput as ui_number_input };

package/dist/esm/ui-otp-input.entry.js

@@ -0,0 +1,244 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-DUsoYu9r.js';
+
+const otpInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58))}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}`;
+
+const OtpInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.otpChange = createEvent(this, "otpChange");
+        this.otpComplete = createEvent(this, "otpComplete");
+        this.otpSubmit = createEvent(this, "otpSubmit");
+        this.resendClick = createEvent(this, "resendClick");
+    }
+    get el() { return getElement(this); }
+    length = 6;
+    value = '';
+    label = '';
+    helperText = '';
+    errorText = '';
+    disabled = false;
+    readonly = false;
+    required = false;
+    type = 'number';
+    autoFocus = true;
+    secure = false;
+    size = 'md';
+    color = 'primary';
+    variant = 'default';
+    invalid = false;
+    skeleton = false;
+    autoSubmit = false;
+    groupSize = 0; // 0 means no grouping
+    placeholder = '';
+    /** RTL support */
+    rtl = false;
+    /** Resend interval in seconds */
+    resendInterval = 60;
+    /** Custom label for resend button */
+    resendLabel = 'Resend Code';
+    otpValues = [];
+    focusedIndex = -1;
+    internalInvalid = false;
+    internalErrorText = '';
+    resendTimer = 0;
+    resendIntervalId;
+    otpChange;
+    otpComplete;
+    otpSubmit;
+    resendClick;
+    inputRefs = [];
+    componentWillLoad() {
+        this.otpValues = new Array(this.length).fill('');
+        if (this.value) {
+            const chars = this.value.split('').slice(0, this.length);
+            this.otpValues = [...chars, ...new Array(this.length - chars.length).fill('')];
+        }
+    }
+    startResendTimer() {
+        this.resendTimer = this.resendInterval;
+        this.resendIntervalId = setInterval(() => {
+            if (this.resendTimer > 0) {
+                this.resendTimer--;
+            }
+            else {
+                clearInterval(this.resendIntervalId);
+            }
+        }, 1000);
+    }
+    handleResend = () => {
+        if (this.resendTimer > 0)
+            return;
+        this.resendClick.emit();
+        this.startResendTimer();
+    };
+    disconnectedCallback() {
+        if (this.resendIntervalId)
+            clearInterval(this.resendIntervalId);
+    }
+    componentDidLoad() {
+        if (this.autoFocus && this.inputRefs[0]) {
+            this.inputRefs[0].focus();
+        }
+    }
+    handleValueChange(newValue) {
+        if (newValue === this.otpValues.join(''))
+            return;
+        const chars = newValue.split('').slice(0, this.length);
+        this.otpValues = [...chars, ...new Array(this.length - chars.length).fill('')];
+    }
+    handleInput = (e, index) => {
+        let inputValue = e.detail;
+        // Only allow single character
+        if (inputValue.length > 1) {
+            inputValue = inputValue.slice(-1);
+        }
+        // Validate input type
+        if ((this.type === 'number' || this.type === 'numeric') && inputValue && !/^\d$/.test(inputValue)) {
+            this.showTemporaryError('Only numbers allowed');
+            return;
+        }
+        if (this.type === 'alphanumeric' && inputValue && !/^[a-zA-Z0-9]$/.test(inputValue)) {
+            this.showTemporaryError('Only letters and numbers allowed');
+            return;
+        }
+        // Clear error if valid input
+        this.internalInvalid = false;
+        this.internalErrorText = '';
+        this.otpValues[index] = inputValue;
+        this.otpValues = [...this.otpValues];
+        const fullValue = this.otpValues.join('');
+        this.value = fullValue;
+        const isComplete = fullValue.length === this.length && !fullValue.includes('');
+        this.otpChange.emit({ value: fullValue, complete: isComplete });
+        if (isComplete) {
+            this.otpComplete.emit({ value: fullValue });
+            if (this.autoSubmit) {
+                this.handleSubmit();
+            }
+        }
+        // Move to next input
+        if (inputValue && index < this.length - 1) {
+            this.inputRefs[index + 1]?.focus();
+        }
+    };
+    handleSubmit = () => {
+        this.otpSubmit.emit({ value: this.value });
+    };
+    handleKeyDown = (e, index) => {
+        if (e.key === 'Backspace') {
+            if (!this.otpValues[index] && index > 0) {
+                this.otpValues[index - 1] = '';
+                this.otpValues = [...this.otpValues];
+                this.inputRefs[index - 1]?.focus();
+                const fullValue = this.otpValues.join('');
+                this.value = fullValue;
+                this.otpChange.emit({ value: fullValue, complete: false });
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            if (this.rtl) {
+                if (index < this.length - 1)
+                    this.inputRefs[index + 1]?.focus();
+            }
+            else {
+                this.inputRefs[index - 1]?.focus();
+            }
+        }
+        else if (e.key === 'ArrowRight' && index < this.length - 1) {
+            if (this.rtl) {
+                this.inputRefs[index - 1]?.focus();
+            }
+            else {
+                this.inputRefs[index + 1]?.focus();
+            }
+        }
+    };
+    handlePaste = (e) => {
+        e.preventDefault();
+        const pasteData = e.clipboardData.getData('text');
+        const chars = pasteData.split('').slice(0, this.length);
+        if ((this.type === 'number' || this.type === 'numeric') && !/^\d+$/.test(chars.join(''))) {
+            this.showTemporaryError('Only numbers allowed');
+            return;
+        }
+        if (this.type === 'alphanumeric' && !/^[a-zA-Z0-9]+$/.test(chars.join(''))) {
+            this.showTemporaryError('Only letters and numbers allowed');
+            return;
+        }
+        this.internalInvalid = false;
+        this.internalErrorText = '';
+        this.otpValues = [...chars, ...new Array(this.length - chars.length).fill('')];
+        const fullValue = this.otpValues.join('');
+        this.value = fullValue;
+        const isComplete = fullValue.length === this.length;
+        this.otpChange.emit({ value: fullValue, complete: isComplete });
+        if (isComplete) {
+            this.otpComplete.emit({ value: fullValue });
+            this.inputRefs[this.length - 1]?.focus();
+        }
+        else {
+            this.inputRefs[chars.length]?.focus();
+        }
+    };
+    errorTimeout;
+    showTemporaryError(message) {
+        this.internalInvalid = true;
+        this.internalErrorText = message;
+        if (this.errorTimeout) {
+            clearTimeout(this.errorTimeout);
+        }
+        this.errorTimeout = setTimeout(() => {
+            this.internalInvalid = false;
+            this.internalErrorText = '';
+        }, 2000);
+    }
+    handleFocus = (index) => {
+        if (this.focusedIndex === index)
+            return;
+        this.focusedIndex = index;
+        // Select all text on focus
+        this.inputRefs[index]?.select();
+    };
+    handleBlur = () => {
+        this.focusedIndex = -1;
+    };
+    clear() {
+        this.otpValues = new Array(this.length).fill('');
+        this.value = '';
+        this.otpChange.emit({ value: '', complete: false });
+        this.inputRefs[0]?.focus();
+    }
+    focus() {
+        this.inputRefs[0]?.focus();
+    }
+    render() {
+        const isInvalid = this.invalid || this.internalInvalid;
+        const currentErrorText = this.internalErrorText || this.errorText;
+        const containerClasses = {
+            'otp-input': true,
+            [`otp-input-${this.size}`]: true,
+            [`otp-input-${this.color}`]: true,
+            [`otp-input-${this.variant}`]: true,
+            'otp-input-disabled': this.disabled,
+            'otp-input-readonly': this.readonly,
+            'otp-input-invalid': isInvalid,
+            'otp-input-skeleton': this.skeleton,
+        };
+        return (h("div", { key: '8fe5324ea7e186d84beea09373bf235f93921708', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { key: 'baa571a85ef85c818b191b46160b42a50b465585', class: "otp-label" }, this.label), h("div", { key: '48cb77b47f529d79d9ffcc84af84307f1ecc8a1a', class: "otp-inputs-container" }, this.otpValues.map((val, index) => {
+            const showDivider = this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index !== this.length - 1;
+            return (h(Fragment, null, h("ui-input", { ref: el => (this.inputRefs[index] = el), type: this.secure ? 'password' : 'text', inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
+                    'otp-input-field': true,
+                    'focused': this.focusedIndex === index,
+                    'filled': !!val,
+                }, value: val, placeholder: this.placeholder, disabled: this.disabled || this.skeleton, readonly: this.readonly, onInputChange: e => this.handleInput(e, index), onInputKeydown: e => this.handleKeyDown(e.detail, index), onPasteInternal: e => (index === 0 ? this.handlePaste(e.detail) : e.detail.preventDefault()), onFocusInternal: () => this.handleFocus(index), onInputBlur: this.handleBlur, ariaLabel: `Digit ${index + 1}`, size: this.size, align: "center" }), showDivider && h("div", { class: "otp-divider" })));
+        })), isInvalid && currentErrorText && (h("div", { key: 'eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa', class: "error-text" }, h("ui-icon", { key: '50163f7f1957e40f76d80c4b93548b0cf308b3bf', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && h("div", { key: '0665d1b8ed1e46af72017732bcf59fa4b2ad1e14', class: "helper-text" }, this.helperText), h("div", { key: '2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5', class: "otp-resend-container" }, h("ui-button", { key: '8f93b95638c39ce06cd1b5bf55172ca3b4045580', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+OtpInput.style = otpInputCss();
+
+export { OtpInput as ui_otp_input };