@zuzjs/ui 0.7.4 → 0.7.6

package/dist/cjs/src/comps/Spinner/index.js

@@ -0,0 +1,56 @@
+"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";
+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 sizes = {
+            [Size.Small]: 20,
+            [Size.Medium]: 30,
+            [Size.Large]: 50,
+            default: 20
+        };
+        const _size = size ? Object.values(Size).includes(size) ? sizes[size] : size : sizes.default;
+        const _animationSetting = {
+            animationDuration: `${speed || .6}s`,
+            animationTimingFunction: `linear`
+        };
+        const _props = (type || SPINNER.Simple) == SPINNER.Simple ? {
+            width: _size,
+            height: _size,
+            border: `${width || 3}px solid ${bg}`,
+            borderRadius: `50%`,
+            borderTopColor: c,
+            ..._animationSetting
+        } : {
+        // ..._animationSetting
+        };
+        return _props;
+    };
+    const child = () => {
+        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: {
+            ...style,
+            ...build()
+        }, ...rest, children: child() });
+});
+export default Spinner;

package/dist/cjs/src/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/src/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/cjs/src/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/src/comps/TabView/body.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Box from '../Box';
+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/src/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/src/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/src/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/cjs/src/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/cjs/src/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/src/comps/TabView/types.js

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

package/dist/cjs/src/comps/Table/col.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+import type { Column } from "./types";
+import { PubSub } from "../..";
+declare const TColumn: <T>(props: Column<T> & {
+    idx: number;
+    style?: CSSProperties;
+    pubsub: PubSub;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TColumn;

package/dist/cjs/src/comps/Table/col.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "../Box";
+const TColumn = (props) => {
+    const { idx, id, as, weight, style, value, render, resize, sort } = props;
+    return _jsx(Box, { style: {
+            flex: weight || 1,
+            ...style
+        }, as: `--col flex aic ${as || ``}`, children: value });
+};
+export default TColumn;

package/dist/cjs/src/comps/Table/index.d.ts

@@ -0,0 +1,6 @@
+import { JSX, Ref } from "react";
+import type { TableProps } from "./types";
+declare const ForwardedTable: <T>(props: TableProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => JSX.Element;
+export default ForwardedTable;

package/dist/cjs/src/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/src/comps/Table/row.d.ts

@@ -0,0 +1,3 @@
+import type { Row } from "./types";
+declare const TRow: <T>(props: Row<T>) => import("react/jsx-runtime").JSX.Element;
+export default TRow;

package/dist/cjs/src/comps/Table/row.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef } from "react";
+import Box from "../Box";
+import TColumn from "./col";
+import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import { useDelayed } from "../../hooks";
+import CheckBox from "../CheckBox";
+const TRow = (props) => {
+    const { index, pubsub, schema, data, ids, styles, animate, selectable, tableRef, rowClassName, onSelect, onContextMenu } = props;
+    const mounted = useDelayed();
+    const _animation = useMemo(() => ({
+        transition: TRANSITIONS.SlideInBottom,
+        curve: TRANSITION_CURVES.EaseInOut,
+        delay: .02 * (index + 1),
+    }), []);
+    const checkbox = useRef(null);
+    const handleSelector = (chk, id) => {
+        if (index == -1) {
+            pubsub.emit(`ALL_ROWS_${chk ? `CHECKED` : `UNCHECKED`}`, chk);
+        }
+        else {
+            if (onSelect)
+                onSelect(data, chk);
+            pubsub.emit(`ROW_${chk ? `CHECKED` : `UNCHECKED`}`, chk, id);
+        }
+    };
+    const Selector = (idx, id, value) => _jsx(TColumn, { idx: idx, id: id, as: `--selector`, pubsub: pubsub, value: _jsx(CheckBox, { value: value, ref: checkbox, 
+            // checked={checked || false} 
+            onSwitch: handleSelector, type: CHECKBOX.Default }) });
+    useEffect(() => {
+        const onRowChecked = (mod, id) => {
+            checkbox.current?.setChecked(mod, false);
+        };
+        const onRowUnchecked = (mod, id) => {
+            let anyChecked = false;
+            if (tableRef?.current) {
+                // tableRef.current.querySelectorAll(`.--selector input[type=checkbox]`).forEach((e) => {
+                tableRef.current.querySelectorAll(`.--row`).forEach((e) => {
+                    const _row = e;
+                    if (!_row.classList.contains(`--row-head`)) {
+                        const _checkbox = _row.querySelector(`.--selector input[type=checkbox]`);
+                        if (_checkbox && _checkbox.checked && !anyChecked)
+                            anyChecked = _checkbox.checked;
+                    }
+                });
+            }
+            checkbox.current.setChecked(anyChecked, false);
+        };
+        const onAllRowsChecked = (mod) => {
+            checkbox.current?.setChecked(mod, false);
+            if (onSelect)
+                onSelect(data, mod);
+        };
+        const onAllRowsUnchecked = (mod) => {
+            checkbox.current?.setChecked(mod, false);
+            if (onSelect)
+                onSelect(data, mod);
+        };
+        if (index == -1) {
+            pubsub.on(`ROW_CHECKED`, onRowChecked);
+            pubsub.on(`ROW_UNCHECKED`, onRowUnchecked);
+            return () => {
+                pubsub.off(`ROW_CHECKED`, onRowChecked);
+                pubsub.off(`ROW_UNCHECKED`, onRowUnchecked);
+            };
+        }
+        else {
+            pubsub.on(`ALL_ROWS_CHECKED`, onAllRowsChecked);
+            pubsub.on(`ALL_ROWS_UNCHECKED`, onAllRowsUnchecked);
+            return () => {
+                pubsub.off(`ALL_ROWS_CHECKED`, onAllRowsChecked);
+                pubsub.off(`ALL_ROWS_UNCHECKED`, onAllRowsUnchecked);
+            };
+        }
+    }, []);
+    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) => {
+                const { renderWhenHeader, render, value, ...cc } = c;
+                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, 
+                            // value={renderWhenHeader && render ? render!(index == -1 ? c as dynamicObject : data as T, index) : value as string} 
+                            value: value, ...cc, pubsub: pubsub, style: styles[c.id] })] }, `--col-${c.id}`);
+            }), index > -1 && ids && data && schema.map((c, i) => {
+                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[c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
+            })] });
+};
+export default TRow;

