@zuzjs/ui 0.8.4 → 0.8.6

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/hooks/useToast.js

@@ -0,0 +1,19 @@
+"use client";
+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/esm/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 */