@zuzjs/ui 0.8.1 → 0.8.2

package/dist/esm/comps/Crumb/index.d.ts

@@ -1,4 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+    maxItems?: number;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

package/dist/esm/comps/Crumb/index.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -7,7 +8,16 @@ import List from "../List";
 import SVGIcons from "../svgicons";
 import Text from "../Text";
 const Crumb = forwardRef((props, ref) => {
-    const { items } = props;
-    return _jsx(List, { ref: ref, className: `--crumb flex aic`, direction: `rows`, seperator: _jsx(Box, { as: `--crumb-chevron`, children: SVGIcons.chevronRightOutline }), items: items.map((item, index, _items) => _jsxs(Button, { onClick: () => item.action?.(), className: `--crumb-item`, disabled: !_items[index + 1], children: [item.icon && _jsx(Icon, { as: `--crumb-icon`, name: item.icon }), _jsx(Text, { as: `--crumb-label`, children: item.label })] })) });
+    const { items: crumbItems, maxItems } = props;
+    const canSlice = useMemo(() => maxItems && maxItems > 0 && crumbItems.length > maxItems - 1, [crumbItems, maxItems]);
+    const items = canSlice ? [
+        ...crumbItems.slice(0, 2),
+        { ID: `.`, label: `...`, icon: `ellipsis`, action: () => { } },
+        ...crumbItems.slice(-maxItems)
+    ] : crumbItems;
+    return _jsx(List, { ref: ref, className: `--crumb flex aic`, direction: `rows`, seperator: _jsx(Box, { as: `--crumb-chevron`, children: SVGIcons.chevronRightOutline }), items: items.map((item, index, _items) => item.ID == `.` ?
+            _jsx(Box, { as: `flex aic gap:3`, children: Array(3).fill(null).map(() => _jsx(Box, { as: `w:4 h:4 bg:$text r:10` })) })
+            : _jsxs(Button, { onClick: () => item.action?.(), className: `--crumb-item`, disabled: !_items[index + 1], children: [item.icon && _jsx(Icon, { as: `--crumb-icon`, name: item.icon }), _jsx(Text, { as: `--crumb-label`, children: item.label })] })) });
 });
+Crumb.displayName = `Zuz.Crumb`;
 export default Crumb;

package/dist/esm/comps/Crumb/types.d.ts

@@ -8,4 +8,5 @@ export type CrumbItem = {
 };
 export type CrumbProps = BoxProps & {
     items: CrumbItem[];
+    maxItems?: number;
 };

package/dist/esm/comps/Drawer/index.js

@@ -61,5 +61,5 @@ const Drawer = forwardRef((props, ref) => {
                     duration: speed || .5,
                 }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
 });
-Drawer.displayName = `Drawer`;
+Drawer.displayName = `Zuz.Drawer`;
 export default Drawer;

package/dist/esm/comps/Fab/index.js

@@ -7,5 +7,5 @@ const Fab = forwardRef((props, ref) => {
     const { icon, size, position } = props;
     return _jsx(Button, { className: `--fab fixed --${size || Size.Large} --${position || `bottomright`}`, children: icon || SVGIcons.plus });
 });
-Fab.displayName = `Fab`;
+Fab.displayName = `Zuz.Fab`;
 export default Fab;

package/dist/esm/comps/Filters/index.js

@@ -10,5 +10,5 @@ const Filters = (props) => {
     useEffect(() => { }, [names]);
     return _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", children: _jsx("defs", { children: (names || [FILTER.Gooey]).map(name => filters[name](strength)) }) });
 };
-Filters.displayName = `Filters`;
+Filters.displayName = `Zuz.Filters`;
 export default Filters;

package/dist/esm/comps/Form/index.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withPost } from "@zuzjs/core";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { addPropsToChildren, isEmail, withPost } from "../../funs";
+import { addPropsToChildren, isEmail, isEmpty } from "../../funs";
 import { useBase } from "../../hooks";
 import { FORMVALIDATION, SHEET } from "../../types/enums";
 import Box from "../Box";
