Compound Components and Slot (asChild) Patterns in Modern React

'use client';

import * as React from 'react';
import { Slot, composeEventHandlers } from './slot';

// ─── Compound Component Context ──────────────────────────────────
interface TabsContextValue {
  activeTab: string;
  setActiveTab: (value: string) => void;
  baseId: string;
}

const TabsContext = React.createContext<TabsContextValue | null>(null);

function useTabsContext(componentName: string): TabsContextValue {
  const context = React.useContext(TabsContext);
  if (!context) {
    throw new Error(`[${componentName}] must be rendered inside a <Tabs.Root> provider.`);
  }
  return context;
}

// ─── Root ────────────────────────────────────────────────────────
export interface TabsRootProps extends React.HTMLAttributes<HTMLDivElement> {
  defaultValue: string;
  value?: string;
  onValueChange?: (value: string) => void;
  children: React.ReactNode;
}

function Root({
  defaultValue,
  value,
  onValueChange,
  children,
  className,
  ...props
}: TabsRootProps) {
  const [activeTab, setActiveTabState] = React.useState(defaultValue);
  const baseId = React.useId();

  const isControlled = value !== undefined;
  const currentTab = isControlled ? value : activeTab;

  const setActiveTab = React.useCallback(
    (nextTab: string) => {
      if (!isControlled) {
        setActiveTabState(nextTab);
      }
      onValueChange?.(nextTab);
    },
    [isControlled, onValueChange]
  );

  const contextValue = React.useMemo(
    () => ({ activeTab: currentTab, setActiveTab, baseId }),
    [currentTab, setActiveTab, baseId]
  );

  return (
    <TabsContext.Provider value={contextValue}>
      <div className={className} {...props}>
        {children}
      </div>
    </TabsContext.Provider>
  );
}

// ─── List ────────────────────────────────────────────────────────
export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {}

function List({ className, ...props }: TabsListProps) {
  return (
    <div
      role="tablist"
      aria-orientation="horizontal"
      className={className}
      {...props}
    />
  );
}

// ─── Trigger ─────────────────────────────────────────────────────
export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  value: string;
  asChild?: boolean;
}

const Trigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
  ({ value, asChild = false, onClick, className, children, ...props }, ref) => {
    const { activeTab, setActiveTab, baseId } = useTabsContext('Tabs.Trigger');
    const isSelected = activeTab === value;

    const triggerProps = {
      role: 'tab',
      id: `${baseId}-trigger-${value}`,
      'aria-selected': isSelected,
      'aria-controls': `${baseId}-content-${value}`,
      tabIndex: isSelected ? 0 : -1,
      onClick: composeEventHandlers(onClick, () => setActiveTab(value)),
      className,
      ...props,
    };

    if (asChild) {
      return (
        <Slot ref={ref as React.Ref<HTMLElement>} {...triggerProps}>
          {children}
        </Slot>
      );
    }

    return (
      <button ref={ref} type="button" {...triggerProps}>
        {children}
      </button>
    );
  }
);
Trigger.displayName = 'TabsTrigger';

// ─── Content ─────────────────────────────────────────────────────
export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string;
  asChild?: boolean;
  forceMount?: boolean;
}

const Content = React.forwardRef<HTMLDivElement, TabsContentProps>(
  ({ value, asChild = false, forceMount = false, className, children, ...props }, ref) => {
    const { activeTab, baseId } = useTabsContext('Tabs.Content');
    const isSelected = activeTab === value;

    if (!isSelected && !forceMount) {
      return null;
    }

    const contentProps = {
      role: 'tabpanel',
      id: `${baseId}-content-${value}`,
      'aria-labelledby': `${baseId}-trigger-${value}`,
      hidden: !isSelected,
      tabIndex: 0,
      className,
      ...props,
    };

    if (asChild) {
      return (
        <Slot ref={ref as React.Ref<HTMLElement>} {...contentProps}>
          {children}
        </Slot>
      );
    }

    return (
      <div ref={ref} {...contentProps}>
        {children}
      </div>
    );
  }
);
Content.displayName = 'TabsContent';

export const Tabs = {
  Root,
  List,
  Trigger,
  Content,
};