@soul-refiner/design-system 0.2.4 → 0.2.6

package/dist/components/card/action/action.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Box, H, P } from '../../';
 export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
     const isAnchor = !!href;
-    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div' },
+    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
         React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
             React.createElement("img", { src: image, alt: "" }),
             React.createElement(Figcaption, null,
@@ -14,7 +14,10 @@ export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx,
                 React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", sx: "margin-top: 12px;" }, content),
                 React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 8px; width: 100%;" }, React.Children.toArray(actions))))));
 };
-const Wrapper = styled.div ``;
+const Wrapper = styled.div `
+  text-decoration: none;
+  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
+`;
 const Action = styled.figure `
   position: relative;
   aspect-ratio: 310 / 374;
@@ -32,8 +35,6 @@ const Action = styled.figure `
     border-radius: 16px 16px 0px 0px;
   }
 
-  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
-
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const Figcaption = styled.figcaption `

package/dist/components/navigation/inner/inner.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Drawer } from '../../';
+import { Button } from '../../../components/actions/button';
+import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
 const INNER_NAV_CHILD_TYPES = [
     'Item',

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, key: id + index.toString(36), icon: item?.icon, 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.4",
+  "version": "0.2.6",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {