@designbasekorea/figma-ui 0.1.7 → 0.1.8

package/dist/index.js

@@ -6,7 +6,7 @@ var ui = require('@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 DonationBadge$1 = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -21,11 +21,9 @@ const DonationBadge$1 = ({ donationUrl = 'https://buymeacoffee.com/designbase',
         React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
         React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
 };
-DonationBadge$1.displayName = 'DonationBadge';
+DonationBadge.displayName = 'DonationBadge';
 
-DonationBadge;
-
-const LogoDropdown$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links, position = 'top-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] = React.useState(false);
     const toggleDropdown = () => setIsOpen(!isOpen);
     const handleLinkClick = (url) => {
@@ -52,9 +50,9 @@ const LogoDropdown$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbas
                 React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
                 React.createElement(icons.ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
 };
-LogoDropdown$1.displayName = 'LogoDropdown';
+LogoDropdown.displayName = 'LogoDropdown';
 
-const PaymentBadge$1 = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
+const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
     const getBadgeText = () => {
         if (text)
             return text;
@@ -67,13 +65,13 @@ const PaymentBadge$1 = ({ isActive, onClick, isLoading = false, text, t = (key)
     };
     return (React.createElement("div", { className: `designbase-figma-payment-badge ${className || ''} ${isActive ? 'active' : 'free'}`, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' } }, isLoading ? (React.createElement(ui.Spinner, { size: "s" })) : (React.createElement(ui.Badge, { variant: getBadgeVariant(), size: "s", className: "designbase-figma-payment-badge__badge" }, getBadgeText()))));
 };
-PaymentBadge$1.displayName = 'PaymentBadge';
+PaymentBadge.displayName = 'PaymentBadge';
 
 const DEFAULT_LANGUAGES = [
     { code: 'ko', label: 'KO' },
     { code: 'en', label: 'EN' },
 ];
-const LanguageSelector$1 = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
+const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
     const handleLanguageChange = (languageCode) => {
         if (onLanguageChange) {
             onLanguageChange(languageCode);
@@ -84,9 +82,9 @@ const LanguageSelector$1 = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUA
             '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$1.displayName = 'LanguageSelector';
+LanguageSelector.displayName = 'LanguageSelector';
 
-const Footer$1 = ({ 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 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', {
@@ -95,8 +93,8 @@ const Footer$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', lo
     return (React.createElement("footer", { className: classes },
         React.createElement("div", { className: "designbase-figma-footer__wrap" },
             React.createElement("div", { className: "designbase-figma-footer__left" },
-                React.createElement(LogoDropdown$1, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
-                showLanguageSelector && (React.createElement(LanguageSelector$1, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
+                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),
@@ -106,16 +104,14 @@ const Footer$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', lo
                         " ",
                         t('perDay')),
                     React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
-                React.createElement(PaymentBadge$1, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
+                React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
             showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
-                React.createElement(DonationBadge$1, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
+                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
         children));
 };
-Footer$1.displayName = 'Footer';
-
-Footer;
+Footer.displayName = 'Footer';
 
-const FormWithSubmit$1 = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
+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] = React.useState(value);
     React.useEffect(() => {
         setInputValue(value);
@@ -135,11 +131,9 @@ const FormWithSubmit$1 = ({ onLicenseSubmit, disabled = false, isSubmitting = fa
             React.createElement(ui.Input, { value: inputValue, onChange: handleChange, placeholder: placeholder, disabled: disabled || isSubmitting, size: "m" })),
         React.createElement(ui.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
 };
-FormWithSubmit$1.displayName = 'FormWithSubmit';
+FormWithSubmit.displayName = 'FormWithSubmit';
 
-FormWithSubmit;
-
-const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
+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,
     });
@@ -156,15 +150,9 @@ const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, lef
                     statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
                 rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
 };
-InteractionFeedback$1.displayName = 'InteractionFeedback';
-
-InteractionFeedback;
+InteractionFeedback.displayName = 'InteractionFeedback';
 
-LanguageSelector;
-
-LogoDropdown;
-
-const PaymentStatusSection$1 = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
+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" },
@@ -183,7 +171,7 @@ const PaymentStatusSection$1 = ({ status, usageCount, activationLimit, activatio
                     activationLimit)),
             React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
 };
-PaymentStatusSection$1.displayName = 'PaymentStatusSection';
+PaymentStatusSection.displayName = 'PaymentStatusSection';
 
 const defaultFeatures = [
     { name: '사용 제한', free: '일일 제한', pro: '무제한' },
@@ -196,7 +184,7 @@ const defaultPricing = {
     monthly: 2,
     yearly: 21.6,
 };
-const PricingComparison$1 = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
+const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
     const [isYearly, setIsYearly] = React.useState(false);
     const getPrice = () => {
         const price = isYearly ? pricing.yearly : pricing.monthly;
@@ -245,9 +233,9 @@ const PricingComparison$1 = ({ features = defaultFeatures, pricing = defaultPric
                     ? (feature.pro ? '✓' : '✗')
                     : feature.pro))))))));
 };
-PricingComparison$1.displayName = 'PricingComparison';
+PricingComparison.displayName = 'PricingComparison';
 
-const PageLicense$1 = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, 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] = React.useState(false);
     const [isDeactivating, setIsDeactivating] = React.useState(false);
     const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
@@ -333,37 +321,29 @@ const PageLicense$1 = ({ status: initialStatus, onClose, usageCount: initialUsag
                 React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
                     ? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
                     : t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
-            React.createElement(PricingComparison$1, { t: t }),
+            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(ui.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
                         React.createElement(icons.MoreHorizontalIcon, { size: 16 }))),
-                React.createElement(PaymentStatusSection$1, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
+                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(ui.Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
                         React.createElement("span", null, t('purchaseLicense') || '라이선스 구매'),
                         React.createElement(icons.ExternalLinkIcon, { size: 16 })))),
-                React.createElement(FormWithSubmit$1, { 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(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(ui.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(icons.CloseIcon, { size: 20 }))));
 };
-PageLicense$1.displayName = 'PageLicense';
-
-PageLicense;
+PageLicense.displayName = 'PageLicense';
 
-PaymentBadge;
-
-PaymentStatusSection;
-
-PricingComparison;
-
-const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
+const ProgressModal = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
     const [isCompleted, setIsCompleted] = React.useState(false);
     const { processedNodes, totalNodes } = progress;
     const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
@@ -395,11 +375,9 @@ const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', comp
             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(ui.Button, { onPress: onClose, variant: "primary", size: "m", fullWidth: true }, confirmButtonText)) : (React.createElement(ui.Button, { onPress: handleStop, variant: "secondary", size: "m", fullWidth: true }, stopButtonText))))));
 };
