@designbasekorea/figma-ui 0.1.89 → 0.1.91

package/dist/index.esm.js

@@ -14,7 +14,7 @@ function resolveText(t, input, fallback) {
     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 = 's', variant = 'tertiary', fullWidth = false, disabled = false, className, onClick, t }) => {
+const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = { key: 'donation.buy_me_a_coffee' }, iconType = 'heart', size = 's', variant = 'tertiary', fullWidth = false, disabled = false, showPrompt = false, promptText = { key: 'donation.prompt' }, className, onClick, t }) => {
     const handleClick = () => {
         if (onClick) {
             onClick();
@@ -25,10 +25,13 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
     };
     const Icon = iconType === 'heart' ? HeartFilledIcon : CoffeeFilledIcon;
     const displayText = resolveText(t, text, 'Buy me a coffee');
+    const displayPromptText = resolveText(t, promptText, '도움이 되었다면 커피 한 잔 사주세요!');
     const buttonSize = size;
-    return (React.createElement(Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, startIcon: Icon, className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`, className), "aria-label": displayText, style: {
-            '--designbase-figma-donation-badge-icon-color': 'var(--db-brand-primary)'
-        } }, displayText));
+    return (React.createElement("div", { className: clsx('designbase-figma-donation-badge-container', className) },
+        showPrompt && (React.createElement("div", { className: "designbase-figma-donation-badge__prompt" }, displayPromptText)),
+        React.createElement(Button, { variant: variant, size: buttonSize, fullWidth: fullWidth, disabled: disabled, onPress: handleClick, startIcon: Icon, className: clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${iconType}`), "aria-label": displayText, style: {
+                '--designbase-figma-donation-badge-icon-color': 'var(--db-brand-primary)'
+            } }, displayText)));
 };
 DonationBadge.displayName = 'DonationBadge';
 
@@ -504,8 +507,7 @@ const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount =
                             t('perDay'))))))),
                 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" }, resolveText(t, donationPromptText, t('donationPrompt')))),
-                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", t: t })))),
+                React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s", showPrompt: showDonationText && !isActive, promptText: donationPromptText, t: t })))),
         children));
 };
 FigmaFooter.displayName = 'FigmaFooter';
@@ -572,7 +574,7 @@ const useFigmaToast = () => {
 FigmaToastProvider.displayName = 'FigmaToastProvider';
 FigmaToast.displayName = 'FigmaToast';
 
-const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = { key: 'form.license_key' }, placeholder = { key: 'form.license_placeholder' }, submitText = { key: 'form.submit' }, submittingText = { key: 'form.verifying' }, className, t }) => {
+const 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' }, helperText, className, t }) => {
     const [inputValue, setInputValue] = useState(value);
     useEffect(() => {
         setInputValue(value);
@@ -589,10 +591,11 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
     const displayPlaceholder = resolveText(t, placeholder, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
     const displaySubmitText = resolveText(t, submitText, 'Submit');
     const displaySubmittingText = resolveText(t, submittingText, 'Verifying...');
+    const displayHelperText = helperText ? resolveText(t, helperText, '') : undefined;
     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" }, displayLabel),
-            React.createElement(Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, disabled: disabled || isSubmitting, size: "m" })),
+            React.createElement(Input, { value: inputValue, onChange: handleChange, placeholder: displayPlaceholder, helperText: displayHelperText, disabled: disabled || isSubmitting, size: "m" })),
         React.createElement(Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? displaySubmittingText : displaySubmitText)));
 };
 FormWithSubmit.displayName = 'FormWithSubmit';
@@ -799,8 +802,7 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
                     paymentPageUrl && (React.createElement(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
                         React.createElement("span", null, resolveText(t, { key: 'license.purchase' }, '라이선스 구매')),
                         React.createElement(ExternalLinkIcon, { size: 16 })))),
-                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, t: t }),
-                React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, resolveText(t, { key: 'license.enter_from_email' }, '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))))),
+                React.createElement(FormWithSubmit, { onLicenseSubmit: handleLicenseSubmit, disabled: false, isSubmitting: isSubmitting, value: licenseKey, onValueChange: setLicenseKey, label: { key: 'license.key' }, submitText: { key: 'license.submit' }, submittingText: { key: 'license.verifying' }, helperText: { key: 'license.enter_from_email' }, t: t })))),
         React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
             React.createElement(CloseIcon, { size: 20 }))));
 };