@zuzjs/ui 0.7.7 → 0.7.8

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

@@ -2,12 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import Box from "../Box";
+import Button from "../Button";
 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 })] });
 });
+Accordion.displayName = `Accordion`;
 export default Accordion;

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

@@ -1,6 +1,6 @@
+import { Position } from "../../types/enums";
 import { BoxProps } from "../Box";
 import { ActionBarHandler } from "./types";
-import { Position } from "../../types/enums";
 /**
  * ActionBar renders a list of buttons with tooltips.
  *

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

@@ -1,10 +1,10 @@
 "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";
+import Box from "../Box";
+import ActionItem from "./item";
 /**
  * ActionBar renders a list of buttons with tooltips.
  *
@@ -59,4 +59,5 @@ const ActionBar = forwardRef((props, ref) => {
             `${!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, `-`)}`)) }) })] });
 });
+ActionBar.displayName = `ActionBar`;
 export default ActionBar;

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

@@ -1,6 +1,6 @@
-import { AlertHandler } from "./types";
 import { ALERT } from "../../types/enums";
 import { BoxProps } from "../Box";
+import { AlertHandler } from "./types";
 declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: ALERT;
     icon?: string;

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

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

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

@@ -171,4 +171,5 @@ const AutoComplete = forwardRef((props, ref) => {
                     }
                 })) })] });
 });
+AutoComplete.displayName = `AutoComplete`;
 export default AutoComplete;

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

@@ -1,10 +1,10 @@
 "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 { AVATAR, Size } from "../../types/enums";
 import Box from "../Box";
+import Image from "../Image";
 import Text from "../Text";
 const Avatar = forwardRef((props, ref) => {
     const { src, size, variant, type, crossOrigin, referrerPolicy, animate, as, alt, color, ...pops } = props;
@@ -33,4 +33,5 @@ const Avatar = forwardRef((props, ref) => {
             ...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() }) });
 });
+Avatar.displayName = `Avatar`;
 export default Avatar;

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
@@ -21,4 +20,5 @@ const Box = forwardRef((props, ref) => {
             ...(style || {})
         }, ...rest });
 });
+Box.displayName = `Box`;
 export default Box;

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

@@ -1,5 +1,5 @@
-import { ButtonState } from './types';
 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;
     iconSize?: Size;

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

@@ -2,14 +2,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
+import { Size, SPINNER } from '../../types/enums';
 import Icon from '../Icon';
 import Span from '../Span';
-import { ButtonState } from './types';
 import Spinner from '../Spinner';
-import { Size, SPINNER } from '../../types/enums';
+import { ButtonState } from './types';
 const Button = forwardRef((props, ref) => {
     const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, disabled, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    return _jsxs("button", { className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, disabled: state == ButtonState.Loading || props.skeleton?.enabled || disabled, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, type: spinner || SPINNER.Simple }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
+    return _jsxs("button", { className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim().replace(/\s+/g, ' '), style: style, ref: ref, disabled: state == ButtonState.Loading || props.skeleton?.enabled || disabled, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, type: spinner || SPINNER.Simple }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
 });
+Button.displayName = `Button`;
 export default Button;

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

@@ -1,8 +1,8 @@
-import { CHECKBOX, Size, Variant } from "../../types/enums";
+import { CHECKBOX, Variant } from "../../types/enums";
 import { CheckboxHandler } from "./types";
 declare const CheckBox: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: CHECKBOX;
-    size?: Size;
+    size?: import("../..").Size;
     variant?: Variant;
     onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;

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

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { CHECKBOX, Variant } from "../../types/enums";
-import Label from "../Label";
 import Input from "../Input";
+import Label from "../Label";
 import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
     const { name, required, type, value, size, variant, checked: defaultCheck, onSwitch, ...pops } = props;
@@ -31,4 +31,5 @@ const CheckBox = forwardRef((props, ref) => {
                     _setChecked(e.target.checked);
                 } })] });
 });
+CheckBox.displayName = `CheckBox`;
 export default CheckBox;

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

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

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

@@ -1,10 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
+import { useDelayed } from "../..";
+import { useColorScheme } from "../../hooks/useColorScheme";
 import Segmented from "../Segmented";
 import SVGIcons from "../svgicons";
-import { useColorScheme } from "../../hooks/useColorScheme";
 const ColorScheme = forwardRef((props, ref) => {
+    const mounted = useDelayed();
     const { colorScheme, setColorScheme } = useColorScheme();
     const items = useMemo(() => [
         { tag: `light`, index: 0, label: "", icon: SVGIcons.colorSchemeLight },
@@ -12,8 +14,11 @@ const ColorScheme = forwardRef((props, ref) => {
         { tag: `dark`, index: 2, label: "", icon: SVGIcons.colorSchemeDark },
     ], []);
     const selected = useMemo(() => [`light`, `system`, `dark`].indexOf(colorScheme), [colorScheme]);
-    return selected == -1 ? null : _jsx(Segmented, { className: `--color-scheme`, onSwitch: ({ tag }) => {
+    if (!mounted || selected == -1)
+        return null;
+    return _jsx(Segmented, { className: `--color-scheme`, onSwitch: ({ tag }) => {
             setColorScheme(tag);
         }, selected: selected, items: items, ...props });
 });
+ColorScheme.displayName = `ColorScheme`;
 export default ColorScheme;

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import Box from "../Box";
 import { useAnchorPosition, useBase } from "../../hooks";
-import MenuItem from "./item";
 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;
@@ -38,4 +38,5 @@ const ContextMenu = forwardRef((props, ref) => {
             when: visible
         }, ref: targetRef, ...rest, children: items.map((item, index) => _jsx(MenuItem, { ...{ ...item, index } }, `context-${item.label.toLowerCase()}-${index}`)) });
 });
+ContextMenu.displayName = `ContextMenu`;
 export default ContextMenu;

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
+import { Position, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
-import Text from "../Text";
 import Button from "../Button";
-import { Position, TRANSITION_CURVES } from "../../types/enums";
+import Text from "../Text";
 const CookiesConsent = forwardRef((props, ref) => {
     const [accepted, setAccepted] = useState(`wait`);
     const { title, message, acceptLabel, rejectLabel, position } = props;
@@ -25,4 +25,5 @@ const CookiesConsent = forwardRef((props, ref) => {
             delay: accepted == `accepted` ? 0 : 3
         }, as: `--cookie-consent --${accepted} --${position || Position.Left} flex cols`, children: [_jsx(Text, { as: `--title`, children: title || `This site uses cookies` }), _jsx(Text, { as: `--message`, children: message || `We and selected third parties use cookies (or similar technologies) for technical purposes, to enhance and analyze site usage, to support our marketing efforts` }), _jsxs(Box, { as: `--footer flex aic`, children: [_jsx(Button, { onClick: e => handleAction(1), as: `--accept`, children: acceptLabel || `Accept All` }), _jsx(Button, { onClick: e => handleAction(0), as: `--reject`, children: rejectLabel || `Cancel` })] })] });
 });
+CookiesConsent.displayName = `CookiesConsent`;
 export default CookiesConsent;

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

@@ -1,5 +1,5 @@
-import { BoxProps } from "../Box";
 import { SPINNER } from "../../types/enums";
+import { BoxProps } from "../Box";
 export type CoverProps = BoxProps & {
     message?: string;
     spinner?: SPINNER;

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import Box from "../Box";
-import { SPINNER } from "../../types/enums";
 import { useBase } from "../../hooks";
+import { SPINNER } from "../../types/enums";
+import Box from "../Box";
 import Spinner from "../Spinner";
 import Text from "../Text";
 const Cover = forwardRef((props, ref) => {
@@ -17,4 +17,5 @@ const Cover = forwardRef((props, ref) => {
             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` })] });
 });
+Cover.displayName = `Cover`;
 export default Cover;

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

@@ -60,4 +60,5 @@ const Drawer = forwardRef((props, ref) => {
                     duration: speed || .5,
                 }, ...pops, 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/Editor/Timeline/index.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import { DRAG_DIRECTION, SLIDER } from "../../../types/enums";
 import Box from "../../Box";
 import Button from "../../Button";
+import Slider from "../../Slider";
 import SVGIcons from "../../svgicons";
 import Text from "../../Text";
-import Layer from "./layer";
-import Slider from "../../Slider";
-import { DRAG_DIRECTION, SLIDER } from "../../../types/enums";
 import ToolTip from "../../Tooltip";
+import Layer from "./layer";
 const Timeline = forwardRef((props, ref) => {
     const { layers } = props;
     const [selected, setSelected] = useState([]);
@@ -55,4 +55,5 @@ const Timeline = forwardRef((props, ref) => {
                     }
                 }, className: `--cursor abs` })] });
 });
+Timeline.displayName = `Timeline`;
 export default Timeline;

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
-import { EditorMode } from './types';
 import Box from '../Box';
+import { EditorMode } from './types';
 const Editor = forwardRef((props, ref) => {
     const [mode, setMode] = React.useState(EditorMode.Select);
     return _jsx(Box, { as: `--ui-builder rel` });
 });
+Editor.displayName = `Editor`;
 export default Editor;

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

@@ -1,7 +1,6 @@
 import SVGIcons from "../svgicons";
-import { Position } from "../../types/enums";
 declare const Fab: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "icon"> & {
     icon?: string | keyof typeof SVGIcons;
-    position?: `${Position.Top | Position.Bottom}${Position.Left | Position.Right}`;
+    position?: `${import("../..").Position.Top | import("../..").Position.Bottom}${import("../..").Position.Left | import("../..").Position.Right}`;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export default Fab;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Size } from "../../types/enums";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
-import { Size } from "../../types/enums";
 const Fab = forwardRef((props, ref) => {
     const { icon, size, position } = props;
     return _jsx(Button, { className: `--fab fixed --${size || Size.Large} --${position || `bottomright`}`, children: icon || SVGIcons.plus });
 });
+Fab.displayName = `Fab`;
 export default Fab;

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

@@ -3,5 +3,8 @@ export type FilterProps = {
     names?: FILTER[];
     strength?: number;
 };
-declare const Filters: (props: FilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Filters: {
+    (props: FilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Filters;

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

@@ -10,4 +10,5 @@ const Filters = (props) => {
     useEffect(() => { }, [names]);
     return _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", children: _jsx("defs", { children: (names || [FILTER.Gooey]).map(name => filters[name](strength)) }) });
 };
+Filters.displayName = `Filters`;
 export default Filters;

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

@@ -1,7 +1,7 @@
-import { BoxProps } from "../Box";
 import { dynamicObject } from "../../types";
-import { SheetHandler } from "../Sheet";
 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 (-)

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/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

@@ -2,11 +2,12 @@
 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

@@ -8,4 +8,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/Label/index.js

@@ -6,4 +6,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

@@ -3,5 +3,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     size?: Size;
     items: import("./types").ListItem[];
     ol?: boolean;
-} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

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

@@ -14,4 +14,5 @@ const List = forwardRef((props, ref) => {
         children: items.map((item, index) => _jsx(Item, { meta: item }, `list-item-${typeof item == `string` ? String(item) : item.label}-${index}`))
     });
 });
+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

@@ -13,4 +13,5 @@ const Item = (props) => {
     });
     return _jsx("li", { style: style, className: className, ...rest, children: typeof meta == `string` ? meta : label });
 };
+Item.displayName = `ListItem`;
 export default Item;

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

@@ -1,10 +1,10 @@
 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 { 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;
@@ -19,4 +19,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 = `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

@@ -59,4 +59,5 @@ const Pagination = forwardRef((props, _ref) => {
                     `${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/Search/index.d.ts

@@ -1,5 +1,5 @@
-import { InputProps } from '../Input';
 import { Size } from '../../types/enums';
+import { InputProps } from '../Input';
 export type SearchProps = InputProps & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;

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

@@ -2,11 +2,11 @@
 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 { Size } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
+import Input from '../Input';
 import SVGIcons from '../svgicons';
-import { Size } from '../../types/enums';
 const Search = forwardRef((props, ref) => {
     const { animate, withStyle, onChange, ...pops } = props;
     const { style } = useBase(pops);
@@ -34,4 +34,5 @@ const Search = forwardRef((props, ref) => {
     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 })] });
 });
+Search.displayName = `Search`;
 export default Search;

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useBase } from "../../hooks";
@@ -54,9 +53,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 --${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}`))] });
 });
+Segmented.displayName = `SelectTabs`;
 export default Segmented;