deprecate Tabs#items prop, suggest to use Tabs.Tab#name and Tabs.Tab#disabled props instead

.changeset/green-bulldogs-shop.md

@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+deprecate `Tabs#items` prop which will be removed in Nextra 5. Use `Tabs.Tab#name` and `Tabs.Tab#disabled` props instead

docs/app/docs/built-ins/tabs/page.mdx

@@ -10,10 +10,10 @@ icon: CardsIcon
 import { Tabs } from 'nextra/components'
 
 {/* prettier-ignore */}
-<Tabs items={['pnpm', 'npm', 'yarn']}>
-  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
-  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
-  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+<Tabs>
+  <Tabs.Tab name="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+  <Tabs.Tab name="npm">**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+  <Tabs.Tab name="yarn">**Yarn** is a software packaging system.</Tabs.Tab>
 </Tabs>
 
 ## Usage
@@ -24,10 +24,10 @@ import { Tabs } from 'nextra/components'
 ```mdx
 import { Tabs } from 'nextra/components'
 
-<Tabs items={['pnpm', 'npm', 'yarn']}>
-  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
-  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
-  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+<Tabs>
+  <Tabs.Tab name="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+  <Tabs.Tab name="npm">**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+  <Tabs.Tab name="yarn">**Yarn** is a software packaging system.</Tabs.Tab>
 </Tabs>
 ```
 
@@ -38,16 +38,14 @@ You can use the `defaultIndex` prop to set the default tab index:
 ```mdx /defaultIndex="1"/
 import { Tabs } from 'nextra/components'
 
-<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
-  ...
-</Tabs>
+<Tabs defaultIndex="1">...</Tabs>
 ```
 
 And you will have `npm` as the default tab:
 
 {/* prettier-ignore */}
-<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
-  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
-  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
-  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+<Tabs defaultIndex="1">
+  <Tabs.Tab name="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+  <Tabs.Tab name="npm">**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+  <Tabs.Tab name="yarn">**Yarn** is a software packaging system.</Tabs.Tab>
 </Tabs>

examples/blog/app/posts/(with-comments)/nextra-components/page.mdx

@@ -74,10 +74,10 @@ Contents for step 2.
 ## `<Tabs>`
 
 {/* prettier-ignore */}
-<Tabs items={['pnpm', 'npm', 'yarn']}>
-  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
-  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
-  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
+<Tabs>
+  <Tabs.Tab name="pnpm">**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
+  <Tabs.Tab name="npm">**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
+  <Tabs.Tab name="yarn">**Yarn** is a software packaging system.</Tabs.Tab>
 </Tabs>
 
 ## `<FileTree>`

examples/docs/src/content/themes/docs/tabs.mdx

@@ -10,23 +10,23 @@ A built-in component provided by `nextra-theme-docs`.
 
 import { Tabs } from 'nextra/components'
 
-<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
-  <Tabs.Tab>
+<Tabs defaultIndex={1}>
+  <Tabs.Tab name="JavaScript">
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C++">
     ```cpp filename="hi.cpp"
     #include <iostream>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C" disabled>
     ```c filename="hi.c"
     #include <stdio.h>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="Python">
      ```python filename="hello.py"
     print('Hello, world!')
     ```
@@ -38,23 +38,23 @@ import { Tabs } from 'nextra/components'
 ### MDX component
 
 ````mdx filename="tabs.mdx"
-<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
-  <Tabs.Tab>
+<Tabs defaultIndex={1}>
+  <Tabs.Tab name="JavaScript">
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C++">
     ```cpp filename="hi.cpp"
     #include <iostream>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C" disabled>
     ```c filename="hi.c"
     #include <stdio.h>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="Python">
     ```python filename="hello.py"
     print('Hello, world!')
     ```

examples/swr-site/content/en/docs/advanced/scrollbar-x.mdx

@@ -1,5 +1,3 @@
-import { Tabs } from 'nextra/components'
-
 | **Student ID** | **First Name** | **Last Name** | **Major**         | **GPA** | **Graduation Year** | **Email**                    | **Phone Number** | **Address**               | **Date of Birth** | **Gender** | **Class Standing** | **Enrollment Status** | **Enrollment Date** | **Graduation Date** | **Advisor ID** |
 | :------------- | :------------- | :------------ | :---------------- | :------ | :------------------ | :--------------------------- | :--------------- | :------------------------ | :---------------- | :--------- | :----------------- | :-------------------- | :------------------ | :------------------ | :------------- |
 | 12345          | John           | Doe           | Computer Science  | 3.5     | 2024                | [email protected]          | 555-555-5555     | 123 Main St, Anytown USA  | 01/01/2000        | M          | Junior             | Full-time             | 01/01/2022          | 05/01/2024          | 54321          |
