@zuzjs/ui 0.7.7 → 0.7.9

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import Box from "../Box";
+import { addPropsToChildren, isEmail, withPost } from "../../funs";
 import { useBase } from "../../hooks";
-import Sheet, { isSheetHandler } from "../Sheet";
-import Cover from "../Cover";
 import { FORMVALIDATION, SHEET } from "../../types/enums";
-import { addPropsToChildren, isEmail, withPost } from "../../funs";
+import Box from "../Box";
+import Cover from "../Cover";
+import Sheet, { isSheetHandler } from "../Sheet";
 /**
  * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
  * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
@@ -89,15 +89,12 @@ const Form = forwardRef((props, ref) => {
             switch (_with.toUpperCase()) {
                 case FORMVALIDATION.Email:
                     return isEmail(el.value);
-                    break;
                 case FORMVALIDATION.Uri:
                     console.log(`Add FORMVALIDATION.Uri`);
                     return false;
-                    break;
                 case FORMVALIDATION.Password:
                     console.log(`Add FORMVALIDATION.Password`);
                     return false;
-                    break;
                 case FORMVALIDATION.MatchField:
                     const [__, field] = el.getAttribute(`with`).split(`@`);
                     const _el = document.querySelector(`[name=${field.trim()}]`);
@@ -264,4 +261,5 @@ const Form = forwardRef((props, ref) => {
     useEffect(_init, []);
     return _jsxs(Box, { ref: innerRef, style: style, className: `--form flex rel ${className} ${name ? `--form-${name.replace(/\s+/g, `-`)}` : ``}`, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], children: [_jsx(Sheet, { ref: sheet, as: `--sheet-form` }), !isSheetHandler(cover) && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), buildChildren] });
 });
+Form.displayName = `Form`;
 export default Form;

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

@@ -0,0 +1,43 @@
+import { dynamicObject, SheetHandler, SPINNER } from "../..";
+import { BoxProps } from "../Box";
+export type FormProps = BoxProps & {
+    /** Name of form, will be appended to --form-{name} in className
+     * whitespace will be replaced with dash (-)
+    */
+    name?: string;
+    /** The URL to which the form data is submitted */
+    action?: string;
+    /** List of error messages for form validation */
+    errors?: dynamicObject;
+    /** Spinner properties for loading indicator */
+    spinner?: SPINNER;
+    /** Additional data to include with form submission */
+    withData?: dynamicObject;
+    /** Handler function called before form submission with validated form data */
+    beforeSubmit?: (data: FormData | dynamicObject) => void;
+    /** Handler function called on form submission with validated form data */
+    onSubmit?: (data: FormData | dynamicObject) => void;
+    /** Callback triggered upon successful form submission */
+    onSuccess?: (data: dynamicObject) => void;
+    /** Callback triggered when form submission encounters an error */
+    onError?: (error: any) => void;
+    /** Cover properties to display loading or processing message */
+    cover?: {
+        /** Background color of the loading cover */
+        color?: string;
+        /** Message displayed during loading */
+        message?: string;
+    } | SheetHandler;
+    resetOnSuccess?: boolean;
+};
+/**
+ * Exposes control methods for the Form component, such as setting loading states or hiding errors.
+ */
+export interface FormHandler {
+    /** Sets the loading state of the form */
+    setLoading: (mode: boolean) => void;
+    /** Hides any currently displayed error message */
+    hideError: () => void;
+    /** Resets the form to its initial state */
+    init: () => void;
+}

package/dist/cjs/comps/Form/types.js

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

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { BoxProps } from "../Box";
 import { Size } from "../../types/enums";
