@stella-source/stellasource-dsl 2.0.0 → 3.0.0

package/dist/cjs/index.js

@@ -22126,6 +22126,8 @@ const TabsBar = styled.nav `
   }
 `;
 const TabButton = styled.button `
+  display: flex;
+  align-items: center;
   cursor: pointer;
   background-color: transparent;
   border: none;
@@ -22135,18 +22137,29 @@ const TabButton = styled.button `
   font-size: 14px;
   ${({ $variant }) => tabButtonVariantSelector($variant)};
 `;
+const NotificationBubble = styled.span `
+  margin-left: 5px;
+  background-color: ${({ $isActive }) => $isActive ? Styles.color.transparent : Styles.color.core.accent};
+  border-radius: 100%;
+  padding: ${({ $isActive }) => ($isActive ? "1px 4px 1px 3px" : "1px 4px")};
+  font-size: ${({ $isActive }) => ($isActive ? "12px" : "10px")};
+  line-height: 12px;
+  color: ${({ $isActive }) => $isActive ? Styles.color.core.primary : Styles.color.white};
+`;
 
-const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, }) => {
-    return (a$l.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps }, label));
+const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
+    return (a$l.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
+        label,
+        notifications && notifications > 0 && (a$l.createElement(NotificationBubble, { "$isActive": active }, notifications))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
     const [activeTab, setActiveTab] = a$l.useState(defaultActiveTab ?? tabs[0]);
-    const handleClick = (tab) => {
-        setActiveTab(tab);
-        onTabClick(tab);
+    const handleClick = (label) => {
+        setActiveTab(label);
+        onTabClick(label);
     };
-    return (a$l.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$l.createElement(Tab, { key: `${id}-${tab}`, id: `${id}-${tab}`, label: tab, active: tab === activeTab, variant: variant, onClick: () => handleClick(tab) })))));
+    return (a$l.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$l.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
 exports.HelperText = HelperText;