@zuzjs/ui 0.8.4 → 0.8.5

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

@@ -16,8 +16,8 @@ const Crumb = forwardRef((props, ref) => {
         ...crumbItems.slice(-maxItems)
     ] : crumbItems;
     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) => item.ID == `.` ?
-            _jsx(Box, { as: `flex aic gap:3`, children: Array(3).fill(null).map(() => _jsx(Box, { as: `w:4 h:4 bg:$text r:10` })) })
-            : _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 })] })) });
+            _jsx(Box, { as: `flex aic gap:3`, children: Array(3).fill(null).map(() => _jsx(Box, { as: `w:4 h:4 bg:$text r:10` }, `--crumb-placeholder-${index}`)) })
+            : _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 })] }, `${item.label.replace(/\s+/g, `-`).toLowerCase()}-${index}`)) });
 });
 Crumb.displayName = `Zuz.Crumb`;
 export default Crumb;

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

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

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

@@ -6,7 +6,7 @@ import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
-    const { from, speed, children, prerender, onClose, ...pops } = props;
+    const { from, speed, children, margin, prerender, onClose, ...pops } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
@@ -53,7 +53,10 @@ const Drawer = forwardRef((props, ref) => {
                         onClose?.();
                         setVisible(false);
                     }
-                }, when: visible }), _jsxs(Box, { ref: divRef, style: style, className: `--drawer flex cols ${className}  --${from ? from.toLowerCase() : `left`} fixed`, fx: {
+                }, when: visible }), _jsxs(Box, { ref: divRef, style: {
+                    ...style,
+                    ...{ "--m": `${margin || 0}px` }
+                }, "aria-hidden": !visible, className: `--drawer flex cols ${className}  --${from ? from.toLowerCase() : `left`} fixed`, fx: {
                     from: { ..._style.from, opacity: 0 },
                     to: { ..._style.to, opacity: 1 },
                     when: visible,

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

@@ -7,6 +7,7 @@ export type DrawerProps = BoxProps & {
     from?: DRAWER_SIDE;
     children?: string | ReactNode | ReactNode[];
     prerender?: boolean;
+    margin?: number;
     onClose?: () => void;
 };
 export interface DrawerHandler {

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MD5 } from "@zuzjs/core";
+import { createElement, forwardRef, Fragment, isValidElement } from "react";
 import { useBase } from "../../hooks";
 import { Size } from "../../types/enums";
 import Item from "./item";
@@ -11,7 +12,10 @@ const List = forwardRef((props, ref) => {
         className: `--list --${size || Size.Small} flex ${direction ?? `cols`} ${className}`.trim(),
         style, ref,
         ...rest,
-        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] }))
+        children: items.map((item, index, _items) => {
+            const _key = `${typeof item == `string` ? `li-${String(item)}` : isValidElement(item) ? `li-${item.key}` || `${index}-${MD5(item.toString())}` : item.label}-${index}`;
+            return _jsxs(Fragment, { children: [_jsx(Item, { meta: item }), seperator && _items[index + 1] ? _jsx("li", { className: `--list-seperator`, children: seperator }, `spt-${index + 1}-${_key}`) : null] }, _key);
+        })
     });
 });
 List.displayName = `Zuz.List`;

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { PubSub, SPINNER, Spinner, Text, uuid } from "../..";
+import { PubSub, SPINNER, Spinner, Text, TRANSITION_CURVES, TRANSITIONS, uuid } from "../..";
 import { useBase } from "../../hooks";
 import Box from "../Box";
 import Pagination from "../Pagination";
@@ -94,8 +94,14 @@ const Table = (props, ref) => {
         setSortBy(col);
         onSort?.(col, dir);
     };