+import { BoxProps } from "../Box";
 export type IconProps = Omit<BoxProps, `name`> & {
     name: string | ReactNode;
     pathCount?: number;

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

@@ -1,12 +1,12 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
-import Span from "../Span";
 import { Size } from "../../types/enums";
+import Span from "../Span";
 const Icon = forwardRef((props, ref) => {
     const { name, pathCount, size, ...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}`)) });
 });
+Icon.displayName = `Icon`;
 export default Icon;

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
@@ -8,4 +7,5 @@ const Image = forwardRef((props, ref) => {
         return null;
     return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
 });
+Image.displayName = `Image`;
 export default Image;

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

@@ -12,4 +12,5 @@ const Input = forwardRef((props, ref) => {
     };
     return _jsx("input", { className: `--input ${size || variant ? `--${size || variant}` : ``} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
 });
+Input.displayName = `Input`;
 export default Input;

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

@@ -0,0 +1,8 @@
+import { Variant } from "../../types/enums";
+import { KeyboardKey } from "./types";
+declare const KeyBoardKeys: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    keys: KeyboardKey | KeyboardKey[] | import("./types").KeyCombination;
+    children?: import("react").ReactNode;
+    variant?: Variant;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default KeyBoardKeys;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Variant } from "../../types/enums";
+import Box from "../Box";
+import Span from "../Span";
+import { isKeyCombination, KeysLabelMap, KeysMap } from "./types";
+const KeyBoardKeys = forwardRef(({ children, keys, variant }, ref) => {
+    const _meta = useMemo(() => {
+        if (isKeyCombination(keys)) {
+            let c = null;
+            let ks = String(keys).split(`+`)
+                .reduce((pa, ca, i, nxt) => {
+                if (nxt[i + 1]) {
+                    pa.push(ca);
+                }
+                else
+                    c = ca.toUpperCase();
+                return pa;
+            }, []);
+            return {
+                keys: ks,
+                children: c
+            };
+        }
+        return {
+            keys,
+            children: String(children).toUpperCase()
+        };
+    }, [keys]);
+    return _jsxs(Box, { as: `--keyboard-keys --${variant || Variant.Small} flex aic`, children: [(Array.isArray(_meta.keys) ? _meta.keys : [_meta.keys]).map((k) => _jsx("abbr", { title: KeysLabelMap[k], children: KeysMap[k] }, k)), _jsx(Span, { children: _meta?.children ?? children })] });
+});
+KeyBoardKeys.displayName = `ZuzUI.KeyboardKeys`;
+export default KeyBoardKeys;

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

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Variant } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type KeyboardKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export type KeyCombination = `${KeyboardKey}+${KeyboardKey | string}`;
+export declare const isKeyCombination: (value: KeyboardKey | KeyboardKey[] | KeyCombination) => value is KeyCombination;
+export declare const KeysMap: Record<KeyboardKey, string>;
+export declare const KeysLabelMap: Record<KeyboardKey, string>;
+export type KeyboardKeyProps = BoxProps & {
+    keys: KeyboardKey | KeyboardKey[] | KeyCombination;
+    children?: ReactNode;
+    variant?: Variant;
+};

package/dist/cjs/comps/KeyboardKeys/types.js

@@ -0,0 +1,51 @@
+export const isKeyCombination = (value) => {
+    return typeof value === "string" && value.includes("+");
+};
+export const KeysMap = {
+    command: "⌘",
+    shift: "⇧",
+    ctrl: "⌃",
+    option: "⌥",
+    enter: "↵",
+    delete: "⌫",
+    escape: "⎋",
+    tab: "⇥",
+    capslock: "⇪",
+    up: "↑",
+    right: "→",
+    down: "↓",
+    left: "←",
+    pageup: "⇞",
+    pagedown: "⇟",
+    home: "↖",
+    end: "↘",
+    help: "?",
+    space: "␣",
+    fn: "Fn",
+    win: "⌘",
+    alt: "⌥",
+};
+export const KeysLabelMap = {
+    command: "Command",
+    shift: "Shift",
+    ctrl: "Control",
+    option: "Option",
+    enter: "Enter",
+    delete: "Delete",
+    escape: "Escape",
+    tab: "Tab",
+    capslock: "Caps Lock",
+    up: "Up",
+    right: "Right",
+    down: "Down",
+    left: "Left",
+    pageup: "Page Up",
+    pagedown: "Page Down",
+    home: "Home",
+    end: "End",
+    help: "Help",
+    space: "Space",
+    fn: "Fn",
+    win: "Win",
+    alt: "Alt",
+};

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

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

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

@@ -1,7 +1,10 @@
 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;
+    variant?: import("../..").Variant;
     items: import("./types").ListItem[];
+    direction?: "cols" | "rows";
+    seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

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

@@ -1,17 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { items, size, direction, seperator, 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(),
+        className: `--list --${size || Size.Small} flex ${direction ?? `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}`))
+        children: items.map((item, index, _items) => _jsxs(_Fragment, { children: [_jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`), seperator && _items[index + 1] ? _jsx("li", { className: `--list-seperator`, children: seperator }) : null] }))
     });
 });
+List.displayName = `List`;
 export default List;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Props } from "../../types";
-import { Size } from "../../types/enums";
+import { Size, Variant } from "../../types/enums";
 import { animationProps } from "../../types/interfaces";
 export type ListItemObject = {
     icon?: ReactNode;
@@ -13,6 +13,9 @@ export type ListItemObject = {
 export type ListItem = Props<`li`> & (ReactNode | ListItemObject);
 export type ListProps = Props<`ul` | `ol`> & {
     size?: Size;
+    variant?: Variant;
     items: ListItem[];
+    direction?: "cols" | "rows";
+    seperator?: ReactNode;
     ol?: boolean;
 };

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

@@ -1,16 +1,14 @@
 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 { forwardRef } from "react";
 import { useNetworkStatus } from "../../hooks";
+import { ALERT, Size, TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
 import SVGIcons from "../svgicons";
+import Text from "../Text";
 const NetworkManager = forwardRef((props, ref) => {
     const isOnline = useNetworkStatus();
     const { onlineMessage, offlineMessage, size } = props;
-    useEffect(() => {
-    }, []);
-    return _jsxs(Box, { animate: {
+    return _jsxs(Box, { fx: {
             from: { x: `-50%`, y: 200, opacity: 0 },
             to: { x: `-50%`, y: 0, opacity: 1 },
             when: isOnline == false,
@@ -19,4 +17,5 @@ const NetworkManager = forwardRef((props, ref) => {
             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` })] });
 });
+NetworkManager.displayName = `ZuzUI.NetWorkManager`;
 export default NetworkManager;

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

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

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

@@ -7,7 +7,7 @@ import Box from "../Box";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
 import { PaginationStyle } from "./types";
-const Pagination = forwardRef((props, _ref) => {
+const Pagination = forwardRef((props, ref) => {
     const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, hash, loading, seperator, renderOnZeroPageCount, onPageChange, ...pops } = props;
     const _hashKey = useMemo(() => toHash(numberInRange(4, 8)), []);
     const _hash = useCallback((input) => `${toHash(input, hash || 6, _hashKey)}${seperator || ``}${_hashKey}`, [_hashKey]);
@@ -54,9 +54,10 @@ const Pagination = forwardRef((props, _ref) => {
     }, [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 : [{ id: 1, label: 1 }, { id: -1, label: _breakLabel }]).map((page, index, items) => _jsx(Button, { disabled: page.id == -1 || getPageValue(_currentPage) == +page.label, className: (`string` == typeof page ? page : page.label) == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => handlePage(page), children: `string` == typeof page ? page : page.label }, `--pg-${index}-${page.id}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
+    return _jsxs(Box, { ref: ref, 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 : [{ id: 1, label: 1 }, { id: -1, label: _breakLabel }]).map((page, index, items) => _jsx(Button, { disabled: page.id == -1 || getPageValue(_currentPage) == +page.label, className: (`string` == typeof page ? page : page.label) == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => handlePage(page), children: `string` == typeof page ? page : page.label }, `--pg-${index}-${page.id}`)) }), _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({ id: hash ? _hash(getPageValue(_currentPage) - 1) : getPageValue(_currentPage) - 1, label: getPageValue(_currentPage) - 1 }), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == getPageValue(pages[pages.length - 1]), onClick: (ev) => handlePage({ id: hash ? _hash(getPageValue(_currentPage) + 1) : getPageValue(_currentPage) + 1, label: getPageValue(_currentPage) + 1 }), children: SVGIcons.chevronRightOutline })] })] });
 });
+Pagination.displayName = `Pagination`;
 export default Pagination;

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

@@ -2,9 +2,9 @@
 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 Input from '../Input';
 import SVGIcons from '../svgicons';
 const Password = forwardRef((props, ref) => {
     const { ...pops } = props;
@@ -15,4 +15,5 @@ const Password = forwardRef((props, ref) => {
     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 })] });
 });
+Password.displayName = `Password`;
 export default Password;

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

@@ -2,8 +2,8 @@
 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';
