@designbasekorea/figma-ui 0.2.9 → 0.2.10

package/dist/index.js

@@ -78,6 +78,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(ui.Button, { variant: "tertiary", size: "s", iconOnly: true, onPress: onBack, "aria-label": "\uB4A4\uB85C\uAC00\uAE30" },
+                React.createElement(icons.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(ui.Dropdown, { trigger: React.createElement("button", { type: "button", className: "designbase-figma-page-head__more-button", "aria-label": "\uB354\uBCF4\uAE30" },
+                    React.createElement(icons.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 = React.useRef(null);
     const clipRef = React.useRef(null);
@@ -1050,6 +1073,7 @@ exports.DonationBadge = DonationBadge;
 exports.FigmaContainer = FigmaContainer;
 exports.FigmaFooter = FigmaFooter;
 exports.FigmaHeader = FigmaHeader;
+exports.FigmaPageHead = FigmaPageHead;
 exports.FigmaSection = FigmaSection;
 exports.FigmaSidebar = FigmaSidebar;
 exports.FigmaToast = FigmaToast;