@designbasekorea/figma-ui 0.1.7 → 0.1.9
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.
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +72 -65
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +84 -77
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ interface LogoDropdownProps {
|
|
|
21
21
|
logoAlt?: string;
|
|
22
22
|
logoType?: 'designbase' | 'designbase-mark' | 'custom';
|
|
23
23
|
logoSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
24
|
-
links
|
|
24
|
+
links?: LogoDropdownLink[];
|
|
25
25
|
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
26
26
|
className?: string;
|
|
27
27
|
t?: (key: string) => string;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
-
import { HeartFilledIcon, CoffeeFilledIcon, ExternalLinkIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ExpandIcon, GripVerticalIcon } from '@designbasekorea/icons';
|
|
2
|
+
import { HeartFilledIcon, CoffeeFilledIcon, GlobeIcon, YoutubeIcon, InstagramIcon, CodeIcon, MailIcon, ExternalLinkIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ExpandIcon, GripVerticalIcon } from '@designbasekorea/icons';
|
|
3
3
|
import { Logo, Spinner, Badge, Input, Button, SegmentControl, Modal, Progressbar, Toggle } from '@designbasekorea/ui';
|
|
4
4
|
export * from '@designbasekorea/ui';
|
|
5
5
|
|
|
6
6
|
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}
|
|
7
7
|
|
|
8
|
-
const DonationBadge
|
|
8
|
+
const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', text = 'Buy me a coffee', iconType = 'heart', size = 'm', className, onClick, }) => {
|
|
9
9
|
const handleClick = () => {
|
|
10
10
|
if (onClick) {
|
|
11
11
|
onClick();
|
|
@@ -20,11 +20,44 @@ const DonationBadge$1 = ({ donationUrl = 'https://buymeacoffee.com/designbase',
|
|
|
20
20
|
React.createElement(Icon, { className: "designbase-figma-donation-badge__icon" }),
|
|
21
21
|
React.createElement("span", { className: "designbase-figma-donation-badge__text" }, text)));
|
|
22
22
|
};
|
|
23
|
-
DonationBadge
|
|
23
|
+
DonationBadge.displayName = 'DonationBadge';
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const defaultLinks = [
|
|
26
|
+
{
|
|
27
|
+
name: 'officialWebsite',
|
|
28
|
+
url: 'https://designbase.co.kr',
|
|
29
|
+
icon: React.createElement(GlobeIcon, { size: 20 }),
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: 'youtube',
|
|
33
|
+
url: 'https://youtube.com/designbase',
|
|
34
|
+
icon: React.createElement(YoutubeIcon, { size: 20 }),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'instagram',
|
|
38
|
+
url: 'https://instagram.com/designbase',
|
|
39
|
+
icon: React.createElement(InstagramIcon, { size: 20 }),
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: 'figmaCommunity',
|
|
43
|
+
url: 'https://www.figma.com/@designbasekorea',
|
|
44
|
+
icon: React.createElement(CodeIcon, { size: 20 }),
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'contact',
|
|
48
|
+
url: 'mailto:designbasekorea@gmail.com',
|
|
49
|
+
icon: React.createElement(MailIcon, { size: 20 }),
|
|
50
|
+
},
|
|
51
|
+
];
|
|
52
|
+
const defaultTranslations = {
|
|
53
|
+
officialWebsite: '공식 웹사이트',
|
|
54
|
+
youtube: '유튜브',
|
|
55
|
+
instagram: '인스타그램',
|
|
56
|
+
figmaCommunity: '피그마 커뮤니티',
|
|
57
|
+
contact: '문의하기',
|
|
58
|
+
};
|
|
59
|
+
const defaultT = (key) => defaultTranslations[key] || key;
|
|
60
|
+
const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t = defaultT, }) => {
|
|
28
61
|
const [isOpen, setIsOpen] = useState(false);
|
|
29
62
|
const toggleDropdown = () => setIsOpen(!isOpen);
|
|
30
63
|
const handleLinkClick = (url) => {
|
|
@@ -51,9 +84,9 @@ const LogoDropdown$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbas
|
|
|
51
84
|
React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
|
|
52
85
|
React.createElement(ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
|
|
53
86
|
};
|
|
54
|
-
LogoDropdown
|
|
87
|
+
LogoDropdown.displayName = 'LogoDropdown';
|
|
55
88
|
|
|
56
|
-
const PaymentBadge
|
|
89
|
+
const PaymentBadge = ({ isActive, onClick, isLoading = false, text, t = (key) => key, className, }) => {
|
|
57
90
|
const getBadgeText = () => {
|
|
58
91
|
if (text)
|
|
59
92
|
return text;
|
|
@@ -66,13 +99,13 @@ const PaymentBadge$1 = ({ isActive, onClick, isLoading = false, text, t = (key)
|
|
|
66
99
|
};
|
|
67
100
|
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()))));
|
|
68
101
|
};
|
|
69
|
-
PaymentBadge
|
|
102
|
+
PaymentBadge.displayName = 'PaymentBadge';
|
|
70
103
|
|
|
71
104
|
const DEFAULT_LANGUAGES = [
|
|
72
105
|
{ code: 'ko', label: 'KO' },
|
|
73
106
|
{ code: 'en', label: 'EN' },
|
|
74
107
|
];
|
|
75
|
-
const LanguageSelector
|
|
108
|
+
const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGES, onLanguageChange, size = 's', className, }) => {
|
|
76
109
|
const handleLanguageChange = (languageCode) => {
|
|
77
110
|
if (onLanguageChange) {
|
|
78
111
|
onLanguageChange(languageCode);
|
|
@@ -83,9 +116,9 @@ const LanguageSelector$1 = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUA
|
|
|
83
116
|
'designbase-figma-language-selector__button--active': currentLanguage === language.code,
|
|
84
117
|
}), onClick: () => handleLanguageChange(language.code), "aria-label": `${language.label} 언어 선택`, "aria-pressed": currentLanguage === language.code }, language.label)))));
|
|
85
118
|
};
|
|
86
|
-
LanguageSelector
|
|
119
|
+
LanguageSelector.displayName = 'LanguageSelector';
|
|
87
120
|
|
|
88
|
-
const Footer
|
|
121
|
+
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
122
|
const isActive = paymentStatus === 'PAID';
|
|
90
123
|
const hasChildren = React.Children.count(children) > 0;
|
|
91
124
|
const classes = clsx('designbase-figma-footer', {
|
|
@@ -94,8 +127,8 @@ const Footer$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', lo
|
|
|
94
127
|
return (React.createElement("footer", { className: classes },
|
|
95
128
|
React.createElement("div", { className: "designbase-figma-footer__wrap" },
|
|
96
129
|
React.createElement("div", { className: "designbase-figma-footer__left" },
|
|
97
|
-
React.createElement(LogoDropdown
|
|
98
|
-
showLanguageSelector && (React.createElement(LanguageSelector
|
|
130
|
+
React.createElement(LogoDropdown, { logoSrc: logoSrc, logoAlt: logoAlt, logoType: logoType, logoSize: logoSize, links: logoLinks, position: "top-left", t: t }),
|
|
131
|
+
showLanguageSelector && (React.createElement(LanguageSelector, { currentLanguage: currentLanguage, languages: languages, onLanguageChange: onLanguageChange, size: "s" }))),
|
|
99
132
|
showPaymentStatus && (React.createElement("div", { className: "designbase-figma-footer__payment-states" },
|
|
100
133
|
!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,
|
|
101
134
|
React.createElement("span", { className: "designbase-figma-footer__usage-count" }, usageCount),
|
|
@@ -105,16 +138,14 @@ const Footer$1 = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', lo
|
|
|
105
138
|
" ",
|
|
106
139
|
t('perDay')),
|
|
107
140
|
React.createElement("span", { className: "designbase-figma-footer__reset-info" }, t('resetsDaily')))))),
|
|
108
|
-
React.createElement(PaymentBadge
|
|
141
|
+
React.createElement(PaymentBadge, { isActive: isActive, onClick: onLicensePageClick, isLoading: isLoading, t: t }))),
|
|
109
142
|
showDonation && (React.createElement("div", { className: "designbase-figma-footer__donation" },
|
|
110
|
-
React.createElement(DonationBadge
|
|
143
|
+
React.createElement(DonationBadge, { donationUrl: donationUrl, text: donationText, iconType: "heart", size: "s" })))),
|
|
111
144
|
children));
|
|
112
145
|
};
|
|
113
|
-
Footer
|
|
114
|
-
|
|
115
|
-
Footer;
|
|
146
|
+
Footer.displayName = 'Footer';
|
|
116
147
|
|
|
117
|
-
const FormWithSubmit
|
|
148
|
+
const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = false, value = '', onValueChange, label = 'License Key', placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', submitText = 'Submit', submittingText = 'Verifying...', className, }) => {
|
|
118
149
|
const [inputValue, setInputValue] = useState(value);
|
|
119
150
|
useEffect(() => {
|
|
120
151
|
setInputValue(value);
|
|
@@ -134,11 +165,9 @@ const FormWithSubmit$1 = ({ onLicenseSubmit, disabled = false, isSubmitting = fa
|
|
|
134
165
|
React.createElement(Input, { value: inputValue, onChange: handleChange, placeholder: placeholder, disabled: disabled || isSubmitting, size: "m" })),
|
|
135
166
|
React.createElement(Button, { type: "submit", variant: "primary", size: "m", loading: isSubmitting, disabled: !inputValue.trim() || isSubmitting || disabled, fullWidth: true }, isSubmitting ? submittingText : submitText)));
|
|
136
167
|
};
|
|
137
|
-
FormWithSubmit
|
|
168
|
+
FormWithSubmit.displayName = 'FormWithSubmit';
|
|
138
169
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
|
|
170
|
+
const InteractionFeedback = ({ status = 'default', message, statusMessage, leftContent, rightContent, visible = true, className, fixed = true, }) => {
|
|
142
171
|
const wrapperClasses = clsx('designbase-figma-interaction-wrapper', {
|
|
143
172
|
'designbase-figma-interaction-wrapper--fixed': fixed,
|
|
144
173
|
});
|
|
@@ -155,15 +184,9 @@ const InteractionFeedback$1 = ({ status = 'default', message, statusMessage, lef
|
|
|
155
184
|
statusMessage && (React.createElement("span", { className: "designbase-figma-interaction__status-text" }, statusMessage))))),
|
|
156
185
|
rightContent && (React.createElement("div", { className: "designbase-figma-interaction__right" }, rightContent))))));
|
|
157
186
|
};
|
|
158
|
-
InteractionFeedback
|
|
159
|
-
|
|
160
|
-
InteractionFeedback;
|
|
161
|
-
|
|
162
|
-
LanguageSelector;
|
|
163
|
-
|
|
164
|
-
LogoDropdown;
|
|
187
|
+
InteractionFeedback.displayName = 'InteractionFeedback';
|
|
165
188
|
|
|
166
|
-
const PaymentStatusSection
|
|
189
|
+
const PaymentStatusSection = ({ status, usageCount, activationLimit, activationUsage, licenseKey, onDeactivate, isDeactivating = false, showDetails = false, className, }) => {
|
|
167
190
|
const remainingActivations = activationLimit - activationUsage;
|
|
168
191
|
return (React.createElement("div", { className: `designbase-figma-payment-status ${className || ''}` },
|
|
169
192
|
React.createElement("div", { className: "designbase-figma-payment-status__license-key" },
|
|
@@ -182,7 +205,7 @@ const PaymentStatusSection$1 = ({ status, usageCount, activationLimit, activatio
|
|
|
182
205
|
activationLimit)),
|
|
183
206
|
React.createElement(Button, { onClick: onDeactivate, variant: "tertiary", size: "s", disabled: isDeactivating }, isDeactivating ? '비활성화중...' : '라이선스 비활성화')))));
|
|
184
207
|
};
|
|
185
|
-
PaymentStatusSection
|
|
208
|
+
PaymentStatusSection.displayName = 'PaymentStatusSection';
|
|
186
209
|
|
|
187
210
|
const defaultFeatures = [
|
|
188
211
|
{ name: '사용 제한', free: '일일 제한', pro: '무제한' },
|
|
@@ -195,7 +218,7 @@ const defaultPricing = {
|
|
|
195
218
|
monthly: 2,
|
|
196
219
|
yearly: 21.6,
|
|
197
220
|
};
|
|
198
|
-
const PricingComparison
|
|
221
|
+
const PricingComparison = ({ features = defaultFeatures, pricing = defaultPricing, t = (key) => key, className, }) => {
|
|
199
222
|
const [isYearly, setIsYearly] = useState(false);
|
|
200
223
|
const getPrice = () => {
|
|
201
224
|
const price = isYearly ? pricing.yearly : pricing.monthly;
|
|
@@ -244,9 +267,9 @@ const PricingComparison$1 = ({ features = defaultFeatures, pricing = defaultPric
|
|
|
244
267
|
? (feature.pro ? '✓' : '✗')
|
|
245
268
|
: feature.pro))))))));
|
|
246
269
|
};
|
|
247
|
-
PricingComparison
|
|
270
|
+
PricingComparison.displayName = 'PricingComparison';
|
|
248
271
|
|
|
249
|
-
const PageLicense
|
|
272
|
+
const PageLicense = ({ status: initialStatus, onClose, usageCount: initialUsageCount = 0, onLicenseSubmit, licenseKey: initialLicenseKey = '', setPaymentStatus, setUsageCount, setShowLicensePage, paymentPageUrl, t = (key) => key, className, }) => {
|
|
250
273
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
251
274
|
const [isDeactivating, setIsDeactivating] = useState(false);
|
|
252
275
|
const [licenseKey, setLicenseKey] = useState(initialLicenseKey);
|
|
@@ -332,37 +355,29 @@ const PageLicense$1 = ({ status: initialStatus, onClose, usageCount: initialUsag
|
|
|
332
355
|
React.createElement("p", { className: "designbase-figma-page-license__description" }, isPaid
|
|
333
356
|
? t('allFeaturesAvailable') || '모든 기능을 사용할 수 있습니다.'
|
|
334
357
|
: t('purchaseForUnlimited') || '라이선스 구매 후 무제한 접근이 가능합니다.')),
|
|
335
|
-
React.createElement(PricingComparison
|
|
358
|
+
React.createElement(PricingComparison, { t: t }),
|
|
336
359
|
isPaid && (React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
337
360
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
338
361
|
React.createElement("h3", null, t('licenseActivated') || '라이선스 활성화됨'),
|
|
339
362
|
React.createElement(Button, { onClick: () => setShowDetails(!showDetails), variant: "tertiary", size: "s", iconOnly: true },
|
|
340
363
|
React.createElement(MoreHorizontalIcon, { size: 16 }))),
|
|
341
|
-
React.createElement(PaymentStatusSection
|
|
364
|
+
React.createElement(PaymentStatusSection, { status: status, usageCount: usageCount, activationLimit: activationLimit, activationUsage: activationUsage, licenseKey: licenseKey, onDeactivate: handleDeactivateLicense, isDeactivating: isDeactivating, showDetails: showDetails }))),
|
|
342
365
|
React.createElement("div", { className: "designbase-figma-page-license__section" },
|
|
343
366
|
React.createElement("div", { className: "designbase-figma-page-license__section-header" },
|
|
344
367
|
React.createElement("h3", null, t('enterLicenseKey') || '라이선스 키 입력'),
|
|
345
368
|
!isPaid && paymentPageUrl && (React.createElement(Button, { onClick: () => window.open(paymentPageUrl, '_blank'), variant: "primary", size: "s" },
|
|
346
369
|
React.createElement("span", null, t('purchaseLicense') || '라이선스 구매'),
|
|
347
370
|
React.createElement(ExternalLinkIcon, { size: 16 })))),
|
|
348
|
-
React.createElement(FormWithSubmit
|
|
371
|
+
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
372
|
React.createElement("p", { className: "designbase-figma-page-license__disclaimer" }, isPaid
|
|
350
373
|
? t('licenseActivatedSuccess') || '라이선스가 성공적으로 활성화되었습니다.'
|
|
351
374
|
: t('enterLicenseFromEmail') || '구독 후 이메일로 받은 라이선스 키를 입력하세요.'))),
|
|
352
375
|
React.createElement(Button, { className: "designbase-figma-page-license__close", onPress: onClose, variant: "tertiary", size: "s", "aria-label": "Close" },
|
|
353
376
|
React.createElement(CloseIcon, { size: 20 }))));
|
|
354
377
|
};
|
|
355
|
-
PageLicense
|
|
378
|
+
PageLicense.displayName = 'PageLicense';
|
|
356
379
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
PaymentBadge;
|
|
360
|
-
|
|
361
|
-
PaymentStatusSection;
|
|
362
|
-
|
|
363
|
-
PricingComparison;
|
|
364
|
-
|
|
365
|
-
const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
|
|
380
|
+
const ProgressModal = ({ isOpen, onClose, progress, title = '작업 중', completedMessage = '완료되었습니다', processingMessage = '처리 중...', stopButtonText = '중지', confirmButtonText = '확인', helpText, onStop, onComplete, loadingIcon, completeIcon, className, }) => {
|
|
366
381
|
const [isCompleted, setIsCompleted] = useState(false);
|
|
367
382
|
const { processedNodes, totalNodes } = progress;
|
|
368
383
|
const progressPercentage = totalNodes > 0 ? (processedNodes / totalNodes) * 100 : 0;
|
|
@@ -394,11 +409,9 @@ const ProgressModal$1 = ({ isOpen, onClose, progress, title = '작업 중', comp
|
|
|
394
409
|
helpText && !isCompleted && (React.createElement("p", { className: "designbase-figma-progress-modal__help-text" }, helpText)),
|
|
395
410
|
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))))));
|
|
396
411
|
};
|
|
397
|
-
ProgressModal
|
|
412
|
+
ProgressModal.displayName = 'ProgressModal';
|
|
398
413
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
|
|
414
|
+
const ResizablePlugin = ({ children, minWidth = 360, maxWidth = 460, minHeight = 440, maxHeight = 700, icon, className, }) => {
|
|
402
415
|
const [isResizing, setIsResizing] = useState(false);
|
|
403
416
|
const resizeHandleRef = useRef(null);
|
|
404
417
|
useEffect(() => {
|
|
@@ -436,11 +449,9 @@ const ResizablePlugin$1 = ({ children, minWidth = 360, maxWidth = 460, minHeight
|
|
|
436
449
|
setIsResizing(true);
|
|
437
450
|
}, role: "button", tabIndex: 0, "aria-label": "Resize plugin" }, icon || React.createElement(ExpandIcon, { size: 12 }))));
|
|
438
451
|
};
|
|
439
|
-
ResizablePlugin
|
|
440
|
-
|
|
441
|
-
ResizablePlugin;
|
|
452
|
+
ResizablePlugin.displayName = 'ResizablePlugin';
|
|
442
453
|
|
|
443
|
-
const SettingsModal
|
|
454
|
+
const SettingsModal = ({ isOpen, onClose, categories: initialCategories, categoryGroups, onSave, onReset, title = '목록 변경', description = '드래그하여 순서를 변경하거나, 토글하여 카테고리를 숨길 수 있습니다.', className, }) => {
|
|
444
455
|
const [tempCategories, setTempCategories] = useState(initialCategories);
|
|
445
456
|
const [draggedIndex, setDraggedIndex] = useState(null);
|
|
446
457
|
useEffect(() => {
|
|
@@ -552,11 +563,9 @@ const SettingsModal$1 = ({ isOpen, onClose, categories: initialCategories, categ
|
|
|
552
563
|
React.createElement(Button, { onPress: handleCancel, variant: "tertiary", size: "s" }, "\uCDE8\uC18C"),
|
|
553
564
|
React.createElement(Button, { onPress: handleSave, variant: "primary", size: "s" }, "\uC800\uC7A5")))));
|
|
554
565
|
};
|
|
555
|
-
SettingsModal
|
|
566
|
+
SettingsModal.displayName = 'SettingsModal';
|
|
556
567
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
|
|
568
|
+
const UpgradeBanner = ({ onClick, isLoading = false, title, description, buttonText, t = (key) => key, className, }) => {
|
|
560
569
|
return (React.createElement("div", { className: `designbase-figma-upgrade-banner ${className || ''}` },
|
|
561
570
|
React.createElement("div", { className: "designbase-figma-upgrade-banner__content" },
|
|
562
571
|
React.createElement("div", { className: "designbase-figma-upgrade-banner__text-wrap" },
|
|
@@ -564,9 +573,7 @@ const UpgradeBanner$1 = ({ onClick, isLoading = false, title, description, butto
|
|
|
564
573
|
React.createElement("p", { className: "designbase-figma-upgrade-banner__text" }, description || t('bannerText') || '무제한 기능을 사용하고 더 많은 혜택을 누리세요.')),
|
|
565
574
|
React.createElement(Button, { onClick: onClick, variant: "primary", size: "m", disabled: isLoading }, buttonText || t('upgradeNow') || '지금 업그레이드'))));
|
|
566
575
|
};
|
|
567
|
-
UpgradeBanner
|
|
568
|
-
|
|
569
|
-
UpgradeBanner;
|
|
576
|
+
UpgradeBanner.displayName = 'UpgradeBanner';
|
|
570
577
|
|
|
571
|
-
export { DonationBadge
|
|
578
|
+
export { DonationBadge, Footer, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, UpgradeBanner };
|
|
572
579
|
//# sourceMappingURL=index.esm.js.map
|