@zuzjs/ui 0.9.7 → 0.9.8

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

@@ -0,0 +1,3 @@
+import { CalendarProps } from "./types";
+declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Calendar;

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addDays, addHours, addWeeks, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameDay, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
+import { forwardRef, useMemo, useState } from "react";
+import { useBase } from "../../hooks";
+import Box from "../Box";
+import Button from "../Button";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+const _quickDateOptions = [
+    {
+        label: 'Today',
+        getDate: () => new Date(),
+        getDateFormat: () => format(new Date(), 'EEE'),
+    },
+    {
+        label: 'Later',
+        getDate: () => new Date(),
+        getDateFormat: () => format(addHours(new Date(), 2), 'hh:mm a'),
+    },
+    {
+        label: 'Tomorrow',
+        getDate: () => addDays(new Date(), 1),
+        getDateFormat: () => format(addDays(new Date(), 1), 'EEE'),
+    },
+    {
+        label: 'This weekend',
+        getDate: () => {
+            const today = new Date();
+            const day = today.getDay();
+            //Saturday
+            return addDays(today, (6 - day) % 7 || 6);
+        },
+        getDateFormat: () => {
+            const today = new Date();
+            const day = today.getDay();
+            return format(addDays(today, (6 - day) % 7 || 6), 'EEE, MMM d');
+        },
+    },
+    {
+        label: 'Next week',
+        getDateFormat: () => format(addWeeks(new Date(), 1), 'EEE, MMM d'),
+        getDate: () => addWeeks(new Date(), 1)
+    },
+    {
+        label: 'Next weekend',
+        getDateFormat: () => format(addWeeks(new Date(), 1), 'd MMM'),
+        getDate: () => addWeeks(new Date(), 1)
+    },
+    {
+        label: '2 weeks',
+        getDateFormat: () => format(addWeeks(new Date(), 2), 'd MMM'),
+        getDate: () => addWeeks(new Date(), 2)
+    },
+    {
+        label: '4 weeks',
+        getDateFormat: () => format(addWeeks(new Date(), 4), 'd MMM'),
+        getDate: () => addWeeks(new Date(), 4)
+    },
+];
+const dedupeByDate = (options) => {
+    const seen = new Set(); // ISO strings are safe for day-level comparison
+    return options.filter((opt) => {
+        if (opt.label == `Later`)
+            return true;
+        const iso = opt.getDate().toISOString().split('T')[0]; // "2025-10-31"
+        if (seen.has(iso))
+            return false;
+        seen.add(iso);
+        return true;
+    });
+};
+const Calendar = forwardRef((props, ref) => {
+    const { defaultValue, variant, onChange, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const [current, setCurrent] = useState(defaultValue || new Date());
+    const monthStart = startOfMonth(current);
+    const monthEnd = endOfMonth(current);
+    const startDate = startOfWeek(monthStart);
+    const endDate = endOfWeek(monthEnd);
+    const days = useMemo(() => eachDayOfInterval({ start: startDate, end: endDate }), [startDate, endDate]);
+    const handleDateClick = (date) => {
+        onChange?.(date);
+        setCurrent(date);
+    };
+    const gotoPrevMonth = () => {
+        setCurrent(prev => new Date(prev.getFullYear(), prev.getMonth() - 1));
+    };
+    const gotoNextMonth = () => {
+        setCurrent(prev => new Date(prev.getFullYear(), prev.getMonth() + 1));
+    };
+    return _jsxs(Box, { as: `--calendar flex --${variant || `sm`} ${className}`, style: style, children: [_jsx(Box, { as: `--calendar-quick-select flex cols flex:1`, children: dedupeByDate(_quickDateOptions)
+                    .map((option) => {
+                    const date = option.getDate();
+                    return _jsxs(Button, { onClick: () => handleDateClick(date), as: [
+                            `--calendar-quick-option flex aic gap:5`,
+                        ], children: [_jsx(Text, { as: `flex:1`, children: option.label }), _jsx(Text, { as: `tar`, children: option.getDateFormat() })] }, `--dtp-option-label-${option.label}`);
+                }) }), _jsxs(Box, { as: `--calendar-selector flex cols flex:1`, children: [_jsxs(Box, { as: `--calendar-head flex aic jcc gap:4`, children: [_jsx(Text, { as: `flex:1 --calendar-cm bold`, children: format(current, 'MMMM yyyy') }), _jsx(Button, { onClick: gotoPrevMonth, as: `--calendar-chevron`, children: SVGIcons.chevronUpOutline }), _jsx(Button, { onClick: gotoNextMonth, as: `--calendar-chevron`, children: SVGIcons.chevronDownOutline })] }), _jsxs(Box, { as: `--calendar-days gap:4`, children: [['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => _jsx(Text, { as: `--calendar-day`, children: day }, `--calendar-hd-${day}`)), days.map((day, idx) => {
+                                const isCurrentMonth = isSameMonth(day, current);
+                                const isSelected = isSameDay(day, current);
+                                const isCurrentDay = isToday(day);
+                                return _jsx(Button, { disabled: !isCurrentMonth, onClick: () => handleDateClick(day), as: [
+                                        `--calendar-day --calendar-dd`,
+                                        `${isSelected ? `--calendar-dd-selected` : ``}`,
+                                        `${isCurrentDay ? `--calendar-dd-current` : ``}`,
+                                    ], children: format(day, 'd') }, `--calendar-day-${idx}-${day.getFullYear()}-${day.getMonth()}-${day.getDay()}`);
+                            })] })] })] });
+});
+Calendar.displayName = `Zuz.Calendar`;
+export default Calendar;

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

