@designbasekorea/figma-ui 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.ts +72 -72
  4. package/dist/index.esm.css +1 -1
  5. package/dist/index.esm.css.map +1 -1
  6. package/dist/index.esm.js +133 -105
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +144 -116
  9. package/dist/index.js.map +1 -1
  10. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -6,7 +6,26 @@ var ui = require('@designbasekorea/ui');
6
6
 
7
7
  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}
8
8
 
9
- const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links, position = 'top-left', className, t = (key) => key, }) => {
9
+ const DonationBadge$1 = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
10
+ const handleClick = () => {
11
+ if (onClick) {
12
+ onClick();
13
+ }
14
+ else {
15
+ window.open(donationUrl, '_blank', 'noopener,noreferrer');
16
+ }
17
+ };
18
+ const Icon = iconType === 'heart' ? icons.HeartFilledIcon : icons.CoffeeFilledIcon;
19
+ const classes = clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${size}`, `designbase-figma-donation-badge--${iconType}`, className);
20
+ return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": text },
21
+ React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
22
+ React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
23
+ };
24
+ DonationBadge$1.displayName = 'DonationBadge';
25
+
26
+ DonationBadge;
27
+
28
+ const LogoDropdown$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links, position = 'top-left', className, t = (key) => key, }) => {
10
29
  const [isOpen, setIsOpen] = React.useState(false);
11
30
  const toggleDropdown = () => setIsOpen(!isOpen);
12
31
  const handleLinkClick = (url) => {
@@ -33,9 +52,9 @@ const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase'
33
52
  React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
34
53
  React.createElement(icons.ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
35
54
  };
36
- LogoDropdown.displayName = 'LogoDropdown';
55
+ LogoDropdown$1.displayName = 'LogoDropdown';
37
56
 
38
- const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
57
+ const PaymentBadge$1 = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
39
58
  const getBadgeText = () => {
40
59
  if (text)
41
60
  return text;
@@ -48,30 +67,13 @@ const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) =>
48
67
  };
49
68
  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()))));
50
69
  };
51
- PaymentBadge.displayName = 'PaymentBadge';
52
-
53
- const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
54
- const handleClick = () => {
55
- if (onClick) {
56
- onClick();
57
- }
58
- else {
59
- window.open(donationUrl, '_blank', 'noopener,noreferrer');
60
- }
61
- };
62
- const Icon = iconType === 'heart' ? icons.HeartFilledIcon : icons.CoffeeFilledIcon;
63
- const classes = clsx('designbase-figma-donation-badge', `designbase-figma-donation-badge--${size}`, `designbase-figma-donation-badge--${iconType}`, className);
64
- return (React.createElement("button", { type: "button", className: classes, onClick: handleClick, "aria-label": text },
65
- React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
66
- React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
67
- };
68
- DonationBadge.displayName = 'DonationBadge';
70
+ PaymentBadge$1.displayName = 'PaymentBadge';
69
71
 
70
72
  const DEFAULT_LANGUAGES = [
71
73
  { code: 'ko', label: 'KO' },
72
74
  { code: 'en', label: 'EN' },
73
75
  ];
74
- const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
76
+ const LanguageSelector$1 = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
75
77
  const handleLanguageChange = (languageCode) => {
76
78
  if (onLanguageChange) {
77
79
  onLanguageChange(languageCode);
@@ -82,9 +84,9 @@ const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGE
82
84
  'designbase-figma-language-selector__button--active': currentLanguage === language.code,
83
85
  }), onClick: () => handleLanguageChange(language.code), "aria-label": `${language.label} 언어 선택`, "aria-pressed": currentLanguage === language.code }, language.label)))));
84
86
  };
85
- LanguageSelector.displayName = 'LanguageSelector';
87
+ LanguageSelector$1.displayName = 'LanguageSelector';
86
88
 
87
- 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, }) => {
89
+ 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, }) => {
88
90
  const isActive = paymentStatus === 'PAID';
89
91
  const hasChildren = React.Children.count(children) > 0;
90
92
  const classes = clsx('designbase-figma-footer', {
@@ -93,8 +95,8 @@ const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logo
93
95
  return (React.createElement("footer", { className: classes },
94
96
  React.createElement("div", { className: "designbase-figma-footer__wrap" },
95
97
  React.createElement("div", { className: "designbase-figma-footer__left" },
96
- React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
97
- showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
98
+ React.createElement(LogoDropdown$1, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
99
+ showLanguageSelector && (React.createElement(LanguageSelector$1, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
98
100
  showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
99
101
  !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,
100
102
  React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
@@ -104,14 +106,16 @@ const Footer = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logo
104
106
  " ",
105
107
  t('perDay')),
106
108
  React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
107
- React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
109
+ React.createElement(PaymentBadge$1, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
108
110
  showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
109
- React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
111
+ React.createElement(DonationBadge$1, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
110
112
  children));
111
113
  };
112
- Footer.displayName = 'Footer';
114
+ Footer$1.displayName = 'Footer';
113
115
 
114
- const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
116
+ Footer;
117
+
118
+ const FormWithSubmit$1 = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
115
119
  const [inputValue, setInputValue] = React.useState(value);
116
120
  React.useEffect(() => {
117
121
  setInputValue(value);
@@ -131,9 +135,36 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
131
135
  React.createElement(ui.Input, { value: inputValue, onChange: handleChange, placeholder: placeholder, disabled: disabled || isSubmitting, size: "m" })),
132
136
  React.createElement(ui.Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
133
137
  };
134
- FormWithSubmit.displayName = 'FormWithSubmit';
138
+ FormWithSubmit$1.displayName = 'FormWithSubmit';
139
+
140
+ FormWithSubmit;
141
+
142
+ const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
143
+ const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
144
+ 'designbase-figma-interaction-wrapper--fixed': fixed,
145
+ });
146
+ const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
147
+ 'designbase-figma-interaction--visible': visible,
148
+ }, className);
149
+ if (!visible)
150
+ return null;
151
+ return (React.createElement("div", { className: wrapperClasses },
152
+ React.createElement("div", { className: feedbackClasses },
153
+ React.createElement("div", { className: "designbase-figma-interaction__content" },
154
+ React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
155
+ message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, message)),
156
+ statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
157
+ rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
158
+ };
159
+ InteractionFeedback$1.displayName = 'InteractionFeedback';
160
+
161
+ InteractionFeedback;
162
+
163
+ LanguageSelector;
135
164
 
136
- const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
165
+ LogoDropdown;
166
+
167
+ const PaymentStatusSection$1 = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
137
168
  const remainingActivations = activationLimit - activationUsage;
138
169
  return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
139
170
  React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
@@ -152,7 +183,7 @@ const PaymentStatusSection = ({ status, usageCount, activationLimit, activationU
152
183
  activationLimit)),
153
184
  React.createElement(ui.Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
154
185
  };
155
- PaymentStatusSection.displayName = 'PaymentStatusSection';
186
+ PaymentStatusSection$1.displayName = 'PaymentStatusSection';
156
187
 
157
188
  const defaultFeatures = [
158
189
  { name: '사용 제한', free: '일일 제한', pro: '무제한' },
@@ -165,7 +196,7 @@ const defaultPricing = {
165
196
  monthly: 2,
166
197
  yearly: 21.6,
167
198
  };
168
- const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
199
+ const PricingComparison$1 = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
169
200
  const [isYearly, setIsYearly] = React.useState(false);
170
201
  const getPrice = () => {
171
202
  const price = isYearly ? pricing.yearly : pricing.monthly;
@@ -214,9 +245,9 @@ const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricin
214
245
  ? (feature.pro ? '✓' : '✗')
215
246
  : feature.pro))))))));
216
247
  };
217
- PricingComparison.displayName = 'PricingComparison';
248
+ PricingComparison$1.displayName = 'PricingComparison';
218
249
 
219
- const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
250
+ const PageLicense$1 = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
220
251
  const [isSubmitting, setIsSubmitting] = React.useState(false);
221
252
  const [isDeactivating, setIsDeactivating] = React.useState(false);
222
253
  const [licenseKey, setLicenseKey] = React.useState(initialLicenseKey);
@@ -302,39 +333,73 @@ const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageC
302
333
  React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
303
334
  ? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
304
335
  : t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
305
- React.createElement(PricingComparison, { t: t }),
336
+ React.createElement(PricingComparison$1, { t: t }),
306
337
  isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
307
338
  React.createElement("div", { className: "designbase-figma-page-license__section-header" },
308
339
  React.createElement("h3", null, t('licenseActivated') || '라이선스 활성화됨'),
309
340
  React.createElement(ui.Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
310
341
  React.createElement(icons.MoreHorizontalIcon, { size: 16 }))),
311
- React.createElement(PaymentStatusSection, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
342
+ React.createElement(PaymentStatusSection$1, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
312
343
  React.createElement("div", { className: "designbase-figma-page-license__section" },
313
344
  React.createElement("div", { className: "designbase-figma-page-license__section-header" },
314
345
  React.createElement("h3", null, t('enterLicenseKey') || '라이선스 키 입력'),
315
346
  !isPaid && paymentPageUrl && (React.createElement(ui.Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
316
347
  React.createElement("span", null, t('purchaseLicense') || '라이선스 구매'),
317
348
  React.createElement(icons.ExternalLinkIcon, { size: 16 })))),
318
- 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...' }),
349
+ 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...' }),
319
350
  React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, isPaid
320
351
  ? t('licenseActivatedSuccess') || '라이선스가 성공적으로 활성화되었습니다.'
321
352
  : t('enterLicenseFromEmail') || '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))),
322
353
  React.createElement(ui.Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
323
354
  React.createElement(icons.CloseIcon, { size: 20 }))));
324
355
  };
325
- PageLicense.displayName = 'PageLicense';
356
+ PageLicense$1.displayName = 'PageLicense';
326
357
 
327
- const UpgradeBanner = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
328
- return (React.createElement("div", { className: `designbase-figma-upgrade-banner ${className || ''}` },
329
- React.createElement("div", { className: "designbase-figma-upgrade-banner__content" },
330
- React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
331
- React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, title || t('bannerTitle') || '프로로 업그레이드하세요'),
332
- React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
333
- React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
358
+ PageLicense;
359
+
360
+ PaymentBadge;
361
+
362
+ PaymentStatusSection;
363
+
364
+ PricingComparison;
365
+
366
+ const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
367
+ const [isCompleted, setIsCompleted] = React.useState(false);
368
+ const { processedNodes, totalNodes } = progress;
369
+ const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
370
+ React.useEffect(() => {
371
+ if (processedNodes === totalNodes && totalNodes > 0) {
372
+ setIsCompleted(true);
373
+ if (onComplete)
374
+ onComplete();
375
+ }
376
+ }, [processedNodes, totalNodes, onComplete]);
377
+ React.useEffect(() => {
378
+ if (isOpen)
379
+ setIsCompleted(false);
380
+ }, [isOpen]);
381
+ const handleStop = () => {
382
+ if (onStop)
383
+ onStop();
384
+ onClose();
385
+ };
386
+ const modalClasses = clsx('designbase-figma-progress-modal', className);
387
+ return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: isCompleted ? completedMessage : title, size: "s", className: modalClasses, showCloseButton: false },
388
+ React.createElement("div", { className: "designbase-figma-progress-modal__content" },
389
+ React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
390
+ React.createElement(icons.CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
391
+ React.createElement(ui.Spinner, { size: "m" }))))),
392
+ React.createElement("p", { className: "designbase-figma-progress-modal__message" }, isCompleted ? completedMessage : processingMessage),
393
+ React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
394
+ React.createElement(ui.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
395
+ helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
396
+ 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))))));
334
397
  };
335
- UpgradeBanner.displayName = 'UpgradeBanner';
398
+ ProgressModal$1.displayName = 'ProgressModal';
336
399
 
337
- const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
400
+ ProgressModal;
401
+
402
+ const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
338
403
  const [isResizing, setIsResizing] = React.useState(false);
339
404
  const resizeHandleRef = React.useRef(null);
340
405
  React.useEffect(() => {
@@ -372,28 +437,11 @@ const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight =
372
437
  setIsResizing(true);
373
438
  }, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(icons.ExpandIcon, { size: 12 }))));
374
439
  };
375
- ResizablePlugin.displayName = 'ResizablePlugin';
440
+ ResizablePlugin$1.displayName = 'ResizablePlugin';
376
441
 
377
- const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
378
- const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
379
- 'designbase-figma-interaction-wrapper--fixed': fixed,
380
- });
381
- const feedbackClasses = clsx('designbase-figma-interaction', `designbase-figma-interaction--${status}`, {
382
- 'designbase-figma-interaction--visible': visible,
383
- }, className);
384
- if (!visible)
385
- return null;
386
- return (React.createElement("div", { className: wrapperClasses },
387
- React.createElement("div", { className: feedbackClasses },
388
- React.createElement("div", { className: "designbase-figma-interaction__content" },
389
- React.createElement("div", { className: "designbase-figma-interaction__left" }, leftContent || (React.createElement("div", { className: "designbase-figma-interaction__message" },
390
- message && (React.createElement("span", { className: "designbase-figma-interaction__text" }, message)),
391
- statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
392
- rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
393
- };
394
- InteractionFeedback.displayName = 'InteractionFeedback';
442
+ ResizablePlugin;
395
443
 
396
- const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
444
+ const SettingsModal$1 = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
397
445
  const [tempCategories, setTempCategories] = React.useState(initialCategories);
398
446
  const [draggedIndex, setDraggedIndex] = React.useState(null);
399
447
  React.useEffect(() => {
@@ -505,56 +553,36 @@ const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categor
505
553
  React.createElement(ui.Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, "\uCDE8\uC18C"),
506
554
  React.createElement(ui.Button, { onPress: handleSave, variant: "primary", size: "s" }, "\uC800\uC7A5")))));
507
555
  };
508
- SettingsModal.displayName = 'SettingsModal';
556
+ SettingsModal$1.displayName = 'SettingsModal';
509
557
 
510
- const ProgressModal = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
511
- const [isCompleted, setIsCompleted] = React.useState(false);
512
- const { processedNodes, totalNodes } = progress;
513
- const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
514
- React.useEffect(() => {
515
- if (processedNodes === totalNodes && totalNodes > 0) {
516
- setIsCompleted(true);
517
- if (onComplete)
518
- onComplete();
519
- }
520
- }, [processedNodes, totalNodes, onComplete]);
521
- React.useEffect(() => {
522
- if (isOpen)
523
- setIsCompleted(false);
524
- }, [isOpen]);
525
- const handleStop = () => {
526
- if (onStop)
527
- onStop();
528
- onClose();
529
- };
530
- const modalClasses = clsx('designbase-figma-progress-modal', className);
531
- return (React.createElement(ui.Modal, { isOpen: isOpen, onClose: isCompleted ? onClose : undefined, title: isCompleted ? completedMessage : title, size: "s", className: modalClasses, showCloseButton: false },
532
- React.createElement("div", { className: "designbase-figma-progress-modal__content" },
533
- React.createElement("div", { className: "designbase-figma-progress-modal__icon", "aria-hidden": "true" }, isCompleted ? (completeIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-success" },
534
- React.createElement(icons.CircleCheckFilledIcon, null)))) : (loadingIcon || (React.createElement("div", { className: "designbase-figma-progress-modal__icon-loading" },
535
- React.createElement(ui.Spinner, { size: "m" }))))),
536
- React.createElement("p", { className: "designbase-figma-progress-modal__message" }, isCompleted ? completedMessage : processingMessage),
537
- React.createElement("div", { className: "designbase-figma-progress-modal__status" }, `${processedNodes} / ${totalNodes} (${progressPercentage.toFixed(1)}%)`),
538
- React.createElement(ui.Progressbar, { value: progressPercentage, size: "m", variant: isCompleted ? 'success' : 'primary', style: "animated", fullWidth: true }),
539
- helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
540
- 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))))));
558
+ SettingsModal;
559
+
560
+ const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
561
+ return (React.createElement("div", { className: `designbase-figma-upgrade-banner ${className || ''}` },
562
+ React.createElement("div", { className: "designbase-figma-upgrade-banner__content" },
563
+ React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
564
+ React.createElement("h3", { className: "designbase-figma-upgrade-banner__title" }, title || t('bannerTitle') || '프로로 업그레이드하세요'),
565
+ React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
566
+ React.createElement(ui.Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
541
567
  };
542
- ProgressModal.displayName = 'ProgressModal';
568
+ UpgradeBanner$1.displayName = 'UpgradeBanner';
569
+
570
+ UpgradeBanner;
543
571
 
544
- exports.DonationBadge = DonationBadge;
545
- exports.Footer = Footer;
546
- exports.FormWithSubmit = FormWithSubmit;
547
- exports.InteractionFeedback = InteractionFeedback;
548
- exports.LanguageSelector = LanguageSelector;
549
- exports.LogoDropdown = LogoDropdown;
550
- exports.PageLicense = PageLicense;
551
- exports.PaymentBadge = PaymentBadge;
552
- exports.PaymentStatusSection = PaymentStatusSection;
553
- exports.PricingComparison = PricingComparison;
554
- exports.ProgressModal = ProgressModal;
555
- exports.ResizablePlugin = ResizablePlugin;
556
- exports.SettingsModal = SettingsModal;
557
- exports.UpgradeBanner = UpgradeBanner;
572
+ exports.DonationBadge = DonationBadge$1;
573
+ exports.Footer = Footer$1;
574
+ exports.FormWithSubmit = FormWithSubmit$1;
575
+ exports.InteractionFeedback = InteractionFeedback$1;
576
+ exports.LanguageSelector = LanguageSelector$1;
577
+ exports.LogoDropdown = LogoDropdown$1;
578
+ exports.PageLicense = PageLicense$1;
579
+ exports.PaymentBadge = PaymentBadge$1;
580
+ exports.PaymentStatusSection = PaymentStatusSection$1;
581
+ exports.PricingComparison = PricingComparison$1;
582
+ exports.ProgressModal = ProgressModal$1;
583
+ exports.ResizablePlugin = ResizablePlugin$1;
584
+ exports.SettingsModal = SettingsModal$1;
585
+ exports.UpgradeBanner = UpgradeBanner$1;
558
586
  Object.keys(ui).forEach(function (k) {
559
587
  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
560
588
  enumerable: true,