@designbasekorea/ui 0.1.59 → 0.1.61

package/dist/index.js

@@ -11054,14 +11054,15 @@ const Toast = ({ id, status = 'info', title, description, icon: Icon, duration =
     const getStatusIcon = () => {
         if (Icon)
             return jsxRuntime.jsx(Icon, { size: 20 });
-        // 기본 상태 아이콘 (실제로는 아이콘 패키지에서 가져와야 함)
+        // 기본 상태 아이콘 (아이콘 패키지에서 가져온 아이콘 사용)
         const iconMap = {
-            success: '✓',
-            error: '✕',
-            warning: '⚠',
-            info: 'ℹ',
+            success: icons.CircleCheckFilledIcon,
+            error: icons.XIcon,
+            warning: icons.WarningIcon,
+            info: icons.InfoIcon,
         };
-        return jsxRuntime.jsx("span", { className: "designbase-toast__status-icon", children: iconMap[status] });
+        const StatusIcon = iconMap[status];
+        return jsxRuntime.jsx(StatusIcon, { size: 20 });
     };
     const getIconColor = () => {
         const colorMap = {
@@ -11076,6 +11077,57 @@ const Toast = ({ id, status = 'info', title, description, icon: Icon, duration =
 };
 Toast.displayName = 'Toast';
 
+const ToastContainer = ({ position = 'top-right', maxToasts = 5, className, toasts: externalToasts, onRemoveToast, }) => {
+    const [internalToasts, setInternalToasts] = React.useState([]);
+    // 외부에서 toasts를 제공하면 그것을 사용, 아니면 내부 상태 사용
+    const toasts = externalToasts || internalToasts;
+    const removeToast = onRemoveToast || React.useCallback((id) => {
+        setInternalToasts(prev => prev.filter(toast => toast.id !== id));
+    }, []);
+    React.useCallback((toast) => {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newToast = {
+            ...toast,
+            id,
+            createdAt: Date.now(),
+        };
+        setInternalToasts(prev => {
+            const updated = [newToast, ...prev];
+            return updated.slice(0, maxToasts);
+        });
+    }, [maxToasts]);
+    const classes = clsx('designbase-toast-container', `designbase-toast-container--${position}`, className);
+    return (jsxRuntime.jsx("div", { className: classes, children: toasts.map((toast) => (jsxRuntime.jsx(Toast, { ...toast, onClose: removeToast }, toast.id))) }));
+};
+ToastContainer.displayName = 'ToastContainer';
+const ToastContext = React.createContext(null);
+const useToast = () => {
+    const context = React.useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+};
+const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = React.useState([]);
+    const addToast = React.useCallback((toast) => {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newToast = {
+            ...toast,
+            id,
+            createdAt: Date.now(),
+        };
+        setToasts(prev => {
+            const updated = [newToast, ...prev];
+            return updated.slice(0, 5); // 최대 5개
+        });
+    }, []);
+    const removeToast = React.useCallback((id) => {
+        setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, []);
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, jsxRuntime.jsx(ToastContainer, { toasts: toasts, onRemoveToast: removeToast })] }));
+};
+
 const Toggle = React.forwardRef(({ isSelected, defaultSelected, isDisabled = false, isReadOnly = false, size = 'm', children, className, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
@@ -11732,6 +11784,8 @@ exports.Textarea = Textarea;
 exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
+exports.ToastContainer = ToastContainer;
+exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
@@ -11741,4 +11795,5 @@ exports.YouTubePlayer = YouTubePlayer;
 exports.getTheme = getTheme;
 exports.setTheme = setTheme;
 exports.toggleTheme = toggleTheme;
+exports.useToast = useToast;
 //# sourceMappingURL=index.js.map