@zuzjs/ui 0.7.4 → 0.7.6

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

@@ -0,0 +1,15 @@
+import { Props } from '../../types';
+import { FORMVALIDATION, Size, Variant } from '../../types/enums';
+export type InputProps = Props<`input`> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+};
+declare const Input: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    numeric?: boolean;
+    size?: Size;
+    variant?: Variant;
+    with?: FORMVALIDATION;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Input = forwardRef((props, ref) => {
+    const { size, variant, numeric, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const handleInput = (event) => {
+        if (numeric) {
+            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+        }
+    };
+    return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+});
+export default Input;

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type LabelProps = Props<`label`> & {};
+declare const Label: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Label = forwardRef((props, ref) => {
+    const { style, className, rest } = useBase(props);
+    return _jsx("label", { ref: ref, style: style, className: className, ...rest });
+});
+export default Label;

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

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+declare const List: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof import("../..").ZuzProps> & {
+    size?: Size;
+    items: import("./types").ListItem[];
+    ol?: boolean;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+export default List;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+import { useBase } from "../../hooks";
+import { Size } from "../../types/enums";
+import Item from "./item";
+const List = forwardRef((props, ref) => {
+    const { items, size, ol, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const Tag = ol == true ? 'ol' : 'ul';
+    return createElement(Tag, {
+        className: `--list --${size || Size.Small} flex cols ${className}`.trim(),
+        style, ref,
+        ...rest,
+        children: items.map((item, index) => _jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`))
+    });
+});
+export default List;

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

@@ -0,0 +1,5 @@
+import { type ListItem } from "./types";
+declare const Item: (props: {
+    meta: ListItem;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Item;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBase, useDelayed } from "../../hooks";
+const Item = (props) => {
+    const { meta } = props;
+    const mounted = useDelayed();
+    const { label, ...pops } = meta;
+    const { className, style, rest } = useBase({
+        ...pops,
+        ...(pops.animate ? { animate: {
+                ...pops.animate,
+                when: mounted
+            } } : {})
+    });
+    return _jsx("li", { style: style, className: className, ...rest, children: typeof meta == `string` ? meta : label });
+};
+export default Item;

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { Props } from "../../types";
+import { Size } from "../../types/enums";
+import { animationProps } from "../../types/interfaces";
+export type ListItemObject = {
+    icon?: ReactNode;
+    label?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    animate?: animationProps;
+    onClick?: (event: any) => void;
+};
+export type ListItem = Props<`li`> & (ReactNode | ListItemObject);
+export type ListProps = Props<`ul` | `ol`> & {
+    size?: Size;
+    items: ListItem[];
+    ol?: boolean;
+};

package/dist/cjs/src/comps/List/types.js

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

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

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+declare const NetworkManager: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    size?: Size;
+    offlineMessage?: string;
+    onlineMessage?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default NetworkManager;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import Box from "../Box";
+import Text from "../Text";
+import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
+import { useNetworkStatus } from "../../hooks";
+import SVGIcons from "../svgicons";
+const NetworkManager = forwardRef((props, ref) => {
+    const isOnline = useNetworkStatus();
+    const { onlineMessage, offlineMessage, size } = props;
+    useEffect(() => {
+    }, []);
+    return _jsxs(Box, { animate: {
+            from: { x: `-50%`, y: 200, opacity: 0 },
+            to: { x: `-50%`, y: 0, opacity: 1 },
+            when: isOnline == false,
+            curve: TRANSITION_CURVES.Spring,
+            duration: 0.5,
+            delay: 2
+        }, className: `--network-manager --${isOnline == true ? `online` : `offline`} --${size || Size.Small} fixed flex`, children: [_jsx(Box, { className: `--ico`, children: isOnline ? SVGIcons[ALERT.Success] : SVGIcons[ALERT.Error] }), _jsx(Text, { as: `--message`, children: isOnline ? onlineMessage || `internet connection restored :)` : offlineMessage || `no internet connection` })] });
+});
+export default NetworkManager;

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

@@ -0,0 +1,7 @@
+import { Size } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type NetworkManagerprops = BoxProps & {
+    size?: Size;
+    offlineMessage?: string;
+    onlineMessage?: string;
+};

package/dist/cjs/src/comps/Network/types.js

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

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

@@ -0,0 +1,8 @@
+import { BoxProps } from "../Box";
+export type OverlayProps = BoxProps & {
+    when?: boolean;
+};
+export declare const Overlay: import("react").ForwardRefExoticComponent<BoxProps & {
+    when?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Overlay;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { TRANSITIONS } from "../../types/enums";
+export const Overlay = forwardRef((props, ref) => {
+    const { when, ...pops } = props;
+    return _jsx(Box, { ref: ref, "aria-hidden": !when, className: `--overlay fixed fill`, animate: {
+            transition: TRANSITIONS.FadeIn,
+            when,
+        }, ...pops });
+});
+export default Overlay;

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

@@ -0,0 +1,14 @@
+import { PaginationPage, PaginationStyle } from "./types";
+declare const Pagination: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    itemCount: number;
+    itemsPerPage: number;
+    startPage?: PaginationPage;
+    pageRange?: number;
+    paginationStyle?: PaginationStyle;
+    breakLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    renderOnZeroPageCount?: boolean;
+    onPageChange?: import("./types").PaginationCallback;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Pagination;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { PaginationStyle } from "./types";
+import { useBase } from "../../hooks";
+import Box from "../Box";
+import Button from "../Button";
+import SVGIcons from "../svgicons";
+const Pagination = forwardRef((props, ref) => {
+    const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, renderOnZeroPageCount, onPageChange, ...pops } = props;
+    const [_currentPage, setCurrentPage] = useState(startPage || 1);
+    const _breakLabel = useMemo(() => breakLabel || `...`, [breakLabel]);
+    /**
+     * @internal
+     * const _pageType = useMemo(() => startPage ? `number` === startPage, [breakLabel])
+     */
+    const { style, className, rest } = useBase(pops);
+    const getPageValue = useCallback((p) => {
+        return (`number` === typeof p ? p : +p.label);
+    }, []);
+    if (!itemCount)
+        throw new Error(`"itemCount" prop is required`);
+    const totalPages = useMemo(() => Math.ceil(itemCount / itemsPerPage), [itemCount, itemsPerPage]);
+    const pages = useMemo(() => {
+        const _pages = [];
+        const prevs = Math.max(getPageValue(_currentPage) - (pageRange || 2), 1);
+        const nexts = Math.min(getPageValue(_currentPage) + (pageRange || 2), totalPages);
+        if (prevs > 1)
+            _pages.push(1);
+        if (prevs > 2)
+            _pages.push(_breakLabel);
+        for (let i = prevs; i <= nexts; i++)
+            _pages.push(i);
+        if (nexts < totalPages - 1)
+            _pages.push(_breakLabel);
+        if (nexts < totalPages)
+            _pages.push(totalPages);
+        return _pages;
+    }, [_currentPage]);
+    const handlePage = useCallback((newPage) => {
+        if (newPage < 1 || newPage > totalPages)
+            return;
+        setCurrentPage(newPage);
+        onPageChange?.(newPage);
+    }, [itemCount, itemsPerPage, _currentPage]);
+    if (pages.length <= 1 && ((renderOnZeroPageCount == undefined ? false : renderOnZeroPageCount) === false))
+        return null;
+    return _jsxs(Box, { as: `--pagination --pgt-${paginationStyle || PaginationStyle.Table} flex aic w:100% jcc ${className}`, children: [_jsx(Box, { as: `flex flex:1 aic --pgt-btns`, children: (pages.length > 1 ? pages : [1, _breakLabel]).map((page, index, items) => _jsx(Button, { disabled: page == _breakLabel || getPageValue(_currentPage) == page, className: page == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => typeof page == `number` && handlePage(page), children: page }, `--pg-${index}-${page}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
+                    `Showing ${(getPageValue(_currentPage) - 1) * itemsPerPage + 1} - `,
+                    `${Math.min(getPageValue(_currentPage) * itemsPerPage, itemCount)} of ${itemCount} items`
+                ].join(` `) }), _jsxs(Box, { as: `flex aic jce flex:1 --pgt-btns --pgt-nav`, children: [_jsx(Button, { disabled: getPageValue(_currentPage) <= 1, onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == pages[pages.length - 1], onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronRightOutline })] })] });
+});
+export default Pagination;

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

@@ -0,0 +1,23 @@
+import { BoxProps } from "../Box";
+export declare enum PaginationStyle {
+    Table = "table",
+    Gooey = "gooey"
+}
+export type PaginationPageItem = {
+    id: string | number;
+    label: string | number;
+};
+export type PaginationPage = number | PaginationPageItem;
+export type PaginationCallback = (page: PaginationPage) => void;
+export type PaginationProps = BoxProps & {
+    itemCount: number;
+    itemsPerPage: number;
+    startPage?: PaginationPage;
+    pageRange?: number;
+    paginationStyle?: PaginationStyle;
+    breakLabel?: string;
+    nextLabel?: string;
+    prevLabel?: string;
+    renderOnZeroPageCount?: boolean;
+    onPageChange?: PaginationCallback;
+};

package/dist/cjs/src/comps/Pagination/types.js

@@ -0,0 +1,5 @@
+export var PaginationStyle;
+(function (PaginationStyle) {
+    PaginationStyle["Table"] = "table";
+    PaginationStyle["Gooey"] = "gooey";
+})(PaginationStyle || (PaginationStyle = {}));

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

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

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
+const Password = forwardRef((props, ref) => {
+    const { ...pops } = props;
+    if (`type` in pops) {
+        delete pops[`type`];
+    }
+    const { style, className, rest } = useBase(pops);
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] });
+});
+export default Password;

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

