@soul-refiner/design-system 0.2.5 → 0.2.7

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

@@ -6,17 +6,18 @@ export interface TabProps {
     items: {
         color?: TabColors;
         disabled?: boolean;
+        href?: string;
         icon?: React.ReactElement;
         label: string;
     }[];
-    onChange: (index: number) => void;
+    onChange?: (index: number) => void;
     size?: TabSizes;
     sx?: string;
 }
 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;
     };
 };
@@ -24,9 +25,10 @@ export interface TabsItemProps {
     active: boolean;
     color?: TabColors;
     disabled?: boolean;
+    href?: string;
     icon?: React.ReactElement;
     label: string;
-    onClick: () => void;
+    onClick?: () => void;
     size: TabSizes;
 }
 export { Tabs };

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

@@ -46,9 +46,9 @@ 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, key: id + index.toString(36), icon: item?.icon, label: item.label, onClick: () => 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.ul `
+const Wrapper = styled.div `
   display: flex;
   flex-flow: row nowrap;
   align-items: flex-end;
@@ -59,17 +59,18 @@ const Wrapper = styled.ul `
 
   ${({ $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 isAnchor = !!href;
     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(Li, { "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size, onClick: !disabled ? onClick : undefined },
+    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 },
         icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };
-const Li = styled.li `
+const Element = styled.div `
   position: relative;
   display: flex;
   align-items: center;

package/package.json

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