@@ -10,22 +8,3 @@ import { Tabs } from 'nextra/components'
 | 44444          | Ashley         | Moore         | Business          | 3.5     | 2022                | [email protected]      | 555-555-5555     | 753 Birch St, Anytown USA | 06/06/1995        | F          | Senior             | Part-time             | 01/01/2021          | 05/01/2022          | 98765          |
 | 55555          | David          | Taylor        | Engineering       | 3.9     | 2024                | [email protected]      | 555-555-5555     | 964 Maple St, Anytown USA | 07/07/1994        | M          | Junior             | Full-time             | 01/01/2022          | 05/01/2024          | 54321          |
 | 77777          | Jessica        | Anderson      | Communications    | 3.6     | 2023                | [email protected]  | 555-555-5555     | 111 Cedar St, Anytown USA | 08/08/1993        | F          | Senior             | Full-time             | 01/01/2019          | 12/01/2022          | 56789          |
-
-<Tabs
-  items={[
-    'name',
-    'version',
-    'private',
-    'dependencies',
-    'scripts',
-    'eslintConfig',
-    'browserslist',
-    'development',
-    'name',
-    'version',
-    'private'
-  ]}
->
-  <Tabs.Tab className="bg-red-500">dada</Tabs.Tab>
-  <Tabs.Tab>dadasd</Tabs.Tab>
-</Tabs>

examples/swr-site/content/en/index.mdx

@@ -10,25 +10,25 @@ import { Callout, Tabs } from 'nextra/components'
 
 <Features lang={props.params.lang} title={metadata.title} />
 
-<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python', 'TypeScript', 'GraphQL', 'Rust', 'C#', 'Go', 'HTML', 'CSS', 'plaintext', 'bash']} defaultIndex={1}>
-  <Tabs.Tab>
+<Tabs defaultIndex={1}>
+  <Tabs.Tab name="JavaScript">
     ```js filename="hi.js"
     import { useState, useEffect } from 'react';
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C++">
     ```cpp filename="hi.cpp"
     #include <iostream>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
+  <Tabs.Tab name="C" disabled>
     ```c filename="hi.c"
     #include <stdio.h>
     ```
   </Tabs.Tab>
-  <Tabs.Tab>
-    ```c filename="hi.c"
-    #include <stdio.h>
+  <Tabs.Tab className="Python">
+    ```python filename="hello.py"
+    print('Hello, world!')
     ```
   </Tabs.Tab>
 </Tabs>
@@ -47,7 +47,7 @@ And the UI will be always **fast** and **reactive**.
 
 </Callout>
 
-<div className="mt-16 mb-20 text-center">
+<div className="mb-20 mt-16 text-center">
   [Get Started](/docs/getting-started) · [Examples](/examples/basic) ·
   [Blog](/blog) · [GitHub Repository](https://github.com/vercel/swr)
 </div>

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

@@ -8,14 +8,21 @@ import {
   TabPanels
 } from '@headlessui/react'
 import type {
+  TabPanelProps as HeadlessTabPanelProps,
   TabProps as HeadlessTabProps,
   TabGroupProps,
-  TabListProps,
-  TabPanelProps
+  TabListProps
 } from '@headlessui/react'
 import cn from 'clsx'
 import type { FC, ReactElement, ReactNode } from 'react'
-import { Fragment, useEffect, useRef, useState } from 'react'
+import {
+  Children,
+  Fragment,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
 import { useHash } from '../../hooks/use-hash.js'
 
 type TabItem = string | ReactElement
@@ -29,9 +36,20 @@ function isTabObjectItem(item: unknown): item is TabObjectItem {
   return !!item && typeof item === 'object' && 'label' in item
 }
 
+const warnOnce: ((message: string) => void) & {
+  wasWarned?: boolean
+} = message => {
+  if (warnOnce.wasWarned) return
+  console.warn(message)
+  warnOnce.wasWarned = true
+}
+
 export const Tabs: FC<
   {
-    items: (TabItem | TabObjectItem)[]
+    /*
+     * @deprecated Use `Tabs.Tab#name` and `Tabs.Tab#disabled` props instead
+     **/
+    items?: (TabItem | TabObjectItem)[]
     children: ReactNode
     storageKey?: string
     className?: TabListProps['className']
@@ -114,6 +132,24 @@ export const Tabs: FC<
     onChange?.(index)
   }
 
+  const tabPanels =
+    items ??
+    Children.map(
+      children,
+      child =>
+        isValidElement<TabPanelProps>(child) &&
+        ({
+          label: child.props.name!,
+          disabled: child.props.disabled!
+        } satisfies TabObjectItem)
+    )!
+
+  if (process.env.NODE_ENV !== 'production') {
+    warnOnce(
+      'You are using deprecated `Tabs#items` prop, and which will be removed in Nextra 5. Use `Tabs.Tab#name` and `Tabs.Tab#disabled` props instead.'
+    )
+  }
+
   return (
     <TabGroup
       selectedIndex={selectedIndex}
@@ -131,7 +167,7 @@ export const Tabs: FC<
           )
         }
       >
-        {items.map((item, index) => (
+        {tabPanels.map((item, index) => (
           <HeadlessTab
             key={index}
             disabled={isTabObjectItem(item) && item.disabled}
@@ -169,7 +205,9 @@ export const Tabs: FC<
   )
 }
 
-export const Tab: FC<TabPanelProps> = ({
+type TabPanelProps = { name?: string; disabled?: boolean }
+
+export const Tab: FC<HeadlessTabPanelProps & TabPanelProps> = ({
   children,
   // For SEO display all the Panel in the DOM and set `display: none;` for those that are not selected
   unmount = false,