@designbasekorea/figma-ui 0.1.0 → 0.1.4

package/dist/index.esm.js

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { ExternalLinkIcon } from '@designbasekorea/icons';
-import { Badge } from '@designbasekorea/ui';
+import React, { useState, useEffect, useRef } from 'react';
+import { ExternalLinkIcon, HeartFilledIcon, CoffeeFilledIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, ExpandIcon, GripVerticalIcon, CircleCheckFilledIcon } from '@designbasekorea/icons';
+import { 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 = 'Logo', links, position = 'top-left', className, t = (key) => key, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const toggleDropdown = () => setIsOpen(!isOpen);
     const handleLinkClick = (url) => {
@@ -27,7 +27,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 = 'Logo', 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 +84,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, 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,10 +96,442 @@ 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';
 
-export { Footer, LogoDropdown };
+const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
+    const [inputValue, setInputValue] = useState(value);
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        await onLicenseSubmit(inputValue);
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        onValueChange?.(newValue);
+    };
+    return (React.createElement("form", { className: `designbase-figma-form-with-submit ${className || ''}`, onSubmit: handleSubmit },
+        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", 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("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("div", { className: "designbase-figma-payment-status__remaining" },
+                    remainingActivations,
+                    " ",
+                    remainingActivations === 1 ? '활성' : '활성',
+                    " \uC790\uB9AC \uB0A8\uC74C"),
+                React.createElement("div", { className: "designbase-figma-payment-status__usage" },
+                    activationUsage,
+                    "/",
+                    activationLimit)),
+            React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
+};
+PaymentStatusSection.displayName = 'PaymentStatusSection';
+
+const defaultFeatures = [
+    { name: '사용 제한', free: '일일 제한', pro: '무제한' },
+    { name: '모든 주제 사용', free: false, pro: true },
+    { name: '최대 선택 제한', free: '최대 5개', pro: '최대 30개' },
+    { name: '더미 개수', free: '1,400개', pro: '4,400개 +' },
+    { name: '커스텀 숫자 사용', free: false, pro: true },
+];
+const defaultPricing = {
+    monthly: 2,
+    yearly: 21.6,
+};
+const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
+    const [isYearly, setIsYearly] = useState(false);
+    const getPrice = () => {
+        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(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("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("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'
+                    ? (feature.free ? '✓' : '✗')
+                    : feature.free),
+                React.createElement("td", null, typeof feature.pro === 'boolean'
+                    ? (feature.pro ? '✓' : '✗')
+                    : feature.pro))))))));
+};
+PricingComparison.displayName = 'PricingComparison';
+
+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 [activationLimit, setActivationLimit] = useState(0);
+    const [activationUsage, setActivationUsage] = useState(0);
+    const [showDetails, setShowDetails] = useState(false);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            const { type, paymentStatus, licenseKey, activationLimit, activationUsage, success, message, usageCount } = event.data.pluginMessage || {};
+            if (type === 'update-plugin-status' || type === 'license-verification-result') {
+                if (paymentStatus)
+                    setStatus(paymentStatus);
+                if (licenseKey)
+                    setLicenseKey(licenseKey);
+                if (activationLimit !== undefined)
+                    setActivationLimit(activationLimit);
+                if (activationUsage !== undefined)
+                    setActivationUsage(activationUsage);
+                if (paymentStatus)
+                    setPaymentStatus(paymentStatus);
+                if (usageCount !== undefined) {
+                    setLocalUsageCount(usageCount);
+                    setUsageCount(usageCount);
+                }
+            }
+            if (type === 'license-verification-result') {
+                setIsSubmitting(false);
+                if (message)
+                    console.log('License verification:', message);
+                if (success) {
+                    setStatus('PAID');
+                    setPaymentStatus('PAID');
+                }
+            }
+            if (type === 'license-deactivation-result') {
+                setIsDeactivating(false);
+                if (message)
+                    console.log('License deactivation:', message);
+                if (success) {
+                    setStatus('UNPAID');
+                    setPaymentStatus('UNPAID');
+                    setLicenseKey('');
+                    setLocalUsageCount(20);
+                    setActivationLimit(0);
+                    setActivationUsage(0);
+                }
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        if (typeof parent !== 'undefined') {
+            parent.postMessage({ pluginMessage: { type: 'initialize' } }, '*');
+        }
+        return () => window.removeEventListener('message', handleMessage);
+    }, [setPaymentStatus, setUsageCount]);
+    const handleLicenseSubmit = async (submittedLicenseKey) => {
+        setIsSubmitting(true);
+        if (typeof parent !== 'undefined') {
+            parent.postMessage({
+                pluginMessage: {
+                    type: 'verify-license',
+                    licenseKey: submittedLicenseKey
+                }
+            }, '*');
+        }
+    };
+    const handleDeactivateLicense = () => {
+        setIsDeactivating(true);
+        if (typeof parent !== 'undefined') {
+            parent.postMessage({
+                pluginMessage: { type: 'deactivate-license' }
+            }, '*');
+        }
+    };
+    const isPaid = status === 'PAID';
+    return (React.createElement("div", { className: `designbase-figma-page-license ${className || ''}` },
+        React.createElement("div", { className: "designbase-figma-page-license__content" },
+            React.createElement("div", { className: "designbase-figma-page-license__header" },
+                React.createElement("div", { className: "designbase-figma-page-license__title" },
+                    isPaid ? React.createElement(StarIcon, { size: 24 }) : React.createElement(KeyIcon, { size: 24 }),
+                    React.createElement("h2", null, isPaid ? t('proAccount') || '프로 계정' : t('upgradeToPro') || '프로로 업그레이드')),
+                React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
+                    ? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
+                    : t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
+            React.createElement(PricingComparison, { t: t }),
+            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", 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 && 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", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
+            React.createElement(CloseIcon, { size: 20 }))));
+};
+PageLicense.displayName = 'PageLicense';
+
+const UpgradeBanner = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
+    return (React.createElement("div", { className: `designbase-figma-upgrade-banner ${className || ''}` },
+        React.createElement("div", { className: "designbase-figma-upgrade-banner__content" },
+            React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
+                React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, title || t('bannerTitle') || '프로로 업그레이드하세요'),
+                React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
+            React.createElement(Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
+};
+UpgradeBanner.displayName = 'UpgradeBanner';
+
+const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
+    const [isResizing, setIsResizing] = useState(false);
+    const resizeHandleRef = useRef(null);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isResizing)
+                return;
+            const newWidth = Math.max(minWidth, Math.min(maxWidth, e.clientX + 10));
+            const newHeight = Math.max(minHeight, Math.min(maxHeight, e.clientY + 10));
+            if (typeof parent !== 'undefined') {
+                parent.postMessage({
+                    pluginMessage: {
+                        type: 'resize',
+                        width: newWidth,
+                        height: newHeight
+                    }
+                }, '*');
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+        if (isResizing) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, minWidth, maxWidth, minHeight, maxHeight]);
+    return (React.createElement("div", { className: `designbase-figma-resizable-plugin ${className || ''}` },
+        children,
+        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(ExpandIcon, { size: 12 }))));
+};
+ResizablePlugin.displayName = 'ResizablePlugin';
+
+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