@zuzjs/ui 0.5.5 → 0.5.6

package/dist/hooks/useIntersectionObserver.d.ts

@@ -4,5 +4,5 @@ interface IntersectionObserverOptions {
     rootMargin?: string;
     threshold?: number | number[];
 }
-declare const useIntersectionObserver: (ref: RefObject<HTMLElement | null>, options?: IntersectionObserverOptions) => number;
+declare const useIntersectionObserver: (refs: RefObject<HTMLElement | null>[], options?: IntersectionObserverOptions) => number[];
 export default useIntersectionObserver;

package/dist/hooks/useIntersectionObserver.js

@@ -1,21 +1,38 @@
 import { useState, useEffect } from 'react';
-const useIntersectionObserver = (ref, options = {}) => {
-    const [intersectionRatio, setIntersectionRatio] = useState(0);
+const useIntersectionObserver = (refs, options = {}) => {
+    const [intersectionRatio, setIntersectionRatio] = useState(refs && refs.length > 0 ? new Array(refs.length).fill(0) : []);
     useEffect(() => {
+        if (!refs || !refs.length)
+            return;
         const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                setIntersectionRatio(entry.intersectionRatio);
+            requestAnimationFrame(() => {
+                setIntersectionRatio(prev => {
+                    const newRatios = [...prev];
+                    let hasChanges = false;
+                    entries.forEach(entry => {
+                        const index = refs.findIndex(ref => ref.current === entry.target);
+                        if (index !== -1 && newRatios[index] !== entry.intersectionRatio) {
+                            newRatios[index] = entry.intersectionRatio;
+                            hasChanges = true;
+                        }
+                    });
+                    return hasChanges ? newRatios : prev;
+                });
             });
-        }, options);
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return () => {
+        }, { rootMargin: '200px', threshold: [1], ...options });
+        refs.forEach(ref => {
             if (ref.current) {
-                observer.unobserve(ref.current);
+                observer.observe(ref.current);
             }
+        });
+        return () => {
+            refs.forEach(ref => {
+                if (ref.current) {
+                    observer.unobserve(ref.current);
+                }
+            });
         };
-    }, [ref, options]);
+    }, [refs, options]);
     return intersectionRatio;
 };
 export default useIntersectionObserver;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Accordion } from "./comps/accordion";
 export { default as Alert } from "./comps/alert";
 export { default as Avatar } from "./comps/avatar";
 export { default as Box } from "./comps/box";
+export { default as Span } from "./comps/span";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
 export { default as Switch } from "./comps/checkbox";
@@ -19,11 +20,15 @@ export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
-export { default as Password } from "./comps/password";
-export { default as ProgressBar } from "./comps/progressbar";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
 export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
 export { default as TreeView } from "./comps/treeview";
+export { default as Grid } from "./comps/grid";
+export { default as PinInput } from "./comps/otp";
+export { default as Password } from "./comps/password";
+export { default as ProgressBar } from "./comps/progressbar";
+export { default as SearchBox } from "./comps/search";
+export { default as SelectTabs } from "./comps/segmented";

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as Accordion } from "./comps/accordion";
 export { default as Alert } from "./comps/alert";
 export { default as Avatar } from "./comps/avatar";
 export { default as Box } from "./comps/box";
+export { default as Span } from "./comps/span";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
 export { default as Switch } from "./comps/checkbox";
@@ -19,11 +20,16 @@ export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
-export { default as Password } from "./comps/password";
-export { default as ProgressBar } from "./comps/progressbar";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
 export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
 export { default as TreeView } from "./comps/treeview";
+// UI-Kit
+export { default as Grid } from "./comps/grid";
+export { default as PinInput } from "./comps/otp";
+export { default as Password } from "./comps/password";
+export { default as ProgressBar } from "./comps/progressbar";
+export { default as SearchBox } from "./comps/search";
+export { default as SelectTabs } from "./comps/segmented";

