@zuzjs/ui 0.7.4 → 0.7.5

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

@@ -0,0 +1,6 @@
+import { AccordionHandler } from "./types";
+declare const Accordion: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    message?: string | import("react").ReactNode;
+    title: string | import("react").ReactNode | import("react").ReactNode[];
+} & import("react").RefAttributes<AccordionHandler>>;
+export default Accordion;

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

@@ -0,0 +1,12 @@
+import { Size } from "../../types/enums";
+declare const AutoComplete: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: import("../..").Variant;
+    with?: import("../..").FORMVALIDATION;
+} & {
+    action?: string;
+    data?: string[];
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default AutoComplete;

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

@@ -0,0 +1,12 @@
+import { AVATAR } from "../../types/enums";
+import { AvatarHandler } from "./types";
+declare const Avatar: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../..").ZuzProps> & {
+    type?: AVATAR;
+    size?: number;
+    variant?: import("../..").Variant;
+    src?: string;
+    color?: string;
+    crossOrigin?: "anonymous" | "use-credentials";
+    referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+} & import("react").RefAttributes<AvatarHandler>>;
+export default Avatar;

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

@@ -0,0 +1,13 @@
+import { ButtonState } from './types';
+import { Size, SPINNER } from '../../types/enums';
+declare const Button: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof import("../..").ZuzProps> & {
+    icon?: string;
+    iconSize?: Size;
+    withLabel?: boolean;
+    spinner?: SPINNER;
+    state?: ButtonState;
+    size?: Size;
+    variant?: Size | import("../..").Variant;
+    reset?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+import Icon from '../Icon';
+import Span from '../Span';
+import { ButtonState } from './types';
+import Spinner from '../Spinner';
+import { Size, SPINNER } from '../../types/enums';
+const Button = forwardRef((props, ref) => {
+    const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, disabled, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    return _jsxs("button", { className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, disabled: state == ButtonState.Loading || props.skeleton?.enabled || disabled, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, type: spinner || SPINNER.Simple }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
+});
+export default Button;

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

@@ -0,0 +1,23 @@
+import { Props } from "../../types";
+import { Size, SPINNER, Variant } from "../../types/enums";
+export type ButtonProps = Props<`button`> & {
+    icon?: string;
+    iconSize?: Size;
+    withLabel?: boolean;
+    spinner?: SPINNER;
+    state?: ButtonState;
+    /**
+     * @deprecated "Use `variant` instead. `size` will be removed in the next major release."
+     */
+    size?: Size;
+    variant?: Size | Variant;
+    reset?: boolean;
+};
+export interface ButtonHandler extends HTMLButtonElement {
+    reset: () => void;
+    setState: (mod: ButtonState) => void;
+}
+export declare enum ButtonState {
+    Loading = "loading",
+    Normal = "normal"
+}

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type ImageProps = Props<`img`> & {};
+declare const Image: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

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

@@ -0,0 +1,15 @@
+import { Props } from '../../types';
+import { FORMVALIDATION, Size, Variant } from '../../types/enums';
+export type InputProps = Props<`input`> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+};
+declare const Input: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type LabelProps = Props<`label`> & {};
+declare const Label: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;

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

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+declare const NetworkManager: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    size?: Size;
+    offlineMessage?: string;
+    onlineMessage?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default NetworkManager;

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

@@ -0,0 +1,14 @@
+import { PaginationPage, PaginationStyle } from "./types";
+declare const Pagination: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    itemCount: number;
+    itemsPerPage: number;
+    startPage?: PaginationPage;
+    pageRange?: number;
+    paginationStyle?: PaginationStyle;
+    breakLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    renderOnZeroPageCount?: boolean;
+    onPageChange?: import("./types").PaginationCallback;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Pagination;

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

@@ -0,0 +1,17 @@
+import { InputProps } from '../Input';
+export type PinInputProps = InputProps & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+};
+declare const PinInput: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: import("../..").Size;
+    variant?: import("../..").Variant;
+    with?: import("../..").FORMVALIDATION;
+} & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default PinInput;

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