@@ -0,0 +1,6 @@
+import { Variant } from "../../types/enums";
+export type CalendarProps = {
+    defaultValue?: Date | null;
+    variant?: Variant;
+    onChange: (date: Date | null) => void;
+};

package/dist/cjs/comps/Calendar/types.js

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

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

@@ -1,5 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
     maxItems?: number;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default Crumb;

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

@@ -0,0 +1,11 @@
+declare const DatePicker: 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 | `${import("../..").FORMVALIDATION}${string}`;
+    onConfirm?: (value: string) => void;
+} & {
+    icon?: import("react").ReactNode | string;
+    defaultValue?: Date | null;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default DatePicker;

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useBase, usePosition } from "../../hooks";
+import { Position } from "../../types/enums";
+import Box from "../Box";
+import Calendar from "../Calendar";
+import Icon from "../Icon";
+import Span from "../Span";
+import SVGIcons from "../svgicons";
+const DatePicker = forwardRef((props, ref) => {
+    const { icon, defaultValue, value, size, variant, numeric, type, onConfirm, ...pops } = props;
+    const [choosing, setChoosing] = useState(false);
+    const [currentDate, setCurrentDate] = useState(defaultValue || null);
+    const { style, className, rest } = useBase(pops);
+    const _input = useRef(null);
+    const _pop = useRef(null);
+    const { reposition } = usePosition(_pop, { direction: Position.Bottom, offset: 2 });
+    const handleInput = (event) => {
+        if (numeric) {
+            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            const clickedInsideInput = _input.current?.contains(target);
+            const clickedInsidePop = _pop.current?.contains(target);
+            if (!clickedInsideInput && !clickedInsidePop) {
+                setChoosing(false);
+            }
+        };
+        if (choosing) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [choosing]);
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === "Escape" && choosing) {
+                setChoosing(false);
+                _input.current?.focus();
+            }
+        };
+        document.addEventListener("keydown", handleEsc);
+        return () => document.removeEventListener("keydown", handleEsc);
+    }, [choosing]);
+    const handleFocus = () => {
+        setChoosing(true);
+    };
+    useEffect(() => {
+        if (choosing) {
+            reposition();
+        }
+    }, [choosing, reposition]);
+    return _jsx(_Fragment, { children: _jsxs(Box, { as: `--date-picker ${variant ? `--${variant}` : ``} rel flex aic ${className}`, "data-value": currentDate ? currentDate.toISOString() : ``, children: [icon ? `string` === typeof icon ? _jsx(Icon, { as: `mr:10 c:#666`, name: icon }) : icon : _jsx(Span, { as: `--date-picker-icon flex aic jcc`, children: SVGIcons.calendar }), _jsx("input", { ref: _input, value: currentDate ? format(currentDate, `EEE, MMM d YYY hh:mm a`) : (value || ``), className: `--input ${variant ? `--${variant}` : ``} flex`.trim(), style: style, onFocus: handleFocus, onInput: handleInput, autoComplete: "new-password", onKeyDown: (e) => {
+                        if (e.key == `Enter`) {
+                            onConfirm?.(e.currentTarget.value);
+                        }
+                    }, ...rest }), _jsx(Box, { "aria-hidden": !choosing, ref: _pop, fx: {
+                        from: { y: 5, opacity: 0 },
+                        to: { y: 0, opacity: 1 },
+                        when: choosing,
+                        duration: .05
+                    }, as: `--date-picker-chooser flex aic ${variant ? `--${variant}` : ``}`, children: _jsx(Calendar, { defaultValue: currentDate, onChange: dt => {
+                            setCurrentDate(dt);
+                            setChoosing(false);
+                        } }) })] }) });
+});
+DatePicker.displayName = `Zuz.DatePicker`;
+export default DatePicker;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { InputProps } from "../Input";
+export type DatePickerProps = InputProps & {
+    icon?: ReactNode | string;
+    defaultValue?: Date | null;
+};

