@soul-refiner/design-system 0.2.130 → 0.2.131

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, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
+        ({ active, color, disabled, href, icon, label, onClick, size, }: TabsItemProps): React.JSX.Element;
         displayName: string;
     };
 };
@@ -25,6 +25,7 @@ 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

@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { P } from '../../';
 const colorLookup = {
     blue: {
@@ -46,10 +47,7 @@ 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, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => {
-            item.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, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
 };
 const Wrapper = styled.div `
   display: flex;
@@ -66,17 +64,17 @@ const Wrapper = styled.div `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
-const Item = ({ active, color, disabled, icon, label, onClick, size = 'large', }) => {
+const Item = ({ active, color, disabled, href, 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: "a", onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
+    return (React.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$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)));
 };
-const Element = styled.div `
+const Element = styled(Link) `
   position: relative;
   display: flex;
   align-items: center;

package/package.json

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