Tabs converted to tailwind

0xsequence · Jan 10, 2025 · 041e3b5 · 041e3b5
1 parent f25e11d
commit 041e3b5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,13 +1,8 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { ReactNode, useState, ComponentPropsWithoutRef } from 'react'
 
-import { Box } from '../Box'
 import { Text } from '../Text'
 
-import * as styles from './styles.css'
-
-export { TabsPrimitive }
-
 export interface TabsProps
   extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
   tabs: (TabItemProps & { content: ReactNode })[]
@@ -19,7 +14,7 @@ export interface TabItemProps {
 }
 
 export const Tabs = (props: TabsProps) => {
-  const { tabs, onValueChange, ...rest } = props
+  const { tabs, onValueChange, className, ...rest } = props
   const [selectedValue, setSelectedValue] = useState<string | undefined>(
     rest.defaultValue
   )
@@ -33,12 +28,16 @@ export const Tabs = (props: TabsProps) => {
   }
 
   return (
-    <TabsPrimitive.Root onValueChange={handleValueChange} {...rest}>
+    <TabsPrimitive.Root
+      onValueChange={handleValueChange}
+      className={className}
+      {...rest}
+    >
       <TabsHeader tabs={tabs} value={selectedValue} />
 
       {tabs.map(tab => (
         <TabsPrimitive.Content
-          className={styles.content}
+          className="outline-none"
           key={tab.value}
           value={tab.value}
         >
@@ -65,24 +64,27 @@ export const TabsHeader = (props: TabsHeaderProps) => {
   const selectedIdx = tabs.findIndex(tab => tab.value === value)
 
   return (
-    <TabsPrimitive.List className={styles.list} style={{ outline: undefined }}>
-      <Box display="flex" position="absolute" inset="2" height="8">
+    <TabsPrimitive.List
+      className="px-2 flex relative w-full rounded-xl bg-background-secondary h-12 outline-none focus-within:[&:has(:focus-visible)]:ring-2 focus-within:ring-inset"
+      style={{ outline: undefined }}
+    >
+      <div className="flex absolute inset-2 h-8">
         <div
-          className={styles.selector}
+          className="absolute rounded-lg top-0 left-0 h-8 bg-button-glass pointer-events-none transition-transform duration-200 ease-out"
           style={{
             width: `${selectorWidth}%`,
             transform: `translateX(${selectedIdx * 100}%)`,
           }}
         />
-      </Box>
+      </div>
 
       {tabs.map(tab => (
         <TabsPrimitive.Trigger
-          className={styles.trigger}
+          className="w-full h-full rounded-lg cursor-pointer relative bg-transparent select-none text-text-80 outline-none appearance-none border-none z-[2] data-[state=active]:text-text-100 disabled:opacity-50"
           key={tab.value}
           value={tab.value}
         >
-          <Text variant="normal" fontWeight="bold">
+          <Text variant="normal" fontWeight="bold" className="block">
             {tab.label}
           </Text>
         </TabsPrimitive.Trigger>
@@ -91,6 +93,8 @@ export const TabsHeader = (props: TabsHeaderProps) => {
   )
 }
 
+export { TabsPrimitive }
+
 export const TabsRoot = TabsPrimitive.Root
 
 export const TabsList = TabsPrimitive.TabsList

diff --git a/src/tokens/border.ts b/src/tokens/border.ts
@@ -6,9 +6,9 @@ export const borderWidths = {
 
 export const radii = {
   none: '0',
-  xs: '0.25rem', // 4px
-  sm: '0.5rem', // 8px
-  md: '0.75rem', // 12px
-  lg: '1rem', // 16px
-  circle: '9999px',
+  xs: '0.25rem', // 4px -> rounded
+  sm: '0.5rem', // 8px -> rounded-lg
+  md: '0.75rem', // 12px -> rounded-xl
+  lg: '1rem', // 16px -> rounded-2xl
+  circle: '9999px', // rounded-full
 }