@designbasekorea/figma-ui 0.1.41 → 0.1.43

package/dist/index.js

@@ -6,7 +6,16 @@ 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 = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
+function resolveText(t, input, fallback) {
+    if (input == null)
+        return fallback;
+    if (typeof input === 'string') {
+        return input;
+    }
+    return t ? t(input.key, input.values) : input.key;
+}
+
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 'm', className, onClick, t }) => {
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -16,10 +25,11 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
         }
     };
     const Icon = iconType === 'heart' ? icons.HeartFilledIcon : icons.CoffeeFilledIcon;
+    const displayText = resolveText(t, text, 'Buy me a coffee');
     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 },
+    return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": displayText },
         React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
-        React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
+        React.createElement("span", { className: "designbase-figma-donation-badge__text" }, displayText)));
 };
 DonationBadge.displayName = 'DonationBadge';
 
@@ -90,7 +100,7 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
 };
 FigmaHeader.displayName = 'FigmaHeader';
 
-const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, }) => {
+const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t }) => {
     const sectionRef = React.useRef(null);
     const sectionStyle = marginBottom ? { marginBottom: `${marginBottom}px` } : {};
     const classes = [
@@ -130,7 +140,7 @@ const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom,
     }, [enableScrollNavigation, dataCategory, headerHeight, onActiveSectionChange]);
     return (React.createElement("section", { ref: sectionRef, className: classes, ...(dataCategory ? { 'data-category': dataCategory } : {}), style: sectionStyle },
         title && (React.createElement("div", { className: "designbase-figma-section__header" },
-            React.createElement("h2", { className: "designbase-figma-section__title" }, title),
+            React.createElement("h2", { className: "designbase-figma-section__title" }, resolveText(t, title)),
             React.createElement("div", { className: "designbase-figma-section__controls" },
                 iconButton,
                 onToggle && (React.createElement(ui.Toggle, { checked: isEnabled, onChange: () => onToggle(dataCategory), size: "s" }))))),
@@ -368,7 +378,7 @@ const DEFAULT_LANGUAGES = [
     { code: 'ko', label: 'KO' },
     { code: 'en', label: 'EN' },
 ];
-const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
+const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, t }) => {
     const handleLanguageChange = (languageCode) => {
         if (onLanguageChange) {
             onLanguageChange(languageCode);
@@ -377,7 +387,7 @@ const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGE
     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)))));
+        }), onClick: () => handleLanguageChange(language.code), "aria-label": `${resolveText(t, language.label)} 언어 선택`, "aria-pressed": currentLanguage === language.code }, resolveText(t, language.label))))));
 };
 LanguageSelector.displayName = 'LanguageSelector';
 
@@ -410,13 +420,13 @@ const FigmaFooter = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase',
                     React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
                 React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
             showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
-                showDonationText && !isActive && (React.createElement("div", { className: "designbase-figma-footer__donation-text" }, donationPromptText || t('donationPrompt'))),
-                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
+                showDonationText && !isActive && (React.createElement("div", { className: "designbase-figma-footer__donation-text" }, resolveText(t, donationPromptText, t('donationPrompt')))),
+                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", t: t })))),
         children));
 };
 FigmaFooter.displayName = 'FigmaFooter';
 
-const FormWithSubmit = ({ 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 = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, className, t }) => {
     const [inputValue, setInputValue] = React.useState(value);
     React.useEffect(() => {
         setInputValue(value);
@@ -430,15 +440,19 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
         setInputValue(newValue);
         onValueChange?.(newValue);
     };
+    const displayLabel = resolveText(t, label, 'License Key');
+    const displayPlaceholder = resolveText(t, placeholder, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
+    const displaySubmitText = resolveText(t, submitText, 'Submit');
+    const displaySubmittingText = resolveText(t, submittingText, 'Verifying...');
     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(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)));
+            React.createElement("label", { className: "designbase-figma-form-with-submit__label" }, displayLabel),
+            React.createElement(ui.Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, 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 ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
 
-const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightAction, visible = true, className, }) => {
+const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightAction, visible = true, className, t }) => {
     const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
         'designbase-figma-interaction--visible': visible,
     }, className);
@@ -447,30 +461,34 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
     return (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))))),
+                message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, resolveText(t, message))),
+                statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, resolveText(t, statusMessage)))))),
             rightAction && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightAction)))));
 };
 InteractionFeedback.displayName = 'InteractionFeedback';
 
-const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
+const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, t }) => {
     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: ",
+            resolveText(t, { key: 'payment.license_key_label' }, '라이선스 키'),
+            ": ",
             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"),
+                    resolveText(t, { key: 'payment.activations_remaining' }, '활성'),
+                    " ",
+                    resolveText(t, { key: 'payment.spots_remaining' }, '자리 남음')),
                 React.createElement("div", { className: "designbase-figma-payment-status__usage" },
                     activationUsage,
                     "/",
                     activationLimit)),
-            React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
+            React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating
+                ? resolveText(t, { key: 'payment.deactivating' }, '비활성화중...')
+                : resolveText(t, { key: 'payment.deactivate_license' }, '라이선스 비활성화'))))));
 };
 PaymentStatusSection.displayName = 'PaymentStatusSection';
 
