atomicuilibrary 0.0.1

package/dist/cjs/ui-meter-group.cjs.entry.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.js');
+
+const meterGroupCss = () => `.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}.meter-group{display:flex;flex-direction:column;gap:12px;font-family:inherit}.meter-container{display:flex;border-radius:8px;overflow:hidden;background-color:var(--bg-primary, #e5e7eb)}.meter-horizontal .meter-container{flex-direction:row;width:100%}.meter-horizontal.meter-sm .meter-container{height:16px}.meter-horizontal.meter-md .meter-container{height:24px}.meter-horizontal.meter-lg .meter-container{height:32px}.meter-vertical{flex-direction:row}.meter-vertical .meter-container{flex-direction:column-reverse;height:200px}.meter-vertical.meter-sm .meter-container{width:16px}.meter-vertical.meter-md .meter-container{width:24px}.meter-vertical.meter-lg .meter-container{width:32px}.meter-segment{display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;position:relative}.meter-segment:hover{filter:brightness(1.1)}.meter-value{color:var(--text-standard, #ffffff);font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);white-space:nowrap}.meter-horizontal .meter-segment:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.meter-horizontal .meter-segment:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:first-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:last-child{border-top-left-radius:8px;border-top-right-radius:8px}.meter-legend{display:flex;flex-wrap:wrap;gap:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px}.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}.legend-label{color:var(--text-secondary, #374151);font-weight:500}.legend-value{color:var(--text-muted, #6b7280);font-size:12px}.meter-circle-container{display:flex;justify-content:center;align-items:center}.meter-circle{width:100%;max-width:200px;height:auto}.meter-circle.meter-sm{max-width:120px}.meter-circle.meter-lg{max-width:280px}.circle-total-value{font-size:20px;font-weight:600;fill:var(--text-secondary, #374151)}.meter-sm .circle-total-value{font-size:14px}.meter-lg .circle-total-value{font-size:26px}`;
+
+const MeterGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.meterClick = index.createEvent(this, "meterClick");
+    }
+    /**
+     * Array of meter values
+     */
+    values = [];
+    /**
+     * Orientation of the meter
+     */
+    orientation = 'horizontal';
+    /**
+     * Height/thickness of the meter
+     */
+    size = 'md';
+    /**
+     * Show labels
+     */
+    showLabels = true;
+    /**
+     * Default library for icons
+     */
+    iconLibrary = 'default';
+    /**
+     * Show values
+     */
+    showValues = true;
+    /**
+     * Show legend
+     */
+    showLegend = false;
+    /**
+     * Shape of the meter
+     */
+    shape = 'line';
+    /**
+     * Minimum value
+     */
+    min = 0;
+    /**
+     * Maximum value
+     */
+    max = 100;
+    /**
+     * Interactive mode (clickable segments/legend)
+     */
+    interactive = false;
+    /**
+     * Enable animations for value changes
+     */
+    animated = true;
+    /**
+     * Emitted when a meter segment or legend item is clicked
+     */
+    meterClick;
+    handleValuesChange() {
+        this.normalizeProps();
+    }
+    componentWillLoad() {
+        this.normalizeProps();
+    }
+    normalizeProps() {
+        if (typeof this.values === 'string') {
+            try {
+                this.values = JSON.parse(this.values);
+            }
+            catch (e) {
+                console.warn('Failed to parse meter-group values', e);
+            }
+        }
+    }
+    getValues() {
+        return Array.isArray(this.values) ? this.values : [];
+    }
+    getPercentage(value) {
+        const range = this.max - this.min;
+        return ((value - this.min) / range) * 100;
+    }
+    getDefaultColor(index) {
+        const colors = ['#3bf673', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+        return colors[index % colors.length];
+    }
+    handleSegmentClick(item) {
+        if (this.interactive) {
+            this.meterClick.emit(item);
+        }
+    }
+    renderCircleMeter() {
+        const values = this.getValues();
+        const total = values.reduce((sum, item) => sum + item.value, 0);
+        const radius = 50;
+        const circumference = 2 * Math.PI * radius;
+        let currentOffset = 0;
+        const segments = values.map((item, index) => {
+            const percentage = (item.value / total) * 100;
+            const strokeDasharray = (percentage / 100) * circumference;
+            const strokeDashoffset = -currentOffset;
+            const isColorObject = typeof item.color === 'object' && item.color !== null;
+            const color = isColorObject ? item.color.from : (item.color || this.getDefaultColor(index));
+            const gradientId = `meter-grad-${index}-${Math.random().toString(36).substr(2, 4)}`;
+            const hasGradient = item.gradient || isColorObject;
+            currentOffset += strokeDasharray;
+            return {
+                ...item,
+                color,
+                gradientId,
+                strokeDasharray: `${strokeDasharray} ${circumference}`,
+                strokeDashoffset,
+                percentage: percentage.toFixed(1),
+                hasGradient
+            };
+        });
+        const strokeWidth = this.size === 'sm' ? 8 : this.size === 'lg' ? 16 : 12;
+        return (index.h("div", { class: "meter-circle-container" }, index.h("svg", { viewBox: "0 0 120 120", class: "meter-circle" }, index.h("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: "#e5e7eb", "stroke-width": strokeWidth }), index.h("defs", null, segments.map((segment) => {
+            const isColorObject = typeof segment.color === 'object' && segment.color !== null;
+            if (!segment.gradient && !isColorObject)
+                return null;
+            const from = isColorObject ? segment.color.from : (typeof segment.gradient === 'object' ? segment.gradient.from : segment.color);
+            const to = isColorObject ? segment.color.to : (typeof segment.gradient === 'object' ? segment.gradient.to : `${segment.color}99`);
+            return (index.h("linearGradient", { id: segment.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, index.h("stop", { offset: "0%", "stop-color": from }), index.h("stop", { offset: "100%", "stop-color": to })));
+        })), segments.map((segment) => (index.h("g", { onClick: () => this.handleSegmentClick(segment), style: { cursor: this.interactive ? 'pointer' : 'default' } }, index.h("title", null, `${segment.label}: ${segment.value}`), index.h("circle", { cx: "60", cy: "60", r: radius, fill: "none", stroke: (segment.gradient || (typeof segment.color === 'object' && segment.color !== null)) ? `url(#${segment.gradientId})` : segment.color, "stroke-width": strokeWidth, "stroke-dasharray": segment.strokeDasharray, "stroke-dashoffset": segment.strokeDashoffset, "stroke-linecap": "round", transform: "rotate(-90 60 60)", style: {
+                transition: this.animated ? 'stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease' : 'none'
+            } })))), this.showValues && (index.h("text", { x: "60", y: "60", "text-anchor": "middle", "dominant-baseline": "middle", class: "circle-total-value" }, total)))));
+    }
+    render() {
+        const values = this.getValues();
+        const total = values.reduce((sum, item) => sum + item.value, 0);
+        const containerClasses = [
+            'meter-group',
+            `meter-${this.orientation}`,
+            `meter-${this.size}`,
+            `meter-${this.shape}`,
+        ].join(' ');
+        return (index.h("div", { key: '3cf1fdd83af37d9f8f7f82e0caa61f889303aa45', class: containerClasses }, this.shape === 'circle' ? (this.renderCircleMeter()) : (index.h("div", { class: "meter-container" }, values.map((item, index$1) => {
+            const percentage = this.getPercentage(item.value);
+            const color = item.color || this.getDefaultColor(index$1);
+            return (index.h("div", { class: "meter-segment", style: {
+                    [this.orientation === 'horizontal' ? 'width' : 'height']: `${percentage}%`,
+                    background: (() => {
+                        const isColorObject = typeof item.color === 'object' && item.color !== null;
+                        if (item.gradient || isColorObject) {
+                            const from = isColorObject ? item.color.from : (typeof item.gradient === 'object' ? item.gradient.from : color);
+                            const to = isColorObject ? item.color.to : (typeof item.gradient === 'object' ? item.gradient.to : color + '99');
+                            return `linear-gradient(${this.orientation === 'horizontal' ? 'to right' : 'to top'}, ${from}, ${to})`;
+                        }
+                        return color;
+                    })(),
+                    cursor: this.interactive ? 'pointer' : 'default',
+                    transition: this.animated ? 'width 0.5s ease, height 0.5s ease' : 'none',
+                }, title: `${item.label}: ${item.value}`, onClick: () => this.handleSegmentClick(item) }, this.showValues && (index.h("span", { class: "meter-value" }, item.value))));
+        }))), (this.showLabels || this.showLegend) && (index.h("div", { key: '646404cbc3ac39fcf2956d292bd34d5c68162ff6', class: "meter-legend" }, values.map((item, index$1) => {
+            const color = item.color || this.getDefaultColor(index$1);
+            const percentage = ((item.value / total) * 100).toFixed(1);
+            return (index.h("div", { class: "legend-item", onClick: () => this.handleSegmentClick(item), style: { cursor: this.interactive ? 'pointer' : 'default' } }, index.h("span", { class: "legend-color", style: { backgroundColor: typeof color === 'object' && color !== null ? color.from : color } }), item.icon && (index.h("span", { class: "legend-icon", style: { marginRight: '6px' } }, index.h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.1em" }))), index.h("span", { class: "legend-label" }, item.label), this.showValues && (index.h("span", { class: "legend-value" }, item.value, " (", percentage, "%)"))));
+        })))));
+    }
+    static get watchers() { return {
+        "values": [{
+                "handleValuesChange": 0
+            }]
+    }; }
+};
+MeterGroup.style = meterGroupCss();
+
+exports.ui_meter_group = MeterGroup;

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

@@ -0,0 +1,104 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.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) {
+        index.registerInstance(this, hostRef);
+        this.navItemClick = index.createEvent(this, "navItemClick");
+        this.submenuToggle = index.createEvent(this, "submenuToggle");
+        this.popoverStateChange = index.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 (index.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 }, index.h("div", { key: 'f511c50817c20785b2ea46afe2df07a7f5508818', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter')
+                    this.handleClick();
+            } }, this.item.icon && (index.h("span", { key: '20bf50d7db7d55522e8bc9c1433bbeaf71639fa5', class: "nav-icon" }, index.h("ui-icon", { key: 'b1316aec36a00d9bd44b3a89072fa6a39b282490', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && index.h("span", { key: 'c2d027a25fa696b59231c99283761b03f637f603', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && index.h("span", { key: '0e89b2789f06b330f445588316008d6d0d2418f6', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (index.h("span", { key: '4d124c918ab7092a639d1026ec1ca964511da10c', class: "nav-arrow" }, index.h("ui-icon", { key: '9cc46d50a9a8b76d439def8e56774fc5b9855dfd', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (index.h("span", { key: 'e47643bc3dcf1a1b5b872d1114730f3c03e5bf80', class: "nav-arrow cascading" }, index.h("ui-icon", { key: '7de0a36cdbc167332010d3191199d6c16d4f66a0', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (index.h("div", { key: 'b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458', class: "nav-tooltip" }, this.item.label))));
+    }
+};
+NavigationItemComponent.style = navigationItemCss();
+
+exports.ui_navigation_item = NavigationItemComponent;

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

@@ -0,0 +1,191 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.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) {
+        index.registerInstance(this, hostRef);
+        this.numberChange = index.createEvent(this, "numberChange");
+        this.numberInput = index.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 index.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 (index.h(index.Host, { key: '34a35f828baa751fbaab05db0ea6d7e4eb42281e', class: { 'full-width': this.fullWidth } }, this.label && index.h("label", { key: '756934f01225ddbdd8235fc9081177dedc004531', class: "ni-label" }, this.label), index.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' && (index.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(), index.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 && (index.h("div", { key: 'e400b4eea2656a85a5c5df3487ead9f45367100b', class: "ni-stacker" }, index.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" }), index.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' && (index.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) && (index.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 (index.h("span", { class: "ni-affix ni-prefix" }, this.prefixText && index.h("span", null, this.prefixText), (this.prefixIcon || showDefaultIcon) && (index.h("ui-icon", { library: "lucide", name: this.prefixIcon || 'hash', size: "14px" }))));
+    }
+    renderSuffix() {
+        if (!this.suffixText)
+            return null;
+        return index.h("span", { class: "ni-affix ni-suffix" }, this.suffixText);
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+NumberInput.style = numberInputCss();
+
+exports.ui_number_input = NumberInput;