@zuzjs/ui 0.7.8 → 0.8.0

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from "react";
+import { forwardRef } from "react";
 import { useNetworkStatus } from "../../hooks";
 import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
@@ -8,9 +8,7 @@ import Text from "../Text";
 const NetworkManager = forwardRef((props, ref) => {
     const isOnline = useNetworkStatus();
     const { onlineMessage, offlineMessage, size } = props;
-    useEffect(() => {
-    }, []);
-    return _jsxs(Box, { animate: {
+    return _jsxs(Box, { fx: {
             from: { x: `-50%`, y: 200, opacity: 0 },
             to: { x: `-50%`, y: 0, opacity: 1 },
             when: isOnline == false,
@@ -19,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 = `NetWorkManager`;
+NetworkManager.displayName = `ZuzUI.NetWorkManager`;
 export default NetworkManager;

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

@@ -7,7 +7,7 @@ import Box from "../Box";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
 import { PaginationStyle } from "./types";
-const Pagination = forwardRef((props, _ref) => {
+const Pagination = forwardRef((props, ref) => {
     const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, hash, loading, seperator, renderOnZeroPageCount, onPageChange, ...pops } = props;
     const _hashKey = useMemo(() => toHash(numberInRange(4, 8)), []);
     const _hash = useCallback((input) => `${toHash(input, hash || 6, _hashKey)}${seperator || ``}${_hashKey}`, [_hashKey]);
@@ -54,7 +54,7 @@ const Pagination = forwardRef((props, _ref) => {
     }, [itemCount, itemsPerPage, _currentPage]);
     if (pages.length <= 1 && ((renderOnZeroPageCount == undefined ? false : renderOnZeroPageCount) === false))
         return null;
-    return _jsxs(Box, { as: `--pagination --pgt-${paginationStyle || PaginationStyle.Table} flex aic w:100% jcc ${className}`, children: [_jsx(Box, { as: `flex flex:1 aic --pgt-btns`, children: (pages.length > 1 ? pages : [{ id: 1, label: 1 }, { id: -1, label: _breakLabel }]).map((page, index, items) => _jsx(Button, { disabled: page.id == -1 || getPageValue(_currentPage) == +page.label, className: (`string` == typeof page ? page : page.label) == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => handlePage(page), children: `string` == typeof page ? page : page.label }, `--pg-${index}-${page.id}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
+    return _jsxs(Box, { ref: ref, as: `--pagination --pgt-${paginationStyle || PaginationStyle.Table} flex aic w:100% jcc ${className}`, children: [_jsx(Box, { as: `flex flex:1 aic --pgt-btns`, children: (pages.length > 1 ? pages : [{ id: 1, label: 1 }, { id: -1, label: _breakLabel }]).map((page, index, items) => _jsx(Button, { disabled: page.id == -1 || getPageValue(_currentPage) == +page.label, className: (`string` == typeof page ? page : page.label) == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => handlePage(page), children: `string` == typeof page ? page : page.label }, `--pg-${index}-${page.id}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
                     `Showing ${(getPageValue(_currentPage) - 1) * itemsPerPage + 1} - `,
                     `${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 })] })] });

package/dist/cjs/comps/ScrollView/index.d.ts

@@ -0,0 +1,5 @@
+declare const ScrollView: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    style?: import("react").CSSProperties;
+    speed?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default ScrollView;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase, useScrollbar } from "../../hooks";
+import Box from "../Box";
+const ScrollView = forwardRef((props, ref) => {
+    const { speed, style: _style, ...pops } = props;
+    const { rootRef, containerRef, thumbY, thumbX, onScrollY, onScrollX } = useScrollbar();
+    const { style, className, rest } = useBase(pops);
+    // 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`;
+export default ScrollView;

package/dist/cjs/comps/ScrollView/types.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+import { BoxProps } from "../Box";
+export type ScrollViewProps = BoxProps & {
+    style?: CSSProperties;
+    speed?: number;
+};

package/dist/cjs/comps/ScrollView/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,18 +1,15 @@
-import { Size } from '../../types/enums';
-import { InputProps } from '../Input';
-export type SearchProps = InputProps & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    withStyle?: string;
-};
+import { Variant } from '../../types/enums';
+import { SearchHandler } from './types';
 declare const Search: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     numeric?: boolean;
-    size?: Size;
-    variant?: import("../..").Variant;
+    size?: import("../..").Size;
+    variant?: Variant;
     with?: import("../..").FORMVALIDATION;
 } & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
     withStyle?: string;
-} & import("react").RefAttributes<HTMLInputElement>>;
+    shortcut?: import("..").KeyCombination;
+    reverse?: boolean;
+} & import("react").RefAttributes<SearchHandler>>;
 export default Search;

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

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useBase } from '../../hooks';
-import { Size } from '../../types/enums';
+import { Variant } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
 import Input from '../Input';
+import KeyBoardKeys from '../KeyboardKeys';
 import SVGIcons from '../svgicons';
 const Search = forwardRef((props, ref) => {
-    const { animate, withStyle, onChange, ...pops } = props;
-    const { style } = useBase(pops);
-    const { className: searchStyle } = useBase({ as: withStyle || `` });
+    const { fx, animate, withStyle, as, reverse, onChange, ...pops } = props;
+    const { style, className } = useBase({ as: props.as });
+    // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
     const [query, setQuery] = useState(``);
     const innerRef = useRef(null);
     if (`type` in props) {
@@ -31,8 +32,11 @@ const Search = forwardRef((props, ref) => {
         }
         // onSubmit?.(query)
     };
+    useImperativeHandle(ref, () => ({
+        focus: () => innerRef.current?.focus()
+    }));
     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 })] });
+    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`;
 export default Search;

package/dist/cjs/comps/Search/types.d.ts

@@ -0,0 +1,12 @@
+import { KeyCombination } from "../..";
+import { InputProps } from "../Input";
+export type SearchProps = InputProps & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+    shortcut?: KeyCombination;
+    reverse?: boolean;
+};
+export interface SearchHandler {
+    focus: () => void;
+}

package/dist/cjs/comps/Search/types.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/comps/Segmented/index.d.ts

@@ -1,4 +1,4 @@
-import { Size } from "../../types/enums";
+import { Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { Segment } from "./types";
 /**
@@ -20,7 +20,8 @@ import { Segment } from "./types";
  * <SelectTabs selected={1} items={segments} />
  */
 declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
-    size?: Size;
+    size?: import("../..").Size;
+    variant?: Variant;
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];

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

@@ -1,7 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useBase } from "../../hooks";
-import { Size } from "../../types/enums";
+import { Variant } from "../../types/enums";
 import Box from "../Box";
 import SegmentItem from "./item";
 /**
@@ -23,7 +24,7 @@ import SegmentItem from "./item";
  * <SelectTabs selected={1} items={segments} />
  */
 const Segmented = forwardRef((props, ref) => {
-    const { animate, fx, items, selected, size, onSwitch, ...pops } = props;
+    const { animate, fx, items, selected, size, variant, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
@@ -37,7 +38,7 @@ const Segmented = forwardRef((props, ref) => {
      */
     const handleSelect = (index, width, x, meta, force) => {
         // console.log(selected, _selected, index, mounted)
-        if (force || _selected != index) {
+        if (force || (_selected != index && _selected != -2)) {
             setSelected(index);
             if (onSwitch)
                 onSwitch(meta);
@@ -53,10 +54,10 @@ const Segmented = forwardRef((props, ref) => {
             setSelected(selected);
         }
     }, [selected, _selected]);
-    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: {
+    return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.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`;
+Segmented.displayName = `ZuzUI.SelectTabs`;
 export default Segmented;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useDelayed } from "../..";
+import { useDelayed } from "../../hooks";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -9,13 +9,22 @@ const SegmentItem = ({ onSelect, meta, selected }) => {
     const { index, icon, label } = meta;
     const [pos, setPos] = useState({ x: 0, width: 0 });
     const hydrated = useDelayed();
+    // const observer = useResizeObserver(ref)
     useLayoutEffect(() => {
         if (hydrated && ref.current) {
             const { width, x } = ref.current.getBoundingClientRect();
+            // const { width, left } =  observer
+            // console.log(pos, { x: left, width })
             setPos({ x, width });
             if (selected) {
                 onSelect(index, width, x, meta, true);
             }
+            // else if ( pos.x != left || pos.width != width ){
+            //     // console.log(`re-triggered`)
+            //     setPos({ x: left, width })
+            //     onSelect(-2, width, left, meta, false)
+            // }
+            // console.log(`hydrated`, index, width, x, observer)
         }
     }, [hydrated, ref.current]);
     useEffect(() => {
@@ -23,7 +32,7 @@ const SegmentItem = ({ onSelect, meta, selected }) => {
             onSelect(index, pos.width, pos.x, meta, false);
         }
     }, [selected]);
-    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 ?
+    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta, false), ref: ref, className: `--segment-item flex aic rel ${selected ? `--segment-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}` })] });
 };

package/dist/cjs/comps/Segmented/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
+import { Size, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
-import { Size } from "../../types/enums";
 /**
  * Individual segment in the `SelectTabs` component.
  * @typedef {Object} Segment
@@ -22,7 +22,11 @@ export interface Segment {
  * @property {Segment[]} items - Array of segments to display.
  */
 export type SegmentProps = BoxProps & {
+    /**
+     * @deprecated use variant
+     */
     size?: Size;
+    variant?: Variant;
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];

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

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

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

@@ -20,7 +20,7 @@ export interface OptionItemProps {
 /**
  * Props for the Select component.
  */
-export type SelectProps = BoxProps & {
+export type SelectProps = Omit<BoxProps, "onChange"> & {
     /**
      * Indicates if the select field is required and its validation type.
      */

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

@@ -11,6 +11,8 @@ export type SheetProps = ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 };
 export interface SheetActionHandler {
     key?: string;
@@ -38,6 +40,8 @@ declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 } & import("react").RefAttributes<SheetHandler>>;
 export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
 export default Sheet;

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

@@ -12,7 +12,7 @@ import Overlay from "../Overlay";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, ...pops } = props;
+    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, onShow, onHide, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [title, setTitle] = useState(_title || ``);
     const [msg, setMsg] = useState(message || ``);
@@ -125,9 +125,11 @@ const Sheet = forwardRef((props, ref) => {
             setSheetType(type || SHEET.Default);
             setMsg(message);
             setVisible(true);
+            onShow?.();
         },
         hide() {
             setVisible(false);
+            onHide?.();
         }
     }));
     const buildAnimation = useMemo(() => {
@@ -138,10 +140,13 @@ const Sheet = forwardRef((props, ref) => {
         };
         if (sheetType == SHEET.Dialog) {
             if (transition) {
-                const { from, to } = animationTransition(transition);
+                const { from, to } = animationTransition(transition, 20, true);
                 return {
-                    from: { ...from, x: `-50%`, y: `-50%` },
-                    to: { ...to, x: `-50%`, y: `-50%` },
+                    // from: { ...from, x: `-50%`, y: `-50%` },
+                    // to: { ...to, x: `-50%`, y: `-50%` },
+                    // from: { ...from, x: `-50%` },
+                    // to: { ...to, x: `-50%` },
+                    from, to,
                     curve: curve || TRANSITION_CURVES.EaseInOut,
                     ...base
                 };
@@ -173,9 +178,9 @@ const Sheet = forwardRef((props, ref) => {
         }
     }, [visible]);
     if (sheetType == SHEET.Dialog) {
-        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, animate: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
+        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, fx: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
     }
-    return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, animate: buildAnimation, ref: innerRef, children: visible ? msg : null });
+    return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, fx: buildAnimation, ref: innerRef, children: visible ? msg : null });
 });
 export const isSheetHandler = (src) => {
     return typeof src === `object`

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { hexToRgba } from "../../funs";
@@ -50,5 +49,5 @@ const Spinner = forwardRef((props, ref) => {
             ...build()
         }, ...rest, children: child() });
 });
-Spinner.displayName = `Spinner`;
+Spinner.displayName = `ZuzUI.Spinner`;
 export default Spinner;

package/dist/cjs/comps/TabView/index.d.ts

@@ -1,5 +1,5 @@
 import { Tab, TabViewHandler } from "./types";
-declare const TabView: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+declare const TabView: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "onChange"> & {
     onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     variant?: "fixed" | "default";

package/dist/cjs/comps/TabView/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export interface Tab {
-    onSelect: (tab: Tab, index: number) => void;
+    onSelect?: (tab: Tab, index: number) => void;
     tag?: string;
     key?: string;
     icon?: ReactNode | ReactNode[];
@@ -15,7 +15,7 @@ export type TabProps = {
     activeTab: number;
     onClick: (index: number) => void;
 };
-export type TabViewProps = BoxProps & {
+export type TabViewProps = Omit<BoxProps, "onChange"> & {
     onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     variant?: "fixed" | "default";

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from "react";
-import { PubSub, uuid } from "../..";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { PubSub, SPINNER, Spinner, Text, uuid } from "../..";
 import { useBase } from "../../hooks";
 import Box from "../Box";
 import Pagination from "../Pagination";
@@ -9,7 +9,8 @@ import { PaginationStyle } from "../Pagination/types";
 import TRow from "./row";
 // const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
 const Table = (props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    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);
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
             flex: c.weight || 1,
@@ -28,13 +29,19 @@ const Table = (props, ref) => {
     const { style, className, rest } = useBase(pops);
     const _tableRef = useRef(null);
     const pubsub = useMemo(() => new PubSub(), []);
-    const rowKeys = useMemo(() => rows.map(() => uuid()), [rows]);
+    const rowKeys = useRef(rows.map(() => uuid()));
     const [_sortBy, setSortBy] = useState(sortBy || null);
+    // const placeholderRows = useMemo(() => {
+    // }, [loading, loadingRowCount])
+    useEffect(() => {
+        rowKeys.current = rows.map(() => uuid()); // Update only when rows change
+    }, [rows]);
     const handleSort = (col, dir) => {
         setSortBy(col);
         onSort?.(col, dir);
     };
-    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 }) })] });
+    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`;
 const ForwardedTable = forwardRef(Table);

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

@@ -4,9 +4,10 @@ import { useDelayed } from "../../hooks";
 import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import Box from "../Box";
 import CheckBox from "../CheckBox";
+import Text from "../Text";
 import TColumn from "./col";
 const TRow = (props) => {
-    const { index, pubsub, schema, data, ids, styles, animate, sortBy, selectable, tableRef, rowClassName, onSort, onSelect, onContextMenu } = props;
+    const { index, pubsub, schema, data, ids, styles, animate, sortBy, selectable, tableRef, loading, rowClassName, onSort, onSelect, onContextMenu } = props;
     const mounted = useDelayed();
     const _animation = useMemo(() => ({
         transition: TRANSITIONS.SlideInBottom,
@@ -78,7 +79,7 @@ const TRow = (props) => {
                 return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, onSort: onSort, sortBy: sortBy, 
                             // value={renderWhenHeader && render ? render!(index == -1 ? c as dynamicObject : data as T, index) : value as string} 
                             value: value, ...cc, pubsub: pubsub, style: styles[c.id] })] }, `--col-${c.id}`);
-            }), index > -1 && ids && data && schema.map((c, i) => {
+            }), loading && index > -1 && _jsx(Box, { as: `--col`, children: _jsx(Text, { as: `opacity:0`, children: "..." }) }), !loading && index > -1 && ids && data && schema.map((c, i) => {
                 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}`);
             })] });
 };

package/dist/cjs/comps/Table/types.d.ts

@@ -1,10 +1,43 @@
 import { ReactNode, RefObject } from "react";
-import { PubSub } from "../..";
+import { PubSub, SPINNER } from "../..";
 import { dynamicObject } from "../../types";
 import { BoxProps } from "../Box";
 import { PaginationCallback } from "../Pagination/types";
+/**
+ * Callback function for row selection.
+ *
+ * @template T - The type of data for each row.
+ * @param {T} row - The row data.
+ * @param {boolean} selected - Whether the row is selected.
+ */
 export type RowSelectCallback<T> = (row: T, selected: boolean) => void;
+/**
+ * Callback function for table sorting.
+ *
+ * @param {string} col - The column key to sort by.
+ * @param {number} dir - The direction of sorting (1 for ascending, -1 for descending).
+ */
 export type TableSortCallback = (col: string, dir: number) => void;
+/**
+ * Represents a row in the table.
+ *
+ * @template T - The type of data for each row.
+ *
+ * @property {number} index - The index of the row.
+ * @property {Column<T>[]} schema - The schema defining the columns of the row.
+ * @property {dynamicObject} styles - The styles to apply to the row.
+ * @property {string[]} [ids] - The IDs associated with the row.
+ * @property {boolean} [animate] - Whether to animate the row.
+ * @property {T} [data] - The data for the row.
+ * @property {string} [rowClassName] - The CSS class name to apply to the row.
+ * @property {boolean} [selectable] - Whether the row is selectable.
+ * @property {string | null} [sortBy] - The column key to sort by.
+ * @property {RowSelectCallback<T>} [onSelect] - Callback when the row's selection state changes.
+ * @property {TableSortCallback} [onSort] - Callback when the row is sorted.
+ * @property {PubSub} pubsub - The PubSub instance for event handling.
+ * @property {RefObject<HTMLDivElement | null>} [tableRef] - The reference to the table element.
+ * @property {(e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void} [onContextMenu] - Callback for row context menu event.
+ */
 export type Row<T> = {
     index: number;
     schema: Column<T>[];
@@ -18,9 +51,31 @@ export type Row<T> = {
     onSelect?: RowSelectCallback<T>;
     onSort?: TableSortCallback;
     pubsub: PubSub;
+    loading: boolean;
     tableRef?: RefObject<HTMLDivElement | null>;
     onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
 };
+/**
+ * Represents a column in the table.
+ *
+ * @template T - The type of data for each row.
+ *
+ * @property {string | number} id - The unique identifier for the column.
+ * @property {string | ReactNode | dynamicObject} [value] - The value to display in the column.
+ * @property {number} [weight] - The weight of the column for layout purposes.
+ * @property {number | string} [w] - The width of the column.
+ * @property {number | string} [maxW] - The maximum width of the column.
+ * @property {number | string} [minW] - The minimum width of the column.
+ * @property {number | string} [h] - The height of the column.
+ * @property {number | string} [maxH] - The maximum height of the column.
+ * @property {number | string} [minH] - The minimum height of the column.
+ * @property {boolean} [resize] - Whether the column is resizable.
+ * @property {boolean} [sortable] - Whether the column is sortable.
+ * @property {TableSortCallback} [onSort] - Callback when the column is sorted.
+ * @property {string} [as] - The HTML tag to render the column as.
+ * @property {boolean} [renderWhenHeader] - Whether to render the column when it is a header.
+ * @property {(row: T, index: number) => ReactNode} [render] - Function to render the column content.
+ */
 export type Column<T> = {
     id: string | number;
     value?: string | ReactNode | dynamicObject;
@@ -38,6 +93,34 @@ export type Column<T> = {
     renderWhenHeader?: boolean;
     render?: (row: T, index: number) => ReactNode;
 };
+/**
+ * Props for the Table component.
+ *
+ * @template T - The type of data for each row.
+ *
+ * @extends BoxProps
+ *
+ * @property {Column<T>[]} schema - The schema defining the columns of the table.
+ * @property {T[]} rows - The data rows to be displayed in the table.
+ * @property {number} [rowCount] - The total number of rows.
+ * @property {number} [rowsPerPage] - The number of rows to display per page.
+ * @property {string} [rowClassName] - The CSS class name to apply to each row.
+ * @property {number} [currentPage] - The current page number.
+ * @property {boolean} [pagination] - Whether to enable pagination.
+ * @property {number | null} [paginationHash] - A hash to force pagination update.
+ * @property {boolean} [showPaginationOnZeroPageCount] - Whether to show pagination controls when there are zero pages.
+ * @property {boolean} [animateRows] - Whether to animate rows on change.
+ * @property {boolean} [header] - Whether to show the table header.
+ * @property {string} [sortBy] - The column key to sort by.
+ * @property {boolean} [selectableRows] - Whether rows are selectable.
+ * @property {boolean} [hoverable] - Whether rows should have a hover effect.
+ * @property {boolean} [loading] - Renders placeholder rows when true
+ * @property {number} [loadingRowCount] - If greater than 0, shows loading number of empty rows with spinner.
+ * @property {RowSelectCallback<T>} [onRowSelectToggle] - Callback when a row's selection state changes.
+ * @property {(e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void} [onRowContextMenu] - Callback for row context menu event.
+ * @property {PaginationCallback} [onPageChange] - Callback when the page changes.
+ * @property {TableSortCallback} [onSort] - Callback when the table is sorted.
+ */
 export type TableProps<T> = BoxProps & {
     schema: Column<T>[];
     rows: T[];
@@ -53,6 +136,10 @@ export type TableProps<T> = BoxProps & {
     sortBy?: string;
     selectableRows?: boolean;
     hoverable?: boolean;
+    loading?: boolean;
+    loadingRowCount?: number;
+    loadingMessage?: string;
+    spinner?: SPINNER;
     onRowSelectToggle?: RowSelectCallback<T>;
     onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
     onPageChange?: PaginationCallback;

package/dist/cjs/comps/Text/index.d.ts

@@ -3,9 +3,11 @@ import { Props } from '../../types';
 export type TextProps = Props<`h1` | `h2` | `h3` | `h4` | `h5` | `h6`> & {
     h?: number;
     html?: ReactNode | string;
+    lines?: number;
 };
 declare const Text: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, keyof import("../..").ZuzProps> & {
     h?: number;
     html?: ReactNode | string;
+    lines?: number;
 } & import("react").RefAttributes<HTMLHeadingElement>>;
 export default Text;

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

@@ -3,10 +3,12 @@ import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 import Span from '../Span';
 const Text = forwardRef((props, ref) => {
-    const { h, html, children, ...pops } = props;
+    const { h, html, children, lines, ...pops } = props;
     const { style, className, rest } = useBase(pops);
+    // const textRef = useTruncateText(lines || 2)
+    // const mergedRef = useMergedRefs(ref, textRef)
     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 = `Text`;
+Text.displayName = `ZuzUI.Text`;
 export default Text;