@@ -832,37 +850,63 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
 };
 SettingsModal.displayName = 'SettingsModal';
 
-const TitleDescription = ({ iconSrc, iconAlt = 'Icon', title, description, button, features, className, }) => {
+const TitleDescription = ({ iconSrc, iconAlt = 'Icon', title, description, button, features, className, t }) => {
     const classes = [
         'designbase-figma-title-description',
         className,
     ]
         .filter(Boolean)
         .join(' ');
+    const displayTitle = resolveText(t, title);
+    const displayDescription = resolveText(t, description);
     return (React.createElement("div", { className: classes },
         iconSrc && (React.createElement("img", { className: "designbase-figma-title-description__icon", src: iconSrc, alt: iconAlt })),
-        React.createElement("h5", { className: "designbase-figma-title-description__title" }, title),
-        React.createElement("p", { className: "designbase-figma-title-description__description" }, description),
+        React.createElement("h5", { className: "designbase-figma-title-description__title" }, displayTitle),
+        React.createElement("p", { className: "designbase-figma-title-description__description" }, displayDescription),
         button && React.createElement("div", { className: "designbase-figma-title-description__button" }, button),
-        features && features.length > 0 && (React.createElement("ul", { className: "designbase-figma-title-description__features" }, features.map((feature, index) => (React.createElement("li", { key: index, className: "designbase-figma-title-description__feature-item" },
-            React.createElement("span", { className: "designbase-figma-title-description__check-icon" },
-                React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "12", cy: "12", r: "11", fill: "currentColor" }),
-                    React.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))),
-            React.createElement("span", { className: "designbase-figma-title-description__feature-text" }, feature))))))));
+        features && features.length > 0 && (React.createElement("ul", { className: "designbase-figma-title-description__features" }, features.map((feature, index) => {
+            const displayFeature = resolveText(t, feature);
+            return (React.createElement("li", { key: index, className: "designbase-figma-title-description__feature-item" },
+                React.createElement("span", { className: "designbase-figma-title-description__check-icon" },
+                    React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("circle", { cx: "12", cy: "12", r: "11", fill: "currentColor" }),
+                        React.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))),
+                React.createElement("span", { className: "designbase-figma-title-description__feature-text" }, displayFeature)));
+        })))));
 };
 TitleDescription.displayName = 'TitleDescription';
 
-const UpgradeBanner = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
+const UpgradeBanner = ({ onClick, isLoading = false, title = { key: 'banner.upgrade_title' }, description = { key: 'banner.upgrade_description' }, buttonText = { key: 'banner.upgrade_button' }, className, t }) => {
+    const displayTitle = resolveText(t, title, '프로로 업그레이드하세요');
+    const displayDescription = resolveText(t, description, '무제한 기능을 사용하고 더 많은 혜택을 누리세요.');
+    const displayButtonText = resolveText(t, buttonText, '지금 업그레이드');
     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(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
+                React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, displayTitle),
+                React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, displayDescription)),
+            React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, displayButtonText))));
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
+const LicenseManager = ({ licenseStatus, licenseKey = '', activationLimit = 3, activationUsage = 0, usageCount = 0, onLicenseActivate, onLicenseDeactivate, isActivating = false, isDeactivating = false, className, t }) => {
+    const [inputValue, setInputValue] = React.useState('');
+    const handleLicenseSubmit = async (submittedKey) => {
+        await onLicenseActivate(submittedKey);
+        setInputValue('');
+    };
+    const handleDeactivate = async () => {
+        await onLicenseDeactivate();
+    };
+    if (licenseStatus === 'ACTIVE' && licenseKey) {
+        return (React.createElement("div", { className: `designbase-figma-license-manager ${className || ''}` },
+            React.createElement(PaymentStatusSection, { status: "PAID", usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivate, isDeactivating: isDeactivating, showDetails: true, t: t })));
+    }
+    return (React.createElement("div", { className: `designbase-figma-license-manager ${className || ''}` },
+        React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, value: inputValue, onValueChange: setInputValue, isSubmitting: isActivating, disabled: false, t: t })));
+};
+LicenseManager.displayName = 'LicenseManager';
+
 exports.DonationBadge = DonationBadge;
 exports.FigmaContainer = FigmaContainer;
 exports.FigmaFooter = FigmaFooter;
@@ -872,6 +916,7 @@ exports.FigmaSidebar = FigmaSidebar;
 exports.FormWithSubmit = FormWithSubmit;
 exports.InteractionFeedback = InteractionFeedback;
 exports.LanguageSelector = LanguageSelector;
+exports.LicenseManager = LicenseManager;
 exports.LogoDropdown = LogoDropdown;
 exports.PageLicense = PageLicense;
 exports.PaymentBadge = PaymentBadge;
@@ -883,6 +928,7 @@ exports.SettingsModal = SettingsModal;
 exports.TitleDescription = TitleDescription;
 exports.UpgradeBanner = UpgradeBanner;
 exports.getActiveSection = getActiveSection;
+exports.resolveText = resolveText;
 exports.scrollToSection = scrollToSection;
 Object.keys(ui).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {