feat: add tabscard

packages/ui-kit/src/components/Tabs/Tabs.tsx

@@ -2,18 +2,28 @@ import React from 'react'
 import { Tabs as TabsBase } from '@radix-ui/themes'
 import { Card as CardBase } from '../Card'
 import '@radix-ui/themes/styles.css'
-import './styles.css'
+import { TabsCSS } from './TabsCSS'
 
 type TabsBase = typeof TabsBase
 
-interface Tabs extends Omit<TabsBase, 'List'> {
+interface Tabs extends Omit<TabsBase, 'List' | 'Root'> {
+  Root: typeof Root
   Card: typeof Card
   List: typeof List
 }
 
-const List = ({ children, ...props }: React.ComponentProps<typeof TabsBase.List>) => (
-  <TabsBase.List {...props}>{children}</TabsBase.List>
-)
+const Root = ({ children, ...props }: React.ComponentProps<typeof TabsBase.Root>) => {
+  return (
+    <>
+      <TabsBase.Root {...props}>{children}</TabsBase.Root>
+      <TabsCSS />
+    </>
+  )
+}
+
+const List = ({ children, ...props }: React.ComponentProps<typeof TabsBase.List>) => {
+  return <TabsBase.List {...props}>{children}</TabsBase.List>
+}
 
 const Card = ({ children, ...props }: React.ComponentProps<typeof TabsBase.Trigger>) => (
   <TabsBase.Trigger {...props}>
@@ -25,6 +35,7 @@ const Card = ({ children, ...props }: React.ComponentProps<typeof TabsBase.Trigg
 
 const Tabs: Tabs = {
   ...TabsBase,
+  Root,
   Card,
   List
 }

packages/ui-kit/src/components/Tabs/styles.css → packages/ui-kit/src/components/Tabs/TabsCSS.tsx

@@ -1,4 +1,12 @@
-.rt-BaseTabList:has(.propel-Card) {
+'use client'
+
+import React, { useEffect } from 'react'
+import styleInject from 'style-inject'
+
+export const TabsCSS = () => {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      styleInject(`.rt-BaseTabList:has(.propel-Card) {
   all: unset;
   width: 100%;
 }
@@ -17,4 +25,10 @@
 
 .rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger > .rt-TabsTriggerInnerHidden {
   display: none;
+}
+      `)
+    }
+  }, [])
+
+  return <></>
 }

yarn.lock

@@ -5703,6 +5703,7 @@ __metadata:
     "@types/ora": ^3.2.0
     "@types/react": latest
     "@types/react-dom": latest
+    "@types/style-inject": ^0.3.5
     "@types/testing-library__jest-dom": ^5.14.7
     axios: ^1.6.2
     chart.js: ^4.1.2
@@ -10288,6 +10289,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/style-inject@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@types/style-inject@npm:0.3.5::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2F%40types%2Fstyle-inject%2F-%2Fstyle-inject-0.3.5.tgz"
+  checksum: 615b3e58f8f91a53b4fcf7fab813f72c00181b205b8ac048e259010b5f55e70a41755b9491e0d0971fddea6bd7bef3aba0f16e9d1dfceb454d247a0555345cab
+  languageName: node
+  linkType: hard
+
 "@types/testing-library__jest-dom@npm:^5.14.7, @types/testing-library__jest-dom@npm:^5.9.1":
   version: 5.14.9
   resolution: "@types/testing-library__jest-dom@npm:5.14.9::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2F%40types%2Ftesting-library__jest-dom%2F-%2Ftesting-library__jest-dom-5.14.9.tgz"