@designbasekorea/figma-ui 0.1.2 → 0.1.5

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ExternalLinkIcon, StarIcon, KeyIcon, SettingsIcon, CloseIcon, ArrowsExpandIcon } from '@designbasekorea/icons';
-import { Badge, Spinner, Input, Button, Toggle, useToast, Divider } from '@designbasekorea/ui';
+import { ExternalLinkIcon, HeartFilledIcon, CoffeeFilledIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, ExpandIcon, GripVerticalIcon, CircleCheckFilledIcon } from '@designbasekorea/icons';
+import { Logo, Spinner, Badge, Input, Button, SegmentControl, Modal, Toggle, 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}
 
-const LogoDropdown = ({ logoSrc, logoAlt = 'Logo', links, position = 'bottom-left', className, t = (key) => key, }) => {
+const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links, position = 'top-left', className, t = (key) => key, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const toggleDropdown = () => setIsOpen(!isOpen);
     const handleLinkClick = (url) => {
@@ -17,8 +17,15 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'Logo', links, position = 'bottom-lef
     const classes = clsx('designbase-figma-logo-dropdown', `designbase-figma-logo-dropdown--${position}`, {
         'designbase-figma-logo-dropdown--open': isOpen,
     }, className);
+    const renderLogo = () => {
+        if (logoSrc) {
+            return (React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }));
+        }
+        return (React.createElement("div", { className: "designbase-figma-logo-dropdown__logo", onClick: toggleDropdown },
+            React.createElement(Logo, { type: logoType, size: logoSize, variant: "default" })));
+    };
     return (React.createElement("div", { className: classes },
-        React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }),
+        renderLogo(),
         isOpen && (React.createElement("ul", { className: "designbase-figma-logo-dropdown__menu" }, links.map((link, index) => (React.createElement("li", { key: index, className: "designbase-figma-logo-dropdown__item" },
             React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", onClick: () => handleLinkClick(link.url) },
                 link.icon && (React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" }, link.icon)),
@@ -27,7 +34,56 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'Logo', links, position = 'bottom-lef
 };
 LogoDropdown.displayName = 'LogoDropdown';
 
-const Footer = ({ logoSrc, logoAlt = 'Logo', logoLinks = [], onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, className, t = (key) => key, children, }) => {
+const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
+    const getBadgeText = () => {
+        if (text)
+            return text;
+        return isActive
+            ? (t('proUser') || '프로 계정')
+            : (t('usingFree') || '무료 사용');
+    };
+    const getBadgeVariant = () => {
+        return isActive ? 'success' : 'secondary';
+    };
+    return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(Spinner, { size: "s" })) : (React.createElement(Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
+};
+PaymentBadge.displayName = 'PaymentBadge';
+
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
+    const handleClick = () => {
+        if (onClick) {
+            onClick();
+        }
+        else {
+            window.open(donationUrl, '_blank', 'noopener,noreferrer');
+        }
+    };
+    const Icon = iconType === 'heart' ? HeartFilledIcon : CoffeeFilledIcon;
+    const classes = clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${size}`, `designbase-figma-donation-badge--${iconType}`, className);
+    return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": text },
+        React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
+        React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
+};
+DonationBadge.displayName = 'DonationBadge';
+
+const DEFAULT_LANGUAGES = [
+    { code: 'ko', label: 'KO' },
+    { code: 'en', label: 'EN' },
+];
+const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
+    const handleLanguageChange = (languageCode) => {
+        if (onLanguageChange) {
+            onLanguageChange(languageCode);
+        }
+    };
+    const classes = clsx('designbase-figma-language-selector', `designbase-figma-language-selector--${size}`, className);
+    return (React.createElement("div", { className: classes }, languages.map((language) => (React.createElement("button", { key: language.code, type: "button", className: clsx('designbase-figma-language-selector__button', {
+            'designbase-figma-language-selector__button--active': currentLanguage === language.code,
+        }), onClick: () => handleLanguageChange(language.code), "aria-label": `${language.label} 언어 선택`, "aria-pressed": currentLanguage === language.code }, language.label)))));
+};
+LanguageSelector.displayName = 'LanguageSelector';
+
+const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', logoLinks = [], onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = false, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = (key) => key, children, }) => {
     const isActive = paymentStatus === 'PAID';
     const hasChildren = React.Children.count(children) > 0;
     const classes = clsx('designbase-figma-footer', {
@@ -35,7 +91,9 @@ const Footer = ({ logoSrc, logoAlt = 'Logo', logoLinks = [], onLicensePageClick,
     }, className);
     return (React.createElement("footer", { className: classes },
         React.createElement("div", { className: "designbase-figma-footer__wrap" },
-            React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, links: logoLinks, position: "bottom-left", t: t }),
+            React.createElement("div", { className: "designbase-figma-footer__left" },
+                React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
+                showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
             showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
                 !isLoading && (React.createElement("div", { className: "designbase-figma-footer__usage-info" }, isActive ? (React.createElement("span", { className: "designbase-figma-footer__unlimited-usage" }, t('unlimitedUsage'))) : (React.createElement(React.Fragment, null,
                     React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
@@ -45,7 +103,9 @@ const Footer = ({ logoSrc, logoAlt = 'Logo', logoLinks = [], onLicensePageClick,
                         " ",
                         t('perDay')),
                     React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
-                React.createElement(Badge, { variant: isActive ? 'success' : 'secondary', size: "s", onClick: onLicensePageClick, style: { cursor: 'pointer' } }, isLoading ? t('loading') : isActive ? t('premium') : t('free'))))),
+                React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
+            showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
+                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
         children));
 };
 Footer.displayName = 'Footer';
@@ -65,33 +125,31 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
         onValueChange?.(newValue);
     };
     return (React.createElement("form", { className: `designbase-figma-form-with-submit ${className || ''}`, onSubmit: handleSubmit },
-        isSubmitting && (React.createElement("div", { className: "designbase-figma-form-with-submit__spinner" },
-            React.createElement(Spinner, { size: "s" }))),
         React.createElement("div", { className: "designbase-figma-form-with-submit__field" },
             React.createElement("label", { className: "designbase-figma-form-with-submit__label" }, label),
             React.createElement(Input, { value: inputValue, onChange: handleChange, placeholder: placeholder, disabled: disabled || isSubmitting, size: "m" })),
-        React.createElement(Button, { type: "submit", variant: "primary", size: "m", disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
+        React.createElement(Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
 const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
     const remainingActivations = activationLimit - activationUsage;
     return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
-        React.createElement("p", { className: "designbase-figma-payment-status__license-key" },
-            "\uB77C\uC774\uC13C\uC2A4 \uD0A4: ",
+        React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
+            "\uB77C\uC774\uC120\uC2A4 \uD0A4: ",
             React.createElement("span", null, licenseKey)),
         showDetails && (React.createElement("div", { className: "designbase-figma-payment-status__details" },
             React.createElement("div", { className: "designbase-figma-payment-status__activation-info" },
-                React.createElement("p", { className: "designbase-figma-payment-status__remaining" },
+                React.createElement("div", { className: "designbase-figma-payment-status__remaining" },
                     remainingActivations,
                     " ",
                     remainingActivations === 1 ? '활성' : '활성',
                     " \uC790\uB9AC \uB0A8\uC74C"),
-                React.createElement("p", { className: "designbase-figma-payment-status__usage" },
+                React.createElement("div", { className: "designbase-figma-payment-status__usage" },
                     activationUsage,
                     "/",
                     activationLimit)),
-            React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이센스 비활성화')))));
+            React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
 };
 PaymentStatusSection.displayName = 'PaymentStatusSection';
 
@@ -112,24 +170,40 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
         const price = isYearly ? pricing.yearly : pricing.monthly;
         return `$${price.toLocaleString()} / ${isYearly ? t('perYear') : t('perMonth')}`;
     };
+    const getDiscountPercentage = () => {
+        const monthlyPrice = pricing.monthly * 12;
+        const yearlyPrice = pricing.yearly;
+        const discount = Math.round(((monthlyPrice - yearlyPrice) / monthlyPrice) * 100);
+        return discount;
+    };
     return (React.createElement("div", { className: `designbase-figma-pricing-comparison ${className || ''}` },
         React.createElement("div", { className: "designbase-figma-pricing-comparison__billing-toggle" },
-            React.createElement("span", { className: !isYearly ? 'active' : '' }, t('monthlyBilling') || '월간 결제'),
-            React.createElement(Toggle, { size: "s", checked: isYearly, onChange: (e) => setIsYearly(e.target.checked) }),
-            React.createElement("span", { className: isYearly ? 'active' : '' }, t('yearlyBilling') || '연간 결제'),
-            React.createElement("span", { className: "designbase-figma-pricing-comparison__discount-badge" }, t('save10Percent') || '10% 절약')),
+            React.createElement(SegmentControl, { value: isYearly ? 'yearly' : 'monthly', onChange: (value) => setIsYearly(value === 'yearly'), options: [
+                    {
+                        value: 'monthly',
+                        label: t('monthlyBilling') || '월간 결제',
+                    },
+                    {
+                        value: 'yearly',
+                        label: (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                            t('yearlyBilling') || '연간 결제',
+                            React.createElement("span", { className: "designbase-figma-pricing-comparison__discount-badge" },
+                                getDiscountPercentage(),
+                                "% \uC808\uC57D"))),
+                    },
+                ], size: "s" })),
         React.createElement("table", { className: "designbase-figma-pricing-comparison__table" },
             React.createElement("thead", null,
                 React.createElement("tr", null,
                     React.createElement("th", null, t('feature') || '기능'),
                     React.createElement("th", null,
                         React.createElement("div", { className: "designbase-figma-pricing-comparison__plan-name" }, t('free') || 'Free'),
-                        React.createElement("p", null, t('freePrice') || '$0')),
+                        React.createElement("div", null, t('freePrice') || '$0')),
                     React.createElement("th", { className: "designbase-figma-pricing-comparison__recommended" },
                         React.createElement("div", { className: "designbase-figma-pricing-comparison__plan-name" },
                             t('pro') || 'Pro',
                             React.createElement("span", { className: "designbase-figma-pricing-comparison__recommended-badge" }, t('recommended') || '추천')),
-                        React.createElement("p", null, getPrice())))),
+                        React.createElement("div", null, getPrice())))),
             React.createElement("tbody", null, features.map((feature, index) => (React.createElement("tr", { key: index },
                 React.createElement("td", null, feature.name),
                 React.createElement("td", null, typeof feature.free === 'boolean'
@@ -141,13 +215,12 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
 };
 PricingComparison.displayName = 'PricingComparison';
 
-const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl = 'https://designbasekorea.lemonsqueezy.com/buy/fc202a67-6f1a-4a61-9242-c643b282e230', t = (key) => key, className, }) => {
+const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [isDeactivating, setIsDeactivating] = useState(false);
     const [licenseKey, setLicenseKey] = useState(initialLicenseKey);
     const [status, setStatus] = useState(initialStatus);
     const [usageCount, setLocalUsageCount] = useState(initialUsageCount);
-    const { showToast } = useToast();
     const [activationLimit, setActivationLimit] = useState(0);
     const [activationUsage, setActivationUsage] = useState(0);
     const [showDetails, setShowDetails] = useState(false);
@@ -173,7 +246,7 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
             if (type === 'license-verification-result') {
                 setIsSubmitting(false);
                 if (message)
-                    showToast(message);
+                    console.log('License verification:', message);
                 if (success) {
                     setStatus('PAID');
                     setPaymentStatus('PAID');
@@ -182,7 +255,7 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
             if (type === 'license-deactivation-result') {
                 setIsDeactivating(false);
                 if (message)
-                    showToast(message);
+                    console.log('License deactivation:', message);
                 if (success) {
                     setStatus('UNPAID');
                     setPaymentStatus('UNPAID');
@@ -198,7 +271,7 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
             parent.postMessage({ pluginMessage: { type: 'initialize' } }, '*');
         }
         return () => window.removeEventListener('message', handleMessage);
-    }, [setPaymentStatus, setUsageCount, showToast]);
+    }, [setPaymentStatus, setUsageCount]);
     const handleLicenseSubmit = async (submittedLicenseKey) => {
         setIsSubmitting(true);
         if (typeof parent !== 'undefined') {
@@ -227,24 +300,25 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
                     React.createElement("h2", null, isPaid ? t('proAccount') || '프로 계정' : t('upgradeToPro') || '프로로 업그레이드')),
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
-                    : t('purchaseForUnlimited') || '라이센스 구매 후 무제한 접근이 가능합니다.')),
+                    : t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
             React.createElement(PricingComparison, { t: t }),
-            React.createElement(Divider, null),
             isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
                 React.createElement("div", { className: "designbase-figma-page-license__section-header" },
                     React.createElement("h3", null, t('licenseActivated') || '라이선스 활성화됨'),
-                    React.createElement(Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s" },
-                        React.createElement(SettingsIcon, { size: 16 }))),
+                    React.createElement(Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
+                        React.createElement(MoreHorizontalIcon, { size: 16 }))),
                 React.createElement(PaymentStatusSection, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
             React.createElement("div", { className: "designbase-figma-page-license__section" },
                 React.createElement("div", { className: "designbase-figma-page-license__section-header" },
                     React.createElement("h3", null, t('enterLicenseKey') || '라이선스 키 입력'),
-                    !isPaid && (React.createElement(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" }, t('purchaseLicense') || '라이센스 구매'))),
-                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: isPaid, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: t('licenseKey') || 'License Key', submitText: t('submit') || 'Submit', submittingText: t('verifying') || 'Verifying...' }),
+                    !isPaid && paymentPageUrl && (React.createElement(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
+                        React.createElement("span", null, t('purchaseLicense') || '라이선스 구매'),
+                        React.createElement(ExternalLinkIcon, { size: 16 })))),
+                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: t('licenseKey') || 'License Key', submitText: t('submit') || 'Submit', submittingText: t('verifying') || 'Verifying...' }),
                 React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, isPaid
                     ? t('licenseActivatedSuccess') || '라이선스가 성공적으로 활성화되었습니다.'
                     : t('enterLicenseFromEmail') || '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))),
-        React.createElement("button", { className: "designbase-figma-page-license__close", onClick: onClose, "aria-label": "Close" },
+        React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(CloseIcon, { size: 20 }))));
 };
 PageLicense.displayName = 'PageLicense';
@@ -295,9 +369,176 @@ const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight =
         React.createElement("div", { ref: resizeHandleRef, className: `designbase-figma-resizable-plugin__handle ${isResizing ? 'resizing' : ''}`, onMouseDown: (e) => {
                 e.preventDefault();
                 setIsResizing(true);
-            }, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(ArrowsExpandIcon, { size: 12 }))));
+            }, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(ExpandIcon, { size: 12 }))));
 };
 ResizablePlugin.displayName = 'ResizablePlugin';
 
-export { Footer, FormWithSubmit, LogoDropdown, PageLicense, PaymentStatusSection, PricingComparison, ResizablePlugin, UpgradeBanner };
+const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
+    const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
+        'designbase-figma-interaction-wrapper--fixed': fixed,
+    });
+    const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
+        'designbase-figma-interaction--visible': visible,
+    }, className);
+    if (!visible)
+        return null;
+    return (React.createElement("div", { className: wrapperClasses },
+        React.createElement("div", { className: feedbackClasses },
+            React.createElement("div", { className: "designbase-figma-interaction__content" },
+                React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
+                    message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, message)),
+                    statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
+                rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
+};
+InteractionFeedback.displayName = 'InteractionFeedback';
+
+const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
+    const [tempCategories, setTempCategories] = useState(initialCategories);
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    useEffect(() => {
+        setTempCategories(initialCategories);
+    }, [initialCategories]);
+    const handleDragStart = (e, index) => {
+        setDraggedIndex(index);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', index.toString());
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    };
+    const handleDrop = (e, dropIndex) => {
+        e.preventDefault();
+        const dragIndex = Number(e.dataTransfer.getData('text/plain'));
+        if (dragIndex === dropIndex) {
+            setDraggedIndex(null);
+            return;
+        }
+        const newCategories = [...tempCategories];
+        const [draggedItem] = newCategories.splice(dragIndex, 1);
+        const enabledCategories = newCategories.filter(cat => cat.enabled);
+        const disabledCategories = newCategories.filter(cat => !cat.enabled);
+        if (draggedItem.enabled) {
+            if (dropIndex <= enabledCategories.length) {
+                const adjustedDropIndex = dragIndex < dropIndex ? dropIndex - 1 : dropIndex;
+                enabledCategories.splice(adjustedDropIndex, 0, draggedItem);
+            }
+            else {
+                enabledCategories.push(draggedItem);
+            }
+        }
+        else {
+            if (dropIndex > enabledCategories.length) {
+                const disabledDropIndex = dropIndex - enabledCategories.length;
+                const adjustedDropIndex = dragIndex < dropIndex ? disabledDropIndex - 1 : disabledDropIndex;
+                disabledCategories.splice(adjustedDropIndex, 0, draggedItem);
+            }
+            else {
+                disabledCategories.unshift(draggedItem);
+            }
+        }
+        const reorderedCategories = [
+            ...enabledCategories.map((cat, idx) => ({ ...cat, order: idx })),
+            ...disabledCategories.map((cat, idx) => ({ ...cat, order: enabledCategories.length + idx }))
+        ];
+        setTempCategories(reorderedCategories);
+        setDraggedIndex(null);
+    };
+    const handleDragEnd = () => {
+        setDraggedIndex(null);
+    };
+    const handleToggle = (id) => {
+        setTempCategories(prev => {
+            const enabledCategories = prev.filter(cat => cat.id !== id && cat.enabled);
+            const disabledCategories = prev.filter(cat => cat.id !== id && !cat.enabled);
+            const targetCategory = prev.find(cat => cat.id === id);
+            if (!targetCategory)
+                return prev;
+            const newTargetCategory = { ...targetCategory, enabled: !targetCategory.enabled };
+            if (newTargetCategory.enabled) {
+                return [
+                    ...enabledCategories,
+                    newTargetCategory,
+                    ...disabledCategories
+                ].map((cat, idx) => ({ ...cat, order: idx }));
+            }
+            else {
+                return [
+                    ...enabledCategories,
+                    ...disabledCategories,
+                    newTargetCategory
+                ].map((cat, idx) => ({ ...cat, order: idx }));
+            }
+        });
+    };
+    const handleSave = () => {
+        onSave(tempCategories);
+        onClose();
+    };
+    const handleCancel = () => {
+        setTempCategories(initialCategories);
+        onClose();
+    };
+    const handleReset = () => {
+        if (onReset) {
+            onReset();
+        }
+    };
+    const modalClasses = clsx('designbase-figma-settings-modal', className);
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, title: title, size: "m", className: modalClasses },
+        React.createElement("div", { className: "designbase-figma-settings-modal__content" },
+            description && (React.createElement("p", { className: "designbase-figma-settings-modal__description" }, description)),
+            React.createElement("ul", { className: "designbase-figma-settings-modal__list" }, tempCategories.map((category, index) => (React.createElement("li", { key: category.id, draggable: true, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, className: clsx('designbase-figma-settings-modal__item', {
+                    'designbase-figma-settings-modal__item--disabled': !category.enabled,
+                    'designbase-figma-settings-modal__item--dragging': draggedIndex === index,
+                }) },
+                React.createElement("div", { className: "designbase-figma-settings-modal__item-info" },
+                    React.createElement("span", { className: "designbase-figma-settings-modal__drag-handle" },
+                        React.createElement(GripVerticalIcon, { size: 16 })),
+                    category.icon && (React.createElement("span", { className: "designbase-figma-settings-modal__category-icon" }, category.icon)),
+                    React.createElement("span", { className: "designbase-figma-settings-modal__category-title" }, category.title)),
+                React.createElement(Toggle, { checked: category.enabled, onChange: () => handleToggle(category.id), size: "s" })))))),
+        React.createElement("div", { className: "designbase-figma-settings-modal__footer" },
+            onReset && (React.createElement(Button, { onPress: handleReset, variant: "tertiary", size: "s" }, "\uCD08\uAE30\uD654")),
+            React.createElement("div", { className: "designbase-figma-settings-modal__footer-right" },
+                React.createElement(Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, "\uCDE8\uC18C"),
+                React.createElement(Button, { onPress: handleSave, variant: "primary", size: "s" }, "\uC800\uC7A5")))));
+};
+SettingsModal.displayName = 'SettingsModal';
+
+const ProgressModal = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
+    const [isCompleted, setIsCompleted] = useState(false);
+    const { processedNodes, totalNodes } = progress;
+    const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
+    useEffect(() => {
+        if (processedNodes === totalNodes && totalNodes > 0) {
+            setIsCompleted(true);
+            if (onComplete)
+                onComplete();
+        }
+    }, [processedNodes, totalNodes, onComplete]);
+    useEffect(() => {
+        if (isOpen)
+            setIsCompleted(false);
+    }, [isOpen]);
+    const handleStop = () => {
+        if (onStop)
+            onStop();
+        onClose();
+    };
+    const modalClasses = clsx('designbase-figma-progress-modal', className);
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: isCompleted ? completedMessage : title, size: "s", className: modalClasses, showCloseButton: false },
+        React.createElement("div", { className: "designbase-figma-progress-modal__content" },
+            React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
+                React.createElement(CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
+                React.createElement(Spinner, { size: "m" }))))),
+            React.createElement("p", { className: "designbase-figma-progress-modal__message" }, isCompleted ? completedMessage : processingMessage),
+            React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
+            React.createElement(Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
+            helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
+            React.createElement("div", { className: "designbase-figma-progress-modal__actions" }, isCompleted ? (React.createElement(Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, confirmButtonText)) : (React.createElement(Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, stopButtonText))))));
+};
+ProgressModal.displayName = 'ProgressModal';
+
+export { DonationBadge, Footer, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, UpgradeBanner };
 //# sourceMappingURL=index.esm.js.map