@@ -96,13 +97,28 @@ const Form = forwardRef((props, ref) => {
                     console.log(`Add FORMVALIDATION.Password`);
                     return false;
                 case FORMVALIDATION.MatchField:
-                    const [__, field] = el.getAttribute(`with`).split(`@`);
+                    const [__, field, condition] = el.getAttribute(`with`).split(`@`);
                     const _el = document.querySelector(`[name=${field.trim()}]`);
                     if (!_el)
                         return false;
-                    // console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
-                    if (_el && _el.value != el.value) {
-                        return false;
+                    switch (condition || `direct-match`) {
+                        //Self should not empty
+                        case "if-not-empty":
+                            if (_el && !isEmpty(_el.value) && _el.value != el.value) {
+                                return false;
+                            }
+                            break;
+                        case "direct-match":
+                            if (_el &&
+                                _el.classList.contains(`--otp`) &&
+                                el.classList.contains(`--otp`) &&
+                                _getPinValue(_el) != _getPinValue(el)) {
+                                return false;
+                            }
+                            else if (_el && _el.value != el.value) {
+                                return false;
+                            }
+                            break;
                     }
                     break;
                 default:
@@ -261,5 +277,5 @@ const Form = forwardRef((props, ref) => {
     useEffect(_init, []);
     return _jsxs(Box, { ref: innerRef, style: style, className: `--form flex rel ${className} ${name ? `--form-${name.replace(/\s+/g, `-`)}` : ``}`, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], children: [_jsx(Sheet, { ref: sheet, as: `--sheet-form` }), !isSheetHandler(cover) && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), buildChildren] });
 });
-Form.displayName = `Form`;
+Form.displayName = `Zuz.Form`;
 export default Form;

package/dist/esm/comps/Icon/index.js

@@ -8,5 +8,5 @@ const Icon = forwardRef((props, ref) => {
     const { className, style, rest } = useBase(pops);
     return _jsx("div", { style: style, className: `icon-${name} --icon --${size || Size.Default} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
 });
-Icon.displayName = `Icon`;
+Icon.displayName = `Zuz.Icon`;
 export default Icon;

package/dist/esm/comps/Image/index.js

@@ -7,5 +7,5 @@ const Image = forwardRef((props, ref) => {
         return null;
     return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
 });
-Image.displayName = `Image`;
+Image.displayName = `Zuz.Image`;
 export default Image;

package/dist/esm/comps/Input/index.d.ts

@@ -4,12 +4,12 @@ export type InputProps = Props<`input`> & {
     numeric?: boolean;
     size?: Size;
     variant?: Variant;
-    with?: FORMVALIDATION;
+    with?: FORMVALIDATION | `${FORMVALIDATION}${string}`;
 };
 declare const Input: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     numeric?: boolean;
     size?: Size;
     variant?: Variant;
-    with?: FORMVALIDATION;
+    with?: FORMVALIDATION | `${FORMVALIDATION}${string}`;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/esm/comps/Input/index.js

@@ -12,5 +12,5 @@ const Input = forwardRef((props, ref) => {
     };
     return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
 });
-Input.displayName = `Input`;
+Input.displayName = `Zuz.Input`;
 export default Input;

package/dist/esm/comps/KeyboardKeys/index.js

@@ -29,5 +29,5 @@ const KeyBoardKeys = forwardRef(({ children, keys, variant }, ref) => {
     }, [keys]);
     return _jsxs(Box, { as: `--keyboard-keys --${variant || Variant.Small} flex aic`, children: [(Array.isArray(_meta.keys) ? _meta.keys : [_meta.keys]).map((k) => _jsx("abbr", { title: KeysLabelMap[k], children: KeysMap[k] }, k)), _jsx(Span, { children: _meta?.children ?? children })] });
 });
-KeyBoardKeys.displayName = `ZuzUI.KeyboardKeys`;
+KeyBoardKeys.displayName = `Zuz.KeyboardKeys`;
 export default KeyBoardKeys;

package/dist/esm/comps/Label/index.js

@@ -5,5 +5,5 @@ const Label = forwardRef((props, ref) => {
     const { style, className, rest } = useBase(props);
     return _jsx("label", { ref: ref, style: style, className: className, ...rest });
 });
-Label.displayName = `Label`;
+Label.displayName = `Zuz.Label`;
 export default Label;

package/dist/esm/comps/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

package/dist/esm/comps/List/index.js

@@ -14,5 +14,5 @@ const List = forwardRef((props, ref) => {
         children: items.map((item, index, _items) => _jsxs(_Fragment, { children: [_jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`), seperator && _items[index + 1] ? _jsx("li", { className: `--list-seperator`, children: seperator }) : null] }))
     });
 });
