@zuzjs/ui 0.7.8 → 0.7.9

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

@@ -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`

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

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

@@ -2,10 +2,12 @@ import { Props } from '../../types';
 import { Variant } from '../../types/enums';
 export type TextAreaProps = Props<`textarea`> & {
     autoResize?: boolean;
+    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
     variant?: Variant;
 };
 declare const TextArea: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../..").ZuzProps> & {
     autoResize?: boolean;
+    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
     variant?: Variant;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

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

@@ -1,14 +1,13 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 import { Variant } from '../../types/enums';
 const TextArea = forwardRef((props, ref) => {
-    const { autoResize, variant, ...pops } = props;
+    const { autoResize, variant, resize, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     const handleInput = (event) => {
     };
-    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: { ...style, resize: resize || `none` }, onInput: handleInput, ref: ref, ...rest });
 });
-TextArea.displayName = `TextArea`;
+TextArea.displayName = `ZuzUI.TextArea`;
 export default TextArea;

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import Box from "../Box";
@@ -19,7 +20,7 @@ const TreeView = forwardRef((props, ref) => {
     }, [_selected]);
     return _jsx(Box, { className: `--treeview flex cols`, children: nodes
             .filter(node => roots.includes(node.tag))
-            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, isRoot: true, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, roots: roots, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
-TreeView.displayName = `TreeView`;
+TreeView.displayName = `ZuzUI.TreeView`;
 export default TreeView;

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

@@ -3,8 +3,8 @@ declare const TreeItem: import("react").ForwardRefExoticComponent<import("..").B
     treeTag: string;
     meta: import("./types").TreeNode;
     nodes: import("./types").TreeNode[];
-    isRoot: boolean;
     expanded: boolean;
+    roots: string[];
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: import("./types").TreeNodeIcons;

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

@@ -6,8 +6,9 @@ import Icon from "../Icon";
 import Text from "../Text";
 import SVGIcons from "../svgicons";
 const TreeItem = forwardRef((props, ref) => {
-    const { as, meta, nodes, icons, onSelect, treeTag, selected, isRoot, expanded, ...rest } = props;
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, roots, expanded, ...rest } = props;
     const { tag, label, icon, under, isHead } = meta;
+    const isRoot = useMemo(() => roots.includes(tag), [roots]);
     const [isOpen, setIsOpen] = useState(expanded);
     const toggle = () => {
         localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
@@ -22,11 +23,11 @@ const TreeItem = forwardRef((props, ref) => {
             setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
     }, []);
     const _nodes = useMemo(() => nodes.filter(x => x.under == tag), [nodes, tag]);
-    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic ${isRoot ? `--node-root` : ``} ${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons?.arrowClose && icons?.arrowOpen ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
+    return _jsxs(Box, { className: `--treenode ${isRoot ? `--is-root` : ``} --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic ${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons?.arrowClose && icons?.arrowOpen ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
                             : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [((icons?.nodeOpen && icons?.nodeClose) || (isRoot && icons?.rootOpen && icons?.rootClose)) &&
-                                _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ?
+                                _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon ${isRoot ? `--icon-root` : ``}`, name: icon || (isOpen ?
                                         isRoot ? icons?.rootOpen || icons.nodeOpen : icons.nodeOpen
-                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, isRoot: false, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
 TreeItem.displayName = `TreeItem`;
 export default TreeItem;

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

@@ -33,8 +33,8 @@ export type TreeItemProps = BoxProps & {
     treeTag: string;
     meta: TreeNode;
     nodes: TreeNode[];
-    isRoot: boolean;
     expanded: boolean;
+    roots: string[];
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: TreeNodeIcons;

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

@@ -0,0 +1,2 @@
+declare const VideoPlayer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default VideoPlayer;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+const VideoPlayer = forwardRef((props, ref) => {
+    return _jsx(Box, {});
+});
+export default VideoPlayer;

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

@@ -9,7 +9,7 @@ export { default as AutoComplete } from './AutoComplete';
 export * from './AutoComplete/types';
 export { default as Avatar } from './Avatar';
 export * from './Avatar/types';
-export { type BoxProps, default as Box } from './Box';
+export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
 export { default as CheckBox } from './CheckBox';
@@ -19,7 +19,9 @@ export { default as ContextMenu } from './ContextMenu';
 export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
-export { type CoverProps, default as Cover } from './Cover';
+export { default as Cover, type CoverProps } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -29,43 +31,49 @@ export * from './Editor/types';
 export { default as withEditor } from './Editor/withEditor';
 export { default as Fab } from './Fab';
 export * from './Fab/types';
-export { type FilterProps, default as Filters } from './Filters';
-export { type FormProps, default as Form } from './Form';
-export { type IconProps, default as Icon } from './Icon';
-export { type ImageProps, default as Image } from './Image';
-export { type InputProps, default as Input } from './Input';
-export { type LabelProps, default as Label } from './Label';
+export { default as Filters, type FilterProps } from './Filters';
+export { default as Form } from './Form';
+export * from './Form/types';
+export { default as Icon, type IconProps } from './Icon';
+export { default as Image, type ImageProps } from './Image';
+export { default as Input, type InputProps } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
+export { default as Label, type LabelProps } from './Label';
 export { default as List } from './List';
 export * from './List/types';
 export { default as NetworkStatus } from './Network';
 export * from './Network/types';
-export { type OverlayProps, default as Overlay } from './Overlay';
-export { type PasswordProps, default as Password } from './Password';
-export { type PinInputProps, default as PinInput } from './PinInput';
+export { default as Overlay, type OverlayProps } from './Overlay';
+export { default as Password, type PasswordProps } from './Password';
+export { default as PinInput, type PinInputProps } from './PinInput';
 export { default as Pagination } from './Pagination';
 export * from './Pagination/types';
 export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
-export { type SearchProps, default as Search } from './Search';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
+export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';
 export * from './Select/types';
-export { type SheetProps, type SheetHandler, default as Sheet } from './Sheet';
+export { default as Sheet, type SheetHandler, type SheetProps } from './Sheet';
 export { default as SideBar } from './Sidebar';
 export * from './Sidebar/types';
-export { type SliderProps, default as Slider } from './Slider';
-export { type SpanProps, default as Span } from './Span';
-export { type SpinnerProps, default as Spinner } from './Spinner';
+export { default as Slider, type SliderProps } from './Slider';
+export { default as Span, type SpanProps } from './Span';
+export { default as Spinner, type SpinnerProps } from './Spinner';
 export { default as Switch } from './Switch';
 export { default as Table } from './Table';
 export * from './Table/types';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
-export { type TextProps, default as Text } from './Text';
-export { type TextAreaProps, default as Textarea } from './TextArea';
+export { default as Text, type TextProps } from './Text';
+export { default as Textarea, type TextAreaProps } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { default as ToolTip } from './Tooltip';

package/dist/esm/comps/index.js

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -31,9 +33,12 @@ export { default as Fab } from './Fab';
 export * from './Fab/types';
 export { default as Filters } from './Filters';
 export { default as Form } from './Form';
+export * from './Form/types';
 export { default as Icon } from './Icon';
 export { default as Image } from './Image';
 export { default as Input } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
 export { default as Label } from './Label';
 export { default as List } from './List';
 export * from './List/types';
@@ -48,7 +53,10 @@ export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
 export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';

package/dist/esm/funs/css.d.ts

@@ -1,7 +1,7 @@
-import { dynamicObject } from "../types";
+import { OptionValues } from "commander";
 import Hashids from "hashids";
+import { dynamicObject } from "../types";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
-import { OptionValues } from "commander";
 declare class CSS {
     cache: dynamicObject;
     PROPS: dynamicObject;
@@ -52,7 +52,7 @@ declare class CSS {
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
 export declare const getAnimationCurve: (curve?: string | TRANSITION_CURVES) => string;
-export declare const animationTransition: (transition: TRANSITIONS) => {
+export declare const animationTransition: (transition: TRANSITIONS, offset?: number, dialog?: boolean) => {
     from: {};
     to: {};
 };

package/dist/esm/funs/css.js

@@ -1,9 +1,9 @@
-import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
-import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
-import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
 import pc from "picocolors";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
+import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
+import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 class CSS {
     cache;
     PROPS;
@@ -935,39 +935,41 @@ export const getAnimationCurve = (curve) => {
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
             return `var(--bounce)`;
-            // return `linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
-            //     0.1407, 0.25, 0.3908, 0.5625, 0.7654,
-            //     1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657,
-            //     0.7539, 0.75, 0.7539, 0.7657, 0.7852,
-            //     0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532,
-            //     0.9414, 0.9375, 0.9414, 0.9531, 0.9726,
-            //     1, 0.9883, 0.9844, 0.9883, 1 )`
-            break;
         case TRANSITION_CURVES.Spring:
             // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
             return `var(--spring)`;
-            break;
         case TRANSITION_CURVES.EaseInOut:
             // return `cubic-bezier(0.42, 0, 0.58, 1)`
             return `ease-in-out`;
-            break;
         default:
             return `linear`;
     }
 };