+import Input from '../Input';
 const PinInput = forwardRef((props, ref) => {
     const { size, length, mask, ...pops } = props;
     const inputs = useRef([]);
@@ -39,4 +39,5 @@ const PinInput = forwardRef((props, ref) => {
                 inputs.current[i] = el;
             }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
 });
+PinInput.displayName = `PinInput`;
 export default PinInput;

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

@@ -19,4 +19,5 @@ const ProgressBar = forwardRef((props, ref) => {
     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` }) });
 });
+ProgressBar.displayName = `ProgressBar`;
 export default ProgressBar;

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

@@ -15,4 +15,5 @@ const Radio = forwardRef((props, _ref) => {
                     _setChecked(e.target.checked);
                 } }), _jsx(Box, { className: `--dot rel`, children: _jsx(Box, { className: `--rod abs abc` }) }), _jsx(Box, { className: `--value`, children: children })] });
 });
+Radio.displayName = `Radio`;
 export default Radio;

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

@@ -0,0 +1,5 @@
+declare const ScrollView: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    style?: import("react").CSSProperties;
+    speed?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default ScrollView;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase, useScrollbar } from "../../hooks";
+import Box from "../Box";
+const ScrollView = forwardRef((props, ref) => {
+    const { speed, style: _style, ...pops } = props;
+    const { rootRef, containerRef, thumbY, thumbX, onScrollY, onScrollX } = useScrollbar();
+    const { style, className, rest } = useBase(pops);
+    // useEffect(() => { }, [])
+    return _jsxs(Box, { ref: rootRef, className: className.trim(), as: `--scrollview rel`, children: [_jsx(Box, { as: `--scroll-content`, ref: containerRef, style: _style || {}, children: rest.children }), _jsx(Box, { as: `--scroll-track --track-y abs`, children: _jsx(Box, { as: `--scroll-thumb abs`, ref: thumbY, onMouseDown: onScrollY }) }), _jsx(Box, { as: `--scroll-track --track-x abs`, children: _jsx(Box, { as: `--scroll-thumb abs`, ref: thumbX, onMouseDown: onScrollX }) })] });
+});
+ScrollView.displayName = `ZuzUI.ScrollView`;
+export default ScrollView;

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+import { BoxProps } from "../Box";
+export type ScrollViewProps = BoxProps & {
+    style?: CSSProperties;
+    speed?: number;
+};

package/dist/cjs/comps/ScrollView/types.js

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

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

@@ -1,18 +1,15 @@
-import { InputProps } from '../Input';
-import { Size } from '../../types/enums';
-export type SearchProps = InputProps & {
-    onSubmit?: (value: string) => void;
-    onChange?: (value: string) => void;
-    withStyle?: string;
-};
+import { Variant } from '../../types/enums';
+import { SearchHandler } from './types';
 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;
+    size?: import("../..").Size;
+    variant?: Variant;
     with?: import("../..").FORMVALIDATION;
 } & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;
     withStyle?: string;
-} & import("react").RefAttributes<HTMLInputElement>>;
+    shortcut?: import("..").KeyCombination;
+    reverse?: boolean;
+} & import("react").RefAttributes<SearchHandler>>;
 export default Search;

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

@@ -1,16 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useBase } from '../../hooks';
-import Input from '../Input';
+import { Variant } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
+import Input from '../Input';
+import KeyBoardKeys from '../KeyboardKeys';
 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 { fx, animate, withStyle, as, reverse, onChange, ...pops } = props;
+    const { style, className } = useBase({ as: props.as });
+    // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
     const [query, setQuery] = useState(``);
     const innerRef = useRef(null);
     if (`type` in props) {
@@ -31,7 +32,11 @@ const Search = forwardRef((props, ref) => {
         }
         // onSubmit?.(query)
     };
+    useImperativeHandle(ref, () => ({
+        focus: () => innerRef.current?.focus()
+    }));
     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 })] });
+    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
 });
+Search.displayName = `Search`;
 export default Search;

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

@@ -0,0 +1,12 @@
+import { KeyCombination } from "../..";
+import { InputProps } from "../Input";
+export type SearchProps = InputProps & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+    shortcut?: KeyCombination;
+    reverse?: boolean;
+};
+export interface SearchHandler {
+    focus: () => void;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { Size } from "../../types/enums";
+import { Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { Segment } from "./types";
 /**
@@ -20,7 +20,8 @@ import { Segment } from "./types";
  * <SelectTabs selected={1} items={segments} />
  */
 declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
-    size?: Size;
+    size?: import("../..").Size;
+    variant?: Variant;
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];

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

@@ -1,8 +1,8 @@
-"use client";
+'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 { Size } from "../../types/enums";
+import { Variant } from "../../types/enums";
 import Box from "../Box";
 import SegmentItem from "./item";
 /**
@@ -24,7 +24,7 @@ import SegmentItem from "./item";
  * <SelectTabs selected={1} items={segments} />
  */
 const Segmented = forwardRef((props, ref) => {
-    const { animate, fx, items, selected, size, onSwitch, ...pops } = props;
+    const { animate, fx, items, selected, size, variant, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
@@ -38,7 +38,7 @@ const Segmented = forwardRef((props, ref) => {
      */
     const handleSelect = (index, width, x, meta, force) => {
         // console.log(selected, _selected, index, mounted)
-        if (force || _selected != index) {
+        if (force || (_selected != index && _selected != -2)) {
             setSelected(index);
             if (onSwitch)
                 onSwitch(meta);
@@ -54,9 +54,10 @@ const Segmented = forwardRef((props, ref) => {
             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: {
+    return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.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}`))] });
 });
+Segmented.displayName = `ZuzUI.SelectTabs`;
 export default Segmented;