-    const _paginated = useMemo(() => _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }), []);
-    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: loadingMessage })] }), loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), pagination && _pagination.current != null && _jsx(Box, { as: `--row flex aic --row-footer`, children: _paginated })] });
+    const possiblePage = (rowCount || (rows ? rows.length : 0)) / (rowsPerPage || 10);
+    const _paginated = useMemo(() => (showPaginationOnZeroPageCount || (possiblePage > 1)) ? _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) : null, [currentPage, rowCount]);
+    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: loadingMessage })] }), loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), _jsx(Box, { "aria-hidden": !pagination || !_paginated, ...(animateRows ? { fx: {
+                        transition: TRANSITIONS.SlideInBottom,
+                        curve: TRANSITION_CURVES.EaseInOut,
+                        delay: .02 * (rows.length + 1),
+                        when: !loading && rows && pagination && _paginated != null
+                    } } : {}), as: `--row flex aic --row-footer`, children: pagination && _paginated ? _paginated : null })] });
 };
 Table.displayName = `Zuz.Table`;
 const ForwardedTable = forwardRef(Table);

package/dist/cjs/comps/Table/row.js

@@ -74,7 +74,7 @@ const TRow = (props) => {
             };
         }
     }, []);
-    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
+    return _jsxs(Box, { onContextMenu: e => onContextMenu ? onContextMenu(e, data) : null, ...(animate ? { fx: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``} ${rowClassName || ``}`, children: [index == -1 && schema.map((c, i) => {
                 const { renderWhenHeader, render, value, ...cc } = c;
                 return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(-1, `--selector-${c.id}`, `all`), _jsx(TColumn, { idx: -1, onSort: onSort, sortBy: sortBy, 
                             // value={renderWhenHeader && render ? render!(index == -1 ? c as dynamicObject : data as T, index) : value as string} 

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+import { TRANSITION_CURVES } from "../../types/enums";
+import { ToastContextType } from "./types";
+export declare const ToastContext: import("react").Context<ToastContextType | null>;
+declare const ToastProvider: FC<{
+    children: ReactNode;
+    fx?: {
+        curve: TRANSITION_CURVES;
+        duration: number;
+    };
+}>;
+export default ToastProvider;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
+import Toast from "./toast";
+import { ToastType } from "./types";
+export const ToastContext = createContext(null);
+const ToastRenderer = forwardRef((props, ref) => {
+    const [toasts, setToasts] = useState([]);
+    const id = useRef(0);
+    const nextId = () => ++id.current;
+    useImperativeHandle(ref, () => ({
+        add(toast) {
+            const toastId = nextId();
+            const fullToast = { id: toastId, ...toast };
+            setToasts(prev => [fullToast, ...prev.slice(0, 4)]); // max 5
+            if (toast.duration !== Infinity && toast.type != ToastType.Promise) {
+                setTimeout(() => this.remove(toastId), ((toast.duration ?? 4) + 1) * 1000);
+            }
+            return toastId;
+        },
+        remove(id) {
+            setToasts(t => t.filter(toast => toast.id !== id));
+        },
+        clear() {
+            setToasts([]);
+        }
+    }));
+    return _jsx(Box, { as: `--toast-wrapper rel`, children: toasts.map((toast, i) => _jsx(Toast, { index: i, ...toast }, `toast-${toast.id}`)) });
+});
+const ToastProvider = forwardRef(({ children, fx }, ref) => {
+    const toastController = useRef(null);
+    const contextValue = useMemo(() => ({
+        add: (toast) => toastController.current?.add(toast),
+        remove: (id) => toastController.current?.remove(id),
+        clear: () => toastController.current?.clear(),
+        fx: fx || {
+            curve: TRANSITION_CURVES.EaseInOut,
+            duration: 0.4
+        }
+    }), [toastController.current]);
+    return _jsxs(ToastContext.Provider, { value: contextValue, children: [children, _jsx(ToastRenderer, { ref: toastController })] });
+});
+export default ToastProvider;

package/dist/cjs/comps/Toast/toast.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { ToastData } from "./types";
+declare const Toast: FC<ToastData & {
+    index: number;
+}>;
+export default Toast;

package/dist/cjs/comps/Toast/toast.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ToastContext } from ".";
+import { ToastDefaultTitle, TRANSITION_CURVES, TRANSITIONS, useDelayed } from "../..";
+import Box from "../Box";
+import Icon from "../Icon";
+import Text from "../Text";
+const Toast = ({ index, id, type, icon, title, message, duration }) => {
+    const mounted = useDelayed();
+    const expired = useDelayed(((duration || 4) - 1) * 1000);
+    const ctx = useContext(ToastContext);
+    return _jsxs(Box, { as: `--snack --${type} --snack-${id} ${index > 2 ? `--snacked` : ``} flex aic`, fx: {
+            from: { left: `50%`, x: `-50%`, top: -100, scale: 1, opacity: 0.5 },
+            to: { left: `50%`, x: `-50%`, top: 25, scale: 1, opacity: 1 },
+            // exit: { left: `50%`, x: `-50%`, top: 25, scale: 0, opacity: 0 },
+            curve: ctx?.fx.curve,
+            duration: ctx?.fx.duration,
+            when: mounted && !expired
+        }, children: [_jsx(Box, { as: `--ico flex aic jcc`, fx: {
+                    transition: TRANSITIONS.ScaleIn,
+                    curve: TRANSITION_CURVES.Spring,
+                    delay: 0.2,
+                    when: mounted && !expired
+                }, children: icon ? _jsx(Icon, { name: icon, fx: {
+                        transition: TRANSITIONS.ScaleIn,
+                        curve: TRANSITION_CURVES.Spring,
+                        delay: 0.4,
+                        duration: 0.5,
+                        when: mounted && !expired
+                    } }) : _jsx(Box, { as: `--no-icon`, fx: {
+                        transition: TRANSITIONS.ScaleIn,
+                        curve: TRANSITION_CURVES.Spring,
+                        delay: 0.4,
+                        duration: 0.5,
+                        when: mounted && !expired
+                    } }) }), _jsxs(Box, { as: `--meta`, children: [_jsx(Text, { as: `--tt`, fx: {
+                            transition: TRANSITIONS.SlideInTop,
+                            curve: TRANSITION_CURVES.Spring,
+                            delay: 0.3,
+                            when: mounted
+                        }, children: title || ToastDefaultTitle[type] }), _jsx(Text, { as: `--tm`, fx: {
+                            transition: TRANSITIONS.SlideInTop,
+                            curve: TRANSITION_CURVES.Spring,
+                            delay: 0.4,
+                            duration: 0.5,
+                            when: mounted
+                        }, children: message })] })] });
+};
+export default Toast;

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

@@ -0,0 +1,30 @@
+import { dynamic } from "../..";
+import { TRANSITION_CURVES } from "../../types/enums";
+export declare enum ToastType {
+    Default = "default",
+    Success = "success",
+    Error = "error",
+    Warn = "warn",
+    Promise = "promise"
+}
+export declare const ToastDefaultTitle: dynamic;
+export interface ToastData {
+    id: number;
+    type: ToastType;
+    icon?: string;
+    title?: string;
+    message?: string;
+    duration?: number;
+    onClick?: () => void;
+}
+export interface ToastController {
+    add: (toast: Omit<ToastData, 'id'>) => number;
+    remove: (id: number) => void;
+    clear: () => void;
+}
+export interface ToastContextType extends ToastController {
+    fx: {
+        curve: TRANSITION_CURVES;
+        duration: number;
+    };
+}

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

@@ -0,0 +1,14 @@
+export var ToastType;
+(function (ToastType) {
+    ToastType["Default"] = "default";
+    ToastType["Success"] = "success";
+    ToastType["Error"] = "error";
+    ToastType["Warn"] = "warn";
+    ToastType["Promise"] = "promise";
+})(ToastType || (ToastType = {}));
+export const ToastDefaultTitle = {
+    success: "Action Successful",
+    error: "Something Went Wrong",
+    warn: "Heads Up",
+    default: "Notice"
+};

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

@@ -78,6 +78,8 @@ export { default as Text, type TextProps } from './Text';
 export { default as Textarea, type TextAreaProps } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
+export { default as ToastProvider } from './Toast';
+export * from './Toast/types';
 export { default as ToolTip } from './Tooltip';
 export * from './Tooltip/types';
 export { default as TreeView } from './Treeview';

package/dist/cjs/comps/index.js

@@ -78,6 +78,8 @@ export { default as Text } from './Text';
 export { default as Textarea } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
+export { default as ToastProvider } from './Toast';
+export * from './Toast/types';
 export { default as ToolTip } from './Tooltip';
 export * from './Tooltip/types';
 export { default as TreeView } from './Treeview';

package/dist/cjs/hooks/index.d.ts

@@ -27,6 +27,7 @@ export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
+export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
 export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';

package/dist/cjs/hooks/index.js

@@ -28,6 +28,7 @@ export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
+export { default as useToast } from './useToast';
 export { default as useTruncateText } from './useTruncateText';
 export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';

package/dist/cjs/hooks/useBase.js

@@ -34,7 +34,7 @@ const useBase = (props) => {
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { transition, from, to, when, duration, delay, curve } = autoTransition ? {
+    const { transition, from, to, exit, when, duration, delay, curve } = autoTransition ? {
         transition: autoTransition,
         duration: 0.3
     } : fx || animate || {};
@@ -48,6 +48,23 @@ const useBase = (props) => {
     else {
         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
+    // Track previous value of 'when'
+    // const prevWhenRef = useRef<boolean | undefined>(when);
+    // if (undefined === when) {
+    //     _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
+    // } else if (true === when) {
+    //     _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
+    // } else {
+    //     // Check if exit style should be applied
+    //     const wasTrue = prevWhenRef.current === true;
+    //     if (wasTrue && exit) {
+    //         _style = { ...(exit || {}) };
+    //     } else {
+    //         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
+    //     }
+    // }
+    // // Update previous value for next render
+    // prevWhenRef.current = when;
     const _transition = {};
     if (transition || (from && to)) {
         // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }

package/dist/cjs/hooks/useToast.d.ts

@@ -0,0 +1,10 @@
+declare const useToast: () => {
+    show: (title: string, message?: string, icon?: string, duration?: number) => number;
+    hide: (id: number) => void;
+    success: (title: string, message?: string, icon?: string, duration?: number) => number;
+    error: (title: string, message?: string, icon?: string, duration?: number) => number;
+    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
+    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
+    clearAll: () => void;
+};
+export default useToast;

package/dist/cjs/hooks/useToast.js

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import { ToastContext } from "../comps/Toast";
+import { ToastType } from "../comps/Toast/types";
+const useToast = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error('useToast must be used inside <ToastProvider>');
+    const base = (type, data) => ctx.add({ ...data, type });
+    const clearAll = () => ctx.clear();
+    const hide = (id) => ctx.remove(id);
+    const show = (title, message, icon, duration) => base(ToastType.Default, { title, message, icon, duration });
+    const success = (title, message, icon, duration) => base(ToastType.Success, { title, message, icon, duration });
+    const error = (title, message, icon, duration) => base(ToastType.Error, { title, message, icon, duration });
+    const warn = (title, message, icon, duration) => base(ToastType.Warn, { title, message, icon, duration });
+    const promise = (title, message, icon, duration) => base(ToastType.Promise, { title, message, icon, duration });
+    return { show, hide, success, error, warn, promise, clearAll };
+};
+export default useToast;

package/dist/cjs/types/interfaces.d.ts

@@ -16,6 +16,8 @@ export interface animationProps {
     from?: dynamicObject;
     /** Target style properties after the animation completes */
     to?: dynamicObject;
+    /** Target style properties for exit animation */
+    exit?: dynamicObject;
     /** Condition that determines when the animation should trigger */
     when?: boolean;
     /** Duration of the animation in milliseconds */