@neynar/ui 0.4.0 → 1.0.0

package/src/components/ui/tabs.tsx

@@ -1,331 +1,78 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+"use client";
 
-import { cn } from "@/lib/utils";
-
-// ============================================================================
-// DOCUMENTATION-ONLY PROP TYPES (Internal - Not exported)
-// ============================================================================
-
-/**
- * Props for Tabs (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type TabsDocsProps = {
-  /** The initial active tab value (uncontrolled usage). Use when you do not need to control the state of the tabs */
-  defaultValue?: string;
-  /** The currently active tab value (controlled usage). Should be used in conjunction with onValueChange */
-  value?: string;
-  /** Callback fired when the active tab changes
-   * @param value - The new active tab value
-   */
-  onValueChange?: (value: string) => void;
-  /** Layout direction of the tabs
-   * @default "horizontal"
-   */
-  orientation?: "horizontal" | "vertical";
-  /** Text direction for RTL support. If omitted, inherits globally from DirectionProvider or assumes LTR
-   * @default "ltr"
-   */
-  dir?: "ltr" | "rtl";
-  /** When tabs activate: "automatic" (on focus) or "manual" (on click/enter)
-   * @default "automatic"
-   */
-  activationMode?: "automatic" | "manual";
-  /** Additional CSS classes for styling */
-  className?: string;
-  /** Tab list, content panels, and other child elements */
-  children?: React.ReactNode;
-  /** Change the default rendered element for the one passed as a child, merging their props and behavior
-   * @default false
-   */
-  asChild?: boolean;
-} & React.ComponentProps<typeof TabsPrimitive.Root>;
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
 
-/**
- * Props for TabsList (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type TabsListDocsProps = {
-  /** When true, keyboard navigation will loop from last tab to first, and vice versa
-   * @default true
-   */
-  loop?: boolean;
-  /** Additional CSS classes for custom styling */
-  className?: string;
-  /** TabsTrigger components to be grouped */
-  children?: React.ReactNode;
-  /** Change the default rendered element for the one passed as a child, merging their props and behavior
-   * @default false
-   */
-  asChild?: boolean;
-} & React.ComponentProps<typeof TabsPrimitive.List>;
+import { cn } from "@/lib/utils";
 
