@zuzjs/ui 0.5.6 → 0.5.7

package/dist/comps/Select/types.d.ts

@@ -0,0 +1,52 @@
+import { FORMVALIDATION } from "../../types/enums";
+import { BoxProps } from "../Box";
+/**
+ * Represents an option object with a label and value.
+ */
+export interface OptionObject {
+    label: string;
+    value: string;
+}
+export interface OptionItemProps {
+    updateValue: (o: Option) => void;
+    o: Option;
+    value: Option;
+}
+/**
+ * Represents an option which can be either a string or an OptionObject.
+ */
+export type Option = string | OptionObject;
+/**
+ * Props for the Select component.
+ */
+export type SelectProps = BoxProps & {
+    /**
+     * Indicates if the select field is required and its validation type.
+     */
+    required?: FORMVALIDATION;
+    /**
+     * Array of options to be displayed in the select dropdown.
+     */
+    options: Option[];
+    /**
+     * Label for the select field.
+     */
+    label?: string;
+    /**
+     * The currently selected option.
+     */
+    selected?: Option;
+    /**
+     * Enables the search functionality within the select dropdown.
+     */
+    search?: boolean;
+    /**
+     * Callback function triggered when the selected option changes.
+     * @param v - The newly selected option.
+     */
+    onChange?: (v: Option) => void;
+    /**
+     * Placeholder text for the search input field.
+     */
+    searchPlaceholder?: string;
+};

package/dist/comps/Select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/comps/{sheet.d.ts → Sheet/index.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
-import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
-import { BaseProps } from "../types/interfaces";
-export interface SheetProps {
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import { ZuzProps } from "../../types";
+export type SheetProps = ZuzProps & {
     title?: string;
     message?: string | ReactNode;
     transition?: TRANSITIONS;
@@ -9,7 +9,7 @@ export interface SheetProps {
     speed?: Number;
     type?: SHEET;
     actionPosition?: SHEET_ACTION_POSITION;
-}
+};
 export interface SheetActionHandler {
     key?: string;
     label: string;
@@ -20,7 +20,18 @@ export interface SheetHandler {
     showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     dialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
+    success: (message: string | ReactNode, duration?: number) => void;
+    error: (message: string | ReactNode, duration?: number) => void;
+    warn: (message: string | ReactNode, duration?: number) => void;
     hide: () => void;
 }
-declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & BaseProps & import("react").RefAttributes<SheetHandler>>;
+declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
+    title?: string;
+    message?: string | ReactNode;
+    transition?: TRANSITIONS;
+    curve?: TRANSITION_CURVES;
+    speed?: Number;
+    type?: SHEET;
+    actionPosition?: SHEET_ACTION_POSITION;
+} & import("react").RefAttributes<SheetHandler>>;
 export default Sheet;

package/dist/comps/Sheet/index.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, 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 Button from "../Button";
+import Cover from "../Cover";
+import Overlay from "../Overlay";
+let _sheetTimeout = null;
+let _sheetWobbleTimeout = null;
+const Sheet = forwardRef((props, ref) => {
+    const { title: _title, message, transition, curve, speed, type, actionPosition, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const [title, setTitle] = useState(``);
+    const [msg, setMsg] = useState(``);
+    const [action, setAction] = useState(null);
+    const [sheetType, setSheetType] = useState(type || SHEET.Default);
+    const sheetID = useMemo(() => uuid(), []);
+    const [visible, setVisible] = useState(false);
+    const innerRef = useRef(null);
+    const lastTransform = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [render, setRender] = useState(true);
+    const _render = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setLoading(mode) {
+            setLoading(mode);
+        },
+        showDialog(title, message, action, onShow) {
+            if (_sheetTimeout) {
+                clearTimeout(_sheetTimeout);
+                if (_sheetWobbleTimeout) {
+                    clearTimeout(_sheetWobbleTimeout);
+                }
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => innerRef.current.classList.add(`--wobble`), 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            setSheetType(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);
+                }
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => innerRef.current.classList.add(`--wobble`), 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            setSheetType(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 ) innerRef.current!.style.transform = _lastTransform
+                lastTransform.current = innerRef.current.style.transform;
+                innerRef.current.style.transform = ``;
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => {
+                    innerRef.current.classList.add(`--wobble`);
+                    innerRef.current.style.transform = `${lastTransform.current} scale(.9)`.trim();
+                }, 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    innerRef.current.style.transform = lastTransform.current || ``;
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            _sheetTimeout = setTimeout(() => {
+                setVisible(false);
+                _sheetTimeout = null;
+                _sheetWobbleTimeout = null;
+            }, (duration || 4) * 1000);
+            setSheetType(type || SHEET.Default);
+            setMsg(message);
+            setVisible(true);
+        },
+        hide() {
+            setVisible(false);
+        }
+    }));
+    const buildAnimation = useCallback(() => {
+        const base = {
+            when: visible,
+            duration: speed || 0.3,
+            delay: 0.1,
+        };
+        if (sheetType == 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
+            };
+        }
+    }, [visible]);
+    useEffect(() => {
+        if (_render.current)
+            clearTimeout(_render.current);
+        if (!visible) {
+            _render.current = setTimeout(() => setRender(false), 1000);
+        }
+        else {
+            setRender(true);
+        }
+    }, [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 }), _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 ? msg : 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 });
+});
+export default Sheet;

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type SpanProps = Props<`span`> & {};
+declare const Span: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof import("../../types").ZuzProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Span;

