@rango-dev/ui 0.38.1-next.1 → 0.38.1-next.3

package/dist/widget/ui/src/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,qBAoFjD"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,qBAyFjD"}

package/dist/widget/ui/src/components/Tabs/Tabs.styles.d.ts

@@ -2,8 +2,8 @@
 /// <reference types="react" />
 /// <reference types="trusted-types" />
 export declare const Tabs: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
-    type?: "primary" | "secondary" | undefined;
-    borderRadius?: "small" | "medium" | "full" | undefined;
+    type?: "primary" | "secondary" | "bordered" | undefined;
+    borderRadius?: "small" | "medium" | "none" | "full" | undefined;
 }, {
     xs: string;
     sm: string;
@@ -445,8 +445,8 @@ export declare const Tab: import("@stitches/react/types/styled-component.js").St
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>, {
-    borderRadius?: "small" | "medium" | "full" | undefined;
-    type?: "primary" | "secondary" | undefined;
+    borderRadius?: "small" | "medium" | "none" | "full" | undefined;
+    type?: "primary" | "secondary" | "bordered" | undefined;
     isActive?: boolean | "true" | "false" | undefined;
 }, {
     xs: string;
@@ -609,8 +609,8 @@ export declare const Tab: import("@stitches/react/types/styled-component.js").St
     transitions: {};
 }, import("@stitches/react/types/config.js").DefaultThemeMap, {}>>;
 export declare const BackdropTab: import("@stitches/react/types/styled-component.js").StyledComponent<"div", {
-    type?: "primary" | "secondary" | undefined;
-    borderRadius?: "small" | "medium" | "full" | undefined;
+    type?: "primary" | "secondary" | "bordered" | undefined;
+    borderRadius?: "small" | "medium" | "none" | "full" | undefined;
 }, {
     xs: string;
     sm: string;

package/dist/widget/ui/src/components/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAmCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAqFd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA6BtB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAuCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA4Gd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAmCtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.38.1-next.1",
+  "version": "0.38.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,7 +53,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.36.1-next.1",
+    "@rango-dev/wallets-shared": "^0.36.1-next.2",
     "@stitches/react": "^1.2.8",
     "copy-to-clipboard": "^3.3.3",
     "rango-types": "^0.1.69",

package/src/components/Tabs/Tabs.styles.tsx

@@ -23,6 +23,7 @@ export const Tabs = styled('div', {
         borderStyle: 'solid',
         backgroundColor: '$$color',
       },
+      bordered: { backgroundColor: 'inherit' },
     },
     borderRadius: {
       small: {
@@ -34,12 +35,16 @@ export const Tabs = styled('div', {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
   },
 });
 
 export const Tab = styled(Button, {
   color: '$neutral700',
+  flex: 1,
   backgroundColor: 'transparent',
   height: '100%',
   zIndex: 10,
@@ -60,6 +65,9 @@ export const Tab = styled(Button, {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
     type: {
       primary: {
@@ -67,6 +75,7 @@ export const Tab = styled(Button, {
         height: '100%',
       },
       secondary: {},
+      bordered: {},
     },
     isActive: {
       true: {
@@ -122,6 +131,24 @@ export const Tab = styled(Button, {
         },
       },
     },
+    {
+      type: 'bordered',
+      isActive: true,
+      css: {
+        color: '$secondary500',
+      },
+    },
+    {
+      type: 'bordered',
+      isActive: false,
+      css: {
+        color: '$neutral600',
+        fontWeight: '$regular',
+        '&:hover': {
+          color: '$secondary550',
+        },
+      },
+    },
   ],
 });
 
@@ -141,6 +168,9 @@ export const BackdropTab = styled('div', {
       primary: {
         backgroundColor: '$background',
       },
+      bordered: {
+        borderBottom: '$secondary500 solid 2px',
+      },
     },
     borderRadius: {
       small: {
@@ -152,6 +182,9 @@ export const BackdropTab = styled('div', {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
   },
 });

package/src/components/Tabs/Tabs.tsx

@@ -15,7 +15,6 @@ export function TabsComponent(props: TabsPropTypes) {
     container = document.body,
     value,
     type,
-    borderRadius = 'medium',
     className,
   } = props;
   const [tabWidth, setTabWidth] = useState(0);
@@ -25,6 +24,12 @@ export function TabsComponent(props: TabsPropTypes) {
   // State variable to track the initial render
   const [initialRender, setInitialRender] = useState(true);
   const transformPosition = currentIndex * tabWidth;
+  let borderRadius: TabsPropTypes['borderRadius'] = 'medium';
+  if (type === 'bordered') {
+    borderRadius = 'none';
+  } else if (props.borderRadius) {
+    borderRadius = props.borderRadius;
+  }
 
   useEffect(() => {
     const updateTabWidth = () => {