@stella-source/stellasource-dsl 2.0.0 → 3.0.0

package/dist/cjs/types/components/Tabs/Styles.d.ts

@@ -3,6 +3,10 @@ interface TabsStylesProps {
     $variant: `${TabsVariant}`;
     $isPill?: boolean;
 }
+interface NotificationBubbleProps {
+    $isActive?: boolean;
+}
 declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TabsStylesProps>> & string;
 declare const TabButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabsStylesProps>> & string;
-export { TabsBar, TabButton };
+declare const NotificationBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, NotificationBubbleProps>> & string;
+export { TabsBar, TabButton, NotificationBubble };

package/dist/cjs/types/components/Tabs/Tab.d.ts

@@ -7,7 +7,8 @@ interface TabProps {
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
     active?: boolean;
     variant?: `${TabsVariant}`;
+    notifications?: number;
     label: string;
 }
-declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, }: TabProps) => React.JSX.Element;
+declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, notifications, }: TabProps) => React.JSX.Element;
 export default Tab;

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

@@ -11,7 +11,10 @@ interface TabsBaseProps {
     defaultActiveTab?: string;
     isPill?: boolean;
     variant?: `${TabsVariant}`;
-    tabs: string[];
+    tabs: {
+        label: string;
+        notifications?: number;
+    }[];
     onTabClick: (label?: string) => void;
 }
 interface TabsPropsLight {

package/dist/esm/index.esm.js

@@ -22106,6 +22106,8 @@ const TabsBar = styled.nav `
   }
 `;
 const TabButton = styled.button `
+  display: flex;
+  align-items: center;
   cursor: pointer;
   background-color: transparent;
   border: none;
@@ -22115,18 +22117,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__default.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__default.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
+        label,
+        notifications && notifications > 0 && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab ?? tabs[0]);
-    const handleClick = (tab) => {
-        setActiveTab(tab);
-        onTabClick(tab);
+    const handleClick = (label) => {
+        setActiveTab(label);
+        onTabClick(label);
     };
-    return (a__default.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.createElement(Tab, { key: `${id}-${tab}`, id: `${id}-${tab}`, label: tab, active: tab === activeTab, variant: variant, onClick: () => handleClick(tab) })))));
+    return (a__default.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.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 })))));
 };
 
 export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };