allow passing className for <Tabs> and <Tabs.Tab> (#3661)

aa

Author: dimaMachina

.changeset/cuddly-otters-allow.md

@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+allow passing `className` for `<Tabs>` and `<Tabs.Tab>`

README.md

@@ -61,7 +61,4 @@ the watch mode for both nextra and the theme in separated terminals.
  <a href="https://speakeasyapi.dev/docs?utm_source=github&utm_campaign=nextra&utm_content=logolink">
    <img src="/docs/pages/showcase/speakeasy.png" alt="Speakeasy preview" width="256">
  </a>
- <a href="https://xyflow.com?utm_source=github&utm_campaign=nextra&utm_content=logolink">
-   <img src="/docs/pages/showcase/xyflow.jpg" alt="xyflow preview" width="256">
- </a>
 </div>

docs/pages/sponsors.mdx

@@ -29,12 +29,6 @@ import { Card } from './showcase.mdx'
   >
     <>![Speakeasy preview](./showcase/speakeasy.png)</>
   </Card>
-  <Card
-    title="xyflow"
-    href="https://xyflow.com?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
-  >
-    <>![xyflow preview](./showcase/xyflow.jpg)</>
-  </Card>
 </Cards>
 
 <style global jsx>{`

packages/nextra/src/client/components/tabs/tabs.tsx

@@ -7,9 +7,13 @@ import {
   TabPanel,
   TabPanels
 } from '@headlessui/react'
-import type { TabPanelProps } from '@headlessui/react'
+import type {
+  TabGroupProps,
+  TabListProps,
+  TabPanelProps
+} from '@headlessui/react'
 import cn from 'clsx'
-import type { ReactElement, ReactNode } from 'react'
+import type { FC, ReactElement, ReactNode } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
 type TabItem = string | ReactElement
@@ -23,21 +27,22 @@ function isTabObjectItem(item: unknown): item is TabObjectItem {
   return !!item && typeof item === 'object' && 'label' in item
 }
 
-export function Tabs({
+export const Tabs: FC<
+  {
+    items: (TabItem | TabObjectItem)[]
+    children: ReactNode
+    storageKey?: string
+  } & Pick<TabGroupProps, 'defaultIndex' | 'selectedIndex' | 'onChange'> &
+    Pick<TabListProps, 'className'>
+> = ({
   items,
-  selectedIndex: _selectedIndex,
+  children,
+  storageKey,
   defaultIndex = 0,
+  selectedIndex: _selectedIndex,
   onChange,
-  children,
-  storageKey
-}: {
-  items: (TabItem | TabObjectItem)[]
-  selectedIndex?: number
-  defaultIndex?: number
-  onChange?: (index: number) => void
-  children: ReactNode
-  storageKey?: string
-}): ReactElement {
+  className
+}) => {
   const [selectedIndex, setSelectedIndex] = useState(defaultIndex)
 
   useEffect(() => {
@@ -91,11 +96,14 @@ export function Tabs({
       tabIndex={-1} // disables focus in Firefox
     >
       <TabList
-        className={cn(
-          'nextra-scrollbar _overflow-x-auto _overscroll-x-contain _overflow-y-hidden',
-          '_mt-4 _flex _w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800',
-          'nextra-focus'
-        )}
+        className={args =>
+          cn(
+            'nextra-scrollbar _overflow-x-auto _overscroll-x-contain _overflow-y-hidden',
+            '_mt-4 _flex _w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800',
+            'nextra-focus',
+            typeof className === 'function' ? className(args) : className
+          )
+        }
       >
         {items.map((item, index) => (
           <HeadlessTab
@@ -132,18 +140,23 @@ export function Tabs({
   )
 }
 
-export function Tab({
+export const Tab: FC<TabPanelProps> = ({
   children,
   // For SEO display all the Panel in the DOM and set `display: none;` for those that are not selected
   unmount = false,
+  className,
   ...props
-}: TabPanelProps): ReactElement {
+}) => {
   return (
     <TabPanel
       {...props}
       unmount={unmount}
-      className={({ focus }) =>
-        cn('_rounded _mt-6', focus && 'nextra-focusable')
+      className={args =>
+        cn(
+          '_rounded _mt-6',
+          args.focus && 'nextra-focusable',
+          typeof className === 'function' ? className(args) : className
+        )
       }
     >
       {children}