@designbasekorea/figma-ui 0.2.9 → 0.2.11

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, createContext, useContext, useCallback } from 'react';
-import { HeartFilledIcon, CoffeeFilledIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
-import { Button, Badge, Toggle, Spinner, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar, RandomGradient } from '@designbasekorea/ui';
+import { HeartFilledIcon, CoffeeFilledIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
+import { Button, Dropdown, Badge, Toggle, Spinner, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar, RandomGradient } 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}
@@ -77,6 +77,29 @@ const FigmaHeader = ({ children, actions = [], searchBar, sticky = true, classNa
 };
 FigmaHeader.displayName = 'FigmaHeader';
 
+const FigmaPageHead = ({ onBack, title, description, actions = [], moreActions = [], className, t }) => {
+    const classes = clsx('designbase-figma-page-head', className);
+    const displayTitle = resolveText(t, title);
+    const displayDescription = description ? resolveText(t, description) : undefined;
+    const dropdownItems = moreActions.map(action => ({
+        id: action.id,
+        label: resolveText(t, action.label),
+        onClick: action.onClick
+    }));
+    return (React.createElement("div", { className: classes },
+        React.createElement("div", { className: "designbase-figma-page-head__left" },
+            React.createElement(Button, { variant: "tertiary", size: "s", iconOnly: true, onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" },
+                React.createElement(ChevronLeftIcon, { size: 14 })),
+            React.createElement("div", { className: "designbase-figma-page-head__titles" },
+                React.createElement("h2", null, displayTitle),
+                displayDescription && React.createElement("p", null, displayDescription))),
+        React.createElement("div", { className: "designbase-figma-page-head__actions" },
+            actions.map((action, index) => (React.createElement(React.Fragment, { key: index }, action))),
+            moreActions.length > 0 && (React.createElement(Dropdown, { trigger: React.createElement("button", { type: "button", className: "designbase-figma-page-head__more-button", "aria-label": "\uB354\uBCF4\uAE30" },
+                    React.createElement(MoreHorizontalIcon, { size: 16 })), items: dropdownItems, placement: "bottom-right", size: "s" })))));
+};
+FigmaPageHead.displayName = 'FigmaPageHead';
+
 const FigmaSection = ({ title, dataCategory, iconButton, children, marginBottom, isEnabled = true, onToggle, className, enableScrollNavigation = false, headerHeight = 94, onActiveSectionChange, t, collapsible = false, defaultCollapsed = false, onCollapseChange, badge, overflowVisible = false, }) => {
     const sectionRef = useRef(null);
     const clipRef = useRef(null);
@@ -1045,5 +1068,5 @@ const UpgradeBanner = ({ onClick, variant = 'button', isLoading = false, title =
 };
 UpgradeBanner.displayName = 'UpgradeBanner';
 
-export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection, useFigmaToast, useToast };
+export { DonationBadge, FigmaContainer, FigmaFooter, FigmaHeader, FigmaPageHead, FigmaSection, FigmaSidebar, FigmaToast, FigmaToastProvider, FormWithSubmit, InteractionFeedback, LanguageSelector, LogoDropdown, PageLicense, PaymentBadge, PaymentStatusSection, PricingComparison, ProgressModal, ResizablePlugin, SettingsModal, TitleDescription, UpgradeBanner, getActiveSection, resolveText, scrollToSection, useFigmaToast, useToast };
 //# sourceMappingURL=index.esm.js.map