@zuzjs/ui 0.10.6 → 0.10.8

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

@@ -1,129 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { PubSub, SPINNER, Spinner, Text, TRANSITION_CURVES, TRANSITIONS, uuid } from "../..";
-import { useBase } from "../../hooks";
-import Box from "../Box";
-import Pagination from "../Pagination";
-import { PaginationStyle } from "../Pagination/types";
-import TRow from "./row";
-/**
- * `Table` is a highly flexible and customizable generic component for rendering data in a tabular format.
- *
- * This component supports features such as:
- * - Dynamic column schema and row data.
- * - Sortable and selectable rows.
- * - Optional pagination with custom control.
- * - Row-level animation and hover states.
- * - Loading placeholders and spinners.
- * - Context menu support for rows.
- *
- * @template T - The shape of the row data object.
- *
- * @param props - The props for configuring the table behavior and appearance.
- * @param props.schema - Column definitions used to render the table header and body.
- * @param props.rows - The array of row data to display.
- * @param props.rowCount - Optional total row count for server-side pagination.
- * @param props.rowsPerPage - Number of rows shown per page.
- * @param props.currentPage - Current page index (for pagination control).
- * @param props.pagination - Whether pagination is enabled.
- * @param props.paginationHash - A value to force pagination re-render.
- * @param props.showPaginationOnZeroPageCount - Show pagination controls even with 0 rows.
- * @param props.animateRows - Whether to animate rows on render/update.
- * @param props.header - Whether to show the header row.
- * @param props.rowClassName - CSS class name to apply to each row.
- * @param props.selectableRows - Whether rows are selectable.
- * @param props.hoverable - Whether rows should show hover styles.
- * @param props.sortBy - Default column key to sort rows.
- * @param props.loading - Enables loading state with placeholder rows and spinner.
- * @param props.loadingRowCount - Number of placeholder rows to render during loading.
- * @param props.loadingMessage - Optional loading text to show next to spinner.
- * @param props.spinner - Spinner type to use when loading.
- * @param props.onSort - Callback when a column header triggers sorting.
- * @param props.onRowSelectToggle - Callback when a row’s selected state changes.
- * @param props.onPageChange - Callback when pagination state changes.
- * @param props.onRowContextMenu - Callback when a row is right-clicked.
- * @param props.className - Additional class names to apply to the root table container.
- * @param props.style - Inline styles to apply to the root table container.
- *
- * @returns The rendered table component.
- *
- * @example
- * ```tsx
- * <Table
- *   schema={[
- *     { id: 'name', value: 'Name', sortable: true },
- *     { id: 'email', value: 'Email' },
- *   ]}
- *   rows={[{ name: 'Kamran', email: 'kamran@example.com' }]}
- *   selectableRows
- *   pagination
- *   loading={false}
- * />
- * ```
- */
-const Table = (props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, loading: _loading, loadingRowCount, loadingMessage, spinner, emptyMessage, onSort, onRowClick, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
-    const _pagination = useRef(null);
-    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 = useRef(rows.map(() => uuid()));
-    const [_sortBy, setSortBy] = useState(sortBy || null);
-    // const [ _loading, _setLoading ] = useState(loading || false)
-    // const _loading = useRef<boolean>(loading || false)
-    const [_loadingMessage, _setLoadingMessage] = useState(loadingMessage || `loading`);
-    const isEmpty = useMemo(() => !_loading && rows && rows.length == 0, [_loading, rows]);
-    const renderEmpty = useCallback(() => {
-        if (emptyMessage) {
-            if (typeof emptyMessage == `function`) {
-                const Empty = emptyMessage;
-                return _jsx(Empty, {});
-            }
-            return emptyMessage;
-        }
-        return _jsx(Text, { as: `tac s:18 mt:75`, children: "No Record Found" });
-    }, [_loading, rows]);
-    useEffect(() => {
-        rowKeys.current = rows.map(() => uuid()); // Update only when rows change
-    }, [rows]);
-    // useEffect(() => {
-    //     if ( loading != undefined && loading != _loading ) _setLoading(loading)
-    // }, [loading])
-    const handleSort = (col, dir) => {
-        setSortBy(col);
-        onSort?.(col, dir);
-    };
-    const possiblePage = (rowCount || (rows ? rows.length : 0)) / (rowsPerPage || 10);
-    const _paginated = useMemo(() => (showPaginationOnZeroPageCount || (possiblePage > 1)) ? _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) : null, [currentPage, rowCount]);
-    useImperativeHandle(ref, () => ({
-        setLoading(mod) {
-            // _setLoading(mod)
-            // _loading.current = mod
-        }
-    }));
-    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), _loading && _jsxs(Box, { as: `center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), _loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: _loadingMessage })] }), _loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows, onRowClick: onRowClick }, `--trow-loading-${index}-${schema[0].id}`)), !_loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, onRowClick: onRowClick, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), isEmpty && renderEmpty(), _jsx(Box, { "aria-hidden": !pagination || !_paginated, ...(animateRows ? { fx: {
-                        transition: TRANSITIONS.SlideInBottom,
-                        curve: TRANSITION_CURVES.EaseInOut,
-                        delay: .02 * (rows.length + 1),
-                        when: !_loading && rows && pagination && _paginated != null
-                    } } : {}), as: `--row flex aic --row-footer`, children: pagination && _paginated ? _paginated : null })] });
-};
-Table.displayName = `Zuz.Table`;
-const ForwardedTable = forwardRef(Table);
-export default ForwardedTable;

package/dist/esm/comps/Table/row.d.ts

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

package/dist/esm/comps/Table/row.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useRef } from "react";
-import { useDelayed } from "../../hooks";
-import { CHECKBOX, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
-import Box from "../Box";
-import CheckBox from "../CheckBox";
-import Text from "../Text";
-import TColumn from "./col";
-const TRow = (props) => {
-    const { index, pubsub, schema, data, ids, styles, animate, sortBy, selectable, tableRef, loading, rowClassName, onSort, onRowClick, 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, onClick: e => onRowClick ? onRowClick(e, props.data) : () => { }, ...(animate ? { fx: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${onRowClick ? `--row-clickable` : ``} ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
-                const { renderWhenHeader, render, value, ...cc } = c;
-                return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, onSort: onSort, sortBy: sortBy, 
-                            // value={renderWhenHeader && render ? render!(index == -1 ? c as dynamicObject : data as T, index) : value as string} 
-                            value: value, ...cc, pubsub: pubsub, style: styles[c.id] })] }, `--col-${c.id}`);
-            }), loading && index > -1 && _jsx(Box, { as: `--col`, children: _jsx(Text, { as: `opacity:0`, children: "..." }) }), !loading && 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[String(c.id).includes(`.`) ? String(c.id).split(`.`).reverse()[0] : c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
-            })] });
-};
-TRow.displayName = `Zuz.Row`;
-export default TRow;

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

@@ -1,153 +0,0 @@
-import { FC, ReactNode, RefObject } from "react";
-import { PubSub, SPINNER } from "../..";
-import { dynamicObject } from "../../types";
-import { BoxProps } from "../Box";
-import { PaginationCallback } from "../Pagination/types";
-export interface TableController {
-    setLoading: (mod: boolean) => void;
-}
-/**
- * Callback function for row selection.
- *
- * @template T - The type of data for each row.
- * @param {T} row - The row data.
- * @param {boolean} selected - Whether the row is selected.
- */
-export type RowSelectCallback<T> = (row: T, selected: boolean) => void;
-/**
- * Callback function for table sorting.
- *
- * @param {string} col - The column key to sort by.
- * @param {number} dir - The direction of sorting (1 for ascending, -1 for descending).
- */
-export type TableSortCallback = (col: string, dir: number) => void;
-/**
- * Represents a row in the table.
- *
- * @template T - The type of data for each row.
- *
- * @property {number} index - The index of the row.
- * @property {Column<T>[]} schema - The schema defining the columns of the row.
- * @property {dynamicObject} styles - The styles to apply to the row.
- * @property {string[]} [ids] - The IDs associated with the row.
- * @property {boolean} [animate] - Whether to animate the row.
- * @property {T} [data] - The data for the row.
- * @property {string} [rowClassName] - The CSS class name to apply to the row.
- * @property {boolean} [selectable] - Whether the row is selectable.
- * @property {string | null} [sortBy] - The column key to sort by.
- * @property {RowSelectCallback<T>} [onSelect] - Callback when the row's selection state changes.
- * @property {TableSortCallback} [onSort] - Callback when the row is sorted.
- * @property {PubSub} pubsub - The PubSub instance for event handling.
- * @property {RefObject<HTMLDivElement | null>} [tableRef] - The reference to the table element.
- * @property {(e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void} [onContextMenu] - Callback for row context menu event.
- */
-export type Row<T> = {
-    index: number;
-    schema: Column<T>[];
-    styles: dynamicObject;
-    ids?: string[];
-    animate?: boolean;
-    data?: T;
-    rowClassName?: string;
-    selectable?: boolean;
-    sortBy?: string | null;
-    onSelect?: RowSelectCallback<T>;
-    onSort?: TableSortCallback;
-    onRowClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
-    pubsub: PubSub;
-    loading: boolean;
-    tableRef?: RefObject<HTMLDivElement | null>;
-    onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
-};
-/**
- * Represents a column in the table.
- *
- * @template T - The type of data for each row.
- *
- * @property {string | number} id - The unique identifier for the column.
- * @property {string | ReactNode | dynamicObject} [value] - The value to display in the column.
- * @property {number} [weight] - The weight of the column for layout purposes.
- * @property {number | string} [w] - The width of the column.
- * @property {number | string} [maxW] - The maximum width of the column.
- * @property {number | string} [minW] - The minimum width of the column.
- * @property {number | string} [h] - The height of the column.
- * @property {number | string} [maxH] - The maximum height of the column.
- * @property {number | string} [minH] - The minimum height of the column.
- * @property {boolean} [resize] - Whether the column is resizable.
- * @property {boolean} [sortable] - Whether the column is sortable.
- * @property {TableSortCallback} [onSort] - Callback when the column is sorted.
- * @property {string} [as] - The HTML tag to render the column as.
- * @property {boolean} [renderWhenHeader] - Whether to render the column when it is a header.
- * @property {(row: T, index: number) => ReactNode} [render] - Function to render the column content.
- */
-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;
-    sortable?: boolean;
-    onSort?: TableSortCallback;
-    as?: string;
-    renderWhenHeader?: boolean;
-    render?: (row: T, index: number) => ReactNode;
-};
-/**
- * Props for the Table component.
- *
- * @template T - The type of data for each row.
- *
- * @extends BoxProps
- *
- * @property {Column<T>[]} schema - The schema defining the columns of the table.
- * @property {T[]} rows - The data rows to be displayed in the table.
- * @property {number} [rowCount] - The total number of rows.
- * @property {number} [rowsPerPage] - The number of rows to display per page.
- * @property {string} [rowClassName] - The CSS class name to apply to each row.
- * @property {number} [currentPage] - The current page number.
- * @property {boolean} [pagination] - Whether to enable pagination.
- * @property {number | null} [paginationHash] - A hash to force pagination update.
- * @property {boolean} [showPaginationOnZeroPageCount] - Whether to show pagination controls when there are zero pages.
- * @property {boolean} [animateRows] - Whether to animate rows on change.
- * @property {boolean} [header] - Whether to show the table header.
- * @property {string} [sortBy] - The column key to sort by.
- * @property {boolean} [selectableRows] - Whether rows are selectable.
- * @property {boolean} [hoverable] - Whether rows should have a hover effect.
- * @property {boolean} [loading] - Renders placeholder rows when true
- * @property {number} [loadingRowCount] - If greater than 0, shows loading number of empty rows with spinner.
- * @property {RowSelectCallback<T>} [onRowSelectToggle] - Callback when a row's selection state changes.
- * @property {(e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void} [onRowContextMenu] - Callback for row context menu event.
- * @property {PaginationCallback} [onPageChange] - Callback when the page changes.
- * @property {TableSortCallback} [onSort] - Callback when the table is sorted.
- */
-export type TableProps<T> = BoxProps & {
-    schema: Column<T>[];
-    rows: T[];
-    rowCount?: number;
-    rowsPerPage?: number;
-    rowClassName?: string;
-    currentPage?: number;
-    pagination?: boolean;
-    paginationHash?: number | null;
-    showPaginationOnZeroPageCount?: boolean;
-    animateRows?: boolean;
-    header?: boolean;
-    sortBy?: string;
-    selectableRows?: boolean;
-    hoverable?: boolean;
-    loading?: boolean;
-    loadingRowCount?: number;
-    loadingMessage?: string;
-    spinner?: SPINNER;
-    emptyMessage?: ReactNode | FC;
-    onRowSelectToggle?: RowSelectCallback<T>;
-    onRowClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
-    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
-    onPageChange?: PaginationCallback;
-    onSort?: TableSortCallback;
-};

package/dist/esm/comps/Table/types.js

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

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

@@ -1,13 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { Props } from '../../types';
-export type TextProps = Props<`h1` | `h2` | `h3` | `h4` | `h5` | `h6`> & {
-    h?: number;
-    html?: ReactNode | string;
-    lines?: number;
-};
-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;
-    lines?: number;
-} & import("react").RefAttributes<HTMLHeadingElement>>;
-export default Text;

package/dist/esm/comps/Text/index.js

@@ -1,12 +0,0 @@
-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, lines, ...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 });
-});
-Text.displayName = `Zuz.Text`;
-export default Text;

package/dist/esm/comps/TextArea/commands.d.ts

@@ -1,12 +0,0 @@
-import { FC } from "react";
-import { Command } from "../..";
-declare const CommandBox: FC<{
-    position: {
-        top: number;
-        left: number;
-    };
-    commands: Command[];
-    visible: boolean;
-    onSelect: (value: string) => void;
-}>;
-export default CommandBox;

package/dist/esm/comps/TextArea/commands.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Icon, Text, TRANSITIONS } from "../..";
-import Box from "../Box";
-const CommandItem = ({ meta }) => {
-    return _jsxs(Button, { as: `flex aic --command-item`, children: [meta.icon && _jsx(Icon, { name: meta.icon, as: `--command-icon` }), _jsx(Text, { children: meta.label })] });
-};
-const CommandBox = ({ position, onSelect, commands, visible }) => {
-    return _jsx(Box, { "aria-hidden": !visible, fx: {
-            transition: TRANSITIONS.SlideInBottom,
-            duration: 0.1,
-            when: visible
-        }, className: `--command-box abs grid`, style: {
-            ...position
-        }, children: commands.map(c => _jsx(CommandItem, { meta: c }, `cmd-${c.label.replace(/\s+/, '-')}`)) });
-};
-export default CommandBox;

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

@@ -1,20 +0,0 @@
-import { Variant } from '../../types/enums';
-declare const TextArea: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../..").ZuzProps> & {
-    autoResize?: boolean;
-    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
-    maxHeight?: number | string;
-    variant?: Variant;
-    command?: string;
-    commands?: import("../..").Command[];
-    cmd?: (value: string, textarea: HTMLTextAreaElement | HTMLInputElement) => void;
-    renderDropdown?: (props: {
-        show: boolean;
-        position: {
-            top: number;
-            left: number;
-        };
-        commands: import("../..").Command[];
-        onSelect: (value: string) => void;
-    }) => React.ReactNode;
-} & import("react").RefAttributes<HTMLTextAreaElement>>;
-export default TextArea;

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

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
-import { Box, useCommandActions } from "../..";
-import { useBase } from '../../hooks';
-import { Variant } from '../../types/enums';
-import CommandBox from "./commands";
-const TextArea = forwardRef((props, ref) => {
-    const { autoResize, maxHeight, variant = Variant.Small, resize = 'none', command, commands, onInput, cmd, renderDropdown, value: controlledValue, defaultValue, ...pops } = props;
-    const innerRef = useRef(null);
-    const frameRef = useRef(null);
-    const { style, className, rest } = useBase(pops);
-    const { showDropdown, dropdownPosition, handleKeyDown, handleInput: handleCommandInput, handleCommandSelect, } = useCommandActions({
-        command,
-        commands,
-        cmd,
-        ref: innerRef,
-    });
-    // ------------------------------------------------------------------
-    // Resize function (no state → direct DOM update)
-    // ------------------------------------------------------------------
-    const resizeTextArea = useCallback(() => {
-        const textarea = innerRef.current;
-        if (!textarea || !autoResize)
-            return;
-        // Cancel previous frame
-        if (frameRef.current) {
-            cancelAnimationFrame(frameRef.current);
-        }
-        // Schedule resize after paint
-        frameRef.current = requestAnimationFrame(() => {
-            textarea.style.height = 'auto';
-            let newHeight = textarea.scrollHeight;
-            if (maxHeight) {
-                const max = parseInt(maxHeight.toString(), 10);
-                if (!isNaN(max)) {
-                    newHeight = Math.min(newHeight, max);
-                }
-            }
-            textarea.style.height = `${newHeight}px`;
-            textarea.style.overflowY = maxHeight && newHeight >= parseInt(maxHeight.toString(), 10) ? 'auto' : 'hidden';
-        });
-    }, [autoResize, maxHeight]);
-    // ------------------------------------------------------------------
-    // Input handler
-    // ------------------------------------------------------------------
-    const handleInput = (e) => {
-        onInput?.(e);
-        handleCommandInput(e);
-        resizeTextArea();
-    };
-    // ------------------------------------------------------------------
-    // Initial resize + controlled value change
-    // ------------------------------------------------------------------
-    useEffect(() => {
-        resizeTextArea();
-    }, [controlledValue, defaultValue, resizeTextArea]);
-    // ------------------------------------------------------------------
-    // Resize on mount
-    // ------------------------------------------------------------------
-    useEffect(() => {
-        if (autoResize && innerRef.current) {
-            resizeTextArea();
-        }
-    }, [autoResize, resizeTextArea]);
-    // ------------------------------------------------------------------
-    // Cleanup
-    // ------------------------------------------------------------------
-    useEffect(() => {
-        return () => {
-            if (frameRef.current) {
-                cancelAnimationFrame(frameRef.current);
-            }
-        };
-    }, []);
-    return (_jsxs(Box, { as: "rel", children: [_jsx("textarea", { className: `--input --textarea --${variant} flex ${className}`.trim(), style: {
-                    ...style,
-                    resize,
-                    height: autoResize ? 'auto' : style?.height,
-                    overflow: 'hidden', // Always hidden unless maxHeight hit
-                    transition: autoResize ? 'none' : undefined, // Remove transition flicker
-                }, onKeyDown: handleKeyDown, onInput: handleInput, ref: (node) => {
-                    if (typeof ref === 'function')
-                        ref(node);
-                    else if (ref)
-                        ref.current = node;
-                    innerRef.current = node;
-                }, value: controlledValue, defaultValue: defaultValue, ...rest }), renderDropdown ? (renderDropdown({
-                show: showDropdown,
-                position: dropdownPosition,
-                commands: commands || [],
-                onSelect: handleCommandSelect,
-            })) : (commands && commands.length > 0 && (_jsx(CommandBox, { visible: showDropdown, commands: commands, onSelect: handleCommandSelect, position: dropdownPosition })))] }));
-});
-TextArea.displayName = 'Zuz.TextArea';
-export default TextArea;

package/dist/esm/comps/TextArea/types.d.ts

@@ -1,21 +0,0 @@
-import { Command } from "../..";
-import { Props } from '../../types';
-import { Variant } from '../../types/enums';
-export type TextAreaProps = Props<`textarea`> & {
-    autoResize?: boolean;
-    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
-    maxHeight?: number | string;
-    variant?: Variant;
-    command?: string;
-    commands?: Command[];
-    cmd?: (value: string, textarea: HTMLTextAreaElement | HTMLInputElement) => void;
-    renderDropdown?: (props: {
-        show: boolean;
-        position: {
-            top: number;
-            left: number;
-        };
-        commands: Command[];
-        onSelect: (value: string) => void;
-    }) => React.ReactNode;
-};

package/dist/esm/comps/TextArea/types.js

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

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

@@ -1,10 +0,0 @@
-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`;
-    charDelay?: number | ((index: number) => number);
-    charDuration?: number | ((index: number) => number);
-} & React.RefAttributes<TextWheelHandler>>;
-export default TextWheel;