@zuzjs/ui 0.9.6 → 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/Cover/index.d.ts

@@ -1,8 +1,9 @@
-import { SPINNER } from "../../types/enums";
+import { SPINNER, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type CoverProps = BoxProps & {
     message?: string;
     spinner?: SPINNER;
+    spinnerSize?: Variant;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;
@@ -10,6 +11,7 @@ export type CoverProps = BoxProps & {
 declare const Cover: import("react").ForwardRefExoticComponent<BoxProps & {
     message?: string;
     spinner?: SPINNER;
+    spinnerSize?: Variant;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;

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

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
-import { SPINNER } from "../../types/enums";
+import { SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 import Spinner from "../Spinner";
 import Text from "../Text";
 const Cover = forwardRef((props, ref) => {
-    const { message, spinner, color, when, hideMessage, ...pops } = props;
+    const { message, spinner, spinnerSize, color, when, hideMessage, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     if (`when` in props && props.when == false) {
         return null;
@@ -15,7 +15,7 @@ const Cover = forwardRef((props, ref) => {
     return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
-        }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+        }, ...rest, children: [_jsx(Spinner, { variant: spinnerSize || Variant.Small, type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
 });
 Cover.displayName = `Zuz.Cover`;
 export default Cover;

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/Password/index.d.ts

@@ -2,7 +2,7 @@ import { InputProps } from '../Input';
 export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {
     strenthMeter?: boolean;
 };
-declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "numeric" | "type"> & {
+declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & {
     strenthMeter?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default Password;

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

@@ -13,5 +13,9 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     withStyle?: string;
     shortcut?: import("..").KeyCombination;
     reverse?: boolean;
+    searchIcon?: string | import("react").ReactNode;
+    hideSearchIcon?: boolean;
+    clearIcon?: string | import("react").ReactNode;
+    hideClearIcon?: boolean;
 } & import("react").RefAttributes<SearchHandler>>;
 export default Search;

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

@@ -1,19 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useBase } from '../../hooks';
 import { Variant } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
+import Icon from '../Icon';
 import Input from '../Input';
 import KeyBoardKeys from '../KeyboardKeys';
 import SVGIcons from '../svgicons';
 const Search = forwardRef((props, ref) => {
-    const { fx, animate, withStyle, as, reverse, onChange, onClear, ...pops } = props;
+    const { fx, animate, withStyle, as, reverse = false, searchIcon = SVGIcons.search, hideSearchIcon = false, clearIcon = SVGIcons.close, hideClearIcon = false, onChange, onClear, ...pops } = props;
     const { style, className } = useBase({ as: props.as });
     // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
     const [query, setQuery] = useState(``);
     const innerRef = useRef(null);
+    const actionBtn = useMemo(() => _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ?
+            !hideClearIcon && (`string` === typeof clearIcon ? _jsx(Icon, { name: clearIcon, as: `--search-action` }) : clearIcon) :
+            !hideSearchIcon && (`string` === typeof searchIcon ? _jsx(Icon, { name: searchIcon, as: `--search-action` }) : searchIcon) }), [reverse, searchIcon, hideClearIcon, clearIcon, hideSearchIcon]);
     if (`type` in props) {
         delete props[`type`];
     }
@@ -38,7 +42,7 @@ const Search = forwardRef((props, ref) => {
         value: () => innerRef.current?.value
     }));
     useEffect(() => { }, []);
-    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
+    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && actionBtn, _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && actionBtn] });
 });
 Search.displayName = `Zuz.Search`;
 export default Search;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { KeyCombination } from "../..";
 import { InputProps } from "../Input";
 export type SearchProps = InputProps & {
@@ -7,6 +8,10 @@ export type SearchProps = InputProps & {
     withStyle?: string;
     shortcut?: KeyCombination;
     reverse?: boolean;
+    searchIcon?: string | ReactNode;
+    hideSearchIcon?: boolean;
+    clearIcon?: string | ReactNode;
+    hideClearIcon?: boolean;
 };
 export interface SearchHandler {
     focus: () => void;

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

@@ -9,5 +9,7 @@ declare const Select: import("react").ForwardRefExoticComponent<Omit<import(".."
     onChange?: (v: Option) => void;
     searchPlaceholder?: string;
     maxHeight?: number;
+    arrowDownIcon?: string | import("react").ReactNode;
+    arrowUpIcon?: string | import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;

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

@@ -5,12 +5,13 @@ import { useBase, usePosition } from "../../hooks";
 import { Position } from "../../types/enums";
 import Box from "../Box";
 import Button from "../Button";
+import Icon from "../Icon";
 import Input from "../Input";
 import SVGIcons from "../svgicons";
 import Text from "../Text";
 import OptionItem from "./optionItem";
 const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, maxHeight, onChange, ...pops } = props;
+    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, maxHeight, arrowDownIcon = SVGIcons.arrowDown, arrowUpIcon = SVGIcons.arrowUp, onChange, ...pops } = props;
     const [value, setValue] = useState(selected ?
         typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
         : options[0]);
@@ -45,7 +46,9 @@ const Select = forwardRef((props, ref) => {
         }
         reposition();
     }, [choosing]);
-    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, "aria-hidden": !choosing, style: {
+    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ?
+                            `string` === typeof arrowUpIcon ? _jsx(Icon, { name: arrowUpIcon, as: `--search-action` }) : arrowUpIcon :
+                            `string` === typeof arrowDownIcon ? _jsx(Icon, { name: arrowDownIcon, as: `--search-action` }) : arrowDownIcon })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, "aria-hidden": !choosing, style: {
                     maxHeight: maxHeight || `auto`
                 }, ref: _pop, fx: {
                     from: { y: 5, opacity: 0 },

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

@@ -1,10 +1,12 @@
-import { FormEventHandler } from "react";
+import { FormEventHandler, ReactNode } from "react";
 import { FORMVALIDATION, Variant } from "../../types/enums";
 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;
 };
@@ -59,4 +61,6 @@ export type SelectProps = Omit<BoxProps, "onChange"> & {
      * Max Height
      */
     maxHeight?: number;
+    arrowDownIcon?: string | ReactNode;
+    arrowUpIcon?: string | ReactNode;
 };

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

@@ -1,8 +1,9 @@
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type SpinnerProps = BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;
@@ -12,6 +13,7 @@ export type SpinnerProps = BoxProps & {
 declare const Spinner: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { hexToRgba } from "../../funs";
 import { useBase } from "../../hooks";
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 const Spinner = forwardRef((props, ref) => {
-    const { type, size, width, speed, color, background, foreground, ...pops } = props;
+    const { type, size, variant, width, speed, color, background, foreground, ...pops } = props;
     const defaultColor = `#000000`;
     const { className, style, rest } = useBase(pops);
     const build = () => {
@@ -18,13 +18,20 @@ const Spinner = forwardRef((props, ref) => {
             default: 20
         };
         const _size = size ? Object.values(Size).includes(size) ? sizes[size] : size : sizes.default;
+        const variants = {
+            [Variant.Small]: 20,
+            [Variant.Medium]: 30,
+            [Variant.Large]: 50,
+            default: 20
+        };
+        const _variant = variant ? Object.values(Variant).includes(variant) ? variants[variant] : variant : variants.default;
         const _animationSetting = {
             animationDuration: `${speed || .6}s`,
             animationTimingFunction: `linear`
         };
         const _props = (type || SPINNER.Simple) == SPINNER.Simple ? {
-            width: _size,
-            height: _size,
+            width: _variant || _size,
+            height: _variant || _size,
             border: `${width || 3}px solid ${bg}`,
             borderRadius: `50%`,
             borderTopColor: c,

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;