@hexure/ui 1.8.12 → 1.8.13

package/dist/cjs/types/components/PageHeader/PageHeader.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { MenuItemProps } from '../MoreMenu/MoreMenu';
+import { TagProps } from '../Tag/Tag';
 export interface PageHeaderProps {
     title?: string;
     breadcrumbs?: Array<{
@@ -21,6 +22,7 @@ export interface PageHeaderProps {
         label: string;
         menuItems: Array<MenuItemProps>;
     };
+    tag?: TagProps;
 }
 declare const PageHeader: FC<PageHeaderProps>;
 export default PageHeader;

package/dist/esm/index.js

@@ -2027,7 +2027,7 @@ const Header$3 = styled.div `
   height: 50px;
   cursor: pointer;
 `;
-const Title$1 = styled.div `
+const Title$2 = styled.div `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   color: ${Colors.BLACK.Hex};
@@ -2039,7 +2039,7 @@ const Accordion = (_a) => {
     var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Header$3, Object.assign({ onClick: onClick }, accessibleProps),
-            React.createElement(Title$1, null, title),
+            React.createElement(Title$2, null, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
         open ? children : null));
 };
@@ -2431,7 +2431,7 @@ const MenuItem = styled.div `
     }
   }
 `;
-const Title = styled.span `
+const Title$1 = styled.span `
   font-family: Roboto;
   font-size: 14px;
   font-weight: 400;
@@ -2445,7 +2445,7 @@ const MoreMenu = (_a) => {
     return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
         return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
             item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
-            React.createElement(Title, null, item.label)));
+            React.createElement(Title$1, null, item.label)));
     })));
 };
 
@@ -3825,6 +3825,40 @@ const MultiSelect = (_a) => {
 };
 
 const Wrapper$5 = styled.div `
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: ${props => Colors[props.$color].Hex};
+  color: #ffffff;
+  box-sizing: border-box;
+  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+`;
+const Content = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Label$1 = styled.div `
+  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
+  font-size: ${FontSizes.SMALL};
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.2em;
+`;
+const Remove = styled.div `
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+`;
+const Tag = (_a) => {
+    var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
+    return (React.createElement(Wrapper$5, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
+        React.createElement(Content, null,
+            React.createElement(Label$1, { "$color": color }, children),
+            removable ? (React.createElement(Remove, null,
+                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
+};
+
+const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
   align-items: center;
@@ -3832,6 +3866,11 @@ const Wrapper$5 = styled.div `
   align-self: stretch;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
 `;
+const Title = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
 const Info = styled.div `
   display: flex;
   flex-direction: column;
@@ -3849,11 +3888,13 @@ const Actions = styled.div `
   align-items: center;
   gap: 8px;
 `;
-const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
+const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
     const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
-    return (React.createElement(Wrapper$5, null,
+    return (React.createElement(Wrapper$4, null,
         React.createElement(Info, null,
-            React.createElement(Heading, { type: 'secondary' }, title),
+            React.createElement(Title, null,
+                React.createElement(Heading, { type: 'secondary' }, title),
+                tag ? React.createElement(Tag, Object.assign({}, tag)) : null),
             breadcrumbs ? (React.createElement(Breadcrumbs, null, breadcrumbs.map((crumb, i) => {
                 return (React.createElement(React.Fragment, { key: i },
                     crumb.onClick ? (React.createElement(Link, { onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { type: 'small' }, crumb.label)),
@@ -3867,7 +3908,7 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
             menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
 };
 
-const Wrapper$4 = styled.nav `
+const Wrapper$3 = styled.nav `
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -3893,7 +3934,7 @@ const Pagination = (_a) => {
             onClick(new_page);
         }
     };
-    return (React.createElement(Wrapper$4, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps),
         React.createElement(Button, { disabled: is_first_page, icon: mdiChevronLeft, onClick: handlePrevClick, small: true }),
         React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
                 label: `Page ${p}`,
@@ -3902,7 +3943,7 @@ const Pagination = (_a) => {
         React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
 };
 
-const Wrapper$3 = styled.label `
+const Wrapper$2 = styled.label `
   padding: 4px 0;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
@@ -3916,7 +3957,7 @@ const Input = styled.input `
   margin: 0px 0px 2px 0px;
   line-height: 1.1em;
 `;
-const Label$1 = styled.span `
+const Label = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -3926,9 +3967,9 @@ const Label$1 = styled.span `
 `;
 const Radio = (_a) => {
     var { children, disabled, checked, onChange, value } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
-    return (React.createElement(Wrapper$3, Object.assign({ "$disabled": disabled }, accessibleProps),
+    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled }, accessibleProps),
         React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
-        React.createElement(Label$1, null, children)));
+        React.createElement(Label, null, children)));
 };
 
 const RadioList = (_a) => {
@@ -4010,7 +4051,7 @@ const Table = (_a) => {
         }))) : null));
 };
 
-const Wrapper$2 = styled.div `
+const Wrapper$1 = styled.div `
   display: flex;
   box-sizing: border-box;
   align-items: flex-end;
@@ -4059,7 +4100,7 @@ const Badge = styled.div `
 `;
 const Tabs = (_a) => {
     var { tabs } = _a, accessibleProps = __rest(_a, ["tabs"]);
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
+    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
         var { isActive, label, badgeCount, errorBadge, onClick } = _a, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
         return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps),
             badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
@@ -4068,40 +4109,6 @@ const Tabs = (_a) => {
 };
 Tabs.defaultProps = {};
 
-const Wrapper$1 = styled.div `
-  display: inline-block;
-  border-radius: 4px;
-  padding: 4px 6px;
-  background: ${props => Colors[props.$color].Hex};
-  color: #ffffff;
-  box-sizing: border-box;
-  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
-`;
-const Content = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Label = styled.div `
-  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
-  font-size: ${FontSizes.SMALL};
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.2em;
-`;
-const Remove = styled.div `
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-`;
-const Tag = (_a) => {
-    var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
-    return (React.createElement(Wrapper$1, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
-        React.createElement(Content, null,
-            React.createElement(Label, { "$color": color }, children),
-            removable ? (React.createElement(Remove, null,
-                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
-};
-
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;