@@ -0,0 +1,18 @@
+import { InputProps } from '../Input';
+import { Size } from '../../types/enums';
+export type SearchProps = InputProps & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+};
+declare const Search: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: import("../..").Variant;
+    with?: import("../..").FORMVALIDATION;
+} & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import Button from "../Button";
+import Box from "../Box";
+import Icon from "../Icon";
+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 { 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]);
+    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 ?
+                `string` == typeof icon ? _jsx(Icon, { name: icon, as: `--segment-icon` }) : _jsx(Box, { as: `--segment-icon`, children: icon })
+                : null, label && String(label).trim() != `` && _jsx(Box, { className: `--segment-label`, children: label || `Item ${index}` })] });
+};
+export default SegmentItem;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+import { Size } from "../../types/enums";
+/**
+ * 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?: ReactNode;
+    label?: ReactNode;
+}
+/**
+ * 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 type SegmentProps = BoxProps & {
+    size?: Size;
+    selected?: number;
+    onSwitch?: (segment: Segment) => void;
+    items: Segment[];
+};
+export type SegmentItemProps = {
+    meta: Segment;
+    selected: boolean;
+    onSelect: (index: number, width: number, x: number, segment: Segment, force: boolean) => void;
+};

package/dist/cjs/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("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Span;

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

@@ -0,0 +1,9 @@
+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;
+    size?: import("../..").Size;
+    variant?: import("../..").Variant;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
+} & import("react").RefAttributes<CheckboxHandler>>;
+export default Switch;

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+declare const TabBody: React.FC<{
+    size: {
+        width: number;
+    };
+    index: number;
+    active: boolean;
+    render: boolean;
+    content: string | ReactNode | ReactNode[];
+}>;
+export default TabBody;

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@zuzjs/ui';
+import { useEffect, useRef, useState } from 'react';
+const TabBody = ({ size, index, active, render, content }) => {
+    const _ref = useRef(null);
+    const [style, setStyle] = useState({});
+    useEffect(() => {
+        if (_ref.current) {
+            const d = _ref.current.closest(`.--track`)?.getBoundingClientRect();
+            // console.log(d?.height)
+            setStyle({ height: d?.height });
+        }
+    }, [_ref.current]);
+    return _jsx(Box, { ref: _ref, style: {
+            width: size.width,
+            minWidth: size.width,
+            maxWidth: size.width,
+            opacity: active ? 1 : 0,
+            transition: 'opacity 0.5s ease',
+            ...style
+        }, className: `--content`, children: (render || active) && content });
+};
+export default TabBody;

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

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

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { uuid } from "../../funs";
+import { useBase, useResizeObserver } from "../../hooks";
+import Box from "../Box";
+import { SelectTabs } from "../..";
+import TabBody from "./body";
+const TabView = forwardRef((props, ref) => {
+    const { tabs: _tabs, speed, prerender, variant, onChange, ...rest } = props;
+    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 { style, className } = useBase(rest);
+    const handleTabClick = (index) => {
+        setActiveTab(index);
+    };
+    useEffect(() => {
+        onChange && onChange(tabs[0], 0);
+    }, []);
+    return _jsxs(Box, { ref: tabview, style: style, className: `--tabview --${variant || "default"} flex cols ${className}`, children: [_jsx(SelectTabs, { as: `--tabview-head`, onSwitch: (segment) => {
+                    handleTabClick(segment.index);
+                    const tab = tabs.find((t) => t.tag == segment.tag);
+                    if (tab && tab.onSelect) {
+                        tab.onSelect(tab, segment.index);
+                        onChange && onChange(tab, segment.index);
+                    }
+                }, selected: activeTab, items: tabs.reduce((arr, c, index) => {
+                    arr.push({
+                        icon: c.icon,
+                        index,
+                        label: c.label,
+                        tag: c.tag
+                    });
+                    return arr;
+                }, []) }), _jsx(Box, { className: `--tabview-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(TabBody, { index: index, active: index === activeTab, size: size, render: render, content: tab.body }, `tab-body-${tab.key || index}-${tabViewID}`)) }) })] });
+});
+export default TabView;

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export interface Tab {
+    onSelect: (tab: Tab, index: number) => void;
+    tag?: string;
+    key?: string;
+    icon?: ReactNode | ReactNode[];
+    label: string | ReactNode | ReactNode[];
+    body: string | ReactNode | ReactNode[];
+    render?: boolean;
+}
+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;
+    variant?: "fixed" | "default";
+    tabs: Tab[];
+    prerender?: boolean;
+};
+export interface TabViewHandler {
+    setTab: (index: number) => void;
+}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import TRow from "./row";
+import Pagination from "../Pagination";
+import { PaginationStyle } from "../Pagination/types";
+import { PubSub, uuid } from "../..";
+// const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
+const Table = (props, ref) => {
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, header, showPaginationOnZeroPageCount, rowClassName, selectableRows, hoverable, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
+        prev[c.id] = {
+            flex: c.weight || 1,
+            ...(c.w && { width: c.w }),
+            ...(c.maxW && { maxWidth: c.maxW }),
+            ...(c.minW && { minWidth: c.minW }),
+            ...(c.h && { height: c.h }),
+            ...(c.maxH && { maxHeight: c.maxH }),
+            ...(c.minH && { minHeight: c.minH }),
+        };
+        // prev.push(c.id.toString())
+        return prev;
+    }, {}), [schema]);
+    const _cols = useMemo(() => Object.keys(_schemaParsed), [schema]);
+    const _header = useMemo(() => header == undefined ? true : header, [header]);
+    const { style, className, rest } = useBase(pops);
+    const _tableRef = useRef(null);
+    const pubsub = useMemo(() => new PubSub(), []);
+    const rowKeys = useMemo(() => rows.map(() => uuid()), [rows]);
+    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys[index]}-${schema[0].id}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
+};
+const ForwardedTable = forwardRef(Table);
+export default ForwardedTable;

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

@@ -0,0 +1,53 @@
+import { ReactNode, RefObject } from "react";
+import { BoxProps } from "../Box";
+import { dynamicObject } from "../../types";
+import { PaginationCallback } from "../Pagination/types";
+import { PubSub } from "../..";
+export type RowSelectCallback<T> = (row: T, selected: boolean) => void;
+export type Row<T> = {
+    index: number;
+    schema: Column<T>[];
+    styles: dynamicObject;
+    ids?: string[];
+    animate?: boolean;
+    data?: T;
+    rowClassName?: string;
+    selectable?: boolean;
+    onSelect?: RowSelectCallback<T>;
+    pubsub: PubSub;
+    tableRef?: RefObject<HTMLDivElement | null>;
+    onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
+};
+export type Column<T> = {
+    id: string | number;
+    value: string | ReactNode | dynamicObject;
+    weight?: number;
+    w?: number | string;
+    maxW?: number | string;
+    minW?: number | string;
+    h?: number | string;
+    maxH?: number | string;
+    minH?: number | string;
+    resize?: boolean;
+    sort?: boolean;
+    as?: string;
+    renderWhenHeader?: boolean;
+    render?: (row: T, index: number) => ReactNode;
+};
+export type TableProps<T> = BoxProps & {
+    schema: Column<T>[];
+    rows: T[];
+    rowCount?: number;
+    rowsPerPage?: number;
+    rowClassName?: string;
+    currentPage?: number;
+    pagination?: boolean;
+    showPaginationOnZeroPageCount?: boolean;
+    animateRows?: boolean;
+    header?: boolean;
+    selectableRows?: boolean;
+    hoverable?: boolean;
+    onRowSelectToggle?: RowSelectCallback<T>;
+    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
+    onPageChange?: PaginationCallback;
+};

package/dist/cjs/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("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, keyof import("../..").ZuzProps> & {
+    h?: number;
+    html?: ReactNode | string;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export default Text;

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

@@ -0,0 +1,11 @@
+import { Props } from '../../types';
+import { Variant } from '../../types/enums';
+export type TextAreaProps = Props<`textarea`> & {
+    autoResize?: boolean;
+    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;
+    variant?: Variant;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

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

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

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

@@ -0,0 +1,28 @@
+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";
+import SVGIcons from "../svgicons";
+const TreeItem = forwardRef((props, ref) => {
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
+    const { tag, label, icon, under, isHead } = 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, { 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}`)) })] });
+});
+export default TreeItem;

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

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export interface TreeNodeIcons {
+    nodeOpen?: ReactNode;
+    nodeClose?: ReactNode;
+    arrowOpen: ReactNode;
+    arrowClose: ReactNode;
+    arrowDisabled?: ReactNode;
+}
+export type TreeViewProps = Omit<BoxProps, `tag`> & {
+    tag?: string;
+    roots: string[];
+    nodes: TreeNode[];
+    onNodeSelect: (tag: string) => void;
+    icons?: TreeNodeIcons;
+    selected?: string;
+};
+export interface TreeViewHandler {
+    getSelected?: () => String;
+}
+export interface TreeNode {
+    tag: string;
+    label: string;
+    icon?: ReactNode;
+    under?: string;
+    selected?: string;
+    expanded?: boolean;
+    isHead?: boolean;
+}
+export type TreeItemProps = BoxProps & {
+    treeTag: string;
+    meta: TreeNode;
+    nodes: TreeNode[];
+    onSelect: (tag: string) => void;
+    selected?: String;
+    icons?: TreeNodeIcons;
+};
+export interface TreeItemHandler {
+    onSelect?: (v: TreeNode) => void;
+}