newt239 · newt239 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
diff --git a/.changeset/plenty-moons-shake.md b/.changeset/plenty-moons-shake.md
@@ -7,3 +7,13 @@ CodeBlock コンポーネントを追加し、Card と Anchor のスタイルを
 - CodeBlock コンポーネントを新規追加。クリップボードコピー機能を内蔵し、シンタックスハイライト済みの React 要素を children で注入可能(shiki 等は非内包)
 - Card の視覚変更: CodeBlock と同じ外観に統一(border を `--color-primary-2` に、padding 1rem を Card 本体に移動し各セクションの間隔は gap で管理)し、box-shadow を削除
 - Anchor `variant="button"` の視覚変更: Button と統一(角丸を `calc(var(--size-radius) * 0.5)` に、フォーカスリングを outline 方式に、disabled 表現と transition を Button と同一に)
+
+AlertDialog / Drawer / Popover / Alert / Badge / Toast コンポーネントを追加
+
+- variables.css にセマンティックカラー変数(`--color-info` / `--color-success` / `--color-warning` / `--color-danger` とそれぞれの `-light` / `-dark`)を追加
+- Alert: タイトルと説明文を持つ静的表示コンポーネント。info / success / warning / danger の4バリアント
+- Badge: primary / secondary と状態色4種の計6バリアントを持つバッジ
+- AlertDialog: `role="alertdialog"` 固定のダイアログ。既存の Modal / DialogTrigger と組み合わせて使用
+- Drawer: placement で4方向(left / right / top / bottom)のスライドインに対応。dismissable prop で外側クリック時の挙動を制御
+- Popover: react-aria の Popover をラップし、非モーダル Dialog と矢印(OverlayArrow)を内蔵。placement / showArrow でカスタマイズ可能
+- Toast: react-aria の UNSTABLE\_ Toast API をラップ。`toast.show` / `info` / `success` / `warning` / `danger` / `close` の関数 API と、4隅に配置可能な ToastRegion を提供
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,29 @@
 # Changelog
 
+## v0.14.0
+
+- feat: AlertDialog / Drawer / Popover / Alert / Badge / Toast コンポーネントを追加
+- feat: セマンティックカラー変数(`--color-info` / `--color-success` / `--color-warning` / `--color-danger`)を追加
+- feat: CodeBlock コンポーネントを追加
+- improve: Card と Anchor のスタイルを CodeBlock / Button と統一
+
+## v0.13.3
+
+- chore: changesets の fixed 設定で `@ginga-ui/core`・`@ginga-ui/utils`・`ginga-ui.com` のバージョンを 0.13.3 に統一
+- fix: tsdown を unbundle 化し、`"use client"` バナーの保持と CSS の自動付随に対応
+
+## v0.12.2
+
+- change: ビルドツールを tsup から tsdown(Rolldown ベース)へ移行
+
+## v0.12.1
+
+- fix: デプロイワークフローを修正
+
+## v0.12.0
+
+- change: パッケージスキーマを変更
+
 ## v0.11.0
 
 - remove: CSS Modules

