Compound Components — 부모-자식이 context로 상태 공유

// 안티패턴: props 폭발
<Tabs
  tabs={[
    { id: 'a', label: 'A', content: <A /> },
    { id: 'b', label: 'B', content: <B />, disabled: true },
  ]}
  defaultActive="a"
  onActiveChange={...}
  orientation="horizontal"
  triggerVariant="underline"
  panelClassName="..."
  listClassName="..."
  triggerClassName="..."
/>

<Tabs defaultValue="a">
  <Tabs.List>
    <Tabs.Trigger value="a">A</Tabs.Trigger>
    <Tabs.Trigger value="b" disabled>B <Badge>3</Badge></Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="a"><A /></Tabs.Panel>
  <Tabs.Panel value="b"><B /></Tabs.Panel>
</Tabs>

// tabs.tsx
import { createContext, useContext, useState, type ReactNode } from 'react'
 
// 1) Context
type TabsCtx = {
  value: string
  onValueChange: (v: string) => void
}
const TabsContext = createContext<TabsCtx | null>(null)
 
const useTabsContext = () => {
  const ctx = useContext(TabsContext)
  if (!ctx) throw new Error('Tabs.* must be used inside <Tabs>')
  return ctx
}
 
// 2) Root
type TabsProps = {
  defaultValue: string
  value?: string
  onValueChange?: (v: string) => void
  children: ReactNode
}
export function Tabs({ defaultValue, value: controlledValue, onValueChange, children }: TabsProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue)
  const value = controlledValue ?? uncontrolled
  const handle = (v: string) => {
    if (controlledValue === undefined) setUncontrolled(v)
    onValueChange?.(v)
  }
  return (
    <TabsContext.Provider value={{ value, onValueChange: handle }}>
      <div data-tabs-root>{children}</div>
    </TabsContext.Provider>
  )
}
 
// 3) List
Tabs.List = function TabsList({ children }: { children: ReactNode }) {
  return (
    <div role="tablist" className={tabs.list()}>
      {children}
    </div>
  )
}
 
// 4) Trigger
Tabs.Trigger = function TabsTrigger({
  value,
  children,
  disabled,
}: {
  value: string
  children: ReactNode
  disabled?: boolean
}) {
  const ctx = useTabsContext()
  const isActive = ctx.value === value
  return (
    <button
      role="tab"
      aria-selected={isActive}
      data-state={isActive ? 'active' : 'inactive'}
      disabled={disabled}
      onClick={() => ctx.onValueChange(value)}
      className={tabs.trigger()}
    >
      {children}
    </button>
  )
}
 
// 5) Panel
Tabs.Panel = function TabsPanel({
  value,
  children,
}: {
  value: string
  children: ReactNode
}) {
  const ctx = useTabsContext()
  if (ctx.value !== value) return null
  return (
    <div role="tabpanel" data-state="active" className={tabs.panel()}>
      {children}
    </div>
  )
}

<Tabs defaultValue="general">
  <Tabs.List>
    <Tabs.Trigger value="general">일반</Tabs.Trigger>
    <Tabs.Trigger value="security">보안</Tabs.Trigger>
    <Tabs.Trigger value="billing" disabled>결제</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="general"><GeneralSettings /></Tabs.Panel>
  <Tabs.Panel value="security"><SecuritySettings /></Tabs.Panel>
  <Tabs.Panel value="billing"><BillingSettings /></Tabs.Panel>
</Tabs>

// Uncontrolled - 라이브러리가 상태 관리
<Tabs defaultValue="a">...</Tabs>
 
// Controlled - 사용자가 상태 관리
const [tab, setTab] = useState('a')
<Tabs value={tab} onValueChange={setTab}>...</Tabs>

// 라이브러리 사용자가 *자기만의* Trigger를 만들고 싶을 때
export { TabsContext, useTabsContext }
 
// 사용자 코드
function CustomTrigger({ value }) {
  const ctx = useTabsContext()
  return <button onClick={() => ctx.onValueChange(value)}>...</button>
}

import { tabs as tabsRecipe } from 'styled-system/recipes'
// tabs는 slot recipe: { list, trigger, panel }
 
// Root에서 recipe 호출 → slot 함수를 Context에 주입
type TabsCtx = TabsState & { styles: ReturnType<typeof tabsRecipe> }
 
export function Tabs({ variant, size, ...rest }) {
  const styles = tabsRecipe({ variant, size })
  // ...
  return <TabsContext.Provider value={{ ...state, styles }}>...</TabsContext.Provider>
}
 
Tabs.Trigger = function ({ value, children }) {
  const { styles, value: active, onValueChange } = useTabsContext()
  return <button className={styles.trigger} onClick={...}>{children}</button>
}