@designbasekorea/figma-ui 0.1.44 → 0.1.47

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
-import { HeartFilledIcon, CoffeeFilledIcon, StarIcon, KeyIcon, MoreHorizontalIcon, ExternalLinkIcon, CloseIcon, CircleCheckFilledIcon, ExpandIcon, GripVerticalIcon } from '@designbasekorea/icons';
-import { SplitView, Button, Toggle, Spinner, Badge, Input, SegmentControl, Modal, Progressbar } from '@designbasekorea/ui';
+import { HeartFilledIcon, CoffeeFilledIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, StarIcon, KeyIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ExpandIcon, GripVerticalIcon } from '@designbasekorea/icons';
+import { SplitView, Button, Toggle, Spinner, Badge, Input, Logo, SegmentControl, Modal, Progressbar } from '@designbasekorea/ui';
 export * from '@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}
@@ -326,14 +326,14 @@ const LanguageSelector = ({ currentLanguage = 'ko', languages = DEFAULT_LANGUAGE
 };
 LanguageSelector.displayName = 'LanguageSelector';
 
-const defaultTranslations = {
+const defaultTranslations$1 = {
     unlimitedUsage: '무제한 사용',
     perDay: '일',
     resetsDaily: '매일 리셋',
     donationPrompt: '이 플러그인이 유용했나요?',
 };
-const defaultT = (key) => defaultTranslations[key] || key;
-const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showDonationText = true, donationPromptText, showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = defaultT, children, }) => {
+const defaultT$1 = (key) => defaultTranslations$1[key] || key;
+const FigmaFooter = ({ onLicensePageClick, paymentStatus = 'FREE', usageCount = 0, isLoading = false, showPaymentStatus = true, maxDailyUsage = 20, showDonation = true, donationUrl = 'https://buymeacoffee.com/designbase', donationText = 'Buy me a coffee', showDonationText = true, donationPromptText, showLanguageSelector = false, currentLanguage = 'ko', languages, onLanguageChange, className, t = defaultT$1, children, }) => {
     const isActive = paymentStatus === 'PAID';
     const hasChildren = React.Children.count(children) > 0;
     const classes = clsx('designbase-figma-footer', {
@@ -368,10 +368,9 @@ const FormWithSubmit = ({ onLicenseSubmit, disabled = false, isSubmitting = fals
         e.preventDefault();
         await onLicenseSubmit(inputValue);
     };
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        onValueChange?.(newValue);
+    const handleChange = (value) => {
+        setInputValue(value);
+        onValueChange?.(value);
     };
     const displayLabel = resolveText(t, label, 'License Key');
     const displayPlaceholder = resolveText(t, placeholder, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
@@ -400,6 +399,70 @@ const InteractionFeedback = ({ status = 'default', message, statusMessage, leftC
 };
 InteractionFeedback.displayName = 'InteractionFeedback';
 
+const defaultLinks = [
+    {
+        name: 'officialWebsite',
+        url: 'https://designbase.co.kr',
+        icon: React.createElement(AppWindowIcon, { size: 20 }),
+    },
+    {
+        name: 'youtube',
+        url: 'https://youtube.com/designbase',
+        icon: React.createElement(YoutubeIcon, { size: 20 }),
+    },
+    {
+        name: 'instagram',
+        url: 'https://instagram.com/designbase',
+        icon: React.createElement(InstagramIcon, { size: 20 }),
+    },
+    {
+        name: 'figmaCommunity',
+        url: 'https://www.figma.com/@designbasekorea',
+        icon: React.createElement(FigmaIcon, { size: 20 }),
+    },
+    {
+        name: 'contact',
+        url: 'mailto:designbasekorea@gmail.com',
+        icon: React.createElement(MailIcon, { size: 20 }),
+    },
+];
+const defaultTranslations = {
+    officialWebsite: '공식 웹사이트',
+    youtube: '유튜브',
+    instagram: '인스타그램',
+    figmaCommunity: '피그마 커뮤니티',
+    contact: '문의하기',
+};
+const defaultT = (key) => defaultTranslations[key] || key;
+const LogoDropdown = ({ logoSrc, logoAlt = 'DesignBase', logoType = 'designbase', logoSize = 'xs', links = defaultLinks, position = 'top-left', className, t = defaultT, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleDropdown = () => setIsOpen(!isOpen);
+    const handleLinkClick = (url) => {
+        if (url.startsWith('mailto:')) {
+            return;
+        }
+        window.open(url, '_blank', 'noopener,noreferrer');
+    };
+    const classes = clsx('designbase-figma-logo-dropdown', `designbase-figma-logo-dropdown--${position}`, {
+        'designbase-figma-logo-dropdown--open': isOpen,
+    }, className);
+    const renderLogo = () => {
+        if (logoSrc) {
+            return (React.createElement("img", { className: "designbase-figma-logo-dropdown__logo", src: logoSrc, alt: logoAlt, onClick: toggleDropdown }));
+        }
+        return (React.createElement("div", { className: "designbase-figma-logo-dropdown__logo", onClick: toggleDropdown },
+            React.createElement(Logo, { type: logoType, size: logoSize, variant: "default" })));
+    };
+    return (React.createElement("div", { className: classes },
+        renderLogo(),
+        isOpen && (React.createElement("ul", { className: "designbase-figma-logo-dropdown__menu" }, links.map((link, index) => (React.createElement("li", { key: index, className: "designbase-figma-logo-dropdown__item" },
+            React.createElement("button", { type: "button", className: "designbase-figma-logo-dropdown__link", onClick: () => handleLinkClick(link.url) },
+                link.icon && (React.createElement("span", { className: "designbase-figma-logo-dropdown__icon" }, link.icon)),
+                React.createElement("span", { className: "designbase-figma-logo-dropdown__text" }, t(link.name)),
+                React.createElement(ExternalLinkIcon, { size: 16, className: "designbase-figma-logo-dropdown__arrow" })))))))));
+};
+LogoDropdown.displayName = 'LogoDropdown';
+
 const defaultFeatures = [
     { name: '사용 제한', free: '일일 제한', pro: '무제한' },
     { name: '모든 주제 사용', free: false, pro: true },
@@ -845,5 +908,5 @@ const UpgradeBanner = ({ onClick, isLoading = false, title = { key: 'banner.upgr
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaSection, FigmaSidebar, FormWithSubmit, InteractionFeedback, LanguageSelector, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection };
+export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaSection, FigmaSidebar, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection };
 //# sourceMappingURL=index.esm.js.map