diff --git a/app/ginga-ui.com/src/app/components/alert-dialog/page.mdx b/app/ginga-ui.com/src/app/components/alert-dialog/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  WarningExample,
+  PlainExample,
+} from "#/examples/alert-dialog";
+
+<ComponentDoc id="alert-dialog">
+  <Example id="alert-dialog" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="alert-dialog" name="WarningExample">
+    <WarningExample />
+  </Example>
+  <Example id="alert-dialog" name="PlainExample">
+    <PlainExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/app/components/alert/page.mdx b/app/ginga-ui.com/src/app/components/alert/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  VariantsExample,
+  DescriptionOnlyExample,
+} from "#/examples/alert";
+
+<ComponentDoc id="alert">
+  <Example id="alert" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="alert" name="VariantsExample">
+    <VariantsExample />
+  </Example>
+  <Example id="alert" name="DescriptionOnlyExample">
+    <DescriptionOnlyExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/app/components/badge/page.mdx b/app/ginga-ui.com/src/app/components/badge/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  VariantsExample,
+  WithTextExample,
+} from "#/examples/badge";
+
+<ComponentDoc id="badge">
+  <Example id="badge" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="badge" name="VariantsExample">
+    <VariantsExample />
+  </Example>
+  <Example id="badge" name="WithTextExample">
+    <WithTextExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/app/components/drawer/page.mdx b/app/ginga-ui.com/src/app/components/drawer/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  PlacementsExample,
+  NotDismissableExample,
+} from "#/examples/drawer";
+
+<ComponentDoc id="drawer">
+  <Example id="drawer" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="drawer" name="PlacementsExample">
+    <PlacementsExample />
+  </Example>
+  <Example id="drawer" name="NotDismissableExample">
+    <NotDismissableExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/app/components/page.tsx b/app/ginga-ui.com/src/app/components/page.tsx
@@ -25,7 +25,7 @@ export default function ComponentsPage() {
       <Heading level="h1">全コンポーネント</Heading>
       <Paragraph>
         Ginga
-        UIが提供する全19個のコンポーネントを確認できます。タブでカテゴリを切り替えて、各コンポーネントの詳細ページにアクセスできます。
+        UIが提供する全25個のコンポーネントを確認できます。タブでカテゴリを切り替えて、各コンポーネントの詳細ページにアクセスできます。
       </Paragraph>
 
       <div className={styles.tabsContainer}>

diff --git a/app/ginga-ui.com/src/app/components/popover/page.mdx b/app/ginga-ui.com/src/app/components/popover/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  PlacementsExample,
+  WithoutArrowExample,
+} from "#/examples/popover";
+
+<ComponentDoc id="popover">
+  <Example id="popover" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="popover" name="PlacementsExample">
+    <PlacementsExample />
+  </Example>
+  <Example id="popover" name="WithoutArrowExample">
+    <WithoutArrowExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/app/components/toast/page.mdx b/app/ginga-ui.com/src/app/components/toast/page.mdx
@@ -0,0 +1,18 @@
+import { ComponentDoc, Example } from "#/components/component-doc";
+import {
+  BasicExample,
+  VariantsExample,
+  TimeoutExample,
+} from "#/examples/toast";
+
+<ComponentDoc id="toast">
+  <Example id="toast" name="BasicExample">
+    <BasicExample />
+  </Example>
+  <Example id="toast" name="VariantsExample">
+    <VariantsExample />
+  </Example>
+  <Example id="toast" name="TimeoutExample">
+    <TimeoutExample />
+  </Example>
+</ComponentDoc>
diff --git a/app/ginga-ui.com/src/data/components.ts b/app/ginga-ui.com/src/data/components.ts
@@ -85,6 +85,26 @@ const COMPONENTS: ComponentMetadata[] = [
     category: "display",
     description: "展開/折りたたみ可能なコンテンツセクション。",
   },