-export const animationTransition = (transition) => {
+export const animationTransition = (transition, offset = 0, dialog = false) => {
     let _from = {};
     let _to = {};
     switch (transition) {
         case TRANSITIONS.SlideInLeft:
         case TRANSITIONS.SlideInRight:
-            _from = { x: transition == TRANSITIONS.SlideInLeft ? -20 : 20, opacity: 0 };
-            _to = { x: 0, opacity: 1 };
+            _from = { x: transition == TRANSITIONS.SlideInLeft ?
+                    dialog ? `-${50 + (offset || 10)}%` : -20 :
+                    dialog ? `-${50 - (offset || 10)}%` : 20,
+                y: dialog ? `-50%` : 0,
+                opacity: 0 };
+            _to = { x: dialog ? `-50%` : 0, y: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.SlideInTop:
         case TRANSITIONS.SlideInBottom:
-            _from = { y: transition == TRANSITIONS.SlideInTop ? -20 : 20, opacity: 0 };
-            _to = { y: 0, opacity: 1 };
+            _from = {
+                y: transition == TRANSITIONS.SlideInTop ?
+                    //Top
+                    dialog ? `-${50 + (offset || 10)}%` : -20
+                    //Bottom 
+                    : dialog ? `-${50 - (offset || 10)}%` : 20,
+                x: dialog ? `-50%` : 0,
+                opacity: 0
+            };
+            _to = { y: dialog ? `-50%` : 0, x: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.ScaleIn:
             _from = { scale: 0, opacity: 0 };

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

@@ -74,3 +74,4 @@ export declare const getPositionAroundElement: (x: number, y: number, distance:
 export declare const clamp: (value: number, min: number, max: number) => number;
 export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
 export declare const slugify: (text: string, separator?: string) => string;
+export declare const truncate: (selector: string, lines?: number) => void;