@choice-ui/react 1.6.8 → 1.7.0

package/dist/components/toast/dist/index.d.ts

@@ -0,0 +1,260 @@
+import { ReactNode } from 'react';
+import * as react from 'react';
+
+type ToastType = "info" | "success" | "warning" | "error" | "loading" | "default";
+type ToastVariant = "default" | "accent" | "success" | "warning" | "error" | "assistive" | "reset";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+
+interface ToastAction {
+    label: ReactNode;
+    onClick: () => void;
+}
+interface ToastCancel {
+    label: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Props for Toaster.Item slot component
+ */
+interface ToasterItemSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * Slot component for customizing toast item container
+ */
+declare const ToasterItemSlot: react.ForwardRefExoticComponent<ToasterItemSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Icon slot component
+ */
+interface ToasterIconSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function - receives type and default icon */
+    children?: (type: ToastType, defaultIcon: ReactNode) => ReactNode;
+}
+/**
+ * Slot component for customizing toast icon
+ */
+declare const ToasterIconSlot: react.ForwardRefExoticComponent<ToasterIconSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Title slot component
+ */
+interface ToasterTitleSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast title
+ */
+declare const ToasterTitleSlot: react.ForwardRefExoticComponent<ToasterTitleSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Description slot component
+ */
+interface ToasterDescriptionSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Slot component for customizing toast description
+ */
+declare const ToasterDescriptionSlot: react.ForwardRefExoticComponent<ToasterDescriptionSlotProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Props for Toaster.Actions slot component
+ */
+interface ToasterActionsSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /** Custom render function for actions */
+    children?: (action: ToastAction | undefined, cancel: ToastCancel | undefined, close: () => void) => ReactNode;
+}
+/**
+ * Slot component for customizing toast actions
+ */
+declare const ToasterActionsSlot: react.ForwardRefExoticComponent<ToasterActionsSlotProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ToastData {
+    id: string;
+    type: ToastType;
+    variant?: ToastVariant;
+    /**
+     * Title content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    title?: React.ReactNode;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    description?: React.ReactNode;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+    createdAt: number;
+    height?: number;
+    removing?: boolean;
+    swipeDirection?: "left" | "right" | "up" | "down";
+}
+interface ToastOptions {
+    id?: string;
+    variant?: ToastVariant;
+    /**
+     * Description content. Supports:
+     * - Plain string: rendered as text
+     * - HTML string (containing tags like `<b>`, `<strong>`, etc.): rendered as HTML
+     * - ReactNode: rendered as React component
+     */
+    description?: React.ReactNode;
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: React.ReactNode;
+        onClick: () => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: () => void;
+    };
+    onClose?: () => void;
+    onAutoClose?: () => void;
+    dismissible?: boolean;
+}
+interface PromiseOptions<T> {
+    loading: string | (ToastOptions & {
+        title: string;
+    });
+    success: string | (ToastOptions & {
+        title: string;
+    }) | ((data: T) => string | (ToastOptions & {
+        title: string;
+    }));
+    error: string | (ToastOptions & {
+        title: string;
+    }) | ((err: unknown) => string | (ToastOptions & {
+        title: string;
+    }));
+}
+type ToastFunction = {
+    (title: string, options?: ToastOptions): string;
+    success: (title: string, options?: ToastOptions) => string;
+    error: (title: string, options?: ToastOptions) => string;
+    warning: (title: string, options?: ToastOptions) => string;
+    info: (title: string, options?: ToastOptions) => string;
+    loading: (title: string, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+    use: (toasterId: string) => {
+        (title: string, options?: ToastOptions): string;
+        success: (title: string, options?: ToastOptions) => string;
+        error: (title: string, options?: ToastOptions) => string;
+        warning: (title: string, options?: ToastOptions) => string;
+        info: (title: string, options?: ToastOptions) => string;
+        loading: (title: string, options?: ToastOptions) => string;
+        promise: <T>(promise: Promise<T>, options: PromiseOptions<T>) => Promise<T>;
+        dismiss: (id: string) => void;
+        dismissAll: () => void;
+    };
+};
+declare const toast: ToastFunction;
+
+interface ToasterProps {
+    /**
+     * Unique ID for this Toaster instance
+     * Use this to have multiple Toaster instances in the same app
+     * @default "default"
+     */
+    id?: string;
+    /**
+     * Position of the toaster
+     * @default "bottom-right"
+     */
+    position?: ToastPosition;
+    /**
+     * Render toasts into a custom container
+     */
+    container?: HTMLElement | null;
+    /**
+     * Label for accessibility
+     * @default "Notifications"
+     */
+    label?: string;
+    /**
+     * Whether to use a portal for rendering
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Offset from viewport edges in pixels
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Default duration for toasts in ms
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Maximum number of visible toasts
+     * @default 3
+     */
+    visibleToasts?: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Children - use Toaster.Item to customize toast rendering
+     */
+    children?: ReactNode;
+    /**
+     * Show countdown progress bar at the bottom of each toast
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Layout mode for toasts
+     * @default "default"
+     */
+    layout?: "default" | "compact";
+}
+interface ToasterComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>> {
+    Item: typeof ToasterItemSlot;
+    Icon: typeof ToasterIconSlot;
+    Title: typeof ToasterTitleSlot;
+    Description: typeof ToasterDescriptionSlot;
+    Actions: typeof ToasterActionsSlot;
+}
+/**
+ * Toaster component with compound pattern
+ *
+ * @example
+ * ```tsx
+ * <Toaster id="my-toaster">
+ *   <Toaster.Item className="custom-class">
+ *     <Toaster.Icon>{(type, defaultIcon) => <CustomIcon type={type} />}</Toaster.Icon>
+ *     <Toaster.Title className="font-bold uppercase" />
+ *     <Toaster.Description className="text-sm" />
+ *     <Toaster.Actions>{(action, cancel, close) => <CustomActions />}</Toaster.Actions>
+ *   </Toaster.Item>
+ * </Toaster>
+ * ```
+ */
+declare const Toaster: ToasterComponent;
+
+export { type ToastData, type ToastOptions, type ToastPosition, type ToastType, type ToastVariant, Toaster, type ToasterProps, toast };

package/dist/components/toast/src/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './toast-progress-bar';
+export * from './toaster-slots';
+export * from './toaster-item';

package/dist/components/toast/src/components/toast-progress-bar.d.ts

@@ -0,0 +1,7 @@
+import { toastRootTv } from '../tv';
+export interface ToastProgressBarProps {
+    duration: number;
+    isPaused: boolean;
+    tv: ReturnType<typeof toastRootTv>;
+}
+export declare const ToastProgressBar: import('react').NamedExoticComponent<ToastProgressBarProps>;

package/dist/components/toast/src/components/toast-progress-bar.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useAnimationControls, motion } from "framer-motion";
+import { memo, useRef, useEffect } from "react";
+const ToastProgressBar = memo(function ToastProgressBar2({
+  duration,
+  isPaused,
+  tv
+}) {
+  const controls = useAnimationControls();
+  const progressRef = useRef({ elapsed: 0, lastTime: Date.now() });
+  useEffect(() => {
+    progressRef.current = { elapsed: 0, lastTime: Date.now() };
+    controls.start({
+      x: "-100%",
+      transition: {
+        duration: duration / 1e3,
+        ease: "linear"
+      }
+    });
+  }, [controls, duration]);
+  useEffect(() => {
+    const durationSec = duration / 1e3;
+    if (isPaused) {
+      const now = Date.now();
+      progressRef.current.elapsed += (now - progressRef.current.lastTime) / 1e3;
+      controls.stop();
+    } else {
+      const remaining = Math.max(0, durationSec - progressRef.current.elapsed);
+      progressRef.current.lastTime = Date.now();
+      if (remaining > 0) {
+        controls.start({
+          x: "-100%",
+          transition: {
+            duration: remaining,
+            ease: "linear"
+          }
+        });
+      }
+    }
+  }, [isPaused, controls, duration]);
+  return /* @__PURE__ */ jsx("div", { className: tv.progressTrack(), children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: tv.progressIndicator(),
+      initial: { x: 0 },
+      animate: controls
+    }
+  ) });
+});
+ToastProgressBar.displayName = "ToastProgressBar";
+export {
+  ToastProgressBar
+};

package/dist/components/toast/src/components/toaster-item.d.ts

@@ -0,0 +1,26 @@
+import { ToastData } from '../store';
+import { ToastPosition } from '../types';
+import { CollectedSlotProps } from './toaster-slots';
+declare const GAP = 12;
+declare const DEFAULT_HEIGHT = 56;
+export { DEFAULT_HEIGHT, GAP };
+export interface ToasterItemProps {
+    toast: ToastData;
+    index: number;
+    total: number;
+    expanded: boolean;
+    position: ToastPosition;
+    toasterId: string;
+    /** Heights of all visible toasts for offset calculation */
+    toastHeights: number[];
+    /** Collected slot props from Toaster.Item children */
+    slotProps: CollectedSlotProps;
+    /** Show countdown progress bar */
+    showProgress?: boolean;
+    /** Default duration from Toaster */
+    defaultDuration?: number;
+    /** Whether the timer is paused (hovering) */
+    isPaused?: boolean;
+    layout?: "default" | "compact";
+}
+export declare const ToasterItem: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ToasterItemProps & import('react').RefAttributes<HTMLDivElement>>>;