@zuzjs/ui 0.7.7 → 0.7.8

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Size } from "../../types/enums";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
-import { Size } from "../../types/enums";
 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`;
 export default Fab;

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

@@ -3,5 +3,8 @@ export type FilterProps = {
     names?: FILTER[];
     strength?: number;
 };
-declare const Filters: (props: FilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Filters: {
+    (props: FilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Filters;

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

@@ -10,4 +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`;
 export default Filters;

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

@@ -1,7 +1,7 @@
-import { BoxProps } from "../Box";
 import { dynamicObject } from "../../types";
-import { SheetHandler } from "../Sheet";
 import { SPINNER } from "../../types/enums";
+import { BoxProps } from "../Box";
+import { SheetHandler } from "../Sheet";
 export type FormProps = BoxProps & {
     /** Name of form, will be appended to --form-{name} in className
      * whitespace will be replaced with dash (-)

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import Box from "../Box";
+import { addPropsToChildren, isEmail, withPost } from "../../funs";
 import { useBase } from "../../hooks";
-import Sheet, { isSheetHandler } from "../Sheet";
-import Cover from "../Cover";
 import { FORMVALIDATION, SHEET } from "../../types/enums";
-import { addPropsToChildren, isEmail, withPost } from "../../funs";
+import Box from "../Box";
+import Cover from "../Cover";
+import Sheet, { isSheetHandler } from "../Sheet";
 /**
  * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
  * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
@@ -89,15 +89,12 @@ const Form = forwardRef((props, ref) => {
             switch (_with.toUpperCase()) {
                 case FORMVALIDATION.Email:
                     return isEmail(el.value);
-                    break;
                 case FORMVALIDATION.Uri:
                     console.log(`Add FORMVALIDATION.Uri`);
                     return false;
-                    break;
                 case FORMVALIDATION.Password:
                     console.log(`Add FORMVALIDATION.Password`);
                     return false;
-                    break;
                 case FORMVALIDATION.MatchField:
                     const [__, field] = el.getAttribute(`with`).split(`@`);
                     const _el = document.querySelector(`[name=${field.trim()}]`);
@@ -264,4 +261,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`;
 export default Form;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { BoxProps } from "../Box";
 import { Size } from "../../types/enums";
+import { BoxProps } from "../Box";
 export type IconProps = Omit<BoxProps, `name`> & {
     name: string | ReactNode;
     pathCount?: number;

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

@@ -2,11 +2,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
-import Span from "../Span";
 import { Size } from "../../types/enums";
+import Span from "../Span";
 const Icon = forwardRef((props, ref) => {
     const { name, pathCount, size, ...pops } = props;
     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`;
 export default Icon;

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

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

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

@@ -12,4 +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`;
 export default Input;

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

@@ -6,4 +6,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`;
 export default Label;

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

@@ -3,5 +3,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     size?: Size;
     items: import("./types").ListItem[];
     ol?: boolean;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

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

@@ -14,4 +14,5 @@ const List = forwardRef((props, ref) => {
         children: items.map((item, index) => _jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`))
     });
 });
+List.displayName = `List`;
 export default List;

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

@@ -1,5 +1,8 @@
 import { type ListItem } from "./types";
-declare const Item: (props: {
-    meta: ListItem;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const Item: {
+    (props: {
+        meta: ListItem;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Item;

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

@@ -13,4 +13,5 @@ const Item = (props) => {
     });
     return _jsx("li", { style: style, className: className, ...rest, children: typeof meta == `string` ? meta : label });
 };
+Item.displayName = `ListItem`;
 export default Item;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from "react";
-import Box from "../Box";
-import Text from "../Text";
-import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
 import { useNetworkStatus } from "../../hooks";
+import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
 import SVGIcons from "../svgicons";
+import Text from "../Text";
 const NetworkManager = forwardRef((props, ref) => {
     const isOnline = useNetworkStatus();
     const { onlineMessage, offlineMessage, size } = props;
@@ -19,4 +19,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 = `NetWorkManager`;
 export default NetworkManager;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Box from "../Box";
 import { TRANSITIONS } from "../../types/enums";
+import Box from "../Box";
 export const Overlay = forwardRef((props, ref) => {
     const { when, ...pops } = props;
     return _jsx(Box, { ref: ref, "aria-hidden": !when, className: `--overlay fixed fill`, animate: {
@@ -9,4 +9,5 @@ export const Overlay = forwardRef((props, ref) => {
             when,
         }, ...pops });
 });
+Overlay.displayName = `Overlay`;
 export default Overlay;

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

@@ -59,4 +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`;
 export default Pagination;

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { useBase } from '../../hooks';
-import Input from '../Input';
 import Box from '../Box';
 import Button from '../Button';
+import Input from '../Input';
 import SVGIcons from '../svgicons';
 const Password = forwardRef((props, ref) => {
     const { ...pops } = props;
@@ -15,4 +15,5 @@ const Password = forwardRef((props, ref) => {
     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 })] });
 });
+Password.displayName = `Password`;
 export default Password;

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

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import { useBase } from '../../hooks';
-import Input from '../Input';
 import Box from '../Box';
+import Input from '../Input';
 const PinInput = forwardRef((props, ref) => {
     const { size, length, mask, ...pops } = props;
     const inputs = useRef([]);
@@ -39,4 +39,5 @@ const PinInput = forwardRef((props, ref) => {
                 inputs.current[i] = el;
             }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
 });
+PinInput.displayName = `PinInput`;
 export default PinInput;

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

@@ -19,4 +19,5 @@ const ProgressBar = forwardRef((props, ref) => {
     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`;
 export default ProgressBar;

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

@@ -15,4 +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`;
 export default Radio;

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

@@ -1,5 +1,5 @@
-import { InputProps } from '../Input';
 import { Size } from '../../types/enums';
+import { InputProps } from '../Input';
 export type SearchProps = InputProps & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;

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

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { useBase } from '../../hooks';
-import Input from '../Input';
+import { Size } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
+import Input from '../Input';
 import SVGIcons from '../svgicons';
-import { Size } from '../../types/enums';
 const Search = forwardRef((props, ref) => {
     const { animate, withStyle, onChange, ...pops } = props;
     const { style } = useBase(pops);
@@ -34,4 +34,5 @@ const Search = forwardRef((props, ref) => {
     useEffect(() => { }, []);
     return _jsxs(Box, { style: style, className: `--search --${props.size || Size.Small} flex aic rel ${searchStyle}`.trim(), children: [_jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.size || Size.Small}`, ...pops }), _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc abs`, size: props.size || Size.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
 });
+Search.displayName = `Search`;
 export default Search;

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useBase } from "../../hooks";
@@ -54,9 +53,10 @@ const Segmented = forwardRef((props, ref) => {
             setSelected(selected);
         }
     }, [selected, _selected]);
-    return _jsxs(Box, { suppressHydrationWarning: true, ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${size || Size.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
+    return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${size || Size.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
                     ...item,
                     index: i
                 } }, `segment-${item.label}-${i}`))] });
 });
+Segmented.displayName = `SelectTabs`;
 export default Segmented;

package/dist/esm/comps/Segmented/item.d.ts

@@ -1,3 +1,6 @@
 import { SegmentItemProps } from "./types";
-declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SegmentItem: {
+    ({ onSelect, meta, selected }: SegmentItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SegmentItem;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useDelayed } from "../..";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -7,32 +8,24 @@ const SegmentItem = ({ onSelect, meta, selected }) => {
     const ref = useRef(null);
     const { index, icon, label } = meta;
     const [pos, setPos] = useState({ x: 0, width: 0 });
-    // const [ _selected, setSelected ] = useState(selected)
-    useEffect(() => {
-        if (ref.current) {
+    const hydrated = useDelayed();
+    useLayoutEffect(() => {
+        if (hydrated && ref.current) {
             const { width, x } = ref.current.getBoundingClientRect();
             setPos({ x, width });
             if (selected) {
                 onSelect(index, width, x, meta, true);
-                // setSelected(meta.index)
             }
-            // if ( selected && !_initial ){
-            //     ref.current.click()
-            //     setInitial(true)
-            // }
         }
-        // else
-        //     setInitial(false)
-    }, [ref.current]);
+    }, [hydrated, ref.current]);
     useEffect(() => {
         if (selected) {
             onSelect(index, pos.width, pos.x, meta, false);
         }
     }, [selected]);
-    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta, false), ref: ref, 
-        // data-x={pos.x}
-        suppressHydrationWarning: true, className: `--segment-item flex aic rel ${selected ? `--segement-active` : ``}`.trim(), children: [icon ?
+    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta, false), ref: ref, className: `--segment-item flex aic rel ${selected ? `--segement-active` : ``}`.trim(), children: [icon ?
                 `string` == typeof icon ? _jsx(Icon, { name: icon, as: `--segment-icon` }) : _jsx(Box, { as: `--segment-icon flex aic jcc`, children: icon })
                 : null, label && String(label).trim() != `` && _jsx(Box, { className: `--segment-label`, children: label || `Item ${index}` })] });
 };
+SegmentItem.displayName = `SelectTabItem`;
 export default SegmentItem;

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

@@ -1,8 +1,6 @@
-import { FORMVALIDATION } from "../../types/enums";
-import { BoxProps } from "../Box";
 import { Option } from "./types";
-declare const Select: import("react").ForwardRefExoticComponent<BoxProps & {
-    required?: FORMVALIDATION;
+declare const Select: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    required?: import("../..").FORMVALIDATION;
     options: Option[];
     label?: string;
     selected?: string | Option;

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
-import SVGIcons from "../svgicons";
-import Box from "../Box";
 import { useBase } from "../../hooks";
+import Box from "../Box";
 import Button from "../Button";
-import Text from "../Text";
 import Input from "../Input";
+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;
@@ -58,4 +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`;
 export default Select;

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

@@ -1,3 +1,6 @@
 import { OptionItemProps } from "./types";
-declare const OptionItem: ({ value, updateValue, o }: OptionItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const OptionItem: {
+    ({ value, updateValue, o }: OptionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default OptionItem;

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

@@ -3,4 +3,5 @@ import Button from "../Button";
 const OptionItem = ({ value, updateValue, o }) => {
     return _jsx(Button, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: `string` == typeof o ? o : o.label });
 };
+OptionItem.displayName = `Option`;
 export default OptionItem;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { SHEET, SHEET_ACTION_POSITION, SPINNER, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import { ZuzProps } from "../../types";
+import { SHEET, SHEET_ACTION_POSITION, SPINNER, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 export type SheetProps = ZuzProps & {
     title?: string;
     message?: string | ReactNode;

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES } from "../../types/enums";
-import Box from "../Box";
-import { useBase } from "../../hooks";
 import { uuid } from "../../funs";
 import { animationTransition } from "../../funs/css";
+import { useBase } from "../../hooks";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
 import Button from "../Button";
 import Cover from "../Cover";
 import Overlay from "../Overlay";
@@ -184,4 +184,5 @@ export const isSheetHandler = (src) => {
         && `success` in src
         && `error` in src;
 };
+Sheet.displayName = `Sheet`;
 export default Sheet;

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

@@ -5,4 +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`;
 export default Sidebar;

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

@@ -1,5 +1,5 @@
-import { BoxProps } from "../Box";
 import { SLIDER } from "../../types/enums";
+import { BoxProps } from "../Box";
 export type SliderProps = BoxProps & {
     type?: SLIDER;
     value?: number;

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
-import Box from "../Box";
-import { SLIDER } from "../../types/enums";
 import { useBase } from "../../hooks";
+import { SLIDER } from "../../types/enums";
+import Box from "../Box";
 import Input from "../Input";
 import Text from "../Text";
 const Slider = forwardRef((props, ref) => {
@@ -78,4 +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`;
 export default Slider;

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

@@ -7,4 +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`;
 export default Span;

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

@@ -1,5 +1,5 @@
-import { BoxProps } from "../Box";
 import { Size, SPINNER } from "../../types/enums";
+import { BoxProps } from "../Box";
 export type SpinnerProps = BoxProps & {
     type?: SPINNER;
     size?: Size | number;

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Box from "../Box";
-import { Size, SPINNER } from "../../types/enums";
-import { useBase } from "../../hooks";
 import { hexToRgba } from "../../funs";
+import { useBase } from "../../hooks";
+import { Size, SPINNER } from "../../types/enums";
+import Box from "../Box";
 const Spinner = forwardRef((props, ref) => {
     const { type, size, width, speed, color, background, foreground, ...pops } = props;
     const defaultColor = `#000000`;
@@ -39,13 +39,10 @@ const Spinner = forwardRef((props, ref) => {
         switch (type || SPINNER.Simple) {
             case SPINNER.Simple:
                 return null;
-                break;
             case SPINNER.Wave:
                 return _jsxs(_Fragment, { children: [_jsx(Box, { as: `--dot --dot-1` }), _jsx(Box, { as: `--dot --dot-2` }), _jsx(Box, { as: `--dot --dot-3` })] });
-                break;
             case SPINNER.Roller:
                 return null;
-                break;
         }
     };
     return _jsx(Box, { className: `${className} --spinner --${(type || SPINNER.Simple).toLowerCase()} --${size || Size.Default}`.trim(), style: {
@@ -53,4 +50,5 @@ const Spinner = forwardRef((props, ref) => {
             ...build()
         }, ...rest, children: child() });
 });
+Spinner.displayName = `Spinner`;
 export default Spinner;

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

@@ -1,5 +1,5 @@
-import { CheckboxHandler } from "../CheckBox/types";
 import { CHECKBOX } from "../../types/enums";
+import { CheckboxHandler } from "../CheckBox/types";
 declare const Switch: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: CHECKBOX;
     size?: import("../..").Size;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import CheckBox from "../CheckBox";
 import { CHECKBOX } from "../../types/enums";
+import CheckBox from "../CheckBox";
 const Switch = forwardRef((props, ref) => {
     return _jsx(CheckBox, { type: CHECKBOX.Switch, ...props, ref: ref });
 });
+Switch.displayName = `Switch`;
 export default Switch;

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

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

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

@@ -46,4 +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`;
 export default TabView;

package/dist/esm/comps/TabView/tab.d.ts

@@ -1,3 +1,6 @@
 import { TabProps } from "./types";
-declare const TabItem: ({ tab, index, activeTab, onClick }: TabProps) => import("react/jsx-runtime").JSX.Element;
+declare const TabItem: {
+    ({ tab, index, activeTab, onClick }: TabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabItem;

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

@@ -6,4 +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`;
 export default TabItem;

package/dist/esm/comps/Table/col.d.ts

@@ -1,10 +1,13 @@
 import { CSSProperties } from "react";
 import { PubSub } from "../..";
 import type { Column } from "./types";
-declare const TColumn: <T>(props: Column<T> & {
-    idx: number;
-    style?: CSSProperties;
-    pubsub: PubSub;
-    sortBy?: string | null;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const TColumn: {
+    <T>(props: Column<T> & {
+        idx: number;
+        style?: CSSProperties;
+        pubsub: PubSub;
+        sortBy?: string | null;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TColumn;

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

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

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

@@ -36,5 +36,6 @@ const Table = (props, ref) => {
     };
     return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys[index]}-${schema[0].id}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { hash: paginationHash, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
 };
+Table.displayName = `Table`;
 const ForwardedTable = forwardRef(Table);
 export default ForwardedTable;

package/dist/esm/comps/Table/row.d.ts

@@ -1,3 +1,6 @@
 import type { Row } from "./types";
-declare const TRow: <T>(props: Row<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TRow: {
+    <T>(props: Row<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TRow;