@designbasekorea/figma-ui 0.1.68 → 0.1.69

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, createContext, useContext, useCallback } from 'react';
 import { HeartFilledIcon, CoffeeFilledIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon } from '@designbasekorea/icons';
-import { SplitView, Button, Toggle, Spinner, Badge, SegmentControl, Logo, Input, Modal, Progressbar } from '@designbasekorea/ui';
+import { SplitView, Button, Toggle, Spinner, Badge, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar } from '@designbasekorea/ui';
 export * from '@designbasekorea/ui';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -426,6 +426,68 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
 };
 FigmaFooter.displayName = 'FigmaFooter';
 
+const ToastContext = createContext(null);
+const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a FigmaToastProvider');
+    }
+    return context;
+};
+const FigmaToastProvider = ({ children, position = 'top-right', maxToasts = 5, }) => {
+    const [toasts, setToasts] = useState([]);
+    const addToast = useCallback((toast) => {
+        const id = `figma-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, maxToasts);
+        });
+    }, [maxToasts]);
+    const removeToast = useCallback((id) => {
+        setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, []);
+    const showToast = useCallback((message, options = {}) => {
+        addToast({
+            title: message,
+            status: 'info',
+            duration: 3000,
+            showProgress: false,
+            showCloseButton: true,
+            ...options,
+        });
+    }, [addToast]);
+    const contextValue = {
+        addToast,
+        removeToast,
+        showToast,
+    };
+    return (React.createElement(ToastContext.Provider, { value: contextValue },
+        children,
+        React.createElement(ToastContainer, { toasts: toasts, onRemoveToast: removeToast, position: position, maxToasts: maxToasts })));
+};
+const FigmaToast = ({ message, isVisible, onClose, type = 'info', duration = 3000, className, }) => {
+    if (!isVisible)
+        return null;
+    return (React.createElement("div", { className: `figma-toast-fixed-wrap ${className || ''}` },
+        React.createElement(Toast, { id: "figma-toast-simple", title: message, status: type, duration: duration, showProgress: false, showCloseButton: true, onClose: onClose, position: "top-right" })));
+};
+const useFigmaToast = () => {
+    const [toast, setToast] = useState({ message: '', isVisible: false });
+    const showToast = useCallback((message, type = 'info') => {
+        setToast({ message, isVisible: true });
+        setTimeout(() => setToast({ message: '', isVisible: false }), 3000);
+    }, []);
+    const toastComponent = toast.isVisible ? (React.createElement(FigmaToast, { message: toast.message, isVisible: toast.isVisible, onClose: () => setToast({ message: '', isVisible: false }), type: "info", duration: 3000 })) : null;
+    return { showToast, toastComponent };
+};
+FigmaToastProvider.displayName = 'FigmaToastProvider';
+FigmaToast.displayName = 'FigmaToast';
+
 const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, className, t }) => {
     const [inputValue, setInputValue] = useState(value);
     useEffect(() => {
@@ -917,5 +979,5 @@ const UpgradeBanner = ({ onClick, isLoading = false, title = { key: 'banner.upgr
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaSection, FigmaSidebar, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection };
+export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection, useFigmaToast, useToast };
 //# sourceMappingURL=index.esm.js.map