package/dist/styles.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--spring: cubic-bezier(0.2, -0.36, 0, 1.46);--max-z-index: 2147483647;--zuz-shadow: 0px 0px 0px 1px #d4d4d4, 0px 0px 6px #ccc;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-height: 24px;--checkbox-width: 42px;--checkbox-knob-size: 20px;--checkbox-knob-left: 2px;--checkbox-knob-top: 2px;--checkbox-knob-left-on: 18px;--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 17px;--checkbox-radius: 6px;--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select-width: auto;--select: #eee;--select-font-size: 16px;--select-hover: #e6e6e6;--select-options: #eee;--select-options-max-height: 400px;--select-options-top: 0.1rem;--select-options-padding: 4px;--select-option-color: #111;--select-option-hover: #ddd;--select-selected: #ccc;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--drawer-shadow: var(--zuz-shadow);--tab-head: #fff;--tab-head-padding: 3px 3px 0px 3px;--tab-head-radius: 6px 6px 0px 0px;--tab: #eee;--tab-active: #ccc;--tab-active-color: #111;--tab-hover: #ddd;--tab-color: #111;--tab-radius: 5px 5px 0px 0px;--tab-padding: 5px 20px;--tab-body: #fff;--tab-body-radius: 0px 5px 5px 5px;--tab-body-padding: 0px;--tab-border: 1px #ddd solid;--sheet-bg: #fff;--sheet-shadow: var(--zuz-shadow);--sheet-body: #fff;--sheet-radius: 10px;--sheet-padding: 6px 12px;--sheet-head-padding: 10px;--sheet-body-padding: 10px;--sheet-footer: #ddd;--sheet-footer-padding: 10px;--sheet-action: #222;--sheet-action-color: #fff;--sheet-action-hover: #333;--sheet-action-radius: 7px;--sheet-action-padding: 7px 20px;--sheet-action-font-size: 16px;--sheet-action-font-weight: bold;--sheet-closer-color: #111;--sheet-closer-hover: rgba(255,255,255,0.2);--sheet-closer-opacity: 0.75;--sheet-closer-hover-opacity: 1;--sheet-font-size: 15px;--sheet-title-opacity: 0.75;--sheet-title-font-size: 16px;--sheet-closer-font-size: 36px;--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28;--context-z-index: 99;--context: #fff;--context-border: 0px;--context-radius: 10px;--context-padding: 10px;--context-shadow: var(--zuz-shadow);--context-seperator: #eee;--context-seperator-height: 1px;--context-seperator-margin: 3px 6px;--context-item-width: 220px;--context-item-padding: 6px 10px;--context-item-gap: 10px;--context-item-font-size: 15px;--context-item-radius: 5px;--context-item-icon-size: 18px;--context-item-hover: #eee;--treeview-gap: 6px;--treenode-gap: 2px;--treenode-arrow-btn-size: 20px;--treenode-arrow-icon-size: 12px;--treenode-arrow-icon-color: #111;--treenode-label-padding: 3px 6px;--treenode-label-radius: 3px 6px;--treenode-label-hover: #f1f1f1;--treenode-label-bg: transparent;--treenode-label-selected-bg: #eee;--treenode-label-selected-color: #111;--treenode-label-icon-color: #111;--treenode-label-icon-size: 15px;--treenode-label-color: #111;--treenode-label-size: 15px;--treenode-label-gap: 6px;--treenode-sub-margin: 20px;--progress-width: 100%;--progress-height: 6px;--progress-radius: 6px;--progress-track: #eee;--progress-bar: #111;--skeleton: #eee;--skeleton-radius: 7px;--shimmer: #ccc;--shimmer-width: 10%;--shimmer-angle: 120deg;--shimmer-text-angle: 45deg;--shimmer-speed: 2s;--shimmer-blur: 50px;--shimmer-offset: 0;--shimmer-flame: linear-gradient( var(--shimmer-text-angle), transparent, hsl(45 100% 60%),hsl(0 100% 50%), #000, transparent );--shimmer-aurora: linear-gradient( var(--shimmer-text-angle), transparent, #a960ee,#ff333d,#ffcb57,#90e0ff, transparent );--shimmer-classic: linear-gradient( var(--shimmer-text-angle), transparent, #fff,transparent );--alert-error: #ffd4d4;--alert-error-color: #ae1313;--alert-info: #bee3f8;--alert-info-color: #2b6cb0;--alert-warning: #feebc8;--alert-warning-color: #c05621;--alert-success: #c6f6d5;--alert-success-color: #2f855a;--alert-padding: 12px;--alert-radius: 10px;--alert-gap: 10px;--avatar-bg: #fff;--accordion: #fff;--accordion-label: #111;--accordion-radius: 5px;--accordion-border: 1px #ddd solid;--accordion-head: #fff;--accordion-head-padding: 10px;--accordion-head-font-size: 16px;--accordion-head-font-weight: normal;--accordion-head-arrow-size: 18px;--accordion-detail-padding: 10px;--password-toggle-radius: 5px;--password-toggle: #fff;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.aie{align-items:flex-end}.flex.jcc{justify-content:center}.flex.jce{justify-content:flex-end}.flex.jcs{justify-content:flex-start}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.text-wrap,.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}button .b-label:empty{display:none}.--password{overflow:hidden;width:100%}.--password .--toggle{width:var(--password-toggle-width);background:var(--password-toggle);border:var(--password-toggle-border);padding:var(--password-toggle-padding);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--password-toggle-radius)}.--password .--toggle .b-label{line-height:0 !important}.--password .--toggle svg{width:var(--password-toggle-size);height:var(--password-toggle-size);transition:all .2s linear 0s}.--password .--toggle svg path{fill:var(--password-toggle-color)}.--password .--toggle:hover svg{transform:scale(1.1)}.--accordion{background:var(--accordion);border:var(--accordion-border);border-radius:var(--accordion-radius);overflow:hidden}.--accordion .--toggle{border:0px;background:var(--accordion-head);padding:var(--accordion-head-padding);border-radius:var(--accordian-radius)}.--accordion .--toggle .--label{flex:1;color:var(--accordion-label);font-size:var(--accordion-head-font-size);font-weight:var(--accordion-head-font-weight)}.--accordion .--toggle .--arrow{width:var(--accordion-head-arrow-size)}.--accordion .--detail{padding:var(--accordion-detail-padding)}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 0}}.--shimmer{background-clip:text;color:rgba(0,0,0,0);animation:textshimmer calc(var(--shimmer-speed)*3) infinite both ease-in-out;background-repeat:no-repeat;background-size:10%;background-color:#222}.--shimmer.--classic{background-image:var(--shimmer-classic)}.--shimmer.--aurora{background-image:var(--shimmer-aurora)}.--shimmer.--flame{background-image:var(--shimmer-flame)}.--input.--otp{letter-spacing:1ch;font-feature-settings:"tnum";font-variant:tabular-nums;font-family:monospace;line-height:1;text-indent:1.45ch;clip-path:inset(0 1ch 0 1ch);height:2ch}.checkbox{height:var(--checkbox-size);width:var(--checkbox-size);cursor:pointer;border:1px var(--checkbox-unchecked) solid;border-radius:var(--checkbox-radius);overflow:hidden}.checkbox input[type=checkbox]{z-index:0;opacity:0}.checkbox:before{font-size:var(--checkbox-check-size);color:var(--checkbox-check-color);opacity:0}.checkbox.is-checked{background-color:var(--checkbox-checked);border:1px var(--checkbox-checked) solid}.checkbox.is-checked:before{opacity:1}.zuz-checkbox{height:var(--checkbox-height);width:var(--checkbox-width);cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;height:var(--checkbox-height);width:var(--checkbox-width);background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:var(--checkbox-knob-size);height:var(--checkbox-knob-size);background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:var(--checkbox-knob-top);left:var(--checkbox-knob-left);box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .75s var(--bounce) 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(var(--checkbox-knob-left-on))}@keyframes shimmering{0%{transform:translateX(-100%) rotate(var(--shimmer-angle))}20%{transform:translateX(100%) rotate(var(--shimmer-angle))}100%{transform:translateX(100%) rotate(var(--shimmer-angle))}}.--skeleton{overflow:hidden;border-radius:var(--skeleton-radius);height:1lh;background:var(--skeleton);position:relative}.--skeleton:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, var(--skeleton) 0%, var(--shimmer) 50%, var(--skeleton) 100%);transform:translateX(-100%) rotate(var(--shimmer-angle));animation-name:shimmering;animation-direction:var(--shimmer-direction);animation-duration:var(--shimmer-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite;filter:blur(var(--shimmer-blur))}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:2147483645;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-form{position:absolute !important}.zuz-sheet.toast-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);box-shadow:var(--sheet-shadow)}.zuz-sheet .sheet-head{padding:var(--sheet-head-padding)}.zuz-sheet .sheet-head .sheet-title{flex:1;font-size:var(--sheet-title-font-size);opacity:var(--sheet-title-opacity);text-align:center;padding:0px 45px;display:flex;align-items:center;justify-content:center}.zuz-sheet .sheet-head .sheet-dot{flex:1}.zuz-sheet .sheet-head .sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--sheet-closer-font-size);color:var(--sheet-closer-color);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:var(--sheet-closer-opacity);top:15px;right:5px;transform:translateY(-50%);font-size:var(--sheet-closer-font-size)}.zuz-sheet .sheet-head .sheet-closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.zuz-sheet .sheet-body{background:var(--sheet-body);padding:var(--sheet-body-padding)}.zuz-sheet .sheet-body.--no-action{border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer);border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer .sheet-action-btn{background:var(--sheet-action);color:var(--sheet-action-color);border-radius:var(--sheet-action-radius);padding:var(--sheet-action-padding);font-size:var(--sheet-action-font-size);font-weight:var(--sheet-action-font-weight);border:0px}.zuz-sheet .sheet-footer .sheet-action-btn:hover{background:var(--sheet-action-hover)}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.context-menu{z-index:var(--context-z-index);background:var(--context);border-radius:var(--context-radius);padding:var(--context-padding);box-shadow:var(--context-shadow)}.context-menu .context-line{height:var(--context-seperator-height);background:var(--context-seperator);margin:var(--context-seperator-margin)}.context-menu .context-menu-item{width:var(--context-item-width);padding:var(--context-item-padding);gap:var(--context-item-gap);cursor:pointer;font-size:var(--context-item-font-size);border-radius:var(--context-item-radius)}.context-menu .context-menu-item .ico{font-size:var(--context-item-icon-size)}.context-menu .context-menu-item:hover{background:var(--context-item-hover)}.zuz-select-wrap{width:var(--select-width);z-index:1}.zuz-select-wrap .zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;font-size:var(--select-font-size);box-shadow:var(--select-shadow)}.zuz-select-wrap .zuz-select:hover{background:var(--select-hover)}.zuz-select-wrap .zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-wrap .zuz-select-options{backdrop-filter:blur(10px) saturate(0);left:0;top:calc(100% + var(--select-options-top));width:100%;max-height:var(--select-options-max-height);overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:var(--select-options-padding);box-shadow:var(--select-options-shadow)}.zuz-select-wrap .zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;color:var(--select-option-color);padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-font-size);white-space:pre}.zuz-select-wrap .zuz-select-options button:hover{background:var(--select-option-hover)}.zuz-select-wrap .zuz-select-options button.selected{background:var(--select-selected)}.zuz-select-wrap .zuz-select-options .--select-search{border:1px #ddd solid;padding:4px 8px;background:#eee;border-radius:10px;font-size:16px;color:#111;margin-bottom:4px}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);border:var(--drawer-border);box-shadow:var(--drawer-shadow);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}.tabview .tab-head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.tabview .tab-head .tab-label{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color)}.tabview .tab-head .tab-label.active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.tabview .tab-head .tab-label.active:hover{background:var(--tab-active)}.tabview .tab-head .tab-label:hover{background:var(--tab-hover)}.tabview .tab-content{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.tabview .tab-content .tabs-track{transform-style:flat}.tabview .tab-content .tab-body{width:100%;background:var(--tab-body);padding:var(--tab-body-padding);align-self:baseline}.treeview{gap:var(--treeview-gap)}.treeview .--node{gap:var(--treenode-gap);cursor:pointer}.treeview .--node .--node-aro-btn{width:var(--treenode-arrow-btn-size);height:var(--treenode-arrow-btn-size);border:0px;background:rgba(0,0,0,0);opacity:.6;transition:all .4s linear 0s}.treeview .--node .--node-aro-btn:hover{opacity:1}.treeview .--node .--node-aro-btn .--node-aro-icon{font-size:var(--treenode-arrow-icon-size);color:var(--treenode-arrow-icon-color)}.treeview .--node .--node-meta{background:rgba(0,0,0,0);gap:var(--treenode-label-gap);border:0px}.treeview .--node .--node-meta .--node-icon{font-size:var(--treenode-label-icon-size);color:var(--treenode-label-icon-color)}.treeview .--node .--node-meta .--node-label{background:var(--treenode-label-bg);color:var(--treenode-label-color);font-size:var(--treenode-label-size);padding:var(--treenode-label-padding);border-radius:var(--treenode-label-radius)}.treeview .--node .--node-meta:hover .--node-label{background:var(--treenode-label-hover)}.treeview .--node.--selected .--node-meta .--node-label{background:var(--treenode-label-selected-bg);color:var(--treenode-label-selected-color)}.treeview .--sub-node{margin-top:var(--treeview-gap);gap:var(--treeview-gap);padding-left:var(--treenode-sub-margin)}.--progress{background:var(--progress-track);width:var(--progress-width);height:var(--progress-height);border-radius:var(--progress-radius);overflow:hidden}.--progress .--bar{width:0%;height:var(--progress-heigt);border-radius:var(--progress-radius)}.comp-editor{top:10px;left:10px;border-radius:10px;z-index:var(--max-z-index)}.comp-editor .pencil{width:40px;height:40px;background:#fff;border-radius:50%;border:0px}.comp-editor .pencil img{width:50%}.comp-editor .pencil span{font-size:36px;color:#111;line-height:.8}.comp-editor .editor-props{background:#fff;border-radius:10px;left:60px;top:10px;width:350px;overflow:hidden;box-shadow:0px 0px 0px 1px #ccc,0px 0px 0px 5px #eaeaea}.comp-editor .editor-props .editor-head{background:#ddd;padding:4px 12px;font-size:14px}.comp-editor .editor-props .editor-head .head-label{flex:1}.comp-editor .editor-props .editor-head .head-action{display:flex;flex:1;gap:5px;align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-head .head-action button{background:#333;border:0px;font-size:12px;color:#fff;font-weight:bold;padding:2px 10px;border-radius:10px}.comp-editor .editor-props .editor-head .head-action button:hover{background:#222}.comp-editor .editor-props .editor-body{padding:12px;max-height:70vh;overflow-x:hidden;overflow-y:auto;gap:5px}.comp-editor .editor-props .editor-body textarea{flex:1 1;width:100%;border:0px;background:#ebebeb;padding:15px;min-height:290px;color:#111;border-radius:10px;resize:none}.comp-editor .editor-props .editor-body .copy{top:20px;right:20px;z-index:2;border-radius:10px;border:0px;padding:3px 10px;background:var(--primary)}.comp-editor .editor-props .editor-body .group{margin-top:10px}.comp-editor .editor-props .editor-body .group .gprops{gap:5px}.comp-editor .editor-props .editor-body .group .glabel{background:#333;align-self:flex-start;font-weight:bold;font-size:12px;border-radius:5px 5px 0px 0px;padding:2px 5px;transform:translateX(5px);color:#f1f1f1}.comp-editor .editor-props .editor-body .gprop,.comp-editor .editor-props .editor-body .prop{flex:1;padding:6px 0px;font-size:13px;background:#f7f7f7;padding:5px 10px;border-radius:5px}.comp-editor .editor-props .editor-body .gprop .pop,.comp-editor .editor-props .editor-body .prop .pop{flex:1;white-space:pre}.comp-editor .editor-props .editor-body .gprop .pop:nth-child(2),.comp-editor .editor-props .editor-body .prop .pop:nth-child(2){align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-body .gprop .pop input,.comp-editor .editor-props .editor-body .prop .pop input{flex:1;width:70px;max-width:70px;min-width:70px;border:0px;background:#777;padding:4px;border-radius:4px;margin-left:5px}.comp-editor .editor-props .editor-body .gprop .pop input[type=color],.comp-editor .editor-props .editor-body .prop .pop input[type=color]{background:rgba(0,0,0,0);border-radius:5px;padding:0px;appearance:none}.comp-editor .editor-props .editor-body .gprop .pop .l-k,.comp-editor .editor-props .editor-body .prop .pop .l-k{font-size:10px;color:#777}.--alert{padding:var(--alert-padding);border-radius:var(--alert-radius);gap:var(--alert-gap)}.--alert .--icon{width:20px;height:20px}.--alert .--meta{gap:2px}.--alert .--meta .--title.--tm{font-weight:bold}.--alert.--info{background:var(--alert-info);color:var(--alert-info-color)}.--alert.--info path{fill:var(--alert-info-color)}.--alert.--warning{background:var(--alert-warning);color:var(--alert-warning-color)}.--alert.--warning path{fill:var(--alert-warning-color)}.--alert.--error{background:var(--alert-error);color:var(--alert-error-color)}.--alert.--error path{fill:var(--alert-error-color)}.--alert.--success{background:var(--alert-success);color:var(--alert-success-color)}.--alert.--success path{fill:var(--alert-success-color)}.--avatar{background:var(--avatar-bg)}.--avatar.--circle{border-radius:50%}
+*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--spring: cubic-bezier(0.2, -0.36, 0, 1.46);--max-z-index: 2147483647;--zuz-shadow: 0px 0px 0px 1px #d4d4d4, 0px 0px 6px #ccc;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-height: 24px;--checkbox-width: 42px;--checkbox-knob-size: 20px;--checkbox-knob-left: 2px;--checkbox-knob-top: 2px;--checkbox-knob-left-on: 18px;--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 17px;--checkbox-radius: 6px;--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--drawer-shadow: var(--zuz-shadow);--tab-head: #fff;--tab-head-padding: 3px 3px 0px 3px;--tab-head-radius: 6px 6px 0px 0px;--tab: #eee;--tab-active: #ccc;--tab-active-color: #111;--tab-hover: #ddd;--tab-color: #111;--tab-radius: 5px 5px 0px 0px;--tab-padding: 5px 20px;--tab-body: #fff;--tab-body-radius: 0px 5px 5px 5px;--tab-body-padding: 0px;--tab-border: 1px #ddd solid;--sheet-bg: #fff;--sheet-shadow: var(--zuz-shadow);--sheet-body: #fff;--sheet-radius: 10px;--sheet-padding: 6px 12px;--sheet-head-padding: 10px;--sheet-body-padding: 10px;--sheet-footer: #ddd;--sheet-footer-padding: 10px;--sheet-action: #222;--sheet-action-color: #fff;--sheet-action-hover: #333;--sheet-action-radius: 7px;--sheet-action-padding: 7px 20px;--sheet-action-font-size: 16px;--sheet-action-font-weight: bold;--sheet-closer-color: #111;--sheet-closer-hover: rgba(255,255,255,0.2);--sheet-closer-opacity: 0.75;--sheet-closer-hover-opacity: 1;--sheet-font-size: 15px;--sheet-title-opacity: 0.75;--sheet-title-font-size: 16px;--sheet-closer-font-size: 36px;--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28;--context-z-index: 99;--context: #fff;--context-border: 0px;--context-radius: 10px;--context-padding: 10px;--context-shadow: var(--zuz-shadow);--context-seperator: #eee;--context-seperator-height: 1px;--context-seperator-margin: 3px 6px;--context-item-width: 220px;--context-item-padding: 6px 10px;--context-item-gap: 10px;--context-item-font-size: 15px;--context-item-radius: 5px;--context-item-icon-size: 18px;--context-item-hover: #eee;--treeview-gap: 6px;--treenode-gap: 2px;--treenode-arrow-btn-size: 20px;--treenode-arrow-icon-size: 12px;--treenode-arrow-icon-color: #111;--treenode-label-padding: 3px 6px;--treenode-label-radius: 3px 6px;--treenode-label-hover: #f1f1f1;--treenode-label-bg: transparent;--treenode-label-selected-bg: #eee;--treenode-label-selected-color: #111;--treenode-label-icon-color: #111;--treenode-label-icon-size: 15px;--treenode-label-color: #111;--treenode-label-size: 15px;--treenode-label-gap: 6px;--treenode-sub-margin: 20px;--progress-width: 100%;--progress-height: 6px;--progress-radius: 6px;--progress-track: #eee;--progress-bar: #111;--skeleton: #eee;--skeleton-radius: 7px;--shimmer: #ccc;--shimmer-width: 10%;--shimmer-angle: 120deg;--shimmer-text-angle: 45deg;--shimmer-speed: 2s;--shimmer-blur: 50px;--shimmer-offset: 0;--shimmer-flame: linear-gradient( var(--shimmer-text-angle), transparent, hsl(45 100% 60%),hsl(0 100% 50%), #000, transparent );--shimmer-aurora: linear-gradient( var(--shimmer-text-angle), transparent, #a960ee,#ff333d,#ffcb57,#90e0ff, transparent );--shimmer-classic: linear-gradient( var(--shimmer-text-angle), transparent, #fff,transparent );--alert-error: #ffd4d4;--alert-error-color: #ae1313;--alert-info: #bee3f8;--alert-info-color: #2b6cb0;--alert-warning: #feebc8;--alert-warning-color: #c05621;--alert-success: #c6f6d5;--alert-success-color: #2f855a;--alert-padding: 12px;--alert-radius: 10px;--alert-gap: 10px;--avatar-bg: #fff;--accordion: #fff;--accordion-label: #111;--accordion-radius: 5px;--accordion-border: 1px #ddd solid;--accordion-head: #fff;--accordion-head-padding: 10px;--accordion-head-font-size: 16px;--accordion-head-font-weight: normal;--accordion-head-arrow-size: 18px;--accordion-detail-padding: 10px;--password-toggle-radius: 5px;--password-toggle: #fff;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111;--pin-radius: 4px;--pin-gap: 4px;--pin-shadow: inset 0px 0px 0px 2px #111;--pin-padding: 5px;--search-send-color: #111;--search-send-size: 25px;--search-send: #fff;--search-send-width: 40px;--search-send-padding: 5px;--search-send-radius: 5px;--search-send-border: 0px;--segmented: #eee;--segmented-radius: 8px;--segmented-padding: 2px;--segmented-border: 1px #ddd solid;--segment-item: transparent;--segment-item-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segment-item-padding: 5px 12px;--segment-item-border: 0px;--segment-item-font-size: 15px;--segment-item-font-weight: normal;--segment-item-color: #111;--segment-item-active-color: #fff;--segment-tab: #fff;--segment-tab-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segmented-speed: 0.5s;--select-width: auto;--select: #fff;--select-radius: 5px;--select-border: 1px #ddd solid;--select-padding: 6px 8px;--select-font-size: 16px;--select-z-index: 1;--select-gap: 5px;--select-arrow-size: 16px;--select-arrow-color: #111;--select-hover: #e6e6e6;--select-options: #eee;--select-options-max-height: 400px;--select-options-top: 0.1rem;--select-options-padding: 4px;--select-option-color: #111;--select-option-hover: #ddd;--select-option-padding: var(--select-padding);--select-option-radius: var(--select-radius);--select-selected: #ccc;--select-shadow: inherit;--select-search: #fff;--select-search-border: 1px #ddd solid;--select-search-padding: 4px 8px;--select-search-radius: 10px;--select-search-font-size: 15px;--select-search-color: #111;--select-search-margin-bottom: 4px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.aie{align-items:flex-end}.flex.jcc{justify-content:center}.flex.jce{justify-content:flex-end}.flex.jcs{justify-content:flex-start}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.text-wrap,.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}button .b-label:empty{display:none}.--otp{width:100%;gap:var(--pin-gap)}.--otp .--input{text-align:center;padding:var(--pin-padding) !important}.--otp .--input:not(:last-child),.--otp .--input:not(:first-child){border-radius:0px !important}.--otp .--input:first-child{border-radius:var(--pin-radius) 0px 0px var(--pin-radius) !important}.--otp .--input:last-child{border-radius:0px var(--pin-radius) var(--pin-radius) 0px !important}.--otp .--input:focus{box-shadow:var(--pin-shadow)}.--search{overflow:hidden}.--search .--send{width:var(--search-send-width);background:var(--search-send);padding:var(--search-send-padding);border:var(--search-send-border);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--search-send-radius)}.--search .--send svg{width:var(--search-send-size);height:var(--search-send-size);transition:all .2s linear 0s}.--search .--send svg path{fill:var(--search-send-color)}.--password{overflow:hidden;width:100%}.--password .--toggle{width:var(--password-toggle-width);background:var(--password-toggle);border:var(--password-toggle-border);padding:var(--password-toggle-padding);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--password-toggle-radius)}.--password .--toggle .b-label{line-height:0 !important}.--password .--toggle svg{width:var(--password-toggle-size);height:var(--password-toggle-size);transition:all .2s linear 0s}.--password .--toggle svg path{fill:var(--password-toggle-color)}.--password .--toggle:hover svg{transform:scale(1.1)}.--accordion{background:var(--accordion);border:var(--accordion-border);border-radius:var(--accordion-radius);overflow:hidden}.--accordion .--toggle{border:0px;background:var(--accordion-head);padding:var(--accordion-head-padding);border-radius:var(--accordian-radius)}.--accordion .--toggle .--label{flex:1;color:var(--accordion-label);font-size:var(--accordion-head-font-size);font-weight:var(--accordion-head-font-weight)}.--accordion .--toggle .--arrow{width:var(--accordion-head-arrow-size)}.--accordion .--detail{padding:var(--accordion-detail-padding)}.--segmented{background:var(--segmented);border-radius:var(--segmented-radius);padding:var(--segmented-padding);border:var(--segmented-border);overflow:hidden}.--segmented .--segment-item{background:var(--segment-item);border-radius:var(--segment-item-radius);padding:var(--segment-item-padding);border:var(--segment-item-border);color:var(--segment-item-color);font-size:var(--segment-item-font-size);font-weight:var(--segment-item-font-weight);z-index:1;flex:1}.--segmented .--segment-item .--segment-label{white-space:pre;transition:all var(--segmented-speed) var(--ease) 0s}.--segmented .--segment-item.--segement-active{color:var(--segment-item-active-color)}.--segmented .--segment-tab{background:var(--segment-tab);border-radius:calc(var(--segmented-radius) - var(--segmented-padding));width:var(--w);transform:translateX(calc(var(--x) - var(--segmented-padding)));z-index:0;top:var(--segmented-padding);bottom:var(--segmented-padding);transition:all var(--segmented-speed) var(--ease) 0s}.--select{width:var(--select-width);z-index:var(--select-z-index)}.--select .--selected{width:100%;gap:var(--select-gap);background:var(--select);border-radius:var(--select-radius);border:var(--select-border);padding:var(--select-padding);font-size:var(--select-font-size);box-shadow:var(--select-shadow);line-height:1}.--select .--selected:hover{background:var(--select-hover)}.--select .--selected .--label{flex:1;text-align:left}.--select .--selected .--svg-arrow{width:var(--select-arrow-size)}.--select .--selected .--svg-arrow svg{fill:var(--select-arrow-color)}.--select .--options-list{backdrop-filter:blur(10px) saturate(0);left:0;top:calc(100% + var(--select-options-top));width:100%;max-height:var(--select-options-max-height);overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:var(--select-options-padding);box-shadow:var(--select-options-shadow)}.--select .--options-list .--select-search{border:var(--select-search-border);padding:var(--select-search-padding);background:var(--select-search);border-radius:var(--select-search-radius);font-size:var(--select-search-font-size);color:var(--select-search-color);margin-bottom:var(--select-search-margin-bottom)}.--select .--options-list button{background:rgba(0,0,0,0);border:0px;text-align:left;color:var(--select-option-color);padding:var(--select-option-padding);border-radius:var(--select-option-radius);font-size:var(--select-font-size);white-space:pre}.--select .--options-list button:hover{background:var(--select-option-hover)}.--select .--options-list button.selected{background:var(--select-selected)}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 0}}.--shimmer{background-clip:text;color:rgba(0,0,0,0);animation:textshimmer calc(var(--shimmer-speed)*3) infinite both ease-in-out;background-repeat:no-repeat;background-size:10%;background-color:#222}.--shimmer.--classic{background-image:var(--shimmer-classic)}.--shimmer.--aurora{background-image:var(--shimmer-aurora)}.--shimmer.--flame{background-image:var(--shimmer-flame)}.--input.--otp{letter-spacing:1ch;font-feature-settings:"tnum";font-variant:tabular-nums;font-family:monospace;line-height:1;text-indent:1.45ch;clip-path:inset(0 1ch 0 1ch);height:2ch}.checkbox{height:var(--checkbox-size);width:var(--checkbox-size);cursor:pointer;border:1px var(--checkbox-unchecked) solid;border-radius:var(--checkbox-radius);overflow:hidden}.checkbox input[type=checkbox]{z-index:0;opacity:0}.checkbox:before{font-size:var(--checkbox-check-size);color:var(--checkbox-check-color);opacity:0}.checkbox.is-checked{background-color:var(--checkbox-checked);border:1px var(--checkbox-checked) solid}.checkbox.is-checked:before{opacity:1}.zuz-checkbox{height:var(--checkbox-height);width:var(--checkbox-width);cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;height:var(--checkbox-height);width:var(--checkbox-width);background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:var(--checkbox-knob-size);height:var(--checkbox-knob-size);background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:var(--checkbox-knob-top);left:var(--checkbox-knob-left);box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .75s var(--bounce) 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(var(--checkbox-knob-left-on))}@keyframes shimmering{0%{transform:translateX(-100%) rotate(var(--shimmer-angle))}20%{transform:translateX(100%) rotate(var(--shimmer-angle))}100%{transform:translateX(100%) rotate(var(--shimmer-angle))}}.--skeleton{overflow:hidden;border-radius:var(--skeleton-radius);height:1lh;background:var(--skeleton);position:relative}.--skeleton:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, var(--skeleton) 0%, var(--shimmer) 50%, var(--skeleton) 100%);transform:translateX(-100%) rotate(var(--shimmer-angle));animation-name:shimmering;animation-direction:var(--shimmer-direction);animation-duration:var(--shimmer-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite;filter:blur(var(--shimmer-blur))}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px;pointer-events:auto}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:2147483645;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-form{position:absolute !important}.zuz-sheet.toast-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);box-shadow:var(--sheet-shadow)}.zuz-sheet .sheet-head{padding:var(--sheet-head-padding)}.zuz-sheet .sheet-head .sheet-title{flex:1;font-size:var(--sheet-title-font-size);opacity:var(--sheet-title-opacity);text-align:center;padding:0px 45px;display:flex;align-items:center;justify-content:center}.zuz-sheet .sheet-head .sheet-dot{flex:1}.zuz-sheet .sheet-head .sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--sheet-closer-font-size);color:var(--sheet-closer-color);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:var(--sheet-closer-opacity);top:15px;right:5px;transform:translateY(-50%);font-size:var(--sheet-closer-font-size)}.zuz-sheet .sheet-head .sheet-closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.zuz-sheet .sheet-body{background:var(--sheet-body);padding:var(--sheet-body-padding)}.zuz-sheet .sheet-body.--no-action{border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer);border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer .sheet-action-btn{background:var(--sheet-action);color:var(--sheet-action-color);border-radius:var(--sheet-action-radius);padding:var(--sheet-action-padding);font-size:var(--sheet-action-font-size);font-weight:var(--sheet-action-font-weight);border:0px}.zuz-sheet .sheet-footer .sheet-action-btn:hover{background:var(--sheet-action-hover)}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.context-menu{z-index:var(--context-z-index);background:var(--context);border-radius:var(--context-radius);padding:var(--context-padding);box-shadow:var(--context-shadow)}.context-menu .context-line{height:var(--context-seperator-height);background:var(--context-seperator);margin:var(--context-seperator-margin)}.context-menu .context-menu-item{width:var(--context-item-width);padding:var(--context-item-padding);gap:var(--context-item-gap);cursor:pointer;font-size:var(--context-item-font-size);border-radius:var(--context-item-radius)}.context-menu .context-menu-item .ico{font-size:var(--context-item-icon-size)}.context-menu .context-menu-item:hover{background:var(--context-item-hover)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);border:var(--drawer-border);box-shadow:var(--drawer-shadow);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}.tabview .tab-head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.tabview .tab-head .tab-label{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color)}.tabview .tab-head .tab-label.active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.tabview .tab-head .tab-label.active:hover{background:var(--tab-active)}.tabview .tab-head .tab-label:hover{background:var(--tab-hover)}.tabview .tab-content{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.tabview .tab-content .tabs-track{transform-style:flat}.tabview .tab-content .tab-body{width:100%;background:var(--tab-body);padding:var(--tab-body-padding);align-self:baseline}.treeview{gap:var(--treeview-gap)}.treeview .--node{gap:var(--treenode-gap);cursor:pointer}.treeview .--node .--node-aro-btn{width:var(--treenode-arrow-btn-size);height:var(--treenode-arrow-btn-size);border:0px;background:rgba(0,0,0,0);opacity:.6;transition:all .4s linear 0s}.treeview .--node .--node-aro-btn:hover{opacity:1}.treeview .--node .--node-aro-btn .--node-aro-icon{font-size:var(--treenode-arrow-icon-size);color:var(--treenode-arrow-icon-color)}.treeview .--node .--node-meta{background:rgba(0,0,0,0);gap:var(--treenode-label-gap);border:0px}.treeview .--node .--node-meta .--node-icon{font-size:var(--treenode-label-icon-size);color:var(--treenode-label-icon-color)}.treeview .--node .--node-meta .--node-label{background:var(--treenode-label-bg);color:var(--treenode-label-color);font-size:var(--treenode-label-size);padding:var(--treenode-label-padding);border-radius:var(--treenode-label-radius)}.treeview .--node .--node-meta:hover .--node-label{background:var(--treenode-label-hover)}.treeview .--node.--selected .--node-meta .--node-label{background:var(--treenode-label-selected-bg);color:var(--treenode-label-selected-color)}.treeview .--sub-node{margin-top:var(--treeview-gap);gap:var(--treeview-gap);padding-left:var(--treenode-sub-margin)}.--progress{background:var(--progress-track);width:var(--progress-width);height:var(--progress-height);border-radius:var(--progress-radius);overflow:hidden}.--progress .--bar{width:0%;height:var(--progress-heigt);border-radius:var(--progress-radius)}.comp-editor{top:10px;left:10px;border-radius:10px;z-index:var(--max-z-index)}.comp-editor .pencil{width:40px;height:40px;background:#fff;border-radius:50%;border:0px}.comp-editor .pencil img{width:50%}.comp-editor .pencil span{font-size:36px;color:#111;line-height:.8}.comp-editor .editor-props{background:#fff;border-radius:10px;left:60px;top:10px;width:350px;overflow:hidden;box-shadow:0px 0px 0px 1px #ccc,0px 0px 0px 5px #eaeaea}.comp-editor .editor-props .editor-head{background:#ddd;padding:4px 12px;font-size:14px}.comp-editor .editor-props .editor-head .head-label{flex:1}.comp-editor .editor-props .editor-head .head-action{display:flex;flex:1;gap:5px;align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-head .head-action button{background:#333;border:0px;font-size:12px;color:#fff;font-weight:bold;padding:2px 10px;border-radius:10px}.comp-editor .editor-props .editor-head .head-action button:hover{background:#222}.comp-editor .editor-props .editor-body{padding:12px;max-height:70vh;overflow-x:hidden;overflow-y:auto;gap:5px}.comp-editor .editor-props .editor-body textarea{flex:1 1;width:100%;border:0px;background:#ebebeb;padding:15px;min-height:290px;color:#111;border-radius:10px;resize:none}.comp-editor .editor-props .editor-body .copy{top:20px;right:20px;z-index:2;border-radius:10px;border:0px;padding:3px 10px;background:var(--primary)}.comp-editor .editor-props .editor-body .group{margin-top:10px}.comp-editor .editor-props .editor-body .group .gprops{gap:5px}.comp-editor .editor-props .editor-body .group .glabel{background:#333;align-self:flex-start;font-weight:bold;font-size:12px;border-radius:5px 5px 0px 0px;padding:2px 5px;transform:translateX(5px);color:#f1f1f1}.comp-editor .editor-props .editor-body .gprop,.comp-editor .editor-props .editor-body .prop{flex:1;padding:6px 0px;font-size:13px;background:#f7f7f7;padding:5px 10px;border-radius:5px}.comp-editor .editor-props .editor-body .gprop .pop,.comp-editor .editor-props .editor-body .prop .pop{flex:1;white-space:pre}.comp-editor .editor-props .editor-body .gprop .pop:nth-child(2),.comp-editor .editor-props .editor-body .prop .pop:nth-child(2){align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-body .gprop .pop input,.comp-editor .editor-props .editor-body .prop .pop input{flex:1;width:70px;max-width:70px;min-width:70px;border:0px;background:#777;padding:4px;border-radius:4px;margin-left:5px}.comp-editor .editor-props .editor-body .gprop .pop input[type=color],.comp-editor .editor-props .editor-body .prop .pop input[type=color]{background:rgba(0,0,0,0);border-radius:5px;padding:0px;appearance:none}.comp-editor .editor-props .editor-body .gprop .pop .l-k,.comp-editor .editor-props .editor-body .prop .pop .l-k{font-size:10px;color:#777}.--alert{padding:var(--alert-padding);border-radius:var(--alert-radius);gap:var(--alert-gap)}.--alert .--icon{width:20px;height:20px}.--alert .--meta{gap:2px}.--alert .--meta .--title.--tm{font-weight:bold}.--alert.--info{background:var(--alert-info);color:var(--alert-info-color)}.--alert.--info path{fill:var(--alert-info-color)}.--alert.--warning{background:var(--alert-warning);color:var(--alert-warning-color)}.--alert.--warning path{fill:var(--alert-warning-color)}.--alert.--error{background:var(--alert-error);color:var(--alert-error-color)}.--alert.--error path{fill:var(--alert-error-color)}.--alert.--success{background:var(--alert-success);color:var(--alert-success-color)}.--alert.--success path{fill:var(--alert-success-color)}.--avatar{background:var(--avatar-bg)}.--avatar.--circle{border-radius:50%}