package/dist/comps/Span/index.js

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

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

@@ -0,0 +1,21 @@
+import { BoxProps } from "../Box";
+import { SPINNER } from "../../types/enums";
+export type SpinnerProps = BoxProps & {
+    type?: SPINNER;
+    size?: number;
+    width?: number;
+    color?: string;
+    background?: string;
+    foreground?: string;
+    speed?: number;
+};
+declare const Spinner: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: SPINNER;
+    size?: number;
+    width?: number;
+    color?: string;
+    background?: string;
+    foreground?: string;
+    speed?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Spinner;

package/dist/comps/Spinner/index.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { SPINNER } from "../../types/enums";
+import { useBase } from "../../hooks";
+import { hexToRgba } from "../../funs";
+const Spinner = forwardRef((props, ref) => {
+    const { type, size, width, speed, color, background, foreground, ...pops } = props;
+    const defaultColor = `#000000`;
+    const { className, style, rest } = useBase(pops);
+    const build = () => {
+        const c = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor);
+        const bg = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor, .3);
+        const _props = {
+            width: size || 30,
+            height: size || 30,
+            border: `${width || 3}px solid ${bg}`,
+            borderRadius: `50%`,
+            borderTopColor: c,
+            animationDuration: `${speed || .6}s`,
+            animationTimingFunction: `linear`
+        };
+        return _props;
+    };
+    return _jsx(Box, { className: `${className} --spinner --${(type || SPINNER.Simple).toLowerCase()}`.trim(), style: {
+            ...style,
+            ...build()
+        }, ...rest });
+});
+export default Spinner;

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

@@ -0,0 +1,7 @@
+import { CheckboxHandler } from "../CheckBox/types";
+import { CHECKBOX } from "../../types/enums";
+declare const Switch: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    type?: CHECKBOX;
+    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+} & import("react").RefAttributes<CheckboxHandler>>;
+export default Switch;

package/dist/comps/Switch/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import CheckBox from "../CheckBox";
+import { CHECKBOX } from "../../types/enums";
+const Switch = forwardRef((props, ref) => {
+    return _jsx(CheckBox, { type: CHECKBOX.Switch, ...props, ref: ref });
+});
+export default Switch;

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

@@ -0,0 +1,9 @@
+import { Tab, TabViewHandler } from "./types";
+import { BoxProps } from "../Box";
+declare const TabView: import("react").ForwardRefExoticComponent<BoxProps & {
+    onChange?: (tab: Tab, index: number) => void;
+    speed?: number;
+    tabs: Tab[];
+    prerender?: boolean;
+} & import("react").RefAttributes<TabViewHandler>>;
+export default TabView;

