@zuzjs/ui 0.9.7 → 0.9.8

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/comps/TextArea/types.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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;

package/dist/esm/funs/index.js

@@ -502,3 +502,45 @@ export const checkPasswordStrength = (password) => {
         suggestion: suggestions
     };
 };
+export const getCaretCoordinates = (element, position) => {
+    const div = document.createElement('div');
+    const style = window.getComputedStyle(element);
+    const properties = [
+        'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing',
+        'lineHeight', 'paddingLeft', 'paddingTop', 'borderLeftWidth',
+        'borderTopWidth', 'boxSizing', 'width', 'height', 'overflow'
+    ];
+    // Copy styles to temporary div
+    properties.forEach(prop => {
+        div.style.setProperty(prop, style.getPropertyValue(prop));
+    });
+    div.style.position = 'absolute';
+    div.style.visibility = 'hidden';
+    div.style.whiteSpace = 'pre-wrap';
+    div.style.wordWrap = 'break-word';
+    div.textContent = element.value.substring(0, position);
+    // Append a span to measure caret position
+    const span = document.createElement('span');
+    span.textContent = element.value.substring(position) || ' ';
+    div.appendChild(span);
+    document.body.appendChild(div);
+    // Get coordinates
+    const rect = span.getBoundingClientRect();
+    const textareaRect = element.getBoundingClientRect();
+    const coordinates = {
+        top: rect.top - textareaRect.top + element.scrollTop,
+        left: rect.left - textareaRect.left + element.scrollLeft,
+    };
+    document.body.removeChild(div);
+    return coordinates;
+};
+export const urlBase64ToUint8Array = (base64String) => {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+};

package/dist/esm/funs/stylesheet.js

@@ -257,6 +257,7 @@ export const cssProps = {
     "backdropFilter": "backdrop-filter",
     "placeItems": "place-items",
     "placeContent": "place-content",
+    "corner": "corner-shape",
 };
 export const cssDirect = {
     "extend": "@extend __VALUE__;",

package/dist/esm/hooks/index.d.ts

@@ -2,6 +2,7 @@ export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
+export { default as useCommandActions, type Command, type CommandActionProps } from './useCommandActions';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
@@ -28,6 +29,7 @@ export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as usePosition } from './usePosition';
+export { default as usePushNotifications, type PushNotificationsOptions, type PushNotificationsResult, type PushSubscriptionMeta } from './usePushNotifications';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

package/dist/esm/hooks/index.js

@@ -2,6 +2,7 @@ export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
+export { default as useCommandActions } from './useCommandActions';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB } from './useDB';
 export { default as useDebounce } from './useDebounce';
@@ -29,6 +30,7 @@ export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as usePosition } from './usePosition';
+export { default as usePushNotifications } from './usePushNotifications';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

package/dist/esm/hooks/useCommandActions.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+export type Command = {
+    label: string;
+    value: string;
+    icon?: string;
+    type?: 'command' | 'submenu' | 'action';
+    subCommands?: Command[];
+    action?: React.ReactNode | ((props: {
+        onSelect: (value: string) => void;
+    }) => React.ReactNode);
+};
+export type CommandActionProps = {
+    command?: string;
+    commands?: Command[];
+    cmd?: (value: string, textarea: HTMLTextAreaElement | HTMLInputElement) => void;
+    ref: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+};
+declare const useCommandActions: ({ command, commands, cmd, ref, }: CommandActionProps) => {
+    showDropdown: boolean;
+    dropdownPosition: {
+        top: number;
+        left: number;
+    };
+    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    handleInput: (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    handleCommandSelect: (value: string) => void;
+    parentRef: RefObject<HTMLDivElement | null>;
+};
+export default useCommandActions;

package/dist/esm/hooks/useCommandActions.js

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { useState } from "react";
+import { useRef } from "react";
+const useCommandActions = ({ command = '/', commands = [], cmd, ref, }) => {
+    const [commandStart, setCommandStart] = useState(-1);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+    const parentRef = useRef(null);
+    const handleInput = (event) => {
+        const textarea = ref.current;
+        if (textarea && showDropdown) {
+            const { value } = textarea;
+            if (commandStart < 0 || commandStart >= value.length || value[commandStart] !== command) {
+                setShowDropdown(false);
+            }
+        }
+    };
+    const handleKeyDown = (event) => {
+        const textarea = ref.current;
+        if (!textarea)
+            return;
+        const { selectionStart } = textarea;
+        if (event.key === command) {
+            setCommandStart(selectionStart || -1);
+            const caretPos = getCaretCoordinates(textarea, selectionStart || -1);
+            setDropdownPosition({
+                top: caretPos.top + 20,
+                left: caretPos.left,
+            });
+            setShowDropdown(true);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setShowDropdown(false);
+        }
+    };
+    const handleCommandSelect = (value) => {
+        const textarea = ref.current;
+        if (!textarea)
+            return;
+        if (cmd) {
+            cmd(value, textarea);
+        }
+        else {
+            const { value: currentValue, selectionStart } = textarea;
+            const newValue = currentValue.slice(0, commandStart) +
+                value +
+                currentValue.slice(selectionStart || -1);
+            textarea.value = newValue;
+            textarea.setSelectionRange(commandStart + value.length, commandStart + value.length);
+            const event = new Event('input', { bubbles: true });
+            textarea.dispatchEvent(event);
+        }
+        setShowDropdown(false);
+        textarea.focus();
+    };
+    const getCaretCoordinates = (element, position) => {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return { top: 0, left: 0 };
+        }
+        const style = window.getComputedStyle(element);
+        context.font = `${style.fontSize} ${style.fontFamily}`;
+        const text = element.value.substring(0, position);
+        const lines = text.split('\n');
+        const lastLine = lines[lines.length - 1];
+        const left = context.measureText(lastLine).width;
+        const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;
+        const top = (lines.length - 1) * lineHeight;
+        const paddingTop = parseFloat(style.paddingTop) || 0;
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const scrollTop = element.scrollTop;
+        canvas.remove();
+        return {
+            top: top - scrollTop + paddingTop,
+            left: left + paddingLeft,
+        };
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current &&
+                parentRef.current &&
+                !ref.current.contains(event.target) &&
+                !parentRef.current.contains(event.target)) {
+                setShowDropdown(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref]);
+    return {
+        showDropdown,
+        dropdownPosition,
+        handleKeyDown,
+        handleInput,
+        handleCommandSelect,
+        parentRef,
+    };
+};
+export default useCommandActions;

package/dist/esm/hooks/usePosition.d.ts

@@ -5,7 +5,8 @@ interface PositionOptions {
     container?: HTMLElement | null;
     triggerRef?: React.RefObject<HTMLElement>;
 }
-export declare const usePosition: (ref: React.RefObject<HTMLElement>, options?: PositionOptions) => {
+export declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
+options?: PositionOptions) => {
     postion: "fixed" | "absolute" | null;
     reposition: () => void;
 };