@zuzjs/ui 0.5.6 → 0.5.8

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

@@ -1,46 +0,0 @@
-import { Props } from "../useBase/base.types";
-/**
- * Individual segment in the `SelectTabs` component.
- * @typedef {Object} Segment
- * @property {number} index - The index of the segment.
- * @property {string} [icon] - The optional icon to display for the segment.
- * @property {string} [label] - The optional label to display for the segment.
- */
-export interface Segment {
-    tag?: string;
-    index: number;
-    icon?: string;
-    label?: string;
-}
-/**
- * Props for the `SelectTabs` component.
- * @typedef {Object} SegmentProps
- * @extends {Props<'div'>}
- * @property {number} [selected] - The index of the initially selected segment.
- * @property {Segment[]} items - Array of segments to display.
- */
-export interface SegmentProps extends Props<`div`> {
-    selected?: number;
-    onSwitch?: (segment: Segment) => void;
-    items: Segment[];
-}
-/**
- * `SelectTabs` component is a segmented control that allows switching between segments.
- *
- * @component
- * @param {SegmentProps} props - Props for the segmented control component.
- * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
- * @returns {JSX.Element} The rendered segmented control.
- *
- * @example
- * // Usage example
- * const segments = [
- *   { index: 0, label: "Home", icon: "home_icon" },
- *   { index: 1, label: "Profile", icon: "profile_icon" },
- *   { index: 2, label: "Settings", icon: "settings_icon" }
- * ];
- *
- * <SelectTabs selected={1} items={segments} />
- */
-declare const Segmented: import("react").ForwardRefExoticComponent<SegmentProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Segmented;

package/dist/comps/segmented/item.d.ts

@@ -1,8 +0,0 @@
-import { Segment } from ".";
-interface SegmentItemProps {
-    meta: Segment;
-    selected: boolean;
-    onSelect: (index: number, width: number, x: number, segment: Segment) => void;
-}
-declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
-export default SegmentItem;

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

@@ -1,15 +0,0 @@
-import { Props } from "../useBase/base.types";
-import { dynamicObject } from "../../types";
-import { FORMVALIDATION } from "../../types/enums";
-export interface SelectProps extends Props<"div"> {
-    name?: string;
-    required?: FORMVALIDATION;
-    options: dynamicObject[];
-    label?: string;
-    selected?: string | dynamicObject;
-    search?: boolean;
-    onChange?: (v: string | dynamicObject) => void;
-    searchPlaceholder?: string;
-}
-declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Select;