@@ -0,0 +1,17 @@
+import { InputProps } from '../Input';
+export type PinInputProps = InputProps & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+};
+declare const PinInput: 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;
+} & {
+    mask?: boolean;
+    size?: number;
+    length?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default PinInput;

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+const PinInput = forwardRef((props, ref) => {
+    const { size, length, mask, ...pops } = props;
+    const inputs = useRef([]);
+    let name = `pinput`;
+    let required = false;
+    if (`type` in pops) {
+        delete pops.type;
+    }
+    if (`name` in pops) {
+        name = pops.name;
+        delete pops.name;
+    }
+    if (`required` in pops) {
+        required = true;
+        delete pops.required;
+    }
+    const { style } = useBase(pops);
+    const handleInput = (event) => {
+        const input = event.currentTarget;
+        const nextInput = inputs.current[parseInt(input.dataset.index) + 1];
+        const prevInput = inputs.current[parseInt(input.dataset.index) - 1];
+        if (input.value.length === 1 && nextInput) {
+            nextInput.focus();
+        }
+        else if (input.value.length === 0 && prevInput) {
+            prevInput.focus();
+        }
+    };
+    useEffect(() => {
+        inputs.current = inputs.current.slice(0, size || length);
+    }, [size || length]);
+    return _jsx(Box, { name: name, style: style, className: `--otp flex aic rel`, "data-required": required, "data-size": size || length || 4, children: Array(size || length || 4).fill(1).map((a, i) => _jsx(Input, { "data-index": i, ref: (el) => {
+                inputs.current[i] = el;
+            }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
+});
+export default PinInput;

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

@@ -0,0 +1,7 @@
+import { ProgressHandler } from "./types";
+import { BoxProps } from "../Box";
+declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
+    progress?: number;
+    type?: import("../..").PROGRESS;
+} & import("react").RefAttributes<ProgressHandler>>;
+export default ProgressBar;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+const ProgressBar = forwardRef((props, ref) => {
+    const { progress, type, ...pops } = props;
+    const bar = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setWidth: (p) => {
+            bar.current.style.width = `${p * 100}%`;
+        }
+    }), []);
+    useEffect(() => {
+        if (progress && bar.current) {
+            bar.current.style.width = `${progress * 100}%`;
+        }
+    }, []);
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { className: `--progress flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
+});
+export default ProgressBar;

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

@@ -0,0 +1,9 @@
+import { PROGRESS } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type ProgressBarProps = BoxProps & {
+    progress?: number;
+    type?: PROGRESS;
+};
+export interface ProgressHandler {
+    setWidth?: (w: number) => void;
+}

package/dist/cjs/src/comps/ProgressBar/types.js

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

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

@@ -0,0 +1,8 @@
+import { RadioHandler } from "./types";
+import { RADIO, Size } from "../../types/enums";
+declare const Radio: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
+    type?: RADIO;
+    size?: Size;
+    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+} & import("react").RefAttributes<RadioHandler>>;
+export default Radio;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import Label from "../Label";
+import { RADIO, Size } from "../../types/enums";
+import Input from "../Input";
+import Box from "../Box";
+const Radio = forwardRef((props, ref) => {
+    const { children, className, name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
+    const [checked, _setChecked] = useState(defaultCheck || false);
+    const bRef = useRef(null);
+    return _jsxs(Label, { className: `${className} --${(type || RADIO.Default).toLowerCase()} --radio${!type || type == RADIO.Default ? `` : `card`} --${size || Size.Default} flex aic rel`.trim(), ...pops, children: [_jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `rd`, type: `radio`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+                    onChange && onChange(e.target.checked, value || `cb`);
+                    _setChecked(e.target.checked);
+                } }), _jsx(Box, { className: `--dot rel`, children: _jsx(Box, { className: `--rod abs abc` }) }), _jsx(Box, { className: `--value`, children: children })] });
+});
+export default Radio;

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

@@ -0,0 +1,11 @@
+import { Props } from "../../types";
+import { RADIO, Size } from "../../types/enums";
+export type RadioProps = Props<"input"> & {
+    type?: RADIO;
+    size?: Size;
+    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+};
+export interface RadioHandler {
+    setChecked: (mode: boolean, triggerChange?: boolean) => void;
+    toggle: (triggerChange?: boolean) => void;
+}

package/dist/cjs/src/comps/Radio/types.js

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

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

@@ -0,0 +1,18 @@
+import { InputProps } from '../Input';
+import { Size } from '../../types/enums';
+export type SearchProps = InputProps & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+};
+declare const Search: 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;
+} & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
+import { Size } from '../../types/enums';
+const Search = forwardRef((props, ref) => {
+    const { animate, withStyle, onChange, ...pops } = props;
+    const { style } = useBase(pops);
+    const { className: searchStyle } = useBase({ as: withStyle || `` });
+    const [query, setQuery] = useState(``);
+    const innerRef = useRef(null);
+    if (`type` in props) {
+        delete props[`type`];
+    }
+    const handleChange = (e) => {
+        setQuery(e.target.value);
+        onChange?.(e.target.value);
+    };
+    const handleSubmit = (e) => {
+        e?.preventDefault();
+        if (query.trim() !== ``) {
+            setQuery(``);
+            onChange?.(``);
+            if (innerRef.current) {
+                innerRef.current.value = ``;
+            }
+        }
+        // onSubmit?.(query)
+    };
+    useEffect(() => { }, []);
+    return _jsxs(Box, { style: style, className: `--search --${props.size || Size.Small} flex aic rel ${searchStyle}`.trim(), children: [_jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.size || Size.Small}`, ...pops }), _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc abs`, size: props.size || Size.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
+});
+export default Search;

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

@@ -0,0 +1,28 @@
+import { Segment } from "./types";
+import { BoxProps } from "../Box";
+import { Size } from "../../types/enums";
+/**
+ * `SelectTabs` component is a segmented control that allows switching between segments.
+ *
+ * @component
+ * @param {SegmentProps} props - Props for the segmented control component.
+ * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
+ * @returns {JSX.Element} The rendered segmented control.
+ *
+ * @example
+ * // Usage example
+ * const segments = [
+ *   { index: 0, label: "Home", icon: "home_icon" },
+ *   { index: 1, label: "Profile", icon: "profile_icon" },
+ *   { index: 2, label: "Settings", icon: "settings_icon" }
+ * ];
+ *
+ * <SelectTabs selected={1} items={segments} />
+ */
+declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
+    size?: Size;
+    selected?: number;
+    onSwitch?: (segment: Segment) => void;
+    items: Segment[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Segmented;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useBase } from "../../hooks";
+import Box from "../Box";
+import SegmentItem from "./item";
+import { Size } from "../../types/enums";
+/**
+ * `SelectTabs` component is a segmented control that allows switching between segments.
+ *
+ * @component
+ * @param {SegmentProps} props - Props for the segmented control component.
+ * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
+ * @returns {JSX.Element} The rendered segmented control.
+ *
+ * @example
+ * // Usage example
+ * const segments = [
+ *   { index: 0, label: "Home", icon: "home_icon" },
+ *   { index: 1, label: "Profile", icon: "profile_icon" },
+ *   { index: 2, label: "Settings", icon: "settings_icon" }
+ * ];
+ *
+ * <SelectTabs selected={1} items={segments} />
+ */
+const Segmented = forwardRef((props, ref) => {
+    const { animate, items, selected, size, onSwitch, ...pops } = props;
+    const [_selected, setSelected] = useState(selected || 0);
+    const { className, style, rest } = useBase(pops);
+    const _tab = useRef(null);
+    const _segmented = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    /**
+     * Handles selection of a segment.
+     *
+     * @param {number} index - The index of the selected segment.
+     * @param {number} width - The width of the selected segment.
+     * @param {number} x - The x-coordinate of the selected segment.
+     */
+    const handleSelect = (index, width, x, meta, force) => {
+        // console.log(selected, _selected, index, mounted)
+        if (force || _selected != index) {
+            setSelected(index);
+            if (onSwitch)
+                onSwitch(meta);
+        }
+        if (_tab.current) {
+            const _sp = _segmented.current?.getBoundingClientRect();
+            _tab.current.style.setProperty(`--w`, `${width}px`);
+            _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
+        }
+    };
+    useEffect(() => {
+        if (selected !== undefined && selected != _selected) {
+            setSelected(selected);
+        }
+    }, [selected, _selected]);
+    return _jsxs(Box, { suppressHydrationWarning: true, ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${size || Size.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
+                    ...item,
+                    index: i
+                } }, `segment-${item.label}-${i}`))] });
+});
+export default Segmented;

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

@@ -0,0 +1,3 @@
+import { SegmentItemProps } from "./types";
+declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SegmentItem;