Primitives

責務

Primitivesは 「どう見えるか」（what）を定義する 最小構成単位である。

• HTMLネイティブ要素にデザイントークンベースのスタイルを適用する
• CVAでvariant（見た目のバリエーション）を定義・管理する
• CSS擬似クラス（:hover, :focus-visible, :disabled 等）による見た目の変化を定義する
• Radix UI Slotによる asChild パターンで、レンダリングする要素の差し替えを可能にする
• className を受け取り、利用者側でのスタイル拡張を許容する

Primitivesが決めること

Primitivesが決めないこと

責務外

Primitivesが行ってはならないことを定義する。

• ビジネスロジックや状態管理を持たない — ローディング状態の制御やバリデーションはElementsの責務である
• 他のPrimitivesを内部で組み合わせない — Primitivesは単一のHTML要素（またはRadixプリミティブ）に対応する
• 'use client'を宣言しない — Primitives自体はサーバーコンポーネントとして使用可能な状態を保つ
• 用途を限定する命名をしない — SubmitButton ではなく Button のように、汎用的な名前にする
• 外部にエクスポートしない — アプリケーションコードから直接使用させない

状態の視覚定義

すべてのインタラクティブなPrimitivesは、以下の状態に対する見た目を定義しなければならない。状態の見た目はCSS擬似クラスまたはCVAで実装し、Elementsに判断を委ねない。

loading 状態の見た目（Spinner表示等）はElementsの責務である。Primitivesは disabled の見た目だけを定義し、Elementsが isLoading 時に disabled を渡すことでローディング中の見た目を実現する。

// Primitiveのベーススタイル例（Button）
const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg transition-colors ' +
    'focus-visible:ring-3 focus-visible:ring-ring ' +
    'disabled:pointer-events-none disabled:opacity-50 ' +
    'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground ' +
          'hover:bg-primary-hover active:bg-primary-active',
        // ...
      },
    },
  },
);

要件