-ProgressModal$1.displayName = 'ProgressModal';
-
-ProgressModal;
+ProgressModal.displayName = 'ProgressModal';
 
-const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
+const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
     const [isResizing, setIsResizing] = React.useState(false);
     const resizeHandleRef = React.useRef(null);
     React.useEffect(() => {
@@ -437,11 +415,9 @@ const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight
                 setIsResizing(true);
             }, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(icons.ExpandIcon, { size: 12 }))));
 };
-ResizablePlugin$1.displayName = 'ResizablePlugin';
+ResizablePlugin.displayName = 'ResizablePlugin';
 
-ResizablePlugin;
-
-const SettingsModal$1 = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
+const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
     const [tempCategories, setTempCategories] = React.useState(initialCategories);
     const [draggedIndex, setDraggedIndex] = React.useState(null);
     React.useEffect(() => {
@@ -553,11 +529,9 @@ const SettingsModal$1 = ({ isOpen, onClose, categories: initialCategories, categ
                 React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, "\uCDE8\uC18C"),
                 React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" }, "\uC800\uC7A5")))));
 };
-SettingsModal$1.displayName = 'SettingsModal';
-
-SettingsModal;
+SettingsModal.displayName = 'SettingsModal';
 
-const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
+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" },
@@ -565,24 +539,22 @@ const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, butto
                 React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
             React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
 };
-UpgradeBanner$1.displayName = 'UpgradeBanner';
-
-UpgradeBanner;
+UpgradeBanner.displayName = 'UpgradeBanner';
 
-exports.DonationBadge = DonationBadge$1;
-exports.Footer = Footer$1;
-exports.FormWithSubmit = FormWithSubmit$1;
-exports.InteractionFeedback = InteractionFeedback$1;
-exports.LanguageSelector = LanguageSelector$1;
-exports.LogoDropdown = LogoDropdown$1;
-exports.PageLicense = PageLicense$1;
-exports.PaymentBadge = PaymentBadge$1;
-exports.PaymentStatusSection = PaymentStatusSection$1;
-exports.PricingComparison = PricingComparison$1;
-exports.ProgressModal = ProgressModal$1;
-exports.ResizablePlugin = ResizablePlugin$1;
-exports.SettingsModal = SettingsModal$1;
-exports.UpgradeBanner = UpgradeBanner$1;
+exports.DonationBadge = DonationBadge;
+exports.Footer = Footer;
+exports.FormWithSubmit = FormWithSubmit;
+exports.InteractionFeedback = InteractionFeedback;
+exports.LanguageSelector = LanguageSelector;
+exports.LogoDropdown = LogoDropdown;
+exports.PageLicense = PageLicense;
+exports.PaymentBadge = PaymentBadge;
+exports.PaymentStatusSection = PaymentStatusSection;
+exports.PricingComparison = PricingComparison;
+exports.ProgressModal = ProgressModal;
+exports.ResizablePlugin = ResizablePlugin;
+exports.SettingsModal = SettingsModal;
+exports.UpgradeBanner = UpgradeBanner;
 Object.keys(ui).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,