package/dist/cjs/src/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/src/comps/Table/types.js

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

package/dist/cjs/src/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/src/comps/Text/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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 _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
+});
+export default Text;

package/dist/cjs/src/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/src/comps/TextArea/index.js

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

package/dist/cjs/src/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/src/comps/TextWheel/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef } from 'react';
+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) {
+            if (_value.toString().length != v.toString().length) {
+                _setValue(v);
+            }
+        },
+        setValue(v) {
+            this.updateValue(v);
+            if (divRef.current) {
+                const chars = v.toString().split('');
+                divRef.current.querySelectorAll('.wheel-char').forEach((charElement, index) => {
+                    const char = chars[index];
+                    if (charElement instanceof HTMLElement) {
+                        charElement.setAttribute('data-value', char);
+                        const track = charElement.querySelector('.wheel-char-track');
+                        if (track instanceof HTMLElement) {
+                            track.style.setProperty('--v', char);
+                        }
+                    }
+                });
+            }
+        }
+    }));
+    useEffect(() => {
+        // console.log(value)
+        _setValue(value || 0);
+    }, [value]);
+    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(Span, { className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
+                }
+                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(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(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})`,
+                } })] });
+});
+export default TextWheel;

package/dist/cjs/src/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/cjs/src/comps/TextWheel/types.js

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

package/dist/cjs/src/comps/Theme/index.js

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

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

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

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

@@ -0,0 +1,56 @@
+"use client";
+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 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);
+    const [hovered, setHovered] = useState(false);
+    const dx = useMemo(() => position || Position.Top, []);
+    const tooltipWrapper = useRef(null);
+    const tooltip = useRef(null);
+    const handleObserve = (entries) => { };
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(handleObserve) : { observe: () => { }, unobserve: () => { } };
+    const resize = useDimensions();
+    const pos = useMemo(() => {
+        if (!tooltip.current)
+            return { left: 0, top: 0 };
+        const firstChild = tooltip.current.previousElementSibling;
+        if (firstChild) {
+            const bc = firstChild.getBoundingClientRect();
+            observer.observe(firstChild);
+            // console.log(bc)
+            switch (dx) {
+                case Position.Top:
+                    return { left: bc.left + bc.width / 2, top: bc.top - (margin || 25) };
+                case Position.Bottom:
+                    return { left: bc.left + bc.width / 2, top: bc.top + (margin || 25) };
+                case Position.Left:
+                    return { left: bc.left - bc.width / 2, top: bc.top + bc.height / 2 };
+                case Position.Right:
+                    return { left: bc.right, top: bc.top + bc.height / 2 };
+                default:
+                    return { left: 0, top: 0 };
+            }
+        }
+    }, [tooltip.current, resize, observer]);
+    useEffect(() => {
+    }, []);
+    return _jsxs(Box, { ref: tooltipWrapper, className: `--with-tooltip rel`, onMouseEnter: e => setHovered(true), onMouseLeave: e => setHovered(false), children: [children, _jsx(Box, { ref: tooltip, style: {
+                    left: pos?.left + "px",
+                    top: pos?.top + "px"
+                }, className: `--tooltip --${position || Position.Top} fixed ${className}`.trim(), animate: {
+                    from: dx == Position.Bottom || dx == Position.Top ?
+                        { opacity: 0, x: `-50%`, y: dx == Position.Top ? -5 : 5 }
+                        : { opacity: 0, y: `-50%`, x: dx == Position.Right ? 15 : -25 },
+                    to: dx == Position.Bottom || dx == Position.Top ?
+                        { opacity: 1, x: `-50%`, y: 0 }
+                        : { opacity: 1, y: `-50%`, x: dx == Position.Right ? 10 : -20 },
+                    curve: TRANSITION_CURVES.EaseInOut,
+                    when: hovered
+                }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
+});
+export default ToolTip;

package/dist/cjs/src/comps/Tooltip/types.d.ts

@@ -0,0 +1,6 @@
+import { Position } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type ToolTipProps = BoxProps & {
+    position?: Position;
+    margin?: number;
+};