package/dist/cjs/comps/DatePicker/types.js

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

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

@@ -5,10 +5,12 @@ export type IconProps = Omit<BoxProps, `name`> & {
     name: string | ReactNode;
     pathCount?: number;
     size?: Size;
+    color?: string;
 };
 declare const Icon: import("react").ForwardRefExoticComponent<Omit<BoxProps, "name"> & {
     name: string | ReactNode;
     pathCount?: number;
     size?: Size;
+    color?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Icon;

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

@@ -4,9 +4,12 @@ import { useBase } from "../../hooks";
 import { Size } from "../../types/enums";
 import Span from "../Span";
 const Icon = forwardRef((props, ref) => {
-    const { name, pathCount, size, ...pops } = props;
+    const { name, pathCount, size, color, ...pops } = props;
     const { className, style, rest } = useBase(pops);
-    return _jsx("div", { style: style, className: `icon-${name} --icon --${size || Size.Default} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
+    return _jsx("div", { style: {
+            color,
+            ...style,
+        }, className: `icon-${name} --icon --${size || Size.Default} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
 });
 Icon.displayName = `Zuz.Icon`;
 export default Icon;

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

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

package/dist/cjs/comps/Select/optionItem.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import { OptionItemProps } from "./types";
 declare const OptionItem: {
-    ({ value, updateValue, o }: OptionItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, updateValue, o }: OptionItemProps): React.ReactElement;
     displayName: string;
 };
 export default OptionItem;

package/dist/cjs/comps/Select/optionItem.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Text } from "..";
 import Button from "../Button";
 const OptionItem = ({ value, updateValue, o }) => {
-    return _jsx(Button, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: `string` == typeof o ? o : o.label });
+    return _jsxs(Button, { onClick: (e) => updateValue(o), as: `--select-option-item`, className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: [o.icon && _jsx(Icon, { name: o.icon, as: `--select-option-icon --icon-${o.value}`, color: o.iconColor || undefined }), _jsx(Text, { children: `string` == typeof o ? o : o.label })] });
 };
 OptionItem.displayName = `Option`;
 export default OptionItem;

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

@@ -5,6 +5,8 @@ import { BoxProps } from "../Box";
  * Represents an option which can be either a string or an OptionObject.
  */
 export type Option = {
+    icon?: string | ReactNode;
+    iconColor?: string;
     label: string;
     value: string;
 };

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

@@ -63,7 +63,7 @@ import TRow from "./row";
  * ```
  */
 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, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    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] = {
@@ -117,7 +117,7 @@ const Table = (props, ref) => {
             // _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 }, `--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, 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: {
+    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),

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

@@ -7,7 +7,7 @@ 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, onSelect, onContextMenu } = 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,
@@ -74,7 +74,7 @@ const TRow = (props) => {
             };
         }
     }, []);
-    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { fx: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
+    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} 

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

@@ -53,6 +53,7 @@ export type Row<T> = {
     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>;
@@ -145,6 +146,7 @@ export type TableProps<T> = BoxProps & {
     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/cjs/comps/TextArea/commands.d.ts

@@ -0,0 +1,12 @@
+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/cjs/comps/TextArea/commands.js

@@ -0,0 +1,16 @@
+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/cjs/comps/TextArea/index.d.ts

@@ -1,13 +1,20 @@
-import { Props } from '../../types';
 import { Variant } from '../../types/enums';
-export type TextAreaProps = Props<`textarea`> & {
-    autoResize?: boolean;
-    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
-    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;
     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/cjs/comps/TextArea/index.js

@@ -1,13 +1,95 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+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, variant, resize, ...pops } = props;
+    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 handleInput = (event) => {
+    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();
     };
-    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: { ...style, resize: resize || `none` }, onInput: handleInput, ref: ref, ...rest });
+    // ------------------------------------------------------------------
+    // 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`;
+TextArea.displayName = 'Zuz.TextArea';
 export default TextArea;

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

