@zuzjs/ui 0.7.5 → 0.7.7

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { clamp, isArray, uuid, withPost } from "../../funs";
 import { useBase, useDebounce } from "../../hooks";
-import Box from "../Box";
 import { Size, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import Box from "../Box";
 import Input from "../Input";
-import SVGIcons from "../svgicons";
-import { clamp, isArray, uuid, withPost } from "../../funs";
 import List from "../List";
+import SVGIcons from "../svgicons";
 const AutoComplete = forwardRef((props, ref) => {
     const { animate, action, data, withStyle, onChange, ...pops } = props;
     const { className: autoCompleteStyle } = useBase({ as: withStyle || `` });

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

@@ -1,12 +1,13 @@
 import { ReactNode } from "react";
+import { DRAWER_SIDE } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { DrawerHandler } from "./types";
-import { DRAWER_SIDE } from "../../types/enums";
 declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
     as?: string;
     speed?: number;
     from?: DRAWER_SIDE;
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
+    onClose?: () => void;
 } & import("react").RefAttributes<DrawerHandler>>;
 export default Drawer;

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

@@ -1,12 +1,12 @@
 "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 Overlay from "../Overlay";
-import Box from "../Box";
 import { bindKey } from "../../funs";
 import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
+import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
-    const { as, from, speed, children, prerender, ...pops } = props;
+    const { as, from, speed, children, prerender, onClose, ...pops } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
@@ -15,7 +15,12 @@ const Drawer = forwardRef((props, ref) => {
         setContent(children);
     }, [children]);
     useEffect(() => {
-        bindKey(KeyCode.Escape, () => visible && setVisible(false));
+        bindKey(KeyCode.Escape, () => {
+            if (visible) {
+                onClose?.();
+                setVisible(false);
+            }
+        });
     }, []);
     const style = useMemo(() => {
         switch (from) {
@@ -38,14 +43,16 @@ const Drawer = forwardRef((props, ref) => {
             setVisible(true);
         },
         close() {
+            onClose?.();
             setVisible(false);
         }
     }));
     return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
                     if (visible) {
+                        onClose?.();
                         setVisible(false);
                     }
-                }, when: visible }), _jsxs(Box, { ref: divRef, className: `--drawer flex cols --${from ? from.toLowerCase() : `left`} fixed`, animate: {
+                }, when: visible }), _jsxs(Box, { ref: divRef, className: `--drawer flex cols --${from ? from.toLowerCase() : `left`} fixed`, fx: {
                     from: { ...style.from, opacity: 0 },
                     to: { ...style.to, opacity: 1 },
                     when: visible,

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

@@ -7,6 +7,7 @@ export type DrawerProps = BoxProps & {
     from?: DRAWER_SIDE;
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
+    onClose?: () => void;
 };
 export interface DrawerHandler {
     open: (child?: string | ReactNode | ReactNode[]) => void;

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { FILTER } from "../../types/enums";

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

@@ -1,10 +1,13 @@
-import { PaginationPage, PaginationStyle } from "./types";
+import { PaginationStyle } from "./types";
 declare const Pagination: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     itemCount: number;
     itemsPerPage: number;
-    startPage?: PaginationPage;
+    startPage?: number | string;
     pageRange?: number;
     paginationStyle?: PaginationStyle;
+    hash?: number | null;
+    seperator?: string;
+    loading?: boolean;
     breakLabel?: string;
     nextLabel?: string;
     prevLabel?: string;

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

@@ -1,14 +1,23 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useState } from "react";
-import { PaginationStyle } from "./types";
+import { numberInRange, toHash } from "../..";
 import { useBase } from "../../hooks";
 import Box from "../Box";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
-const Pagination = forwardRef((props, ref) => {
-    const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, renderOnZeroPageCount, onPageChange, ...pops } = props;
-    const [_currentPage, setCurrentPage] = useState(startPage || 1);
+import { PaginationStyle } from "./types";
+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]);
     const _breakLabel = useMemo(() => breakLabel || `...`, [breakLabel]);
+    const [_currentPage, setCurrentPage] = useState({
+        id: hash ?
+            startPage ? `number` == typeof startPage ? _hash(startPage) : startPage
+                : 1 : startPage || 1,
+        label: startPage || 1
+    });
     /**
      * @internal
      * const _pageType = useMemo(() => startPage ? `number` === startPage, [breakLabel])
@@ -25,28 +34,29 @@ const Pagination = forwardRef((props, ref) => {
         const prevs = Math.max(getPageValue(_currentPage) - (pageRange || 2), 1);
         const nexts = Math.min(getPageValue(_currentPage) + (pageRange || 2), totalPages);
         if (prevs > 1)
-            _pages.push(1);
+            _pages.push({ id: hash ? _hash(1) : 1, label: 1 });
         if (prevs > 2)
-            _pages.push(_breakLabel);
+            _pages.push({ id: -1, label: _breakLabel });
         for (let i = prevs; i <= nexts; i++)
-            _pages.push(i);
+            _pages.push({ id: hash ? _hash(i) : i, label: i });
         if (nexts < totalPages - 1)
-            _pages.push(_breakLabel);
+            _pages.push({ id: -1, label: _breakLabel });
         if (nexts < totalPages)
-            _pages.push(totalPages);
+            _pages.push({ id: hash ? _hash(totalPages) : totalPages, label: totalPages });
         return _pages;
     }, [_currentPage]);
-    const handlePage = useCallback((newPage) => {
-        if (newPage < 1 || newPage > totalPages)
+    const handlePage = useCallback((_newPage) => {
+        const newPage = _newPage;
+        if (+newPage.label < 1 || +newPage.label > totalPages)
             return;
         setCurrentPage(newPage);
         onPageChange?.(newPage);
     }, [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 : [1, _breakLabel]).map((page, index, items) => _jsx(Button, { disabled: page == _breakLabel || getPageValue(_currentPage) == page, className: page == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => typeof page == `number` && handlePage(page), children: page }, `--pg-${index}-${page}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
+    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: [
                     `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(getPageValue(_currentPage) - 1), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == pages[pages.length - 1], onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronRightOutline })] })] });
+                ].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 })] })] });
 });
 export default Pagination;

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

@@ -8,13 +8,16 @@ export type PaginationPageItem = {
     label: string | number;
 };
 export type PaginationPage = number | PaginationPageItem;
-export type PaginationCallback = (page: PaginationPage) => void;
+export type PaginationCallback = (page: PaginationPageItem) => void;
 export type PaginationProps = BoxProps & {
     itemCount: number;
     itemsPerPage: number;
-    startPage?: PaginationPage;
+    startPage?: number | string;
     pageRange?: number;
     paginationStyle?: PaginationStyle;
+    hash?: number | null;
+    seperator?: string;
+    loading?: boolean;
     breakLabel?: string;
     nextLabel?: string;
     prevLabel?: string;

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

@@ -1,5 +1,5 @@
-import { ProgressHandler } from "./types";
 import { BoxProps } from "../Box";
+import { ProgressHandler } from "./types";
 declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
     progress?: number;
     type?: import("../..").PROGRESS;

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import Box from "../Box";
 import { useBase } from "../../hooks";
+import Box from "../Box";
 const ProgressBar = forwardRef((props, ref) => {
     const { progress, type, ...pops } = props;
     const bar = useRef(null);

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

@@ -1,8 +1,8 @@
-import { RadioHandler } from "./types";
 import { RADIO, Size } from "../../types/enums";
+import { RadioHandler } from "./types";
 declare const Radio: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: RADIO;
     size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<RadioHandler>>;
 export default Radio;

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

@@ -1,15 +1,17 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState } from "react";
-import Label from "../Label";
 import { RADIO, Size } from "../../types/enums";
-import Input from "../Input";
 import Box from "../Box";
-const Radio = forwardRef((props, ref) => {
-    const { children, className, name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
+import Input from "../Input";
+import Label from "../Label";
+const Radio = forwardRef((props, _ref) => {
+    const { children, className, name, required, type, value, size, checked: defaultCheck, onSwitch, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     return _jsxs(Label, { className: `${className} --${(type || RADIO.Default).toLowerCase()} --radio${!type || type == RADIO.Default ? `` : `card`} --${size || Size.Default} flex aic rel`.trim(), ...pops, children: [_jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `rd`, type: `radio`, className: `abs`, name: name, required: required || false, onChange: (e) => {
-                    onChange && onChange(e.target.checked, value || `cb`);
+                    if (onSwitch)
+                        onSwitch(e.target.checked, value || `cb`);
                     _setChecked(e.target.checked);
                 } }), _jsx(Box, { className: `--dot rel`, children: _jsx(Box, { className: `--rod abs abc` }) }), _jsx(Box, { className: `--value`, children: children })] });
 });

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

@@ -3,7 +3,7 @@ import { RADIO, Size } from "../../types/enums";
 export type RadioProps = Props<"input"> & {
     type?: RADIO;
     size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 };
 export interface RadioHandler {
     setChecked: (mode: boolean, triggerChange?: boolean) => void;

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

@@ -1,6 +1,6 @@
-import { Segment } from "./types";
-import { BoxProps } from "../Box";
 import { Size } from "../../types/enums";
+import { BoxProps } from "../Box";
+import { Segment } from "./types";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
  *

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

@@ -1,9 +1,10 @@
+"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 Box from "../Box";
 import SegmentItem from "./item";
-import { Size } from "../../types/enums";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
  *
@@ -23,12 +24,11 @@ import { Size } from "../../types/enums";
  * <SelectTabs selected={1} items={segments} />
  */
 const Segmented = forwardRef((props, ref) => {
-    const { animate, items, selected, size, onSwitch, ...pops } = props;
+    const { animate, fx, items, selected, size, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
     const _segmented = useRef(null);
-    const [mounted, setMounted] = useState(false);
     /**
      * Handles selection of a segment.
      *

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import Button from "../Button";
 import Box from "../Box";
+import Button from "../Button";
 import Icon from "../Icon";
 const SegmentItem = ({ onSelect, meta, selected }) => {
     const ref = useRef(null);
@@ -32,7 +32,7 @@ const SegmentItem = ({ onSelect, meta, 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 ?
-                `string` == typeof icon ? _jsx(Icon, { name: icon, as: `--segment-icon` }) : _jsx(Box, { as: `--segment-icon`, 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}` })] });
 };
 export default SegmentItem;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@zuzjs/ui';
 import { useEffect, useRef, useState } from 'react';
+import Box from '../Box';
 const TabBody = ({ size, index, active, render, content }) => {
     const _ref = useRef(null);
     const [style, setStyle] = useState({});

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

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

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

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { SelectTabs } from "../..";
 import { uuid } from "../../funs";
 import { useBase, useResizeObserver } from "../../hooks";
 import Box from "../Box";
-import { SelectTabs } from "../..";
 import TabBody from "./body";
 const TabView = forwardRef((props, ref) => {
     const { tabs: _tabs, speed, prerender, variant, onChange, ...rest } = props;

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

@@ -1,9 +1,10 @@
 import { CSSProperties } from "react";
-import type { Column } from "./types";
 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;
 export default TColumn;

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

@@ -1,10 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SVGIcons } from "../..";
 import Box from "../Box";
 const TColumn = (props) => {
-    const { idx, id, as, weight, style, value, render, resize, sort } = props;
-    return _jsx(Box, { style: {
+    const { idx, id, as, weight, style, value, render, resize, sortBy, sortable, onSort } = props;
+    const [_sort, setSort] = useState(0);
+    const _onSort = () => {
+        if (sortable) {
+            onSort?.(String(id), _sort == 1 ? -1 : 1);
+            setSort(prev => prev == 1 ? -1 : 1);
+        }
+    };
+    return _jsxs(Box, { style: {
             flex: weight || 1,
             ...style
-        }, as: `--col flex aic ${as || ``}`, children: value });
+        }, as: `--col flex aic ${as || ``} ${sortable ? `--sortable` : ``}`, onClick: _onSort, children: [_jsx(Box, { children: value }), idx == -1
+                && sortable
+                && sortBy == id
+                && _jsx(Box, { as: `--arrow flex aib`, children: _sort == 1 ? SVGIcons.arrowUp : SVGIcons.arrowDown })] });
 };
 export default TColumn;

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

@@ -1,14 +1,15 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef } from "react";
-import Box from "../Box";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { PubSub, uuid } from "../..";
 import { useBase } from "../../hooks";
-import TRow from "./row";
+import Box from "../Box";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
-import { PubSub, uuid } from "../..";
+import TRow from "./row";
 // const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
 const Table = (props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, header, showPaginationOnZeroPageCount, rowClassName, selectableRows, hoverable, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
             flex: c.weight || 1,
@@ -28,7 +29,12 @@ const Table = (props, ref) => {
     const _tableRef = useRef(null);
     const pubsub = useMemo(() => new PubSub(), []);
     const rowKeys = useMemo(() => rows.map(() => uuid()), [rows]);
-    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { 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, { renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
+    const [_sortBy, setSortBy] = useState(sortBy || null);
+    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 ForwardedTable = forwardRef(Table);
 export default ForwardedTable;

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef } from "react";
-import Box from "../Box";
-import TColumn from "./col";
-import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import { useDelayed } from "../../hooks";
+import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import Box from "../Box";
 import CheckBox from "../CheckBox";
+import TColumn from "./col";
 const TRow = (props) => {
-    const { index, pubsub, schema, data, ids, styles, animate, selectable, tableRef, rowClassName, onSelect, onContextMenu } = props;
+    const { index, pubsub, schema, data, ids, styles, animate, sortBy, selectable, tableRef, rowClassName, onSort, onSelect, onContextMenu } = props;
     const mounted = useDelayed();
     const _animation = useMemo(() => ({
         transition: TRANSITIONS.SlideInBottom,
@@ -75,11 +75,11 @@ 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) => {
                 const { renderWhenHeader, render, value, ...cc } = c;
-                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, 
+                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) => {
-                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[c.id] }) : null] }, `--${String(c.id)}-val-${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}`);
             })] });
 };
 export default TRow;

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

@@ -1,9 +1,10 @@
 import { ReactNode, RefObject } from "react";
-import { BoxProps } from "../Box";
+import { PubSub } from "../..";
 import { dynamicObject } from "../../types";
+import { BoxProps } from "../Box";
 import { PaginationCallback } from "../Pagination/types";
-import { PubSub } from "../..";
 export type RowSelectCallback<T> = (row: T, selected: boolean) => void;
+export type TableSortCallback = (col: string, dir: number) => void;
 export type Row<T> = {
     index: number;
     schema: Column<T>[];
@@ -13,14 +14,16 @@ export type Row<T> = {
     data?: T;
     rowClassName?: string;
     selectable?: boolean;
+    sortBy?: string | null;
     onSelect?: RowSelectCallback<T>;
+    onSort?: TableSortCallback;
     pubsub: PubSub;
     tableRef?: RefObject<HTMLDivElement | null>;
     onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
 };
 export type Column<T> = {
     id: string | number;
-    value: string | ReactNode | dynamicObject;
+    value?: string | ReactNode | dynamicObject;
     weight?: number;
     w?: number | string;
     maxW?: number | string;
@@ -29,7 +32,8 @@ export type Column<T> = {
     maxH?: number | string;
     minH?: number | string;
     resize?: boolean;
-    sort?: boolean;
+    sortable?: boolean;
+    onSort?: TableSortCallback;
     as?: string;
     renderWhenHeader?: boolean;
     render?: (row: T, index: number) => ReactNode;
@@ -42,12 +46,15 @@ export type TableProps<T> = BoxProps & {
     rowClassName?: string;
     currentPage?: number;
     pagination?: boolean;
+    paginationHash?: number | null;
     showPaginationOnZeroPageCount?: boolean;
     animateRows?: boolean;
     header?: boolean;
+    sortBy?: string;
     selectableRows?: boolean;
     hoverable?: boolean;
     onRowSelectToggle?: RowSelectCallback<T>;
     onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
     onPageChange?: PaginationCallback;
+    onSort?: TableSortCallback;
 };

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

@@ -1,6 +1,6 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import Box from '../Box';
 import Span from '../Span';
 const TextWheel = forwardRef((props, ref) => {
@@ -34,11 +34,11 @@ const TextWheel = forwardRef((props, ref) => {
         // console.log(value)
         _setValue(value || 0);
     }, [value]);
-    return _jsxs(Box, { className: `text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
+    return _jsxs(Box, { className: `--text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
-                    return _jsx(Span, { className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
+                    return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }
-                return _jsx(Span, { "data-value": char, className: `wheel-char grid ${index > char.toString().split('').length - 3 ? 'wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `wheel-char-track wheel-track-${direction || `down`} grid`, style: {
+                return _jsx(Span, { "data-value": char, className: `--wheel-char grid ${index > char.toString().split('').length - 3 ? '--wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `--wheel-char-track --wheel-track-${direction || `down`} grid`, style: {
                             '--v': char
                         }, children: [_jsx(Span, { children: !direction || direction == `down` ? 0 : 9 }), (!direction || direction == `down` ?
                                 [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

package/dist/cjs/funs/index.d.ts

@@ -1,8 +1,8 @@
-import CSS from "./css.js";
-import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
 import { AxiosProgressEvent } from "axios";
-import { KeyCode } from "../types/enums.js";
 import { ReactElement, ReactNode, Ref } from "react";
+import { KeyCode } from "../types/enums.js";
+import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
+import CSS from "./css.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
 export declare const LINE_KEY = "__LINE__";
@@ -29,8 +29,8 @@ export declare const isEmail: (e: string) => boolean;
 export declare const isUrl: (o: string) => boolean;
 export declare const toLowerCase: (o: string) => string;
 export declare const ucfirst: (o: any) => string;
-export declare const toHash: (n: number, len?: number) => string;
-export declare const fromHash: (n: string) => number;
+export declare const toHash: (n: number, len?: number, SALT?: string | null) => string;
+export declare const fromHash: (n: string, SALT?: string | null) => number;
 export declare const css: () => CSS;
 export declare const withCSS: (cx: string | string[]) => string;
 export declare const uuid: (len?: number) => string;
@@ -49,7 +49,8 @@ export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?:
 export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
-export declare const withPost: (uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<dynamicObject>;
+export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
+export declare const withGet: <T>(uri: string, timeout?: number) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;