-List.displayName = `List`;
+List.displayName = `Zuz.List`;
 export default List;

package/dist/esm/comps/Network/index.js

@@ -17,5 +17,5 @@ const NetworkManager = forwardRef((props, ref) => {
             delay: 2
         }, className: `--network-manager --${isOnline == true ? `online` : `offline`} --${size || Size.Small} fixed flex`, children: [_jsx(Box, { className: `--ico`, children: isOnline ? SVGIcons[ALERT.Success] : SVGIcons[ALERT.Error] }), _jsx(Text, { as: `--message`, children: isOnline ? onlineMessage || `internet connection restored :)` : offlineMessage || `no internet connection` })] });
 });
-NetworkManager.displayName = `ZuzUI.NetWorkManager`;
+NetworkManager.displayName = `Zuz.NetWorkManager`;
 export default NetworkManager;

package/dist/esm/comps/Overlay/index.js

@@ -9,5 +9,5 @@ export const Overlay = forwardRef((props, ref) => {
             when,
         }, ...pops });
 });
-Overlay.displayName = `Overlay`;
+Overlay.displayName = `Zuz.Overlay`;
 export default Overlay;

package/dist/esm/comps/Pagination/index.js

@@ -59,5 +59,5 @@ const Pagination = forwardRef((props, ref) => {
                     `${Math.min(getPageValue(_currentPage) * itemsPerPage, itemCount)} of ${itemCount} items`
                 ].join(` `) }), _jsxs(Box, { as: `flex aic jce flex:1 --pgt-btns --pgt-nav`, children: [_jsx(Button, { disabled: getPageValue(_currentPage) <= 1, onClick: (ev) => handlePage({ id: hash ? _hash(getPageValue(_currentPage) - 1) : getPageValue(_currentPage) - 1, label: getPageValue(_currentPage) - 1 }), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == getPageValue(pages[pages.length - 1]), onClick: (ev) => handlePage({ id: hash ? _hash(getPageValue(_currentPage) + 1) : getPageValue(_currentPage) + 1, label: getPageValue(_currentPage) + 1 }), children: SVGIcons.chevronRightOutline })] })] });
 });
-Pagination.displayName = `Pagination`;
+Pagination.displayName = `Zuz.Pagination`;
 export default Pagination;

package/dist/esm/comps/Password/index.d.ts

@@ -1,4 +1,8 @@
 import { InputProps } from '../Input';
-export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {};
-declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & import("react").RefAttributes<HTMLInputElement>>;
+export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {
+    strenthMeter?: boolean;
+};
+declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & {
+    strenthMeter?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default Password;

package/dist/esm/comps/Password/index.js

@@ -1,19 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import { useBase } from '../../hooks';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { checkPasswordStrength } from '../../funs';
+import { useBase, useDebounce } from '../../hooks';
 import Box from '../Box';
 import Button from '../Button';
 import Input from '../Input';
 import SVGIcons from '../svgicons';
+import Text from '../Text';
 const Password = forwardRef((props, ref) => {
-    const { ...pops } = props;
+    const { strenthMeter, onChange, ...pops } = props;
     if (`type` in pops) {
         delete pops[`type`];
     }
     const { style, className, rest } = useBase(pops);
     const [visible, setVisible] = useState(false);
-    return _jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] });
+    const [passw, setPassw] = useState("");
+    const strenth = useMemo(() => checkPasswordStrength(passw), [passw]);
+    const debounce = useDebounce((ev) => {
+        if (strenthMeter)
+            setPassw(ev.target.value);
+        onChange && onChange(ev);
+    }, 100);
+    useEffect(() => { }, []);
+    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
 });