package/dist/comps/select/index.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import Box from "../box";
-import Button from "../button";
-import Heading from "../heading";
-import useBase from "../useBase";
-import SVGIcons from "../svgicons";
-import { uuid } from "../../funs";
-import Input from "../input";
-const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
-    const [value, setValue] = useState(selected || options[0]);
-    const [choosing, setChoosing] = useState(false);
-    const [query, setQuery] = useState(null);
-    const _ref = useRef(null);
-    const _search = useRef(null);
-    const _id = useMemo(() => name || uuid(), []);
-    const { className, style, rest } = useBase(pops);
-    const updateValue = (o) => {
-        setValue(o);
-        onChange && onChange(o);
-    };
-    useEffect(() => {
-        document.body.addEventListener(`click`, (e) => {
-            setChoosing(false);
-        });
-    }, []);
-    useEffect(() => {
-        if (choosing) {
-            _search.current && _search.current.focus();
-        }
-        else {
-            if (_search.current) {
-                _search.current.value = ``;
-            }
-            setQuery(null);
-        }
-    }, [choosing]);
-    return _jsxs(Box, { ...{
-            className: `--select rel`
-        }, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, ref: _ref, ...{
-                    className: `--selected flex aic rel ${className}`.trim(),
-                    withLabel: false,
-                    style,
-                    onClick: (e) => setChoosing(true),
-                    ...rest
-                }, children: [_jsx(Heading, { ...{
-                            className: `--label`,
-                        }, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { ...{
-                            className: `--svg-arrow rel flex aic jcc`
-                        }, children: choosing ? SVGIcons.ArrowUp : SVGIcons.ArrowDown })] }), _jsxs(Box, { id: _id, ...{
-                    className: `--options-list flex cols abs`,
-                    style: {
-                        pointerEvents: choosing ? `auto` : `none`,
-                    },
-                    animate: {
-                        from: { y: 5, opacity: 0 },
-                        to: { y: 0, opacity: 1 },
-                        when: choosing,
-                        duration: .05
-                    }
-                }, children: [withSearch && _jsx(Input, { ...{
-                            ref: _search,
-                            onChange: (e) => {
-                                setQuery(e.target.value == `` ? null : e.target.value);
-                            },
-                            className: `--select-search`,
-                            placeholder: searchPlaceholder || `Search...`,
-                        } }), (query == null ? options : options.filter((o) => {
-                        return `string` == typeof o ?
-                            o.toLowerCase().includes(query.toLowerCase())
-                            : o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
-                    }))
-                        .map((o) => _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 }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
-});
-export default Select;

package/dist/comps/select/select.js

@@ -1 +0,0 @@
-"use strict";

package/dist/comps/sheet.js

@@ -1,229 +0,0 @@
-"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 With from "./base";
-import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
-import Cover from "./cover";
-import { animationTransition } from "../funs/css";
-import ComponentEditor from "./editor";
-import { uuid } from "../funs";
-let _sheetTimeout = null;
-let _sheetWobbleTimeout = null;
-const Sheet = forwardRef((props, ref) => {
-    const { as, transition, curve, speed, editor, type, actionPosition, ...rest } = props;
-    // const _editor = useComponentEditor()
-    const sheetID = useMemo(() => uuid(), []);
-    const [visible, setVisible] = useState(false);
-    const [title, setTitle] = useState(``);
-    const [msg, setMsg] = useState(``);
-    const [action, setAction] = useState(null);
-    const [_errorType, setErrorType] = useState(type || SHEET.Default);
-    const [loading, setLoading] = useState(false);
-    const [render, setRender] = useState(true);
-    const _render = useRef(null);
-    const divRef = useRef(null);
-    const lastTransform = useRef(null);
-    // const dialogContent = useMemo(() => msg, [msg])
-    useImperativeHandle(ref, () => ({
-        setLoading(mode) {
-            setLoading(mode);
-        },
-        showDialog(title, message, action, onShow) {
-            if (_sheetTimeout) {
-                clearTimeout(_sheetTimeout);
-                if (_sheetWobbleTimeout) {
-                    clearTimeout(_sheetWobbleTimeout);
-                }
-                divRef.current.classList.remove(`wobble`);
-                setTimeout(() => divRef.current.classList.add(`wobble`), 50);
-                _sheetWobbleTimeout = setTimeout(() => {
-                    divRef.current.classList.remove(`wobble`);
-                    _sheetWobbleTimeout = null;
-                }, 500);
-            }
-            setErrorType(SHEET.Dialog);
-            setMsg(message);
-            setTitle(title);
-            if (action)
-                setAction(action.reduce((ar, b) => {
-                    ar.push({
-                        ...b,
-                        key: b.key || uuid()
-                    });
-                    return ar;
-                }, []));
-            setVisible(true);
-            setTimeout(() => onShow ? onShow() : () => { }, 1000);
-        },
-        dialog(title, message, action, onShow) {
-            if (_sheetTimeout) {
-                clearTimeout(_sheetTimeout);
-                if (_sheetWobbleTimeout) {
-                    clearTimeout(_sheetWobbleTimeout);
-                }
-                divRef.current.classList.remove(`wobble`);
-                setTimeout(() => divRef.current.classList.add(`wobble`), 50);
-                _sheetWobbleTimeout = setTimeout(() => {
-                    divRef.current.classList.remove(`wobble`);
-                    _sheetWobbleTimeout = null;
-                }, 500);
-            }
-            setErrorType(SHEET.Dialog);
-            setMsg(message);
-            setTitle(title);
-            if (action)
-                setAction(action.reduce((ar, b) => {
-                    ar.push({
-                        ...b,
-                        key: b.key || uuid()
-                    });
-                    return ar;
-                }, []));
-            setVisible(true);
-            setTimeout(() => onShow ? onShow() : () => { }, 1000);
-        },
-        error(message, duration) {
-            this.show(message, duration, SHEET.Error);
-        },
-        warn(message, duration) {
-            this.show(message, duration, SHEET.Warn);
-        },
-        success(message, duration) {
-            this.show(message, duration, SHEET.Success);
-        },
-        show(message, duration, type) {
-            if (_sheetTimeout) {
-                clearTimeout(_sheetTimeout);
-                if (_sheetWobbleTimeout) {
-                    clearTimeout(_sheetWobbleTimeout);
-                }
-                // if ( lastTransform ) divRef.current!.style.transform = _lastTransform
-                lastTransform.current = divRef.current.style.transform;
-                divRef.current.style.transform = ``;
-                divRef.current.classList.remove(`wobble`);
-                setTimeout(() => {
-                    divRef.current.classList.add(`wobble`);
-                    divRef.current.style.transform = `${lastTransform.current} scale(.9)`.trim();
-                }, 50);
-                _sheetWobbleTimeout = setTimeout(() => {
-                    divRef.current.classList.remove(`wobble`);
-                    divRef.current.style.transform = lastTransform.current || ``;
-                    _sheetWobbleTimeout = null;
-                }, 500);
-            }
-            _sheetTimeout = setTimeout(() => {
-                setVisible(false);
-                _sheetTimeout = null;
-                _sheetWobbleTimeout = null;
-            }, (duration || 4) * 1000);
-            setErrorType(type || SHEET.Default);
-            setMsg(message);
-            setVisible(true);
-        },
-        hide() {
-            setVisible(false);
-        }
-    }));
-    const buildAnimation = () => {
-        const base = {
-            when: visible,
-            duration: speed || 0.3,
-            delay: 0.1,
-        };
-        if (_errorType == SHEET.Dialog) {
-            if (transition) {
-                const { from, to } = animationTransition(transition);
-                return {
-                    from: { ...from, x: `-50%`, y: `-50%` },
-                    to: { ...to, x: `-50%`, y: `-50%` },
-                    curve: curve || TRANSITION_CURVES.EaseInOut,
-                    ...base
-                };
-            }
-            return {
-                from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
-                to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
-                curve: TRANSITION_CURVES.Spring,
-                ...base
-            };
-        }
-        else {
-            return {
-                from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
-                to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
-                curve: TRANSITION_CURVES.Spring,
-                ...base
-            };
-        }
-    };
-    const sheetProps = useMemo(() => ({
-        "sheet-radius": `label:Radius type:range value:auto min:0 max:50 unit:px`,
-    }), []);
-    const toastProps = useMemo(() => ({
-        "sheet-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
-        "sheet-font-size": `label:Font,Size type:range value:auto min:12 max:72 unit:px`,
-    }), []);
-    const dialogProps = useMemo(() => ({
-        "sheet-bg": `label:Background type:color value:auto`,
-        "@group-Head": {
-            label: "Head",
-            pops: {
-                "sheet-title-opacity": `label:Opacity type:range value:auto min:0 max:1 step:0.1`,
-                "sheet-head-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
-            }
-        },
-        "@group-Body": {
-            label: "Body",
-            pops: {
-                "sheet-body-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
-            }
-        },
-        "@group-Footer": {
-            label: "Footer",
-            pops: {
-                "sheet-footer": `label:Background type:color value:auto`,
-                "sheet-footer-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
-                "@group-Action": {
-                    label: "Footer Action",
-                    pops: {
-                        "sheet-action": `label:Background type:color value:auto`,
-                        "sheet-action-color": `label:Text,Color type:color value:auto`,
-                        "sheet-action-hover": `label:Hover,Color type:color value:auto`,
-                        "sheet-action-radius": `label:Radius type:range value:auto min:0 max:50 unit:px`,
-                    }
-                }
-            }
-        },
-        "@group-Close": {
-            label: "Close Button",
-            pops: {
-                "sheet-closer-font-size": `label:Size type:range value:auto min:8 max:72 step:2 unit:px`,
-                "sheet-closer-color": `label:Color type:color value:auto`,
-                "sheet-closer-opacity": `label:Opacity type:range value:auto min:0 max:1 step:0.1`,
-                "sheet-closer-hover-opacity": `label:Hover,Opacity type:range value:auto min:0 max:1 step:0.1`,
-            }
-        }
-    }), []);
-    useEffect(() => {
-        if (_render.current)
-            clearTimeout(_render.current);
-        if (!visible) {
-            _render.current = setTimeout(() => setRender(false), 1000);
-        }
-        else {
-            setRender(true);
-        }
-    }, [visible]);
-    if (_errorType == SHEET.Dialog) {
-        return _jsxs(_Fragment, { children: [_jsx(With, { "aria-hidden": !visible, className: `zuz-overlay fixed fill`, animate: {
-                        transition: TRANSITIONS.FadeIn,
-                        when: visible,
-                        duration: 0.1,
-                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? msg : null }), action && _jsx(With, { className: `sheet-footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`, children: action.map((a, i) => _jsx(With, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), tag: `button`, as: `sheet-action-btn`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
-                        ...sheetProps,
-                        ...(_errorType == SHEET.Dialog ? dialogProps : toastProps)
-                    } })] });
-    }
-    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} abs`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
-});
-export default Sheet;

package/dist/comps/span.d.ts

@@ -1,6 +0,0 @@
-import { Props } from "./useBase/base.types";
-export interface SpanProps extends Props<'div'> {
-    name?: string;
-}
-declare const Span: import("react").ForwardRefExoticComponent<SpanProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default Span;

package/dist/comps/span.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import useBase from "./useBase";
-const Span = forwardRef((props, ref) => {
-    const { style, ...pops } = props;
-    const { className, style: _style, rest } = useBase(pops);
-    return _jsx("span", { ref: ref, className: className, style: {
-            ..._style,
-            ...(style || {})
-        }, ...rest });
-});
-export default Span;

package/dist/comps/spinner.d.ts

@@ -1,16 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { SPINNER } from "../types/enums";
-import { animationProps } from "../types/interfaces";
-export interface SpinnerProps extends ComponentPropsWithoutRef<`div`> {
-    as?: string;
-    animate?: animationProps;
-    type?: SPINNER;
-    size?: number;
-    width?: number;
-    color?: string;
-    background?: string;
-    foreground?: string;
-    speed?: number;
-}
-declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Spinner;

package/dist/comps/spinner.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import With from "./base";
-import { SPINNER } from "../types/enums";
-import { hexToRgba } from "../funs";
-const Spinner = forwardRef((props, ref) => {
-    const { as, type, width, speed, size, color, background, foreground, ...rest } = props;
-    const defaultColor = `#000000`;
-    // console.log(`sp`, props)
-    const buildSimple = () => {
-        const c = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor);
-        const bg = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor, .3);
-        const pops = {
-            width: size || 50,
-            height: size || 50,
-            border: `${width || 3}px solid ${bg}`,
-            borderRadius: `50%`,
-            borderTopColor: c,
-            animationDuration: `${speed || .6}s`,
-            animationTimingFunction: `linear`
-        };
-        return pops;
-    };
-    const build = () => {
-        let _ = {};
-        switch (type || SPINNER.Simple) {
-            case SPINNER.Simple:
-                _ = buildSimple();
-                break;
-        }
-        return _;
-    };
-    const getChild = () => {
-        switch (type || SPINNER.Simple) {
-            case SPINNER.Simple:
-                break;
-        }
-        return null;
-    };
-    return _jsx(With, { as: as, ref: ref, tag: `div`, className: `zuz-spinner${type ? `-${type.toLowerCase()}` : ``}`, style: build(), ...rest, children: getChild() });
-});
-export default Spinner;

