@zuzjs/ui 0.9.6 → 0.9.8

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;

package/dist/cjs/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/cjs/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__;",
@@ -308,11 +309,13 @@ export const cssDirect = {
     "translate": "transform: translate(__VALUE__);",
     "translateX": "transform: translateX(__VALUE__);",
     "translateY": "transform: translateY(__VALUE__);",
+    "translateZ": "transform: translateZ(__VALUE__);",
     "x": "transform: translateX(__VALUE__);",
     "y": "transform: translateY(__VALUE__);",
+    "z": "transform: translateZ(__VALUE__);",
     "rotate": "transform: rotate(__VALUE__);",
     "rotateX": "transform: rotateX(__VALUE__);",
-    "rotateY": "transform: rotatY(__VALUE__);",
+    "rotateY": "transform: rotateY(__VALUE__);",
     "rotateZ": "transform: rotateZ(__VALUE__);",
     "rotate3d": "transform: rotate3d(__X__, __Y__, __Z__, __A__);",
     "scale": "transform: scale(__VALUE__);",

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

package/dist/cjs/hooks/usePushNotifications.d.ts

@@ -0,0 +1,45 @@
+export type PushSubscriptionMeta = {
+    endpoint: string;
+    keys: {
+        p256dh: string;
+        auth: string;
+    };
+};
+export type PushNotificationsOptions = {
+    /**
+     * VAPID public key (required for subscription)
+     */
+    vapidPublicKey: string;
+    /**
+     * Path to your service worker file
+     * @default '/sw.js'
+     */
+    serviceWorkerPath?: string;
+    /**
+     * Auto-request permission on mount
+     * @default false
+     */
+    requestPermissionOnMount?: boolean;
+};
+export type PushNotificationsResult = {
+    /** Current permission state */
+    permission: NotificationPermission;
+    /** Push subscription object (or null if not subscribed) */
+    subscription: PushSubscription | null;
+    /** JSON representation of subscription (easy to send to backend) */
+    subscriptionMeta: PushSubscriptionMeta | null;
+    /** Is push supported in this browser? */
+    isSupported: boolean;
+    /** Request permission and subscribe */
+    subscribe: () => Promise<PushSubscription | null>;
+    /** Unsubscribe from push */
+    unsubscribe: () => Promise<boolean>;
+    /** Request notification permission only */
+    requestPermission: () => Promise<NotificationPermission>;
+    /** Error state */
+    error: string | null;
+    /** Loading state */
+    isLoading: boolean;
+};
+declare const usePushNotifications: (options: PushNotificationsOptions) => PushNotificationsResult;
+export default usePushNotifications;