@zuzjs/ui 0.7.7 → 0.7.9

package/dist/cjs/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/cjs/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 "../../hooks";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -7,32 +8,33 @@ 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();
+    // 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);
-                // setSelected(meta.index)
             }
-            // if ( selected && !_initial ){
-            //     ref.current.click()
-            //     setInitial(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)
         }
-        // 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 ? `--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}` })] });
 };
+SegmentItem.displayName = `SelectTabItem`;
 export default SegmentItem;

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,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<Omit<import("..").BoxProps, "onChange"> & {
+    required?: import("../..").FORMVALIDATION;
     options: Option[];
     label?: string;
     selected?: string | Option;

package/dist/cjs/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/cjs/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/cjs/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/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

@@ -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/cjs/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";
@@ -138,10 +138,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 +176,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`
@@ -184,4 +187,5 @@ export const isSheetHandler = (src) => {
         && `success` in src
         && `error` in src;
 };
+Sheet.displayName = `Sheet`;
 export default Sheet;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/comps/Spinner/index.js

@@ -1,10 +1,9 @@
-"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 +38,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 +49,5 @@ const Spinner = forwardRef((props, ref) => {
             ...build()
         }, ...rest, children: child() });
 });
+Spinner.displayName = `ZuzUI.Spinner`;
 export default Spinner;

package/dist/cjs/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/cjs/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/cjs/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/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/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/cjs/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/cjs/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/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/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/cjs/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/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,20 @@ 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);
 export default ForwardedTable;

package/dist/cjs/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;

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,
@@ -73,13 +74,14 @@ const TRow = (props) => {
             };
         }
     }, []);
-    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, "data-index": index, ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
+    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
                 const { renderWhenHeader, render, value, ...cc } = c;
                 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}`);
             })] });
 };
+TRow.displayName = `Row`;
 export default TRow;

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;