@soul-refiner/design-system 0.2.129 → 0.2.130

package/dist/components/navigation/tabs/tabs.d.ts

@@ -6,9 +6,9 @@ export interface TabProps {
     items: {
         color?: TabColors;
         disabled?: boolean;
-        href?: string;
         icon?: React.ReactElement;
         label: string;
+        onClick: () => void;
     }[];
     onChange?: (index: number) => void;
     size?: TabSizes;
@@ -17,7 +17,7 @@ export interface TabProps {
 declare const Tabs: {
     ({ activeIndex, items, onChange, size, sx, }: TabProps): React.JSX.Element;
     Item: {
-        ({ active, color, disabled, href, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
+        ({ active, color, disabled, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -25,7 +25,6 @@ export interface TabsItemProps {
     active: boolean;
     color?: TabColors;
     disabled?: boolean;
-    href?: string;
     icon?: React.ReactElement;
     label: string;
     onClick?: () => void;

package/dist/components/navigation/tabs/tabs.js

@@ -46,7 +46,10 @@ const colorLookup = {
 };
 const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
     const id = React.useId();
-    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
+    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => {
+            item.onClick();
+            onChange && onChange(index);
+        }, size: size })))));
 };
 const Wrapper = styled.div `
   display: flex;
@@ -63,14 +66,13 @@ const Wrapper = styled.div `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const isAnchor = !!href;
+const Item = ({ active, color, disabled, icon, label, onClick, size = 'large', }) => {
     const inputColor = disabled ? 'grey' : color ? color : 'blue';
     const iconColor = colorLookup[inputColor].icon;
     const bgColor = colorLookup[inputColor].bg;
     const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
     const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React.createElement(Element, { as: isAnchor ? 'a' : 'div', href: href, onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
+    return (React.createElement(Element, { as: "a", onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
         icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.129",
+  "version": "0.2.130",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {