feat: migrate tabs to Base UI

apps/www/src/components/mdx/mdx-components.tsx

@@ -40,9 +40,9 @@ function Table(props: TableHTMLAttributes<HTMLTableElement>) {
 }
 
 const mdxComponents = {
-  CodeBlockTabsTrigger: (
-    props: ComponentPropsWithoutRef<typeof Tabs.Trigger>
-  ) => <Tabs.Trigger {...props} />,
+  CodeBlockTabsTrigger: (props: ComponentPropsWithoutRef<typeof Tabs.Tab>) => (
+    <Tabs.Tab {...props} />
+  ),
   CodeBlockTabs: (props: HTMLAttributes<HTMLDivElement>) => (
     <Tabs defaultValue='npm' className={props.className}>
       {props.children}

apps/www/src/components/mdx/pre-context.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, createContext, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 const PreContext = createContext<{
   hasPreParent: boolean;
@@ -11,7 +11,10 @@ const PreContext = createContext<{
 export const PreContextProvider = ({
   children,
   hasPreParent
-}: { children: ReactNode; hasPreParent: boolean }) => {
+}: {
+  children: ReactNode;
+  hasPreParent: boolean;
+}) => {
   return (
     <PreContext.Provider value={{ hasPreParent }}>
       {children}

apps/www/src/components/playground/tabs-examples.tsx

@@ -11,11 +11,11 @@ export function TabsExamples() {
         <Flex gap='large' direction='column'>
           <Tabs defaultValue='tab1'>
             <Tabs.List>
-              <Tabs.Trigger value='tab1'>Account</Tabs.Trigger>
-              <Tabs.Trigger value='tab2' disabled>
+              <Tabs.Tab value='tab1'>Account</Tabs.Tab>
+              <Tabs.Tab value='tab2' disabled>
                 Password
-              </Tabs.Trigger>
-              <Tabs.Trigger value='tab3'>Settings</Tabs.Trigger>
+              </Tabs.Tab>
+              <Tabs.Tab value='tab3'>Settings</Tabs.Tab>
             </Tabs.List>
             <Tabs.Content value='tab1'>Account settings</Tabs.Content>
             <Tabs.Content value='tab2'>Password settings</Tabs.Content>
@@ -25,8 +25,8 @@ export function TabsExamples() {
         <Flex gap='large' direction='column'>
           <Tabs defaultValue='tab1'>
             <Tabs.List>
-              <Tabs.Trigger value='tab1'>Home</Tabs.Trigger>
-              <Tabs.Trigger value='tab2' icon={<Info />} />
+              <Tabs.Tab value='tab1'>Home</Tabs.Tab>
+              <Tabs.Tab value='tab2' leadingIcon={<Info />} />
             </Tabs.List>
             <Tabs.Content value='tab1'>Home</Tabs.Content>
             <Tabs.Content value='tab2'>Info</Tabs.Content>

apps/www/src/components/theme-customiser/theme-customiser.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { getPropsString } from '@/lib/utils';
 import { Button, Radio, Tabs } from '@raystack/apsara';
+import { getPropsString } from '@/lib/utils';
 import { ThemeOptions, useTheme } from '../theme';
 import styles from './theme-customiser.module.css';
 
@@ -44,8 +44,8 @@ export default function ThemeCustomizer() {
           }
         >
           <Tabs.List>
-            <Tabs.Trigger value='modern'>Modern</Tabs.Trigger>
-            <Tabs.Trigger value='traditional'>Traditional</Tabs.Trigger>
+            <Tabs.Tab value='modern'>Modern</Tabs.Tab>
+            <Tabs.Tab value='traditional'>Traditional</Tabs.Tab>
           </Tabs.List>
         </Tabs>
       </div>
@@ -58,8 +58,8 @@ export default function ThemeCustomizer() {
           }
         >
           <Tabs.List>
-            <Tabs.Trigger value='light'>Light</Tabs.Trigger>
-            <Tabs.Trigger value='dark'>Dark</Tabs.Trigger>
+            <Tabs.Tab value='light'>Light</Tabs.Tab>
+            <Tabs.Tab value='dark'>Dark</Tabs.Tab>
           </Tabs.List>
         </Tabs>
       </div>

apps/www/src/content/docs/components/tabs/demo.ts

@@ -6,11 +6,11 @@ export const preview = {
   <Flex direction="row" gap="large" style={{ width: "100%", fontSize: "12px" }}>
     <Tabs defaultValue="tab-one">
       <Tabs.List>
-        <Tabs.Trigger value="tab-one" icon={<Info />}>Hoisting</Tabs.Trigger>
-        <Tabs.Trigger value="tab-two">Hosting</Tabs.Trigger>
-        <Tabs.Trigger value="tab-three" icon={<Info />}>Editor</Tabs.Trigger>
-        <Tabs.Trigger value="tab-four">Billing</Tabs.Trigger>
-        <Tabs.Trigger value="tab-five">SEO</Tabs.Trigger>
+        <Tabs.Tab value="tab-one" leadingIcon={<Info />}>Hoisting</Tabs.Tab>
+        <Tabs.Tab value="tab-two">Hosting</Tabs.Tab>
+        <Tabs.Tab value="tab-three" leadingIcon={<Info />}>Editor</Tabs.Tab>
+        <Tabs.Tab value="tab-four">Billing</Tabs.Tab>
+        <Tabs.Tab value="tab-five">SEO</Tabs.Tab>
       </Tabs.List>
       <Tabs.Content value="tab-one">
         <Text>General settings content</Text>
@@ -37,9 +37,9 @@ export const basicDemo = {
   <div style={{ width: "400px" }}>
   <Tabs defaultValue="tab1">
   <Tabs.List>
-    <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
-    <Tabs.Trigger value="tab2">Password</Tabs.Trigger>
-    <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
+    <Tabs.Tab value="tab1">Account</Tabs.Tab>
+    <Tabs.Tab value="tab2">Password</Tabs.Tab>
+    <Tabs.Tab value="tab3">Settings</Tabs.Tab>
   </Tabs.List>
   <Tabs.Content value="tab1">Account settings</Tabs.Content>
   <Tabs.Content value="tab2">Password settings</Tabs.Content>
@@ -54,11 +54,11 @@ export const iconsDemo = {
   <div style={{ width: "400px" }}>
   <Tabs defaultValue="tab1">
     <Tabs.List>
-      <Tabs.Trigger value="tab1">Home</Tabs.Trigger>
-      <Tabs.Trigger value="tab2" icon={<Info />} />
+      <Tabs.Tab value="tab1">Home</Tabs.Tab>
+      <Tabs.Tab value="tab2" leadingIcon={<Info />}>Info</Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value="tab1">Home</Tabs.Content>
-    <Tabs.Content value="tab2">Info</Tabs.Content>
+    <Tabs.Content value="tab1">Home content</Tabs.Content>
+    <Tabs.Content value="tab2">Info content</Tabs.Content>
   </Tabs>
   </div>`
 };
@@ -69,8 +69,8 @@ export const disabledDemo = {
   <div style={{ width: "400px" }}>
   <Tabs defaultValue="tab1">
   <Tabs.List>
-    <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
-    <Tabs.Trigger value="tab2" disabled>Disabled</Tabs.Trigger>
+    <Tabs.Tab value="tab1">Active</Tabs.Tab>
+    <Tabs.Tab value="tab2" disabled>Disabled</Tabs.Tab>
   </Tabs.List>
   <Tabs.Content value="tab1">Active tab content</Tabs.Content>
   <Tabs.Content value="tab2">Disabled tab content</Tabs.Content>

apps/www/src/content/docs/components/tabs/index.mdx

@@ -22,9 +22,9 @@ import { Tabs } from "@raystack/apsara";
 
 <auto-type-table path="./props.ts" name="TabsListProps" />
 
-### Tabs.Trigger Props
+### Tabs.Tab Props
 
-<auto-type-table path="./props.ts" name="TabsTriggerProps" />
+<auto-type-table path="./props.ts" name="TabsTabProps" />
 
 ### Tabs.Content Props
 
@@ -36,18 +36,10 @@ import { Tabs } from "@raystack/apsara";
 
 <Demo data={basicDemo} />
 
-### With Icons
+### With Leading Icons
 
 <Demo data={iconsDemo} />
 
 ### Disabled Tab
 
 <Demo data={disabledDemo} />
-
-## Accessibility
-
-Tabs follow the [WAI-ARIA Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/). They include the following accessibility features:
-
-- Keyboard navigation between tabs using arrow keys
-- Proper ARIA roles, states, and properties
-- Focus management for tab panels

apps/www/src/content/docs/components/tabs/props.ts

@@ -1,12 +1,15 @@
 export interface TabsRootProps {
-  /** The initial active tab value. If not provided, no tab will be selected by default. */
-  defaultValue?: string;
+  /** The initial active tab value. */
+  defaultValue?: any;
 
   /** The controlled active tab value. */
-  value?: string;
+  value?: any;
 
   /** Callback function triggered when the active tab changes. */
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: any) => void;
+
+  /** The orientation of the tabs. */
+  orientation?: 'horizontal' | 'vertical';
 
   /** Additional CSS class names. */
   className?: string;
@@ -17,12 +20,12 @@ export interface TabsListProps {
   className?: string;
 }
 
-export interface TabsTriggerProps {
+export interface TabsTabProps {
   /** Unique identifier for the tab. */
-  value: string;
+  value: any;
 
-  /** Optional icon element to display. */
-  icon?: React.ReactNode;
+  /** Optional icon element to display before the label. */
+  leadingIcon?: React.ReactNode;
 
   /** Whether the tab is disabled. */
   disabled?: boolean;
@@ -33,7 +36,10 @@ export interface TabsTriggerProps {
 
 export interface TabsContentProps {
   /** Matching identifier for the tab. */
-  value: string;
+  value: any;
+
+  /** Whether to keep the panel in the DOM while hidden. */
+  keepMounted?: boolean;
 
   /** Additional CSS class names. */
   className?: string;