package/dist/comps/TabView/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { uuid } from "../../funs";
+import { useResizeObserver } from "../../hooks";
+import Box from "../Box";
+import TabItem from "./tab";
+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(() => {
+        onChange && onChange(tabs[0], 0);
+    }, []);
+    return _jsxs(Box, { ref: tabview, className: `--tabview flex cols`, children: [_jsx(Box, { className: `--head flex aic`, children: tabs.map((tab, index) => _jsx(TabItem, { tab: tab, index: index, activeTab: activeTab, onClick: idx => {
+                        handleTabClick(idx);
+                        tab.onSelect && tab.onSelect(tab, idx);
+                        onChange && onChange(tab, idx);
+                    } }, `tab-${tabViewID}-${tab.key || index}`)) }), _jsx(Box, { className: `--body rel`, children: _jsx(Box, { className: `--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) => _jsx(Box, { style: {
+                            width: size.width,
+                            minWidth: size.width,
+                            maxWidth: size.width,
+                            opacity: index === activeTab ? 1 : 0,
+                            transition: 'opacity 0.5s ease',
+                        }, className: `--content`, children: (render || activeTab == index) && tab.body })) }) })] });
+});
+export default TabView;

package/dist/comps/TabView/tab.d.ts

@@ -0,0 +1,3 @@
+import { TabProps } from "./types";
+declare const TabItem: ({ tab, index, activeTab, onClick }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export default TabItem;

package/dist/comps/TabView/tab.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../Button";
+import Icon from "../Icon";
+import Text from "../Text";
+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 })] });
+};
+export default TabItem;

package/dist/comps/{tabview.d.ts → TabView/types.d.ts}

@@ -1,21 +1,26 @@
 import { ReactNode } from "react";
-import { BaseProps } from "../types/interfaces";
+import { BoxProps } from "../Box";
 export interface Tab {
     onSelect: (tab: Tab, index: number) => void;
     tag?: string;
     key?: string;
+    icon?: string | ReactNode | ReactNode[];
     label: string | ReactNode | ReactNode[];
     body: string | ReactNode | ReactNode[];
     render?: boolean;
 }
-export interface TabViewProps {
+export type TabProps = {
+    tab: Tab;
+    index: number;
+    activeTab: number;
+    onClick: (index: number) => void;
+};
+export type TabViewProps = BoxProps & {
     onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     tabs: Tab[];
     prerender?: boolean;
-}
+};
 export interface TabViewHandler {
     setTab: (index: number) => void;
 }
-declare const TabView: import("react").ForwardRefExoticComponent<TabViewProps & BaseProps & import("react").RefAttributes<TabViewHandler>>;
-export default TabView;

package/dist/comps/TabView/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Props } from '../../types';
+export type TextProps = Props<`h1` | `h2` | `h3` | `h4` | `h5` | `h6`> & {
+    h?: number;
+    html?: ReactNode | string;
+};
+declare const Text: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    h?: number;
+    html?: ReactNode | string;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export default Text;

package/dist/comps/Text/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef } from 'react';
+import { useBase } from '../../hooks';
+import Span from '../Span';
+const Text = forwardRef((props, ref) => {
+    const { h, html, children, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const Tag = `h${props.h || 1}`;
+    return createElement(Tag, {
+        ref,
+        style,
+        className,
+        ...rest
+    }, html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children);
+});
+export default Text;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextWheelHandler } from './types';
+declare const TextWheel: React.ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "name"> & {
+    value?: number | string;
+    color?: string;
+    direction?: `up` | `down`;
+} & React.RefAttributes<TextWheelHandler>>;
+export default TextWheel;

package/dist/comps/{textwheel.js → TextWheel/index.js}

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

package/dist/comps/TextWheel/types.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from "../Box";
+export type TextWheelProps = Omit<BoxProps, "name"> & {
+    value?: number | string;
+    color?: string;
+    direction?: `up` | `down`;
+};
+export interface TextWheelHandler {
+    setValue: (v: number | string) => void;
+    updateValue: (v: number | string) => void;
+}

package/dist/comps/TextWheel/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { TreeViewHandler } from "./types";
+import { BoxProps } from "../Box";
+declare const TreeView: import("react").ForwardRefExoticComponent<Omit<BoxProps, "tag"> & {
+    tag?: string;
+    roots: string[];
+    nodes: import("./types").TreeNode[];
+    onSelect: (tag: string) => void;
+    icons?: import("./types").TreeNodeIcons;
+    selected?: string;
+} & import("react").RefAttributes<TreeViewHandler>>;
+export default TreeView;

package/dist/comps/{treeview → Treeview}/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import With from "../base";
+import Box from "../Box";
 import TreeItem from "./item";
 const TreeView = forwardRef((props, ref) => {
     const { as, nodes, onSelect, tag: treeViewTag, icons, roots, selected: _selected, ...rest } = props;
@@ -17,8 +17,8 @@ const TreeView = forwardRef((props, ref) => {
             setSelected(_selected);
         }
     }, [_selected]);
-    return _jsx(With, { className: `treeview flex cols`, children: nodes
+    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: handleSelect, icons: icons, meta: node, nodes: nodes }, `tree-node-${node.tag}`)) });
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) });
 });
 export default TreeView;

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

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

package/dist/comps/Treeview/item.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import Box from "../Box";
+import Button from "../Button";
+import Icon from "../Icon";
+import Text from "../Text";
+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(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { onClick: toggle, className: `--node-aro-btn`, children: _jsx(Icon, { className: `--node-aro-icon`, name: isOpen ? icons?.arrowOpen : icons?.arrowClose }) }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(Icon, { className: `--node-icon`, name: isOpen ? icons?.dirOpen : icons?.dirClose }), _jsx(Text, { ...{ className: `--node-label` }, 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}`)) })] });
+});
+export default TreeItem;