tabs.tsx

// components/Tabs.tsx
import {
  Tabs as ArkTabs,
  TabList as ArkTabList,
  TabTrigger as ArkTabTrigger,
} from '@ark-ui/react'

const tabs = defineMultipartRecipe({
  name: 'tabs',
  parts: ['root', 'list', 'trigger'],
  base: {},
  variants: {
    size: {
      sm: {},
      md: {}
    }
  }
})

const TabsRoot = styledPart(ArkTabs, tabs, 'root')
export const TabList = styledPart(ArkTabList, tabs, 'list')
export const TabTrigger = styledPart(ArkTabTrigger, tabs, 'trigger')
export const Tabs = styled(TabsRoot, tabs)

// App.tsx
import { Tabs, TabList, TabTrigger } from './components/Tabs'

const App = () => {
  return (
    <Tabs size="md">
      <TabList>
        <TabTrigger>Tab One</Tab>
        <TabTrigger>Tab Two</Tab>
        <TabTrigger>Tab Three</Tab>
      </TabList>
    </Tabs>
  )
}

// What styled/styledPart produces under the hood
const Tabs = (props) => {
   const parts = tabs(props)
   return (
     <tabs.PartsProvider parts={parts}>
       <TabsRoot {...props} />
     </tabs.PartsProvider>
   )
}

const TabsRoot = (props) => {
   const part = tabs.usePart('root')
   return (
     <ArkTabs className={part} {...props} />
   )
}

const TabList = (props) => {
   const part = tabs.usePart('list')
   return (
     <ArkTabList className={part} {...props} />
   )
}

const TabTrigger = (props) => {
   const part = tabs.usePart('trigger')
   return (
     <ArkTabTrigger className={part} {...props} />
   )
}