@zuzjs/ui 0.7.1 → 0.7.3

package/dist/bin.js

@@ -16,7 +16,8 @@ program
     .option(`-h, --cache`)
     .option(`-e, --cleaned`)
     .option(`-t, --sheet`)
-    .option(`-m, --media`);
+    .option(`-m, --media`)
+    .option(`-s, --dark`);
 program.parse();
 const options = program.opts();
 // extendGlobals()
@@ -112,6 +113,7 @@ const rebuildAll = () => {
         }
         else {
             const mediaQueries = {};
+            let darkQueries = {};
             files.map(f => {
                 // if ( f.endsWith(`header.jsx`) ){
                 const r = rebuild(f);
@@ -122,6 +124,7 @@ const rebuildAll = () => {
                     //  : cssBuilder.Build([r], true).sheet)
                     const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
                     as.push(_built.sheet);
+                    darkQueries = { ...darkQueries, ..._built.darkQueries };
                     Object.keys(_built.mediaQuery).map(mq => {
                         if (!mediaQueries[mq])
                             mediaQueries[mq] = [];
@@ -136,6 +139,7 @@ const rebuildAll = () => {
                 // as.push(r)
             });
             as.push(cssBuilder.buildMediaQueries(mediaQueries));
+            as.push(cssBuilder.buildDarkModeQueries(darkQueries));
         }
         // console.log(as)
         // const { sheet } = new CSS().Build(as, true)

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

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

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

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export type AccordionProps = BoxProps & {
-    message?: string;
+    message?: string | ReactNode;
     title: string | ReactNode | ReactNode[];
 };
 export interface AccordionHandler {

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

@@ -1,9 +1,9 @@
-import { AVATAR, Size } from "../../types/enums";
+import { AVATAR } from "../../types/enums";
 import { AvatarHandler } from "./types";
 declare const Avatar: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../../types").ZuzProps> & {
     type?: AVATAR;
     size?: number;
-    variant?: Size;
+    variant?: import("../../types/enums").Variant;
     src?: string;
     color?: string;
     crossOrigin?: "anonymous" | "use-credentials";

package/dist/comps/Avatar/types.d.ts

@@ -1,9 +1,9 @@
 import { Props } from "../../types";
-import { AVATAR, Size } from "../../types/enums";
+import { AVATAR, Variant } from "../../types/enums";
 export type AvatarProps = Props<"img"> & {
     type?: AVATAR;
     size?: number;
-    variant?: Size;
+    variant?: Variant;
     src?: string;
     color?: string;
     crossOrigin?: 'anonymous' | 'use-credentials';

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

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

package/dist/comps/Button/index.js

@@ -8,11 +8,9 @@ import { ButtonState } from './types';
 import Spinner from '../Spinner';
 import { Size } from '../../types/enums';
 const Button = forwardRef((props, ref) => {
-    const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, ...pops } = props;
+    const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, disabled, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    return _jsxs("button", { 
-        // className={`${reset ? `flex` : `--button ${size ? `--${size}` : ``} flex aic jcc`.trim()} ${icon ? `ico-btn` : ``} ${className}`.trim()}
-        className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, color: `#ffffff`,
+    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, color: `#ffffff`,
                 ...(spinner || {}) }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
 });
 export default Button;

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

@@ -1,15 +1,15 @@
 import { Props } from "../../types";
 import { Size, Variant } from "../../types/enums";
 import { SpinnerProps } from "../Spinner";
-/**
- * @deprecated Use `variant` instead.
- */
 export type ButtonProps = Props<`button`> & {
     icon?: string;
     iconSize?: Size;
     withLabel?: boolean;
     spinner?: SpinnerProps;
     state?: ButtonState;
+    /**
+     * @deprecated "Use `variant` instead. `size` will be removed in the next major release."
+     */
     size?: Size;
     variant?: Size | Variant;
     reset?: boolean;

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

@@ -1,8 +1,9 @@
-import { CHECKBOX, Size } from "../../types/enums";
+import { CHECKBOX, Size, 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;
+    variant?: Variant;
     onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default CheckBox;

package/dist/comps/CheckBox/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { CHECKBOX, Size } from "../../types/enums";
+import { CHECKBOX, Variant } from "../../types/enums";
 import Label from "../Label";
 import Input from "../Input";
 import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
-    const { name, required, type, value, size, checked: defaultCheck, onSwitch, ...pops } = props;
+    const { name, required, type, value, size, variant, checked: defaultCheck, onSwitch, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -26,27 +26,9 @@ const CheckBox = forwardRef((props, ref) => {
             _setChecked(!checked);
         }
     }));
-    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} --${size || Size.Default} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), ...pops, children: [(!type || type == CHECKBOX.Default) && SVGIcons.check, _jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} --${(variant || size) || Variant.Default} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), ...pops, children: [(!type || type == CHECKBOX.Default) && SVGIcons.check, _jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
                     onSwitch && onSwitch(e.target.checked, value || `cb`);
                     _setChecked(e.target.checked);
                 } })] });
 });