-Password.displayName = `Password`;
+Password.displayName = `Zuz.Password`;
 export default Password;

package/dist/esm/comps/PinInput/index.d.ts

@@ -8,7 +8,7 @@ declare const PinInput: import("react").ForwardRefExoticComponent<import("../.."
     numeric?: boolean;
     size?: import("../..").Size;
     variant?: import("../..").Variant;
-    with?: import("../..").FORMVALIDATION;
+    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
 } & {
     mask?: boolean;
     size?: number;

package/dist/esm/comps/PinInput/index.js

@@ -9,6 +9,11 @@ const PinInput = forwardRef((props, ref) => {
     const inputs = useRef([]);
     let name = `pinput`;
     let required = false;
+    let _with = {};
+    if (`with` in pops) {
+        _with = { with: pops.with };
+        delete pops.with;
+    }
     if (`type` in pops) {
         delete pops.type;
     }
@@ -35,9 +40,9 @@ const PinInput = forwardRef((props, ref) => {
     useEffect(() => {
         inputs.current = inputs.current.slice(0, size || length);
     }, [size || length]);
-    return _jsx(Box, { name: name, style: style, className: `--otp flex aic rel`, "data-required": required, "data-size": size || length || 4, children: Array(size || length || 4).fill(1).map((a, i) => _jsx(Input, { "data-index": i, ref: (el) => {
+    return _jsx(Box, { name: name, style: style, className: `--otp flex aic rel`, "data-required": required, "data-size": size || length || 4, ..._with, children: Array(size || length || 4).fill(1).map((a, i) => _jsx(Input, { autoComplete: "new-password", "data-index": i, ref: (el) => {
                 inputs.current[i] = el;
-            }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
+            }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: mask ? `·` : `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
 });
-PinInput.displayName = `PinInput`;
+PinInput.displayName = `Zuz.PinInput`;
 export default PinInput;

package/dist/esm/comps/ProgressBar/index.js

@@ -15,9 +15,9 @@ const ProgressBar = forwardRef((props, ref) => {
         if (progress && bar.current) {
             bar.current.style.width = `${progress * 100}%`;
         }
-    }, []);
+    }, [progress, bar.current]);
     const { className, style, rest } = useBase(pops);
     return _jsx(Box, { className: `--progress flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
 });
-ProgressBar.displayName = `ProgressBar`;
+ProgressBar.displayName = `Zuz.ProgressBar`;
 export default ProgressBar;

package/dist/esm/comps/Radio/index.js

@@ -15,5 +15,5 @@ const Radio = forwardRef((props, _ref) => {
                     _setChecked(e.target.checked);
                 } }), _jsx(Box, { className: `--dot rel`, children: _jsx(Box, { className: `--rod abs abc` }) }), _jsx(Box, { className: `--value`, children: children })] });
 });
-Radio.displayName = `Radio`;
+Radio.displayName = `Zuz.Radio`;
 export default Radio;

package/dist/esm/comps/ScrollView/index.js

@@ -9,5 +9,5 @@ const ScrollView = forwardRef((props, ref) => {
     // useEffect(() => { }, [])
     return _jsxs(Box, { ref: rootRef, className: className.trim(), as: `--scrollview rel`, children: [_jsx(Box, { as: `--scroll-content`, ref: containerRef, style: _style || {}, children: rest.children }), _jsx(Box, { as: `--scroll-track --track-y abs`, children: _jsx(Box, { as: `--scroll-thumb abs`, ref: thumbY, onMouseDown: onScrollY }) }), _jsx(Box, { as: `--scroll-track --track-x abs`, children: _jsx(Box, { as: `--scroll-thumb abs`, ref: thumbX, onMouseDown: onScrollX }) })] });
 });
-ScrollView.displayName = `ZuzUI.ScrollView`;
+ScrollView.displayName = `Zuz.ScrollView`;
 export default ScrollView;

package/dist/esm/comps/Search/index.d.ts

@@ -4,7 +4,7 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     numeric?: boolean;
     size?: import("../..").Size;
     variant?: Variant;
-    with?: import("../..").FORMVALIDATION;
+    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
 } & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;

package/dist/esm/comps/Search/index.js

@@ -38,5 +38,5 @@ const Search = forwardRef((props, ref) => {
     useEffect(() => { }, []);
     return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
 });
-Search.displayName = `Search`;
+Search.displayName = `Zuz.Search`;
 export default Search;

package/dist/esm/comps/Segmented/index.js

@@ -59,5 +59,5 @@ const Segmented = forwardRef((props, ref) => {
                     index: i
                 } }, `segment-${item.label}-${i}`))] });
 });
