@zuzjs/ui 0.7.8 → 0.8.0

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

@@ -5,7 +5,7 @@ declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: ALERT;
     icon?: string;
     iconSize?: number;
-    message?: string;
-    title: string;
+    message?: string | import("react").ReactNode;
+    title: string | import("react").ReactNode;
 } & import("react").RefAttributes<AlertHandler>>;
 export default Alert;

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

@@ -8,7 +8,7 @@ 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 })] })] });
+    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 ? { fontSize: 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 })] })] });
 });
 Alert.displayName = `Alert`;
 export default Alert;

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

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

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { Props } from "../../types";
 export interface BoxProps extends Partial<Props<`div`>> {
     name?: string;
 }
-declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

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

@@ -4,18 +4,20 @@ import { useBase } from "../../hooks";
 const Box = forwardRef((props, ref) => {
     const { style, withEditor, ...pops } = props;
     const { style: _style, className, rest } = useBase(pops);
-    const handleInternalClick = (e) => {
-        // if ( withEditor && isBrowser ) {
-        //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
-        //     //     detail: {
-        //     //         compName: 'Box',
-        //     //         target: e.target,
-        //     //         props
-        //     //     }
-        //     // }))
-        // }
-    };
-    return _jsx("div", { ref: ref, onClick: handleInternalClick, className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
+    // const handleInternalClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    //     // if ( withEditor && isBrowser ) {
+    //     //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
+    //     //     //     detail: {
+    //     //     //         compName: 'Box',
+    //     //     //         target: e.target,
+    //     //     //         props
+    //     //     //     }
+    //     //     // }))
+    //     // }
+    // }
+    return _jsx("div", { ref: ref, 
+        // onClick={handleInternalClick}
+        className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,
             ...(style || {})
         }, ...rest });

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

@@ -1,7 +1,7 @@
 import { Size, SPINNER } from '../../types/enums';
 import { ButtonState } from './types';
 declare const Button: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof import("../..").ZuzProps> & {
-    icon?: string;
+    icon?: string | null;
     iconSize?: Size;
     withLabel?: boolean;
     spinner?: SPINNER;

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

@@ -1,7 +1,7 @@
 import { Props } from "../../types";
 import { Size, SPINNER, Variant } from "../../types/enums";
 export type ButtonProps = Props<`button`> & {
-    icon?: string;
+    icon?: string | null;
     iconSize?: Size;
     withLabel?: boolean;
     spinner?: SPINNER;

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

@@ -1,4 +1,5 @@
 import { ColorScheme } from "../../hooks/useColorScheme";
-import { SegmentProps } from "../Segmented/types";
-declare const ColorScheme: import("react").ForwardRefExoticComponent<Omit<SegmentProps, "items"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const ColorScheme: import("react").ForwardRefExoticComponent<Omit<import("..").SegmentProps, "items"> & {
+    type?: "switch" | "toggle" | "system";
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default ColorScheme;

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

@@ -1,24 +1,39 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { useDelayed } from "../..";
+import { forwardRef, useCallback, useMemo } from "react";
+import { Button, useBase, useDelayed, Variant } from "../..";
 import { useColorScheme } from "../../hooks/useColorScheme";
 import Segmented from "../Segmented";
 import SVGIcons from "../svgicons";
 const ColorScheme = forwardRef((props, ref) => {
+    const { type, ...pops } = props;
     const mounted = useDelayed();
     const { colorScheme, setColorScheme } = useColorScheme();
-    const items = useMemo(() => [
-        { tag: `light`, index: 0, label: "", icon: SVGIcons.colorSchemeLight },
-        { tag: `system`, index: 1, label: "", icon: SVGIcons.colorSchemeSystem },
-        { tag: `dark`, index: 2, label: "", icon: SVGIcons.colorSchemeDark },
-    ], []);
+    const loopSchemes = useCallback(() => {
+        setColorScheme(colorScheme == `dark` ? `light`
+            : colorScheme == `light` ? `system`
+                : `dark`);
+    }, [colorScheme]);
+    const { className, style } = useBase(pops);
+    const items = useMemo(() => type == `system` ?
+        [
+            { tag: `light`, index: 0, label: "", icon: SVGIcons.colorSchemeLight },
+            { tag: `system`, index: 1, label: "", icon: SVGIcons.colorSchemeSystem },
+            { tag: `dark`, index: 2, label: "", icon: SVGIcons.colorSchemeDark },
+        ]
+        :
+            [
+                { tag: `light`, index: 0, label: "", icon: SVGIcons.colorSchemeLight },
+                { tag: `dark`, index: 2, label: "", icon: SVGIcons.colorSchemeDark },
+            ], []);
     const selected = useMemo(() => [`light`, `system`, `dark`].indexOf(colorScheme), [colorScheme]);
     if (!mounted || selected == -1)
         return null;
-    return _jsx(Segmented, { className: `--color-scheme`, onSwitch: ({ tag }) => {
+    return type == `system` || type == `switch` ? _jsx(Segmented, { className: `--color-scheme --${type}`, onSwitch: ({ tag }) => {
             setColorScheme(tag);
-        }, selected: selected, items: items, ...props });
+        }, selected: selected, items: items, ...pops }) : _jsx(Button, { onClick: loopSchemes, style: style, as: `--color-scheme-switch --${pops.variant || Variant.Small} ${className}`.trim(), children: colorScheme == `system` ? SVGIcons.colorSchemeSystem
+            : colorScheme == `light` ? SVGIcons.colorSchemeLight
+                : SVGIcons.colorSchemeDark });
 });
 ColorScheme.displayName = `ColorScheme`;
 export default ColorScheme;

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

@@ -0,0 +1,4 @@
+import { SegmentProps } from "../..";
+export type ColorSchemeProps = Omit<SegmentProps, `items`> & {
+    type?: "switch" | "toggle" | "system";
+};

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

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

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

@@ -5,7 +5,6 @@ import { useAnchorPosition, useBase } from "../../hooks";
 import { TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import MenuItem from "./item";
-// import { dynamicObject } from "../../types";
 const ContextMenu = forwardRef((props, ref) => {
     const { as, offsetX, offsetY, parent, items: _items, ...pops } = props;
     const { className, style, rest } = useBase(pops);
@@ -30,7 +29,7 @@ const ContextMenu = forwardRef((props, ref) => {
             ...style,
             top: position.top,
             left: position.left
-        }, animate: {
+        }, fx: {
             from: { opacity: 0, y: 20 },
             to: { opacity: 1, y: 0 },
             curve: TRANSITION_CURVES.EaseInOut,

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

@@ -12,7 +12,7 @@ const Cover = forwardRef((props, ref) => {
     if (`when` in props && props.when == false) {
         return null;
     }
-    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous`, style: {
+    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
         }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });

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

@@ -0,0 +1,4 @@
+declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
+    items: import("./types").CrumbItem[];
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+export default Crumb;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import Button from "../Button";
+import Icon from "../Icon";
+import List from "../List";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+const Crumb = forwardRef((props, ref) => {
+    const { items } = props;
+    return _jsx(List, { ref: ref, className: `--crumb flex aic`, direction: `rows`, seperator: _jsx(Box, { as: `--crumb-chevron`, children: SVGIcons.chevronRightOutline }), items: items.map((item, index, _items) => _jsxs(Button, { onClick: () => item.action?.(), className: `--crumb-item`, disabled: !_items[index + 1], children: [item.icon && _jsx(Icon, { as: `--crumb-icon`, name: item.icon }), _jsx(Text, { as: `--crumb-label`, children: item.label })] })) });
+});
+export default Crumb;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export type CrumbItem = {
+    ID?: string;
+    label: string;
+    icon?: string | ReactNode;
+    action?: () => void;
+};
+export type CrumbProps = BoxProps & {
+    items: CrumbItem[];
+};

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

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

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

@@ -1,28 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { bindKey } from "../../funs";
+import { useBase, useShortcuts } from "../../hooks";
 import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
-    const { as, from, speed, children, prerender, onClose, ...pops } = props;
+    const { from, speed, children, prerender, onClose, ...pops } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
     const [content, setContent] = useState(children);
+    const { className, style, rest } = useBase(pops);
+    useShortcuts([
+        { keys: [KeyCode.Escape], callback: () => {
+                if (visible) {
+                    onClose?.();
+                    setVisible(false);
+                }
+            } }
+    ]);
     useEffect(() => {
         setContent(children);
     }, [children]);
-    useEffect(() => {
-        bindKey(KeyCode.Escape, () => {
-            if (visible) {
-                onClose?.();
-                setVisible(false);
-            }
-        });
-    }, []);
-    const style = useMemo(() => {
+    const _style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
                 return { from: { x: `-100vh` }, to: { x: 0 } };
@@ -52,13 +53,13 @@ const Drawer = forwardRef((props, ref) => {
                         onClose?.();
                         setVisible(false);
                     }
-                }, when: visible }), _jsxs(Box, { ref: divRef, className: `--drawer flex cols --${from ? from.toLowerCase() : `left`} fixed`, fx: {
-                    from: { ...style.from, opacity: 0 },
-                    to: { ...style.to, opacity: 1 },
+                }, when: visible }), _jsxs(Box, { ref: divRef, style: style, className: `--drawer flex cols ${className}  --${from ? from.toLowerCase() : `left`} fixed`, fx: {
+                    from: { ..._style.from, opacity: 0 },
+                    to: { ..._style.to, opacity: 1 },
                     when: visible,
                     curve: TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
-                }, ...pops, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
+                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
 });
 Drawer.displayName = `Drawer`;
 export default Drawer;

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

@@ -1,48 +1,6 @@
 import { dynamicObject } from "../../types";
-import { SPINNER } from "../../types/enums";
-import { BoxProps } from "../Box";
 import { SheetHandler } from "../Sheet";
-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;
-}
+import { FormHandler } from "./types";
 /**
  * {@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.
@@ -52,32 +10,18 @@ export interface FormHandler {
  * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
  * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
  */
-declare const Form: import("react").ForwardRefExoticComponent<BoxProps & {
-    /** Name of form, will be appended to --form-{name} in className
-     * whitespace will be replaced with dash (-)
-    */
+declare const Form: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     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 */
+    spinner?: import("../..").SPINNER;
     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;

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.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";

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';

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';

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<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

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

@@ -1,17 +1,17 @@
-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`;

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,9 @@ 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`;

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;
 };