-// import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref, useState } from "react";
-// import { cleanProps, css } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const CheckBox = ( props : UIProps<HTMLInputElement> ) => {
-//     const { cx } = css.Build(props.as)
-//     const [ checked, setChecked ] = useState(props.checked || false)
-//     return <label { ...({
-//         className: `zuz-checkbox${checked ? ` is-checked` : ``} rel${cx.length > 0 ? ` ` + cx.join(` `) : ``}`
-//     }) as UIProps<HTMLLabelElement>}>
-//         <input type='checkbox' 
-//             ref={props.ref}
-//             onChange={e => {
-//                 setChecked(e.target.checked)
-//             }}
-//             className={`abs`}
-//             {...(cleanProps(props) as UIProps<HTMLInputElement>)} />
-//     </label>
-// }
 export default CheckBox;

package/dist/comps/CheckBox/types.d.ts

@@ -1,5 +1,5 @@
 import { Props } from "../../types";
-import { CHECKBOX, Size } from "../../types/enums";
+import { CHECKBOX, Size, Variant } from "../../types/enums";
 /**
  * Props for the CheckBox component.
  *
@@ -11,6 +11,7 @@ import { CHECKBOX, Size } from "../../types/enums";
 export type CheckBoxProps = Props<"input"> & {
     type?: CHECKBOX;
     size?: Size;
+    variant?: Variant;
     onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 };
 /**

package/dist/comps/ContextMenu/index.js

@@ -19,19 +19,6 @@ const ContextMenu = forwardRef((props, ref) => {
         show: (e, menuItems) => {
             if (!parent)
                 event.current = e;
-            // let x = 0, y = 0;
-            // if ( parent ){
-            //     const { x: px, y: py, width, height } = _parent || parent.getBoundingClientRect()
-            //     // x = right + 5
-            //     // y = top + height + 5
-            // }
-            // else{
-            //     x = e instanceof MouseEvent ? e.clientX 
-            //         : e instanceof TouchEvent && e.touches.length > 0 ? e.touches[0].clientX : (e as dynamicObject).clientX || 0;
-            //     y = e instanceof MouseEvent ? e.clientY
-            //         : e instanceof TouchEvent && e.touches.length > 0 ? e.touches[0].clientY : (e as dynamicObject).clientY || 0;
-            // }
-            // setPosition({ x, y })
             if (menuItems) {
                 setItems(menuItems);
             }
@@ -39,49 +26,6 @@ const ContextMenu = forwardRef((props, ref) => {
         },
         hide: (e) => setVisible(false),
     }));
-    // useEffect(() => {
-    //     if ( !visible || !_menu.current ) return;
-    //     const menu = _menu.current;
-    //     const { offsetWidth: w, offsetHeight: h } = menu;
-    //     let { x, y } = position;
-    //     // Prevent overflow on the right
-    //     if (x + w > window.innerWidth) {
-    //         x = window.innerWidth - w - 10;
-    //     }
-    //     // Prevent overflow on the bottom
-    //     if (y + h > window.innerHeight) {
-    //         y = window.innerHeight - h - 10;
-    //     }
-    //     // Prevent going off the left side
-    //     if (x < 0) x = 10;
-    //     // Prevent going off the top side
-    //     if (y < 0) y = 10;
-    //     setPosition({ x, y })
-    // }, [visible])
-    // useEffect(() => {
-    //     if ( visible ){
-    //         let px, py = 0
-    //         if ( parent ){
-    //             const { x, y, width, height } = _parent || parent.getBoundingClientRect()
-    //             px = x
-    //             py = y
-    //         }
-    //         const { width: w, height: h } = _menu.current!.getBoundingClientRect()
-    //         // Prevent overflow on the right
-    //         if (px! + w > window.innerWidth) {
-    //             px = window.innerWidth - w - 10;
-    //         }
-    //         setPosition({ x: px!, y: py! })
-    //     }
-    // }, [visible])
-    // useEffect(() => {
-    //     if ( parent && !position ){
-    //         const { x, y, width, height } = parent.getBoundingClientRect()
-    //         setParent({ x, y, width, height })
-    //         setPosition({ x, y })
-    //     }
-    // }, [parent])
-    // if ( !visible ) return null
     return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), "aria-hidden": !visible, style: {
             ...style,
             top: position.top,

package/dist/comps/Drawer/index.d.ts

@@ -6,7 +6,7 @@ declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
     as?: string;
     speed?: number;
     from?: DRAWER_SIDE;
-    children: string | ReactNode | ReactNode[];
+    children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
 } & import("react").RefAttributes<DrawerHandler>>;
 export default Drawer;

package/dist/comps/Drawer/types.d.ts

@@ -5,7 +5,7 @@ export type DrawerProps = BoxProps & {
     as?: string;
     speed?: number;
     from?: DRAWER_SIDE;
-    children: string | ReactNode | ReactNode[];
+    children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
 };
 export interface DrawerHandler {

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

@@ -1,5 +1,6 @@
 import { BoxProps } from "../Box";
 import { dynamicObject } from "../../types";
+import { SheetHandler } from "../Sheet";
 import { SPINNER } from "../../types/enums";
 export type FormProps = BoxProps & {
     /** Name of form, will be appended to --form-{name} in className
@@ -28,7 +29,8 @@ export type FormProps = BoxProps & {
         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.
@@ -77,6 +79,7 @@ declare const Form: import("react").ForwardRefExoticComponent<BoxProps & {
         color?: string;
         /** Message displayed during loading */
         message?: string;
