@zuzjs/ui 0.7.4 → 0.7.6

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

@@ -0,0 +1,7 @@
+import { MouseEvent, RefObject } from "react";
+import { SheetHandler } from "../comps";
+declare const useSheet: (sheet: RefObject<SheetHandler | null>) => {
+    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent) => void;
+    hide: (e: MouseEvent | TouchEvent) => void;
+};
+export default useSheet;

package/dist/cjs/hooks/useSheet.js

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+const useSheet = (sheet) => {
+    const show = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setTimeout(() => {
+            sheet.current?.show(e);
+        }, 0);
+    };
+    const hide = (e) => {
+        sheet.current?.hide();
+    };
+    useEffect(() => {
+        document.addEventListener("click", hide);
+        return () => {
+            document.removeEventListener("click", hide);
+        };
+    }, [sheet]);
+    return { show, hide };
+};
+export default useSheet;

package/dist/cjs/src/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cjs/src/bin.js

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+import fs, { readdirSync, statSync } from "fs";
+import { program } from "commander";
+import chokidar from 'chokidar';
+import path from "path";
+import CSS from "./funs/css.js";
+import pc from "picocolors";
+import { FIELNAME_KEY } from "./funs/index.js";
+program
+    .option(`-d, --debug`)
+    .option(`-v, --version`)
+    .option(`-r, --root <char>`)
+    .option(`-f, --file <char>`)
+    .option(`-l, --lexer`)
+    .option(`-c, --classes`)
+    .option(`-h, --cache`)
+    .option(`-e, --cleaned`)
+    .option(`-t, --sheet`)
+    .option(`-m, --media`)
+    .option(`-s, --dark`);
+program.parse();
+const options = program.opts();
+// extendGlobals()
+const getAllFiles = (dir, extn, files, result, regex) => {
+    files = files || readdirSync(dir);
+    result = result || [];
+    regex = regex || new RegExp(`^(?!.*[/\\\\]node_modules[/\\\\]).*\\${extn}$`);
+    for (let i = 0; i < files.length; i++) {
+        let file = path.join(dir, files[i]);
+        if (statSync(file).isDirectory()) {
+            try {
+                result = getAllFiles(file, extn, readdirSync(file), result, regex);
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        else {
+            if (regex.test(file)) {
+                result.push(file);
+            }
+        }
+    }
+    return result;
+};
+const rebuild = (f) => {
+    const raw = fs.readFileSync(f, `utf8`);
+    let _filePath = path.relative(process.cwd(), f);
+    if (!_filePath.startsWith(`/`))
+        _filePath = `/${_filePath}`;
+    const list = [`${FIELNAME_KEY}:${_filePath}`];
+    const processMatch = (matches, type) => {
+        const makeV2 = (v1) => {
+            let v2 = v1
+                .trim()
+                .slice(1, -1);
+            if (v2.includes(`\n`)) {
+                v2 = v2.split(`\n`).reduce((arr, v) => {
+                    if (v.trim() != ``) {
+                        v = v.trim().endsWith(`,`) ? v.slice(0, -1) : v;
+                        arr.push(v.trim());
+                    }
+                    return arr;
+                }, []).join(` `);
+                // 
+            }
+            if (v2.startsWith(`[`) && v2.endsWith(`]`))
+                v2 = v2.slice(1, -1);
+            return v2.trim();
+        };
+        if (matches && matches.length > 0) {
+            matches.map((m) => {
+                let v2;
+                // m = m.replace(/\s+|\n/gm, ` `)
+                if (type == `as`) {
+                    const [x, v1] = m.split(/as\s*=/);
+                    v2 = makeV2(v1);
+                }
+                else if (type == `css`) {
+                    const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
+                    // console.log(v1)
+                    v2 = makeV2(v1.trim());
+                }
+                // console.log(`v2 ->`, `"${v2}"`)
+                list.push(v2);
+            });
+        }
+    };
+    /**
+     * match as={?}
+     */
+    // processMatch(raw.match(/as\s*=\s*\{([^{}]|{([^{}]|{[^{}]*})*})*\}/g), `as`)
+    processMatch(raw.match(/as\s*=\s*(?:\{([^{}]|{([^{}]|{[^{}]*})*})*\}|'([^']*)'|"([^"]*)")/g), `as`);
+    /**
+     * match css()
+     */
+    processMatch(raw.match(/css\(\s*(?:\[\s*([\s\S]*?)\s*\]|\s*`([\s\S]*?)`)\s*\)/g), `css`);
+    return list;
+};
+const rebuildAll = () => {
+    console.log(pc.gray(`○ Building Zuz CSS`));
+    const cssBuilder = new CSS({}, options);
+    const files = getAllFiles(process.cwd(), `.(jsx|tsx)`);
+    if (files.length > 0) {
+        const as = [];
+        if (options.file) {
+            const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
+            if (r && r.length > 0) {
+                // console.log(r)
+                as.push(cssBuilder.Build([r], true, options.file).sheet);
+                // as.push(r)
+            }
+        }
+        else {
+            const mediaQueries = {};
+            let darkQueries = {};
+            files.map(f => {
+                // if ( f.endsWith(`header.jsx`) ){
+                const r = rebuild(f);
+                if (r && r.length > 0) {
+                    // as.push(cssBuilder.Build([r], true).sheet)
+                    // as.push( f.endsWith(`header.jsx`) ?
+                    //  `.header{${cssBuilder.Build([r], true).sheet}}`
+                    //  : cssBuilder.Build([r], true).sheet)
+                    const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
+                    as.push(_built.sheet);
+                    darkQueries = { ...darkQueries, ..._built.darkQueries };
+                    Object.keys(_built.mediaQuery).map(mq => {
+                        if (!mediaQueries[mq])
+                            mediaQueries[mq] = [];
+                        mediaQueries[mq] = [
+                            ...mediaQueries[mq],
+                            ..._built.mediaQuery[mq]
+                        ];
+                    });
+                    // as.push(new CSS().Build([[r]], true).sheet)
+                }
+                // }
+                // as.push(r)
+            });
+            as.push(cssBuilder.buildMediaQueries(mediaQueries));
+            as.push(cssBuilder.buildDarkModeQueries(darkQueries));
+        }
+        // console.log(as)
+        // const { sheet } = new CSS().Build(as, true)
+        // console.log(cache)
+        const sheet = as.join(`\n`);
+        if (!fs.existsSync(path.join(process.cwd(), `src`, `app`, `css`))) {
+            fs.mkdirSync(path.join(process.cwd(), `src`, `app`, `css`));
+        }
+        // console.log(sheet)
+        fs.writeFileSync(path.join(process.cwd(), `src`, `app`, `css`, `zuz.scss`), sheet, {
+            encoding: `utf8`,
+            flag: `w+`
+        });
+        console.log(pc.green(`✓ Zuz CSS Generated`));
+    }
+    else {
+        console.log(pc.red(`⨯ No tsx | jsx file found`));
+    }
+};
+const watchPaths = [
+    `${path.resolve(`./`)}/**/*.jsx`,
+    `${path.resolve(`./`)}/**/*.tsx`,
+];
+const watcher = chokidar.watch(watchPaths, {
+    ignored: (p) => p.includes(`/dist`) || p.includes('node_modules'),
+    persistent: true,
+    usePolling: true
+});
+if (options.file)
+    console.log(pc.gray(`○ Watching ${options.file}`));
+watcher.on(`change`, rebuildAll);

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

@@ -0,0 +1,6 @@
+import { AccordionHandler } from "./types";
+declare const Accordion: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    message?: string | import("react").ReactNode;
+    title: string | import("react").ReactNode | import("react").ReactNode[];
+} & import("react").RefAttributes<AccordionHandler>>;
+export default Accordion;

package/dist/cjs/src/comps/Accordion/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import Box from "../Box";
+import Text from "../Text";
+import SVGIcons from "../svgicons";
+import Button from "../Button";
+const Accordion = forwardRef((props, ref) => {
+    const { title, message, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { className: `--accordion flex cols`, ...rest, children: [_jsxs(Button, { onClick: (e) => setVisible(!visible), className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(Text, { className: `--label flex`, children: title }), _jsx(Box, { className: `--arrow flex`, children: visible ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), visible && _jsx(Box, { className: `--detail`, children: message })] });
+});
+export default Accordion;

package/dist/cjs/src/comps/Accordion/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export type AccordionProps = BoxProps & {
+    message?: string | ReactNode;
+    title: string | ReactNode | ReactNode[];
+};
+export interface AccordionHandler {
+    open: () => void;
+    close: () => void;
+}

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

@@ -0,0 +1,23 @@
+import { BoxProps } from "../Box";
+import { ActionBarHandler } from "./types";
+import { Position } from "../../types/enums";
+/**
+ * ActionBar renders a list of buttons with tooltips.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
+ *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
+ * ];
+ *
+ * <ActionBar items={items} />
+ * ```
+ */
+declare const ActionBar: import("react").ForwardRefExoticComponent<BoxProps & {
+    selected?: number | string;
+    onSwitch?: (tag: string) => void;
+    items: import("./types").ActionBarItem[];
+    position?: Position;
+} & import("react").RefAttributes<ActionBarHandler>>;
+export default ActionBar;

package/dist/cjs/src/comps/Actionbar/index.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import ActionItem from "./item";
+import { Position } from "../../types/enums";
+/**
+ * ActionBar renders a list of buttons with tooltips.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
+ *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
+ * ];
+ *
+ * <ActionBar items={items} />
+ * ```
+ */
+const ActionBar = forwardRef((props, ref) => {
+    const { items, name, selected, position, ...pops } = props;
+    const self = useRef(null);
+    const [_selected, setSelected] = useState(selected || items[0].tag || 0);
+    const track = useCallback(({ x, y }) => {
+        if (self.current) {
+            const bounds = self.current.getBoundingClientRect();
+            document.documentElement.style.setProperty(`--tip-x`, `${x - bounds.left}`);
+            document.documentElement.style.setProperty(`--tip-y`, `${y - bounds.top}`);
+            document.documentElement.style.setProperty(`--tip-s`, `1`);
+        }
+    }, []);
+    const tear = useCallback(() => {
+        if (self.current) {
+            self.current.removeEventListener(`pointerleave`, tear);
+            self.current.removeEventListener(`pointermove`, track);
+            document.documentElement.style.setProperty(`--tip-s`, `0`);
+        }
+    }, []);
+    const initTrack = useCallback(() => {
+        if (self.current) {
+            self.current.addEventListener(`pointerleave`, tear);
+            self.current.addEventListener(`pointermove`, track);
+        }
+    }, []);
+    useEffect(() => {
+        if (self.current) {
+            document.documentElement.style.setProperty(`--tip-w`, items.reduce((longest, item) => {
+                return item.label.length > longest.length ? item.label : longest;
+            }, '').length.toString());
+            document.documentElement.style.setProperty(`--tip-s`, `0`);
+            document.documentElement.style.setProperty(`--tip-l`, `${items.length}`);
+            self.current?.addEventListener(`pointerenter`, initTrack);
+        }
+    }, []);
+    const { className, style, rest } = useBase(pops);
+    return _jsxs(Box, { ref: self, style: style, className: [
+            `--actionbar flex aic ${className}`,
+            `${!position || position == Position.Auto ? `rel` : `--${position}`}`
+        ].join(` `).trim(), ...rest, children: [items.map((item, index) => _jsx(ActionItem, { selected: _selected === item.tag || selected == index, ...item, idx: index }, `actionbar-action-${item.label.toLowerCase().replace(/\s+/g, `-`)}`)), _jsx(Box, { className: `--tip abs`, children: _jsx(Box, { className: `--track flex aic`, children: items.map(({ label }) => _jsx(Box, { className: `--lb`, children: label }, `tool-tip-${label.toLowerCase().replace(/\s+/g, `-`)}`)) }) })] });
+});
+export default ActionBar;

package/dist/cjs/src/comps/Actionbar/item.d.ts

@@ -0,0 +1,6 @@
+import { ActionBarItem } from './types';
+declare const ActionItem: ({ label, icon, onClick, idx, selected }: ActionBarItem & {
+    idx: number;
+    selected?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ActionItem;

package/dist/cjs/src/comps/Actionbar/item.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../Button';
+import Icon from '../Icon';
+const ActionItem = ({ label, icon, onClick, idx, selected }) => {
+    return _jsx(Button, { onClick: onClick, onMouseMove: e => document.documentElement.style.setProperty(`--tip-m`, `${idx}`), className: `--action ${selected ? `--selected` : ``} aic jcc rel`.trim(), children: typeof icon == `string` ? _jsx(Icon, { name: icon }) : icon });
+};
+export default ActionItem;

package/dist/cjs/src/comps/Actionbar/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+import { Position } from "../../types/enums";
+export interface ActionBarHandler {
+    show: () => void;
+}
+/**
+ * Represents an item in the ActionBar.
+ */
+export interface ActionBarItem {
+    /** Specific tag for action item */
+    tag?: string;
+    /** The label of the action item */
+    label: string;
+    /** The icon to display for the action item */
+    icon: ReactNode;
+    /** The callback function to execute when the action item is clicked */
+    onClick: () => void;
+}
+/**
+ * Props for the ActionBar component.
+ */
+export type ActionBarProps = BoxProps & {
+    /** The index of the initially selected action item */
+    selected?: number | string;
+    /** Callback function to execute when an action item is clicked */
+    onSwitch?: (tag: string) => void;
+    /** Array of action items to display in the ActionBar */
+    items: ActionBarItem[];
+    /** Position of ActionBar */
+    position?: Position;
+};

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

@@ -0,0 +1,11 @@
+import { AlertHandler } from "./types";
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+} & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/cjs/src/comps/Alert/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import { ALERT } from "../../types/enums";
+import Box from "../Box";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
+});
+export default Alert;

package/dist/cjs/src/comps/Alert/types.d.ts

@@ -0,0 +1,13 @@
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type AlertProps = BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+};
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}

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

@@ -0,0 +1,12 @@
+import { Size } from "../../types/enums";
+declare const AutoComplete: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: import("../..").Variant;
+    with?: import("../..").FORMVALIDATION;
+} & {
+    action?: string;
+    data?: string[];
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default AutoComplete;

package/dist/cjs/src/comps/AutoComplete/index.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { useBase, useDebounce } from "../../hooks";
+import Box from "../Box";
+import { Size, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import Input from "../Input";
+import SVGIcons from "../svgicons";
+import { clamp, isArray, uuid, withPost } from "../../funs";
+import List from "../List";
+const AutoComplete = forwardRef((props, ref) => {
+    const { animate, action, data, withStyle, onChange, ...pops } = props;
+    const { className: autoCompleteStyle } = useBase({ as: withStyle || `` });
+    const { style } = useBase(pops);
+    const [choosing, setChoosing] = useState(false);
+    const [items, setItems] = useState(data || []);
+    const innerRef = useRef(null);
+    const autoRef = useRef(null);
+    const suggestionRef = useRef(null);
+    const _id = useMemo(() => pops.name || uuid(), []);
+    const [highlightedIndex, setHighlightedIndex] = useState(null);
+    const [lastQuery, setLastQuery] = useState(null);
+    const [lastSuggestions, setLastSuggestions] = useState([]);
+    const handleChange = (e) => {
+        if (e.target.value == ``) {
+            setChoosing(false);
+            setItems([]);
+        }
+        else if (action && e.target.value.trim() != ``) {
+            withPost(action, { query: e.target.value })
+                .then((resp) => {
+                if (`items` in resp && isArray(resp.items)) {
+                    setItems(resp.items);
+                    setLastQuery(e.target.value);
+                    setLastSuggestions(resp.items);
+                }
+                else {
+                    console.error(`Action Response should contain items array`);
+                }
+                setHighlightedIndex(null);
+            })
+                .catch((err) => {
+                setHighlightedIndex(null);
+                setItems([]);
+            });
+        }
+    };
+    const debounce = useDebounce(handleChange, 250);
+    const handlePosition = () => {
+        if (autoRef.current) {
+            const boundingBox = autoRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - boundingBox.bottom;
+            const spaceAbove = boundingBox.top;
+            if (suggestionRef.current) {
+                const suggestionList = suggestionRef.current;
+                if (spaceBelow < suggestionList.offsetHeight && spaceAbove > spaceBelow) {
+                    suggestionList.style.top = 'auto';
+                    suggestionList.style.bottom = `${boundingBox.height}px`;
+                    suggestionList.style.maxHeight = `${spaceAbove - 150}px`;
+                }
+                else {
+                    suggestionList.style.top = `${boundingBox.height + 5}px`;
+                    suggestionList.style.bottom = 'auto';
+                    suggestionList.style.maxHeight = `${spaceBelow - 150}px`;
+                }
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (items.length > 0) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.key === 'Escape') {
+                setHighlightedIndex(null);
+                setChoosing(false);
+                setItems([]);
+            }
+            else if (e.key === 'ArrowDown') {
+                setHighlightedIndex((prevIndex) => {
+                    const newIndex = prevIndex === null || prevIndex === items.length - 1 ? 0 : prevIndex + 1;
+                    updateInputValue(newIndex);
+                    return newIndex;
+                });
+            }
+            else if (e.key === 'ArrowUp') {
+                setHighlightedIndex((prevIndex) => {
+                    const newIndex = prevIndex === null || prevIndex === 0 ? items.length - 1 : prevIndex - 1;
+                    updateInputValue(newIndex);
+                    return newIndex;
+                });
+            }
+            else if (e.key === 'Enter' && highlightedIndex !== null) {
+                const selectedItem = items[highlightedIndex];
+                if (innerRef.current) {
+                    innerRef.current.value = selectedItem;
+                    setChoosing(false);
+                    setItems([]);
+                    // if (onChange) {
+                    //     onChange(selectedItem);
+                    // }
+                }
+            }
+        }
+    };
+    const handleMouseSelect = (item) => {
+        if (innerRef.current) {
+            innerRef.current.value = item;
+            setChoosing(false);
+            setItems([]);
+            // if (onChange) {
+            //     onChange(item);
+            // }
+        }
+    };
+    const updateInputValue = (index) => {
+        const selectedItem = items[index];
+        if (selectedItem && innerRef.current) {
+            innerRef.current.value = selectedItem;
+            // Move cursor to the end of the input value
+            innerRef.current.setSelectionRange(selectedItem.length, selectedItem.length);
+        }
+        // Auto-scroll the suggestion list to the selected index
+        if (suggestionRef.current) {
+            const suggestionList = suggestionRef.current;
+            const selectedItemElement = suggestionList.children[index];
+            if (selectedItemElement) {
+                selectedItemElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    };
+    const handleClickOutside = (event) => {
+        if (autoRef.current && !autoRef.current.contains(event.target)) {
+            setChoosing(false);
+            setItems([]);
+        }
+    };
+    const handleFocus = () => {
+        if (innerRef.current && innerRef.current.value === lastQuery) {
+            setItems(lastSuggestions);
+            setHighlightedIndex(null); // Reset highlighted index
+            handlePosition();
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('resize', handlePosition);
+        window.addEventListener('scroll', handlePosition, true);
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            window.removeEventListener('resize', handlePosition);
+            window.removeEventListener('scroll', handlePosition, true);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    useEffect(() => {
+        handlePosition();
+    }, [items]);
+    return _jsxs(Box, { style: style, ref: autoRef, className: `--autocomplete --${props.size || Size.Small} flex aic rel ${autoCompleteStyle}`.trim(), children: [_jsx(Input, { ref: innerRef, autoComplete: "off", onChange: debounce, onKeyDown: handleKeyDown, onFocus: handleFocus, ...pops }), _jsx(Box, { className: `--arrow rel flex aic jcc`, children: items.length > 0 ? SVGIcons.arrowUp : SVGIcons.arrowDown }), items.length > 0 && _jsx(List, { id: _id, ref: suggestionRef, className: `--suggestion-list flex cols abs`, items: items.map((item, index) => ({
+                    label: item,
+                    onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleMouseSelect(item);
+                    },
+                    className: highlightedIndex === index ? '--current' : '',
+                    animate: {
+                        transition: TRANSITIONS.SlideInBottom,
+                        curve: TRANSITION_CURVES.EaseInOut,
+                        delay: clamp(0.02 * index, 0.02, 0.5)
+                    }
+                })) })] });
+});
+export default AutoComplete;

package/dist/cjs/src/comps/AutoComplete/types.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from "../Input";
+export type AutoCompleteProps = InputProps & {
+    action?: string;
+    data?: string[];
+    withStyle?: string;
+};

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

@@ -0,0 +1,12 @@
+import { AVATAR } from "../../types/enums";
+import { AvatarHandler } from "./types";
+declare const Avatar: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../..").ZuzProps> & {
+    type?: AVATAR;
+    size?: number;
+    variant?: import("../..").Variant;
+    src?: string;
+    color?: string;
+    crossOrigin?: "anonymous" | "use-credentials";
+    referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+} & import("react").RefAttributes<AvatarHandler>>;
+export default Avatar;

package/dist/cjs/src/comps/Avatar/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { AVATAR, Size } from "../../types/enums";
+import { useBase, useImage } from "../../hooks";
+import Image from "../Image";
+import Box from "../Box";
+import Text from "../Text";
+const Avatar = forwardRef((props, ref) => {
+    const { src, size, variant, type, crossOrigin, referrerPolicy, animate, as, alt, color, ...pops } = props;
+    const [img, imgStatus, imgError] = src ? useImage(src, crossOrigin, referrerPolicy) : [`x`, `y`, `z`];
+    const { className, style, rest } = useBase({ animate, as });
+    useEffect(() => {
+        if (type == AVATAR.Square && !document.getElementById('squareRadiusClipPath')) {
+            const svgNS = "http://www.w3.org/2000/svg";
+            const svg = document.createElementNS(svgNS, "svg");
+            svg.setAttribute("width", "0");
+            svg.setAttribute("height", "0");
+            const defs = document.createElementNS(svgNS, "defs");
+            const clipPath = document.createElementNS(svgNS, "clipPath");
+            clipPath.setAttribute("id", "squareRadiusClipPath");
+            clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
+            const path = document.createElementNS(svgNS, "path");
+            path.setAttribute("d", "M0.986 0.347C0.951 0.11 0.777 -0.002 0.5 0C0.223 -0.002 0.049 0.11 0.014 0.347C0.005 0.404 0 0.452 0 0.5C0 0.548 0.005 0.596 0.014 0.653C0.049 0.89 0.223 1.002 0.5 1C0.777 1.002 0.951 0.89 0.986 0.653C0.995 0.596 1 0.548 1 0.5C1 0.452 0.995 0.404 0.986 0.347Z");
+            clipPath.appendChild(path);
+            defs.appendChild(clipPath);
+            svg.appendChild(defs);
+            document.body.appendChild(svg);
+        }
+    }, []);
+    return _jsx(Box, { className: `--avatar --${variant || Size.Small} --${(type || AVATAR.Circle).toLowerCase()} rel flex aic jcc ${className}`.trim(), style: {
+            background: color || `var(--primary)`,
+            ...style,
+        }, ...rest, children: src ? _jsx(Image, { src: img, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, ...pops }) : _jsx(Text, { className: `--avatar-label`, children: (alt ? alt.charAt(0) : `A`).toUpperCase() }) });
+});
+export default Avatar;