@zuzjs/ui 0.7.7 → 0.7.8

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

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

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

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

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

@@ -73,7 +73,7 @@ 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} 
@@ -82,4 +82,5 @@ const TRow = (props) => {
                 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/Text/index.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
@@ -9,4 +8,5 @@ const Text = forwardRef((props, ref) => {
     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`;
 export default Text;

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

@@ -10,4 +10,5 @@ const TextArea = forwardRef((props, ref) => {
     };
     return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
 });
+TextArea.displayName = `TextArea`;
 export default TextArea;

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

@@ -50,4 +50,5 @@ const TextWheel = forwardRef((props, ref) => {
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });
 });
+TextWheel.displayName = `TextWheel`;
 export default TextWheel;

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

@@ -1,6 +1,5 @@
-import { BoxProps } from '../Box';
 import { Position } from '../../types/enums';
-declare const ToolTip: import("react").ForwardRefExoticComponent<BoxProps & {
+declare const ToolTip: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     position?: Position;
     margin?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { useBase, useDimensions } from '../../hooks';
+import { Position, TRANSITION_CURVES } from '../../types/enums';
 import Box from '../Box';
 import Text from '../Text';
-import { Position, TRANSITION_CURVES } from '../../types/enums';
 const ToolTip = forwardRef((props, ref) => {
     const { title, position, margin, children, ...pops } = props;
     const { style, className, rest } = useBase(pops);
@@ -53,4 +53,5 @@ const ToolTip = forwardRef((props, ref) => {
                     when: hovered
                 }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
 });
+ToolTip.displayName = `ToolTip`;
 export default ToolTip;

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

@@ -1,6 +1,5 @@
 import { TreeViewHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TreeView: import("react").ForwardRefExoticComponent<Omit<BoxProps, "tag"> & {
+declare const TreeView: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "tag"> & {
     tag?: string;
     roots: string[];
     nodes: import("./types").TreeNode[];

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

@@ -19,6 +19,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, 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, isRoot: true, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
+TreeView.displayName = `TreeView`;
 export default TreeView;

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

@@ -1,9 +1,10 @@
 import { TreeItemHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TreeItem: import("react").ForwardRefExoticComponent<BoxProps & {
+declare const TreeItem: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     treeTag: string;
     meta: import("./types").TreeNode;
     nodes: import("./types").TreeNode[];
+    isRoot: boolean;
+    expanded: boolean;
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: import("./types").TreeNodeIcons;

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

@@ -1,28 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import Box from "../Box";
 import Button from "../Button";
 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, ...rest } = props;
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, isRoot, expanded, ...rest } = props;
     const { tag, label, icon, under, isHead } = meta;
-    const [isOpen, setIsOpen] = useState(tag == `root`);
+    const [isOpen, setIsOpen] = useState(expanded);
     const toggle = () => {
         localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
         setIsOpen(!isOpen);
     };
     useEffect(() => {
-        if (tag == `root` && !localStorage.getItem(`--tn${treeTag}-${tag}`)) {
+        if (expanded || (isRoot && !localStorage.getItem(`--tn${treeTag}-${tag}`))) {
             localStorage.setItem(`--tn${treeTag}-${tag}`, `1`);
             setIsOpen(true);
         }
         else
             setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
     }, []);
-    const _nodes = nodes.filter(x => x.under == tag);
-    return _jsxs(Box, { className: `--treenode --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 ? _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 && _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ? icons?.nodeOpen : 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, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+    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 })
+                            : _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 ?
+                                        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}`)) })] });
 });
+TreeItem.displayName = `TreeItem`;
 export default TreeItem;

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

@@ -1,10 +1,12 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export interface TreeNodeIcons {
+    rootOpen?: ReactNode;
+    rootClose?: ReactNode;
     nodeOpen?: ReactNode;
     nodeClose?: ReactNode;
-    arrowOpen: ReactNode;
-    arrowClose: ReactNode;
+    arrowOpen?: ReactNode;
+    arrowClose?: ReactNode;
     arrowDisabled?: ReactNode;
 }
 export type TreeViewProps = Omit<BoxProps, `tag`> & {
@@ -31,6 +33,8 @@ export type TreeItemProps = BoxProps & {
     treeTag: string;
     meta: TreeNode;
     nodes: TreeNode[];
+    isRoot: boolean;
+    expanded: boolean;
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: TreeNodeIcons;

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

@@ -63,7 +63,8 @@ export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
 export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
 export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;
-export declare const camelCase: (str: string) => string;
+export declare const camelCase: (str: string, ucf?: boolean) => string;
+export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
 export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {

package/dist/cjs/funs/index.js

@@ -468,15 +468,16 @@ export const bindKey = (key, fun, element) => {
     };
     (element || document.documentElement).addEventListener('keydown', handleKeydown);
 };
-export const camelCase = (str) => {
+export const camelCase = (str, ucf = false) => {
     return str
         .toLowerCase()
         .split(/[^a-zA-Z0-9]+/) // Split by any non-alphanumeric character
         .map((word, index) => index === 0
-        ? word
-        : word.charAt(0).toUpperCase() + word.slice(1))
+        ? ucf ? ucfirst(word) : word
+        : ucfirst(word))
         .join('');
 };
+export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
 export const addPropsToChildren = (children, conditions, newProps) => {
     return Children.map(children, (child) => {

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

@@ -3,19 +3,18 @@ export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
-export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
+export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
-export { default as useDrag } from './useDrag';
-export { type DragOptions } from './useDrag';
+export { default as useDrag, type DragOptions } from './useDrag';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useKeyBind } from './useKeyBind';
 /**
  * @deprecated use useDelayed hook instead
  */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useMounted } from './useDelayed';
+export { default as useDelayed } from './useDelayed';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';

package/dist/cjs/hooks/index.js

@@ -14,8 +14,8 @@ export { default as useKeyBind } from './useKeyBind';
 /**
  * @deprecated use useDelayed hook instead
  */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useMounted } from './useDelayed';
+export { default as useDelayed } from './useDelayed';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 // export { default as useDomSelector } from './useDomSelector';

package/dist/cjs/hooks/useDelayed.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook that sets a mounted state to true after a specified delay.
+ *
+ * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
+ * @returns {boolean} - The mounted state.
+ *
+ * @example
+ * const isMounted = useMounted(200);
+ *
+ * useEffect(() => {
+ *   if (isMounted) {
+ *     // Component is mounted after 200ms
+ *   }
+ * }, [isMounted]);
+ */
+declare const useMounted: (delay?: number) => boolean;
+export default useMounted;

package/dist/cjs/hooks/useDelayed.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+/**
+ * Custom hook that sets a mounted state to true after a specified delay.
+ *
+ * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
+ * @returns {boolean} - The mounted state.
+ *
+ * @example
+ * const isMounted = useMounted(200);
+ *
+ * useEffect(() => {
+ *   if (isMounted) {
+ *     // Component is mounted after 200ms
+ *   }
+ * }, [isMounted]);
+ */
+const useMounted = (delay = 100) => {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => setMounted(true), delay);
+        return () => clearTimeout(timer); // Cleanup the timer on unmount
+    }, [delay]);
+    return mounted;
+};
+export default useMounted;

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' '); };
 export * from "./comps";
 export { withCSS as css } from "./funs";
 export * from "./funs";