-    };
+    } | SheetHandler;
+    resetOnSuccess?: boolean;
 } & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/Form/index.js

@@ -3,7 +3,7 @@ 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 { useBase } from "../../hooks";
-import Sheet from "../Sheet";
+import Sheet, { isSheetHandler } from "../Sheet";
 import Cover from "../Cover";
 import { FORMVALIDATION, SHEET } from "../../types/enums";
 import { addPropsToChildren, isEmail, withPost } from "../../funs";
@@ -17,7 +17,7 @@ import { addPropsToChildren, isEmail, withPost } from "../../funs";
  * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
  */
 const Form = forwardRef((props, ref) => {
-    const { name, cover, spinner, errors, action, children, withData, beforeSubmit, onSubmit, onError, onSuccess, ...pops } = props;
+    const { name, cover, spinner, errors, action, children, withData, beforeSubmit, onSubmit, onError, onSuccess, resetOnSuccess, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [loading, setLoading] = useState(false);
     const innerRef = useRef(null);
@@ -181,14 +181,28 @@ const Form = forwardRef((props, ref) => {
             // If `action` is defined, submit the form data to the specified endpoint
             startTransition(async () => {
                 beforeSubmit && beforeSubmit(payload);
-                setLoading(true);
+                if (isSheetHandler(cover)) {
+                    cover.setLoading(true);
+                }
+                else
+                    setLoading(true);
                 sheet.current.hide();
                 // submit.current?.setState(ButtonState.Loading)
                 withPost(action, { ...payload, ...(withData || {}) })
                     .then(_resp => {
                     const resp = _resp;
-                    setLoading(false);
                     // submit.current?.reset()
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
+                    if (resetOnSuccess) {
+                        Array.from(_nodes(`[name]`)).forEach((el) => {
+                            if (el instanceof HTMLInputElement)
+                                el.value = ``;
+                        });
+                    }
                     if (onSuccess)
                         onSuccess(resp);
                     else {
@@ -198,7 +212,11 @@ const Form = forwardRef((props, ref) => {
                 })
                     .catch(err => {
                     // console.warn(`Error occurred while submitting form`, err)
-                    setLoading(false);
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
                     // submit.current?.reset()
                     if (onError)
                         onError(err);
@@ -244,6 +262,6 @@ 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` }), _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), buildChildren] });
+    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] });
 });
 export default Form;

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

@@ -8,7 +8,7 @@ declare const Pagination: import("react").ForwardRefExoticComponent<import("../B
     breakLabel?: string;
     nextLabel?: string;
     prevLabel?: string;
-    renderEmpty?: boolean;
+    renderOnZeroPageCount?: boolean;
     onPageChange?: import("./types").PaginationCallback;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Pagination;

package/dist/comps/Pagination/index.js

@@ -6,7 +6,7 @@ import Box from "../Box";
 import Button from "../Button";
 import SVGIcons from "../svgicons";
 const Pagination = forwardRef((props, ref) => {
-    const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, renderEmpty, onPageChange, ...pops } = props;
+    const { itemCount, itemsPerPage, startPage, pageRange, paginationStyle, breakLabel, prevLabel, nextLabel, renderOnZeroPageCount, onPageChange, ...pops } = props;
     const [_currentPage, setCurrentPage] = useState(startPage || 1);
     const _breakLabel = useMemo(() => breakLabel || `...`, [breakLabel]);
     /**
@@ -42,9 +42,11 @@ const Pagination = forwardRef((props, ref) => {
         setCurrentPage(newPage);
         onPageChange?.(newPage);
     }, [itemCount, itemsPerPage, _currentPage]);
-    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.map((page, index, items) => _jsx(Button, { disabled: page == _breakLabel, className: page == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => typeof page == `number` && handlePage(page), children: page }, `--pg-${index}-${page}`)) }), _jsx(Box, { as: `flex aic jcc --pagination-label`, children: [
+    if (pages.length <= 1 && ((renderOnZeroPageCount == undefined ? false : renderOnZeroPageCount) === false))
+        return null;
+    return _jsxs(Box, { as: `--pagination --pgt-${paginationStyle || PaginationStyle.Table} flex aic w:100% jcc ${className}`, children: [_jsx(Box, { as: `flex flex:1 aic --pgt-btns`, children: (pages.length > 1 ? pages : [1, _breakLabel]).map((page, index, items) => _jsx(Button, { disabled: page == _breakLabel || getPageValue(_currentPage) == page, className: page == getPageValue(_currentPage) ? `--current-page` : ``, onClick: (ev) => typeof page == `number` && handlePage(page), children: page }, `--pg-${index}-${page}`)) }), _jsx(Box, { as: `flex aic jcc flex:1 --pagination-label`, children: [
                     `Showing ${(getPageValue(_currentPage) - 1) * itemsPerPage + 1} - `,
                     `${Math.min(getPageValue(_currentPage) * itemsPerPage, itemCount)} of ${itemCount} items`
-                ].join(` `) }), _jsxs(Box, { as: `flex aic jce --pgt-btns --pgt-nav`, children: [_jsx(Button, { onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronRightOutline })] })] });
+                ].join(` `) }), _jsxs(Box, { as: `flex aic jce flex:1 --pgt-btns --pgt-nav`, children: [_jsx(Button, { disabled: getPageValue(_currentPage) <= 1, onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronLeftOutline }), _jsx(Button, { disabled: pages.length <= 1 || getPageValue(_currentPage) == pages[pages.length - 1], onClick: (ev) => handlePage(getPageValue(_currentPage) - 1), children: SVGIcons.chevronRightOutline })] })] });
 });
 export default Pagination;

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

@@ -18,6 +18,6 @@ export type PaginationProps = BoxProps & {
     breakLabel?: string;
     nextLabel?: string;
     prevLabel?: string;
-    renderEmpty?: boolean;
+    renderOnZeroPageCount?: boolean;
     onPageChange?: PaginationCallback;
 };

package/dist/comps/Select/index.js

@@ -17,7 +17,8 @@ const Select = forwardRef((props, ref) => {
     const [query, setQuery] = useState(null);
     const _ref = useRef(null);
     const _search = useRef(null);
-    const _id = useMemo(() => name || useId(), []);
+    const _did = useId();
+    const _id = useMemo(() => name || _did, []);
     const { className, style, rest } = useBase(pops);
     const updateValue = (o) => {
         setValue(o);

package/dist/comps/Sheet/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import { SHEET, SHEET_ACTION_POSITION, SPINNER, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
 import { ZuzProps } from "../../types";
 export type SheetProps = ZuzProps & {
     title?: string;
@@ -8,6 +8,8 @@ export type SheetProps = ZuzProps & {
     curve?: TRANSITION_CURVES;
     speed?: Number;
     type?: SHEET;
+    spinner?: SPINNER;
+    loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
 };
 export interface SheetActionHandler {
@@ -17,6 +19,7 @@ export interface SheetActionHandler {
     onClick?: () => void;
 }
 export interface SheetHandler {
+    setLoading: (mode: boolean) => void;
     showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     dialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
@@ -32,6 +35,9 @@ declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
     curve?: TRANSITION_CURVES;
     speed?: Number;
     type?: SHEET;
+    spinner?: SPINNER;
+    loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
 } & import("react").RefAttributes<SheetHandler>>;
+export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
 export default Sheet;

package/dist/comps/Sheet/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import { useBase } from "../../hooks";
@@ -12,10 +12,10 @@ import Overlay from "../Overlay";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { title: _title, message, transition, curve, speed, type, actionPosition, ...pops } = props;
+    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, ...pops } = props;
     const { className, style, rest } = useBase(pops);
-    const [title, setTitle] = useState(``);
-    const [msg, setMsg] = useState(``);
+    const [title, setTitle] = useState(_title || ``);
+    const [msg, setMsg] = useState(message || ``);
     const [action, setAction] = useState(null);
     const [sheetType, setSheetType] = useState(type || SHEET.Default);
     const sheetID = useMemo(() => uuid(), []);
@@ -25,6 +25,7 @@ const Sheet = forwardRef((props, ref) => {
     const [loading, setLoading] = useState(false);
     const [render, setRender] = useState(true);
     const _render = useRef(null);
+    const renderMessage = msg; //useMemo(() => msg, [msg])
     useImperativeHandle(ref, () => ({
         setLoading(mode) {
             setLoading(mode);
@@ -43,8 +44,10 @@ const Sheet = forwardRef((props, ref) => {
                 }, 500);
             }
             setSheetType(SHEET.Dialog);
-            setMsg(message);
-            setTitle(title);
+            if (message)
+                setMsg(message);
+            if (title)
+                setTitle(title);
             if (action)
                 setAction(action.reduce((ar, b) => {
                     ar.push({
@@ -56,7 +59,9 @@ const Sheet = forwardRef((props, ref) => {
             setVisible(true);
             setTimeout(() => onShow ? onShow() : () => { }, 1000);
         },
-        dialog(title, message, action, onShow) {
+        dialog(title, message, action, 
+        // actionRef?: React.RefObject<HTMLElement>,
+        onShow) {
             if (_sheetTimeout) {
                 clearTimeout(_sheetTimeout);
                 if (_sheetWobbleTimeout) {
@@ -125,7 +130,7 @@ const Sheet = forwardRef((props, ref) => {
             setVisible(false);
         }
     }));
-    const buildAnimation = useCallback(() => {
+    const buildAnimation = useMemo(() => {
         const base = {
             when: visible,
             duration: speed || 0.3,
@@ -156,7 +161,7 @@ const Sheet = forwardRef((props, ref) => {
                 ...base
             };
         }
-    }, [visible]);
+    }, [visible, sheetType]);
     useEffect(() => {
         if (_render.current)
             clearTimeout(_render.current);
@@ -168,8 +173,15 @@ const Sheet = forwardRef((props, ref) => {
         }
     }, [visible]);
     if (sheetType == SHEET.Dialog) {
-        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, animate: buildAnimation(), ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? msg : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
+        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, animate: buildAnimation, ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading, spinner: spinner, message: loadingMessage }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? renderMessage : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
     }
-    return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, animate: buildAnimation(), ref: innerRef, children: visible ? msg : null });
+    return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, animate: buildAnimation, ref: innerRef, children: visible ? msg : null });
 });
+export const isSheetHandler = (src) => {
+    return typeof src === `object`
+        && null != src
+        && `setLoading` in src
+        && `success` in src
+        && `error` in src;
+};
 export default Sheet;

package/dist/comps/Switch/index.d.ts

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

package/dist/comps/Table/col.js

@@ -2,14 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Box from "../Box";
 const TColumn = (props) => {
     const { idx, id, weight, style, value, render, resize, sort } = props;
-    // const style = useMemo(() : CSSStyleDeclaration => style || {
-    //     ...(w && { width: w }),
-    //     ...(maxW && { maxWidth: maxW }),
-    //     ...(minW && { minWidth: minW }),
-    //     ...(h && { height: h }),
-    //     ...(maxH && { maxHeight: maxH }),
-    //     ...(minH && { minHeight: minH }),
-    // }), [w, maxW, minW, h, minH, maxH, weight]);
     return _jsx(Box, { style: {
             flex: weight || 1,
             ...style

package/dist/comps/Table/index.d.ts

@@ -5,9 +5,13 @@ declare const Table: import("react").ForwardRefExoticComponent<import("../Box").
     rows?: dynamicObject[];
     rowCount?: number;
     rowsPerPage?: number;
+    rowClassName?: string;
     currentPage?: number;
     pagination?: boolean;
+    showPaginationOnZeroPageCount?: boolean;
     animateRows?: boolean;
+    header?: boolean;
+    onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: dynamicObject) => void;
     onPageChange?: import("../Pagination/types").PaginationCallback;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Table;

package/dist/comps/Table/index.js

@@ -6,7 +6,7 @@ import TRow from "./row";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
 const Table = forwardRef((props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, onPageChange, ...pops } = props;
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, header, showPaginationOnZeroPageCount, rowClassName, onPageChange, onRowContextMenu, ...pops } = props;
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
             flex: c.weight || 1,
@@ -21,7 +21,8 @@ const Table = forwardRef((props, ref) => {
         return prev;
     }, {}), [schema]);
     const _cols = useMemo(() => Object.keys(_schemaParsed), [schema]);
+    const _header = useMemo(() => header == undefined ? true : header, [header]);
     const { style, className, rest } = useBase(pops);
-    return _jsxs(Box, { as: `--table flex cols ${className}`, children: [_jsx(TRow, { index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row }, `--trow-${index}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
+    return _jsxs(Box, { as: `--table flex cols ${className}`, children: [_header == true && _jsx(TRow, { index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, onContextMenu: onRowContextMenu }, `--trow-${index}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
 });
 export default Table;