@@ -0,0 +1,21 @@
+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/cjs/comps/TextArea/types.js

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

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

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Calendar } from './Calendar';
+export * from './Calendar/types';
 export { default as Chart } from './Chart';
 export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
@@ -26,6 +28,7 @@ export { default as Cropper } from './Cropper';
 export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
+export { default as DatePicker } from './DatePicker';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -78,7 +81,8 @@ export * from './Table/types';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
 export { default as Text, type TextProps } from './Text';
-export { default as Textarea, type TextAreaProps } from './TextArea';
+export { default as Textarea } from './TextArea';
+export { type TextAreaProps } from './TextArea/types';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { default as ToastProvider } from './Toast';

package/dist/cjs/comps/index.js

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Calendar } from './Calendar';
+export * from './Calendar/types';
 export { default as Chart } from './Chart';
 export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
@@ -26,6 +28,7 @@ export { default as Cropper } from './Cropper';
 export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
+export { default as DatePicker } from './DatePicker';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */

package/dist/cjs/comps/svgicons.d.ts

@@ -31,5 +31,6 @@ declare const SVGIcons: {
     bezier: import("react/jsx-runtime").JSX.Element;
     mouse: import("react/jsx-runtime").JSX.Element;
     addKey: import("react/jsx-runtime").JSX.Element;
+    calendar: import("react/jsx-runtime").JSX.Element;
 };
 export default SVGIcons;

package/dist/cjs/comps/svgicons.js