package/dist/types/interfaces.d.ts

@@ -1,18 +1,43 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
 import { dynamicObject } from ".";
+/**
+ * Configuration for a skeleton loading indicator.
+ */
 export interface Skeleton {
+    /**
+     * Determines if the skeleton is enabled or disabled.
+     */
     enabled: boolean;
+    /**
+     * The type of skeleton effect to apply. Optional.
+     */
     type?: SKELETON;
+    /**
+     * The size of the skeleton element, which can be a number or string. Optional.
+     */
     size?: number | string;
+    /**
+     * The width of the skeleton element, which can be a number or string. Optional.
+     */
     width?: number | string;
+    /**
+     * The height of the skeleton element, which can be a number or string. Optional.
+     */
     height?: number | string;
+    /**
+     * The border radius of the skeleton element, which can be a number or string. Optional.
+     */
     radius?: number | string;
 }
 export interface BaseProps {
-    as?: string;
+    /** CSS Styles, such as "w:100" for "width: 100px"; */
+    as?: string | string[];
+    /** Animation configuration using {@link animationProps} */
     animate?: animationProps;
+    /** Enables inline editor for current component */
     editor?: boolean;
+    /** Skeleton placeholder configuration using {@link Skeleton} */
     skeleton?: Skeleton;
 }
 export interface animationProps {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.5.5",
+    "version": "0.5.6",
     "keywords": [
         "react",
         "zuz",

package/dist/comps/select.d.ts

@@ -1,19 +0,0 @@
-import { FORMVALIDATION } from "../types/enums";
-import { dynamicObject } from "../types";
-import { animationProps } from "../types/interfaces";
-export interface SelectProps {
-    as?: string;
-    name?: string;
-    animate?: animationProps;
-    required?: FORMVALIDATION;
-    options: dynamicObject[];
-    label?: string;
-    defaultValue?: string | dynamicObject;
-    search?: boolean;
-    onChange?: (v: string | dynamicObject) => void;
-}
-export interface SelectHandler {
-    onChange?: (v: string | dynamicObject) => void;
-}
-declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<SelectHandler>>;
-export default Select;

package/dist/comps/select.js

@@ -1,56 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import With from "./base";
-import { uuid } from "../funs";
-const chevronExpand = () => _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-chevron-expand", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M3.646 9.146a.5.5 0 01.708 0L8 12.793l3.646-3.647a.5.5 0 01.708.708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 010-.708zm0-2.292a.5.5 0 00.708 0L8 3.207l3.646 3.647a.5.5 0 00.708-.708l-4-4a.5.5 0 00-.708 0l-4 4a.5.5 0 000 .708z" }) });
-const Select = forwardRef((props, ref) => {
-    const { as, options, name, label, defaultValue, search: withSearch, onChange, ...rest } = props;
-    const _ref = useRef(null);
-    const _search = useRef(null);
-    const _id = useMemo(() => name || uuid(), []);
-    const [choosing, setChoosing] = useState(false);
-    const [value, setValue] = useState(defaultValue || options[0]);
-    const [query, setQuery] = useState(null);
-    const updateValue = (o) => {
-        setValue(o);
-        onChange && onChange(o);
-    };
-    useEffect(() => {
-        document.body.addEventListener(`click`, (e) => {
-            setChoosing(false);
-        });
-    }, []);
-    useEffect(() => {
-        if (choosing) {
-            _search.current && _search.current.focus();
-        }
-        else {
-            if (_search.current) {
-                _search.current.value = ``;
-            }
-            setQuery(null);
-        }
-    }, [choosing]);
-    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, name: name, tag: `button`, as: as, className: `zuz-select rel flex aic --select`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsxs(With
-            // popover="true"
-            , { 
-                // popover="true"
-                id: _id, className: `zuz-select-options abs flex cols`, style: {
-                    pointerEvents: choosing ? `auto` : `none`,
-                }, animate: {
-                    from: { y: 5, opacity: 0 },
-                    to: { y: 0, opacity: 1 },
-                    when: choosing,
-                    // curve: `spring`,
-                    duration: .05
-                }, children: [withSearch && _jsx(With, { ref: _search, onChange: (e) => {
-                            setQuery(e.target.value == `` ? null : e.target.value);
-                        }, tag: `input`, placeholder: `Search`, className: `--select-search` }), (query == null ? options : options.filter((o) => {
-                        return `string` == typeof o ?
-                            o.toLowerCase().includes(query.toLowerCase())
-                            : o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
-                    }))
-                        .map((o) => _jsx(With, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, tag: `button`, children: `string` == typeof o ? o : o.label }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
-});
-export default Select;