-/**
- * Props for TabsTrigger (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type TabsTriggerDocsProps = {
-  /** Unique identifier that associates this trigger with its content panel */
-  value: string;
-  /** When true, prevents interaction and shows disabled styling
-   * @default false
-   */
-  disabled?: boolean;
-  /** Additional CSS classes for custom styling */
-  className?: string;
-  /** Content to display within the trigger (text, icons, etc.) */
-  children?: React.ReactNode;
-  /** Change the default rendered element for the one passed as a child, merging their props and behavior
-   * @default false
-   */
-  asChild?: boolean;
-} & React.ComponentProps<typeof TabsPrimitive.Trigger>;
+type TabsProps = TabsPrimitive.Root.Props;
 
 /**
- * Props for TabsContent (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
+ * Root container for tabs component that manages tab state and orientation.
+ * Supports both controlled and uncontrolled usage with horizontal or vertical layout.
  */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type TabsContentDocsProps = {
-  /** Unique identifier that associates this content with its trigger */
-  value: string;
-  /** When true, content stays mounted even when inactive (useful for preserving state)
-   * @default false
-   */
-  forceMount?: boolean;
-  /** Additional CSS classes for custom styling */
-  className?: string;
-  /** The content to display when this tab is active */
-  children?: React.ReactNode;
-  /** Change the default rendered element for the one passed as a child, merging their props and behavior
-   * @default false
-   */
-  asChild?: boolean;
-} & React.ComponentProps<typeof TabsPrimitive.Content>;
-
-/**
- * A tabbed interface component for organizing content into multiple sections.
- *
- * Tabs provide an intuitive way to organize and display content in separate panels,
- * with only one panel visible at a time. Built on Radix UI's robust accessibility
- * foundation with full keyboard navigation, focus management, and screen reader support.
- *
- * The component supports both controlled and uncontrolled usage patterns, allowing
- * for flexible integration in various application contexts. Each tab consists of a
- * trigger (button) that activates its corresponding content panel.
- *
- * @example Basic uncontrolled tabs
- * ```tsx
- * <Tabs defaultValue="account" className="w-[400px]">
- *   <TabsList>
- *     <TabsTrigger value="account">Account</TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
- *     <Card>
- *       <CardContent>
- *         <p>Manage your account settings here.</p>
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- *   <TabsContent value="password">
- *     <Card>
- *       <CardContent>
- *         <p>Change your password here.</p>
- *       </CardContent>
- *     </Card>
- *   </TabsContent>
- * </Tabs>
- * ```
- *
- * @example Controlled tabs with external state management
- * ```tsx
- * const [activeTab, setActiveTab] = useState("overview");
- *
- * // External controls can change the active tab
- * const handleQuickNav = (tab: string) => {
- *   setActiveTab(tab);
- * };
- *
- * <Tabs value={activeTab} onValueChange={setActiveTab}>
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
- *     <TabsTrigger value="reports">Reports</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">
- *     <DashboardOverview />
- *   </TabsContent>
- *   <TabsContent value="analytics">
- *     <AnalyticsPanel />
- *   </TabsContent>
- *   <TabsContent value="reports">
- *     <ReportsPanel />
- *   </TabsContent>
- * </Tabs>
- * ```
- *
- * @example Vertical orientation
- * ```tsx
- * <Tabs defaultValue="general" orientation="vertical" className="flex gap-4">
- *   <TabsList className="flex-col h-auto">
- *     <TabsTrigger value="general">General</TabsTrigger>
- *     <TabsTrigger value="security">Security</TabsTrigger>
- *     <TabsTrigger value="notifications">Notifications</TabsTrigger>
- *   </TabsList>
- *   <div className="flex-1">
- *     <TabsContent value="general">
- *       <SettingsGeneral />
- *     </TabsContent>
- *     <TabsContent value="security">
- *       <SettingsSecurity />
- *     </TabsContent>
- *     <TabsContent value="notifications">
- *       <SettingsNotifications />
- *     </TabsContent>
- *   </div>
- * </Tabs>
- * ```
- *
- * @accessibility
- * - **Keyboard Navigation**: Arrow keys navigate between tabs, Tab/Shift+Tab moves focus into/out of tab list
- * - **Focus Management**: Home/End keys jump to first/last tab, proper focus visible indicators
- * - **Screen Readers**: Proper ARIA roles (tablist, tab, tabpanel), labels, and state announcements
- * - **Touch Support**: Touch-friendly trigger areas with appropriate spacing
- * - **RTL Support**: Respects text direction for proper layout in right-to-left languages
- * - **Activation Modes**: Automatic (focus) or manual (click/enter) activation patterns
- *
- * @see {@link https://ui.shadcn.com/docs/components/tabs} shadcn/ui tabs documentation
- * @see {@link https://www.radix-ui.com/primitives/docs/components/tabs} Radix UI tabs primitive
- * @see {@link TabsList} - Container component for tab triggers
- * @see {@link TabsTrigger} - Individual clickable tab button
- * @see {@link TabsContent} - Content panel associated with each tab
- * @since 1.0.0
- */
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, orientation = "horizontal", ...props }: TabsProps) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      data-orientation={orientation}
+      className={cn(
+        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
+        className,
+      )}
       {...props}
     />
   );
 }
 
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type TabsListProps = TabsPrimitive.List.Props &
+  VariantProps<typeof tabsListVariants>;
+
 /**
- * Container component that groups all tab trigger buttons together.
- *
- * Provides consistent styling and layout for tab triggers with a unified
- * background and proper spacing. The list maintains the tab order and
- * handles focus management within the tabbed interface.
- *
- * @example Standard horizontal layout
- * ```tsx
- * <TabsList>
- *   <TabsTrigger value="home">Home</TabsTrigger>
- *   <TabsTrigger value="about">About</TabsTrigger>
- *   <TabsTrigger value="contact">Contact</TabsTrigger>
- * </TabsList>
- * ```
- *
- * @example Grid layout for equal-width tabs
- * ```tsx
- * <TabsList className="grid w-full grid-cols-3">
- *   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
- *   <TabsTrigger value="tab2">Tab 2</TabsTrigger>
- *   <TabsTrigger value="tab3">Tab 3</TabsTrigger>
- * </TabsList>
- * ```
- *
- * @example Vertical orientation
- * ```tsx
- * <TabsList className="flex-col h-auto w-[200px]">
- *   <TabsTrigger value="settings" className="w-full justify-start">
- *     Settings
- *   </TabsTrigger>
- *   <TabsTrigger value="profile" className="w-full justify-start">
- *     Profile
- *   </TabsTrigger>
- * </TabsList>
- * ```
- *
- * @accessibility
- * - Implements ARIA tablist role for screen readers
- * - Maintains proper tab order and focus management
- * - Supports keyboard navigation between triggers
- * - Loop navigation when enabled (default: true)
- *
- * @since 1.0.0
+ * Container for tab triggers with two visual variants.
+ * @param variant - Visual style: "default" (background highlight) or "line" (underline indicator). @default "default"
  */
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+function TabsList({ className, variant = "default", ...props }: TabsListProps) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        "bg-card text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   );
 }
 
+type TabsTriggerProps = TabsPrimitive.Tab.Props;
+
 /**
- * Individual clickable button that activates its associated tab content.
- *
- * Each trigger is associated with a specific tab panel via the `value` prop.
- * The component automatically handles active states, focus management, and
- * accessibility attributes. Supports icons, text, and custom content.
- *
- * @example Basic text trigger
- * ```tsx
- * <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
- * ```
- *
- * @example Trigger with icon
- * ```tsx
- * <TabsTrigger value="settings">
- *   <Settings className="h-4 w-4" />
- *   Settings
- * </TabsTrigger>
- * ```
- *
- * @example Disabled trigger
- * ```tsx
- * <TabsTrigger value="premium" disabled>
- *   Premium Features
- * </TabsTrigger>
- * ```
- *
- * @accessibility
- * - Implements ARIA tab role with proper attributes
- * - Announces selected state to screen readers
- * - Supports keyboard activation (Space, Enter)
- * - Shows focus visible indicators for keyboard users
- * - Respects disabled state for assistive technology
- * - Data attributes: [data-state], [data-disabled], [data-orientation]
- *
- * @since 1.0.0
+ * Individual tab button that activates the corresponding panel.
+ * Supports icons, badges, and disabled state. Active tab has visual highlight or underline based on variant.
  */
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: TabsTriggerProps) {
   return (
-    <TabsPrimitive.Trigger
+    <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}
       {...props}
@@ -333,70 +80,30 @@ function TabsTrigger({
   );
 }
 
+type TabsContentProps = TabsPrimitive.Panel.Props;
+
 /**
- * Content panel that displays when its associated tab trigger is active.
- *
- * Each content panel is linked to a specific trigger via the `value` prop.
- * Only one content panel is visible at a time, creating a clean tabbed
- * interface. The component handles enter/exit animations and proper
- * focus management when tabs change.
- *
- * @example Basic content panel
- * ```tsx
- * <TabsContent value="profile">
- *   <Card>
- *     <CardHeader>
- *       <CardTitle>Profile Settings</CardTitle>
- *     </CardHeader>
- *     <CardContent>
- *       <ProfileForm />
- *     </CardContent>
- *   </Card>
- * </TabsContent>
- * ```
- *
- * @example Content with loading state
- * ```tsx
- * <TabsContent value="analytics">
- *   {isLoading ? (
- *     <div className="flex items-center justify-center p-8">
- *       <Spinner className="h-6 w-6" />
- *     </div>
- *   ) : (
- *     <AnalyticsCharts data={analyticsData} />
- *   )}
- * </TabsContent>
- * ```
- *
- * @example Lazy-loaded content
- * ```tsx
- * <TabsContent value="reports" className="space-y-4">
- *   <Suspense fallback={<ReportsSkeleton />}>
- *     <ReportsPanel />
- *   </Suspense>
- * </TabsContent>
- * ```
- *
- * @accessibility
- * - Implements ARIA tabpanel role with proper labeling
- * - Hidden from screen readers when inactive
- * - Receives focus when tab is activated via keyboard
- * - Maintains focus within panel content
- * - Supports forceMount for animation control
- *
- * @since 1.0.0
+ * Content panel that displays when its corresponding tab is active.
+ * Automatically hidden/shown based on active tab value.
  */
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: TabsContentProps) {
   return (
-    <TabsPrimitive.Content
+    <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("text-sm flex-1 outline-none", className)}
       {...props}
     />
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  tabsListVariants,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+};