@@ -34,6 +34,7 @@ const SVGIcons = {
     bezier: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M19.14 7.72C19.43 8.47 20.15 9 21 9C22.1 9 23 8.1 23 7C23 5.9 22.1 5 21 5C20.15 5 19.43 5.53 19.14 6.28C19.09 6.27 19.05 6.25 19 6.25H15V5.5C15 4.68 14.32 4 13.5 4H10.5C9.68 4 9 4.68 9 5.5V6.25H5C4.95 6.25 4.91 6.27 4.86 6.28C4.57 5.53 3.85 5 3 5C1.9 5 1 5.9 1 7C1 8.1 1.9 9 3 9C3.85 9 4.57 8.47 4.86 7.72C4.91 7.73 4.95 7.75 5 7.75H7.57C5.52 9.27 4.25 11.79 4.25 14.5C4.25 14.67 4.26 14.83 4.28 15H4C3.17 15 2.5 15.67 2.5 16.5V18.5C2.5 19.33 3.17 20 4 20H6C6.22 20 6.42 19.95 6.61 19.86C7.13 19.64 7.5 19.11 7.5 18.5V16.5C7.5 15.67 6.83 15 6 15H5.77C5.77 14.97 5.78 14.94 5.78 14.91C5.76 14.77 5.76 14.64 5.76 14.5C5.76 12.03 7.03 9.77 9.02 8.6C9.06 9.37 9.71 10 10.5 10H13.5C14.29 10 14.94 9.37 14.99 8.6C16.98 9.77 18.25 12.04 18.25 14.5C18.25 14.64 18.24 14.77 18.23 14.91C18.23 14.94 18.24 14.97 18.24 15H18C17.17 15 16.5 15.67 16.5 16.5V18.5C16.5 19.11 16.87 19.64 17.39 19.86C17.58 19.95 17.78 20 18 20H20C20.83 20 21.5 19.33 21.5 18.5V16.5C21.5 15.67 20.83 15 20 15H19.72C19.74 14.83 19.75 14.67 19.75 14.5C19.75 11.79 18.48 9.27 16.43 7.75H19C19.05 7.75 19.09 7.73 19.14 7.72Z", fill: "#292D32" }) }),
     mouse: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M13.2978 2.11468C13.0064 2.06339 12.75 2.29593 12.75 2.59185V5.45262C12.75 5.65098 12.8709 5.82564 13.0359 5.93583C13.5391 6.27202 13.87 6.84597 13.87 7.49906V9.49906C13.87 10.5291 13.03 11.3791 12 11.3791C10.96 11.3791 10.12 10.5291 10.12 9.49906V7.49906C10.12 6.84578 10.4583 6.27168 10.9639 5.93554C11.1291 5.82572 11.25 5.65098 11.25 5.45262V2.59249C11.25 2.29634 10.9935 2.0637 10.7019 2.11513C9.15243 2.38834 7.76579 3.13327 6.7 4.19906C5.34 5.55906 4.5 7.43906 4.5 9.49906V14.4991C4.5 18.6291 7.87 21.9991 12 21.9991C16.13 21.9991 19.5 18.6291 19.5 14.4991V9.49906C19.5 5.80857 16.813 2.73328 13.2978 2.11468Z", fill: "#292D32" }) }),
     addKey: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M20.9498 14.55L14.5598 20.94C13.1598 22.34 10.8598 22.34 9.44977 20.94L3.05977 14.55C1.65977 13.15 1.65977 10.85 3.05977 9.44L9.44977 3.05C10.8498 1.65 13.1498 1.65 14.5598 3.05L20.9498 9.44C22.3498 10.85 22.3498 13.15 20.9498 14.55Z", fill: "#292D32" }) }),
+    calendar: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#292D32", d: "M8.25 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75S9 1.59 9 2v3c0 .41-.34.75-.75.75M15.75 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75M12 14.09c.52 0 .9-.31.9-.8 0-.5-.38-.79-.9-.79s-.9.29-.9.79c0 .49.38.8.9.8M12 17c.629 0 1.14-.416 1.14-.93 0-.513-.511-.93-1.14-.93-.63 0-1.14.417-1.14.93s.51.93 1.14.93" }), _jsx("path", { fill: "#292D32", d: "M19.57 4.5c-.66-.49-1.61-.02-1.61.81v.1c0 1.17-.84 2.25-2.01 2.37-1.35.14-2.49-.92-2.49-2.24V4.5c0-.55-.45-1-1-1h-.92c-.55 0-1 .45-1 1v1.04c0 .79-.41 1.49-1.03 1.88-.09.06-.19.11-.29.16q-.135.075-.3.12c-.12.04-.25.07-.39.08q-.24.03-.48 0c-.14-.01-.27-.04-.39-.08q-.15-.045-.3-.12c-.1-.05-.2-.1-.29-.16-.63-.44-1.03-1.2-1.03-2.01v-.1c0-.77-.82-1.23-1.47-.9-.01.01-.02.01-.03.02-.04.02-.07.04-.11.07-.03.03-.07.05-.1.08-.28.22-.53.47-.74.74-.11.12-.2.25-.28.38a3.498 3.498 0 0 0-.27.46c-.02.02-.03.03-.03.05-.06.12-.12.24-.16.37-.03.05-.04.09-.06.14-.06.15-.1.3-.14.45-.04.14-.07.29-.09.44a5.902 5.902 0 0 0-.06.76v8.76A4.87 4.87 0 0 0 7.37 22h9.26a4.87 4.87 0 0 0 4.87-4.87V8.37c0-1.59-.76-2.98-1.93-3.87M12 18.25c-1.55 0-2.5-.77-2.5-2.01 0-.68.35-1.27.96-1.62-.44-.31-.73-.77-.73-1.4 0-1.3 1.04-1.97 2.27-1.97s2.26.67 2.26 1.97c0 .63-.28 1.09-.73 1.4.62.35.97.94.97 1.62 0 1.24-.96 2.01-2.5 2.01" })] }),
     // animation: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
     //     <path fill="#292D32" d="m15.39 5.211 1.41 2.82c.19.39.7.76 1.13.84l2.55.42c1.63.27 2.01 1.45.84 2.63l-1.99 1.99c-.33.33-.52.98-.41 1.45l.57 2.46c.45 1.94-.59 2.7-2.3 1.68l-2.39-1.42c-.43-.26-1.15-.26-1.58 0l-2.39 1.42c-1.71 1.01-2.75.26-2.3-1.68l.57-2.46c.09-.48-.1-1.13-.43-1.46l-1.99-1.99c-1.17-1.17-.79-2.35.84-2.63l2.55-.42c.43-.07.94-.45 1.13-.84l1.41-2.82c.77-1.52 2.01-1.52 2.78.01M8 5.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h6c.41 0 .75.34.75.75s-.34.75-.75.75M5 19.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h3c.41 0 .75.34.75.75s-.34.75-.75.75M3 12.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1c.41 0 .75.34.75.75s-.34.75-.75.75" />
     // </svg>,

package/dist/cjs/funs/index.d.ts

@@ -77,3 +77,8 @@ export declare const checkPasswordStrength: (password: string) => {
     result: string;
     suggestion: string[];
 };
+export declare const getCaretCoordinates: (element: HTMLTextAreaElement, position: number) => {
+    top: number;
+    left: number;
+};
+export declare const urlBase64ToUint8Array: (base64String: string) => Uint8Array;