-Segmented.displayName = `ZuzUI.SelectTabs`;
+Segmented.displayName = `Zuz.SelectTabs`;
 export default Segmented;

package/dist/esm/comps/Select/index.d.ts

@@ -1,5 +1,6 @@
 import { Option } from "./types";
 declare const Select: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "onChange"> & {
+    variant?: import("../..").Variant;
     required?: import("../..").FORMVALIDATION;
     options: Option[];
     label?: string;

package/dist/esm/comps/Select/index.js

@@ -9,7 +9,7 @@ import SVGIcons from "../svgicons";
 import Text from "../Text";
 import OptionItem from "./optionItem";
 const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
+    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
     const [value, setValue] = useState(selected ?
         typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
         : options[0]);
@@ -40,7 +40,7 @@ const Select = forwardRef((props, ref) => {
             setQuery(null);
         }
     }, [choosing]);
-    return _jsxs(Box, { className: `--select ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
+    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { y: 5, opacity: 0 },
@@ -58,5 +58,5 @@ const Select = forwardRef((props, ref) => {
                     }))
                         .map((o) => _jsx(OptionItem, { updateValue: updateValue, value: value, o: o }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
 });
-Select.displayName = `Select`;
+Select.displayName = `Zuz.Select`;
 export default Select;

package/dist/esm/comps/Select/types.d.ts

@@ -1,5 +1,5 @@
 import { FormEventHandler } from "react";
-import { FORMVALIDATION } from "../../types/enums";
+import { FORMVALIDATION, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 /**
  * Represents an option which can be either a string or an OptionObject.
@@ -21,6 +21,11 @@ export interface OptionItemProps {
  * Props for the Select component.
  */
 export type SelectProps = Omit<BoxProps, "onChange"> & {
+    /**
+     * Size of the select field.
+     * @default "md"
+     */
+    variant?: Variant;
     /**
      * Indicates if the select field is required and its validation type.
      */

package/dist/esm/comps/Sheet/index.js

@@ -189,5 +189,5 @@ export const isSheetHandler = (src) => {
         && `success` in src
         && `error` in src;
 };
-Sheet.displayName = `Sheet`;
+Sheet.displayName = `Zuz.Sheet`;
 export default Sheet;

package/dist/esm/comps/Sidebar/index.js

@@ -5,5 +5,5 @@ const Sidebar = forwardRef((props, ref) => {
     const { layout, logo } = props;
     return _jsxs(Box, { ref: ref, className: `--sidebar --${layout || `2-columns`} flex cols`, children: [_jsx(Box, { as: `--logo`, children: logo }), _jsx(Box, { as: `--nav flex cols` })] });
 });
-Sidebar.displayName = `Sidebar`;
+Sidebar.displayName = `Zuz.Sidebar`;
 export default Sidebar;

package/dist/esm/comps/Slider/index.js

@@ -78,5 +78,5 @@ const Slider = forwardRef((props, ref) => {
     }, [isDragging]);
     return _jsx(Box, { ref: slider, "data-value": value || 0, className: `--slider --${type || SLIDER.Default} flex rel ${className}`.trim(), style: { ...style }, children: SLIDER.Text === type ? _jsx(_Fragment, { children: _jsx(Text, { ref: text, onMouseDown: handleMouseDown, className: `--slider-text`, children: value || 0 }) }) : _jsxs(_Fragment, { children: [_jsx(Box, { ref: track, className: `--slider-track abs fill` }), _jsx(Box, { ref: knob, className: `--slider-knob abs` }), _jsx(Input, { ref: input, onInput: handleInput, className: `abs fill`, tabIndex: 0, type: type || SLIDER.Default, defaultValue: value || 0, step: step, max: max, min: min })] }) });
 });
-Slider.displayName = `Slider`;
+Slider.displayName = `Zuz.Slider`;
 export default Slider;

package/dist/esm/comps/Span/index.js

@@ -7,5 +7,5 @@ const Span = forwardRef((props, ref) => {
     const { style: _style, className, rest } = useBase(pops);
     return _jsx("span", { ref: ref, style: style, className: className, ...rest });
 });
-Span.displayName = `Span`;
+Span.displayName = `Zuz.Span`;
 export default Span;

package/dist/esm/comps/Spinner/index.js

@@ -49,5 +49,5 @@ const Spinner = forwardRef((props, ref) => {
             ...build()
         }, ...rest, children: child() });
 });
-Spinner.displayName = `ZuzUI.Spinner`;
+Spinner.displayName = `Zuz.Spinner`;
 export default Spinner;

package/dist/esm/comps/Switch/index.d.ts

@@ -4,6 +4,7 @@ declare const Switch: import("react").ForwardRefExoticComponent<import("../..").
     type?: CHECKBOX;
     size?: import("../..").Size;
     variant?: import("../..").Variant;
+    checked?: boolean;
     onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default Switch;

package/dist/esm/comps/Switch/index.js

@@ -5,5 +5,5 @@ import CheckBox from "../CheckBox";
 const Switch = forwardRef((props, ref) => {
     return _jsx(CheckBox, { type: CHECKBOX.Switch, ...props, ref: ref });
 });
-Switch.displayName = `Switch`;
+Switch.displayName = `Zuz.Switch`;
 export default Switch;

package/dist/esm/comps/TabView/body.js

@@ -21,5 +21,5 @@ const TabBody = ({ size, index, active, render, content }) => {
             ...style
         }, className: `--content`, children: (render || active) && content });
 };
-TabBody.displayName = `TabBody`;
+TabBody.displayName = `Zuz.TabBody`;
 export default TabBody;

package/dist/esm/comps/TabView/index.js

@@ -46,5 +46,5 @@ const TabView = forwardRef((props, ref) => {
                         transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)`
                     }, children: tabs.map((tab, index) => _jsx(TabBody, { index: index, active: index === activeTab, size: size, render: render, content: tab.body }, `tab-body-${tab.key || index}-${tabViewID}`)) }) })] });
 });