package/dist/comps/tabview.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import With from "./base";
-import { uuid } from "../funs";
-import { useResizeObserver } from "../hooks";
-import ComponentEditor from "./editor";
-const TabView = forwardRef((props, ref) => {
-    const { as, tabs: _tabs, speed, prerender, onChange, ...rest } = props;
-    const tabs = useMemo(() => _tabs.reduce((ts, t) => {
-        ts.push({
-            ...t,
-            key: t.key || uuid()
-        });
-        return ts;
-    }, []), [_tabs]);
-    const tabview = useRef(null);
-    const tabViewID = useMemo(() => uuid(), []);
-    const [activeTab, setActiveTab] = useState(0);
-    const size = useResizeObserver(tabview);
-    const render = useMemo(() => prerender == undefined || prerender == true ? true : false, []);
-    const handleTabClick = (index) => {
-        setActiveTab(index);
-    };
-    useEffect(() => {
-        // console.log(`TabRenderCount`)
-        onChange && onChange(tabs[0], 0);
-    }, []);
-    // useEffect(() => {
-    //     console.log(tabs)
-    // }, [tabs])
-    return _jsxs(_Fragment, { children: [_jsxs(With, { ref: tabview, className: `tabview flex cols`, ...rest, children: [_jsx(With, { className: `tab-head flex aic`, children: tabs.map((tab, index) => _jsx(With, { tag: `button`, className: `tab-label rel ${index === activeTab ? 'active' : ''}`.trim(), onClick: () => {
-                                handleTabClick(index);
-                                tab.onSelect && tab.onSelect(tab, index);
-                                onChange && onChange(tab, index);
-                            }, children: tab.label }, `tab-${tabViewID}-${tab.key}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
-                                return _jsx(With
-                                // ref={tabBodyRef}
-                                , { className: `tab-body rel`, style: {
-                                        width: size.width,
-                                        minWidth: size.width,
-                                        maxWidth: size.width,
-                                        opacity: index === activeTab ? 1 : 0,
-                                        transition: 'opacity 0.5s ease',
-                                    }, children: (render || activeTab == index) && tab.body }, `tab-body-${tabViewID}-${tab.key}`);
-                                // onClick={() => tab.onSelect(index)}
-                            }) }) })] }), props.editor && _jsx(ComponentEditor, { element: `.tabview`, title: `TabView`, attrs: {
-                    "@group-Head": {
-                        label: "Head",
-                        pops: {
-                            "tab-head": `label:Color type:color value:auto`,
-                            "tab-head-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
-                        }
-                    },
-                    "@group-Tabs": {
-                        label: "Tabs",
-                        pops: {
-                            "tab": `label:Tab type:color value:auto`,
-                            "tab-active": `label:Active type:color value:auto`,
-                            "tab-hover": `label:Hover type:color value:auto`,
-                        }
-                    },
-                } })] });
-});
-export default TabView;

package/dist/comps/textwheel.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { animationProps } from '../types/interfaces';
-export interface WheelProps {
-    as?: string;
-    direction?: `up` | `down`;
-    value?: number | string;
-    color?: string;
-    animate?: animationProps;
-}
-export interface WheelHandler {
-    setValue: (v: number | string) => void;
-    updateValue: (v: number | string) => void;
-}
-declare const TextWheel: React.ForwardRefExoticComponent<WheelProps & React.RefAttributes<WheelHandler>>;
-export default TextWheel;

package/dist/comps/treeview/item.d.ts

@@ -1,15 +0,0 @@
-import { TreeNode, TreeNodeIcons } from ".";
-import { BaseProps } from "../../types/interfaces";
-export interface TreeItemProps {
-    treeTag: string;
-    meta: TreeNode;
-    nodes: TreeNode[];
-    onSelect: (tag: string) => void;
-    selected?: String;
-    icons?: TreeNodeIcons;
-}
-export interface TreeItemHandler {
-    onSelect?: (v: TreeNode) => void;
-}
-declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & BaseProps & import("react").RefAttributes<TreeItemHandler>>;
-export default TreeItem;

package/dist/comps/treeview/item.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import With from "../base";
-const TreeItem = forwardRef((props, ref) => {
-    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
-    const { tag, label, under } = meta;
-    const [isOpen, setIsOpen] = useState(tag == `root`);
-    const toggle = () => {
-        localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
-        setIsOpen(!isOpen);
-    };
-    useEffect(() => {
-        if (tag == `root` && !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(With, { as: `tree-node tree-node-${tag} flex cols`, children: [_jsxs(With, { as: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(With, { tag: `button`, onClick: toggle, className: `--node-aro-btn`, children: _jsx(With, { className: `--node-aro-icon icon-${isOpen ? icons?.arrowOpen : icons?.arrowClose}` }) }), _jsxs(With, { tag: `button`, className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(With, { className: `--node-icon icon-${isOpen ? icons?.dirOpen : icons?.dirClose}` }), _jsx(With, { tag: `h1`, className: `--node-label`, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(With, { 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 }, `tree-node-${node.tag}`)) })] });
-});
-export default TreeItem;