@aurora-ds/components 0.17.12 → 0.17.14

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.props.d.ts

@@ -1,6 +1,11 @@
+import { ReactElement } from 'react';
 export type TabItemProps = {
     /** Label of the tab */
-    label: string;
+    label?: string;
+    /** Start icon of the tab */
+    startIcon?: ReactElement;
+    /** End icon of the tab */
+    endIcon?: ReactElement;
     /** Optional value associated with the tab */
     value?: string | number;
     /** Whether the tab is active */

package/dist/cjs/index.js

@@ -2485,6 +2485,7 @@ const TAB_ITEM_STYLES = theme.createStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        gap: theme.spacing.md,
         backgroundColor: isActive ? theme.colors.background : 'transparent',
         color: isActive ? theme.colors.text : theme.colors.textSecondary,
         boxShadow: isActive ? theme.shadows.sm : undefined,
@@ -2497,8 +2498,8 @@ const TAB_ITEM_STYLES = theme.createStyles((theme) => ({
 /**
  * TabItem component for use inside Tabs
  */
-const TabItem = ({ label, isActive = false, onClick, }) => {
-    return (jsxRuntime.jsx("div", { className: TAB_ITEM_STYLES.tab(isActive), onClick: onClick, children: jsxRuntime.jsx(Text, { variant: 'label', preserveWhitespace: true, maxLines: 1, children: label }) }));
+const TabItem = ({ label, isActive = false, onClick, startIcon, endIcon }) => {
+    return (jsxRuntime.jsxs("div", { className: TAB_ITEM_STYLES.tab(isActive), onClick: onClick, children: [startIcon && (jsxRuntime.jsx(Icon, { children: startIcon })), label && (jsxRuntime.jsx(Text, { variant: 'label', preserveWhitespace: true, maxLines: 1, children: label })), endIcon && (jsxRuntime.jsx(Icon, { children: endIcon }))] }));
 };
 TabItem.displayName = 'TabItem';