-TabView.displayName = `TabView`;
+TabView.displayName = `Zuz.TabView`;
 export default TabView;

package/dist/esm/comps/TabView/tab.js

@@ -6,5 +6,5 @@ const TabItem = ({ tab, index, activeTab, onClick }) => {
     const { icon, label } = tab;
     return _jsxs(Button, { onClick: e => onClick(index), className: `--tab jcc ${index === activeTab ? '--active' : ''}`.trim(), children: [icon && (typeof icon === 'string' ? _jsx(Icon, { className: `--icon`, name: icon }) : icon), _jsx(Text, { className: `--label rel`, children: label })] });
 };
-TabItem.displayName = `TabItem`;
+TabItem.displayName = `Zuz.TabItem`;
 export default TabItem;

package/dist/esm/comps/Table/col.js

@@ -19,5 +19,5 @@ const TColumn = (props) => {
                 && sortBy == id
                 && _jsx(Box, { as: `--arrow flex aib`, children: _sort == 1 ? SVGIcons.arrowUp : SVGIcons.arrowDown })] });
 };
-TColumn.displayName = `Column`;
+TColumn.displayName = `Zuz.Column`;
 export default TColumn;

package/dist/esm/comps/Table/index.js

@@ -7,7 +7,61 @@ import Box from "../Box";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
 import TRow from "./row";
-// const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
+/**
+ * `Table` is a highly flexible and customizable generic component for rendering data in a tabular format.
+ *
+ * This component supports features such as:
+ * - Dynamic column schema and row data.
+ * - Sortable and selectable rows.
+ * - Optional pagination with custom control.
+ * - Row-level animation and hover states.
+ * - Loading placeholders and spinners.
+ * - Context menu support for rows.
+ *
+ * @template T - The shape of the row data object.
+ *
+ * @param props - The props for configuring the table behavior and appearance.
+ * @param props.schema - Column definitions used to render the table header and body.
+ * @param props.rows - The array of row data to display.
+ * @param props.rowCount - Optional total row count for server-side pagination.
+ * @param props.rowsPerPage - Number of rows shown per page.
+ * @param props.currentPage - Current page index (for pagination control).
+ * @param props.pagination - Whether pagination is enabled.
+ * @param props.paginationHash - A value to force pagination re-render.
+ * @param props.showPaginationOnZeroPageCount - Show pagination controls even with 0 rows.
+ * @param props.animateRows - Whether to animate rows on render/update.
+ * @param props.header - Whether to show the header row.
+ * @param props.rowClassName - CSS class name to apply to each row.
+ * @param props.selectableRows - Whether rows are selectable.
+ * @param props.hoverable - Whether rows should show hover styles.
+ * @param props.sortBy - Default column key to sort rows.
+ * @param props.loading - Enables loading state with placeholder rows and spinner.
+ * @param props.loadingRowCount - Number of placeholder rows to render during loading.
+ * @param props.loadingMessage - Optional loading text to show next to spinner.
+ * @param props.spinner - Spinner type to use when loading.
+ * @param props.onSort - Callback when a column header triggers sorting.
+ * @param props.onRowSelectToggle - Callback when a row’s selected state changes.
+ * @param props.onPageChange - Callback when pagination state changes.
+ * @param props.onRowContextMenu - Callback when a row is right-clicked.
+ * @param props.className - Additional class names to apply to the root table container.
+ * @param props.style - Inline styles to apply to the root table container.
+ *
+ * @returns The rendered table component.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   schema={[
+ *     { id: 'name', value: 'Name', sortable: true },
+ *     { id: 'email', value: 'Email' },
+ *   ]}
+ *   rows={[{ name: 'Kamran', email: 'kamran@example.com' }]}
+ *   selectableRows
+ *   pagination
+ *   loading={false}
+ * />
+ * ```
+ */
 const Table = (props, ref) => {
     const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, loading, loadingRowCount, loadingMessage, spinner, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
     const _pagination = useRef(null);
@@ -43,6 +97,6 @@ const Table = (props, ref) => {
     const _paginated = useMemo(() => _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }), []);
     return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: loadingMessage })] }), loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), pagination && _pagination.current != null && _jsx(Box, { as: `--row flex aic --row-footer`, children: _paginated })] });
 };
-Table.displayName = `Table`;
+Table.displayName = `Zuz.Table`;
 const ForwardedTable = forwardRef(Table);
 export default ForwardedTable;

package/dist/esm/comps/Table/row.js

@@ -83,5 +83,5 @@ const TRow = (props) => {
                 return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(i, `--selector-${c.id}`, c.id.toString()), ids.includes(String(c.id)) ? _jsx(TColumn, { pubsub: pubsub, idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id).includes(`.`) ? String(c.id).split(`.`).reverse()[0] : c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
             })] });
 };
-TRow.displayName = `Row`;
+TRow.displayName = `Zuz.Row`;
 export default TRow;

package/dist/esm/comps/Text/index.js

@@ -10,5 +10,5 @@ const Text = forwardRef((props, ref) => {
     const Tag = `h${props.h || 1}`;
     return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });
-Text.displayName = `ZuzUI.Text`;
+Text.displayName = `Zuz.Text`;
 export default Text;

package/dist/esm/comps/TextArea/index.js

@@ -9,5 +9,5 @@ const TextArea = forwardRef((props, ref) => {
     };
     return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: { ...style, resize: resize || `none` }, onInput: handleInput, ref: ref, ...rest });
 });
-TextArea.displayName = `ZuzUI.TextArea`;
+TextArea.displayName = `Zuz.TextArea`;
 export default TextArea;