+  {
+    id: "alert",
+    name: "Alert",
+    category: "display",
+    description:
+      "重要な情報をユーザーに伝えるアラート。4種類のバリアント(info、success、warning、danger)をサポート。",
+  },
+  {
+    id: "alert-dialog",
+    name: "AlertDialog",
+    category: "display",
+    description:
+      "ユーザーの確認を必須とするアラートダイアログ。破壊的な操作の確認などに使用。",
+  },
+  {
+    id: "badge",
+    name: "Badge",
+    category: "display",
+    description: "ステータスやラベルを表示する小さなバッジ。",
+  },
   {
     id: "card",
     name: "Card",
@@ -98,6 +118,13 @@ const COMPONENTS: ComponentMetadata[] = [
     description:
       "モーダルダイアログ。ユーザーの注意を引く重要な情報や操作を表示。",
   },
+  {
+    id: "drawer",
+    name: "Drawer",
+    category: "display",
+    description:
+      "画面の端からスライドインするドロワー。4方向(left、right、top、bottom)に対応。",
+  },
   {
     id: "image",
     name: "Image",
@@ -110,6 +137,13 @@ const COMPONENTS: ComponentMetadata[] = [
     category: "display",
     description: "順序付きリストと順序なしリストを表示。",
   },
+  {
+    id: "popover",
+    name: "Popover",
+    category: "display",
+    description:
+      "トリガー要素に紐づけて表示されるポップオーバー。配置方向と矢印表示をカスタマイズ可能。",
+  },
   {
     id: "table",
     name: "Table",
@@ -123,6 +157,13 @@ const COMPONENTS: ComponentMetadata[] = [
     description:
       "タブで切り替え可能なコンテンツパネル。水平・垂直レイアウトに対応。",
   },
+  {
+    id: "toast",
+    name: "Toast",
+    category: "display",
+    description:
+      "一時的な通知を表示するトースト。プログラマティックなAPI(toast.success等)で呼び出し可能。",
+  },
 
   // Typography
   {

diff --git a/app/ginga-ui.com/src/data/configs.ts b/app/ginga-ui.com/src/data/configs.ts
@@ -27,6 +27,43 @@ export const EXAMPLE_CONFIGS: Record<string, ExampleConfig[]> = {
       description: "状態を外部から制御するアコーディオンです。",
     },
   ],
+  alert: [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description: "タイトルと説明文を持つシンプルなアラートです。",
+    },
+    {
+      name: "VariantsExample",
+      title: "バリアント",
+      description:
+        "info、success、warning、dangerの4種類のバリアントを指定できます。",
+    },
+    {
+      name: "DescriptionOnlyExample",
+      title: "説明文のみ",
+      description:
+        "タイトルを省略して説明文だけを表示できます。動的に挿入して通知する場合はrole属性にalertを渡すか、Toastの利用を検討してください。",
+    },
+  ],
+  "alert-dialog": [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description:
+        "破壊的な操作の確認を求めるアラートダイアログです。外側をクリックしても閉じず、明示的な選択を求めます。",
+    },
+    {
+      name: "WarningExample",
+      title: "警告バリアント",
+      description: "variantプロップでタイトル色とアクセントを変更できます。",
+    },
+    {
+      name: "PlainExample",
+      title: "バリアントなし",
+      description: "variantを指定しない場合は通常の配色で表示されます。",
+    },
+  ],
   anchor: [
     {
       name: "BasicExample",
@@ -49,6 +86,24 @@ export const EXAMPLE_CONFIGS: Record<string, ExampleConfig[]> = {
       description: "ボタンのようなスタイルでリンクを表示します。",
     },
   ],
+  badge: [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description: "シンプルなバッジの使用例です。",
+    },
+    {
+      name: "VariantsExample",
+      title: "バリアント",
+      description:
+        "primary、secondary、info、success、warning、dangerの6種類のバリアントを指定できます。",
+    },
+    {
+      name: "WithTextExample",
+      title: "テキストと組み合わせる",
+      description: "テキストの横に件数などを表示できます。",
+    },
+  ],
   box: [
     {
       name: "BasicExample",
@@ -160,6 +215,25 @@ export const EXAMPLE_CONFIGS: Record<string, ExampleConfig[]> = {
       description: "シンプルなアラートダイアログです。",
     },
   ],
+  drawer: [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description: "画面の右端からスライドインするドロワーです。",
+    },
+    {
+      name: "PlacementsExample",
+      title: "表示位置",
+      description:
+        "placementプロップでleft、right、top、bottomの4方向を指定できます。",
+    },
+    {
+      name: "NotDismissableExample",
+      title: "外側クリックで閉じない",
+      description:
+        "dismissableプロップにfalseを渡すと、外側のクリックやESCキーでは閉じなくなります。",
+    },
+  ],
   "form-control": [
     {
       name: "BasicExample",
@@ -293,6 +367,25 @@ export const EXAMPLE_CONFIGS: Record<string, ExampleConfig[]> = {
       description: "カスタムスタイルを適用した段落です。",
     },
   ],
+  popover: [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description:
+        "トリガーの下に表示されるシンプルなポップオーバーです。フォーカス管理とキーボード操作に対応しています。",
+    },
+    {
+      name: "PlacementsExample",
+      title: "表示位置",
+      description:
+        "placementプロップでtop、bottom、left、rightなどの表示位置を指定できます。",
+    },
+    {
+      name: "WithoutArrowExample",
+      title: "矢印なし",
+      description: "showArrowプロップにfalseを渡すと矢印を非表示にできます。",
+    },
+  ],
   radio: [
     {
       name: "BasicExample",
@@ -403,6 +496,26 @@ export const EXAMPLE_CONFIGS: Record<string, ExampleConfig[]> = {
       description: "状態を外部から制御するタブです。",
     },
   ],
+  toast: [
+    {
+      name: "BasicExample",
+      title: "基本的な使い方",
+      description:
+        "ToastRegionをアプリのルートに1回だけ設置し、toast.showで通知を表示します。toast関数はクライアントのイベントハンドラから呼び出してください。",
+    },
+    {
+      name: "VariantsExample",
+      title: "バリアント",
+      description:
+        "toast.info、toast.success、toast.warning、toast.dangerで状態に応じた通知を表示できます。",
+    },
+    {
+      name: "TimeoutExample",
+      title: "自動クローズ",
+      description:
+        "timeoutオプションを指定すると自動的に閉じます。ホバーやフォーカス中はタイマーが一時停止します。",
+    },
+  ],
   table: [
     {
       name: "BasicExample",