@squadbase/vantage 0.6.1-dev2.5f947f1 → 0.6.2-dev1.0017a4d

package/docs/ja/ui/drawer.md

@@ -0,0 +1,41 @@
+# Drawer
+
+> 画面の端からスワイプで出し入れするパネル。
+
+画面の下(または上下左右)から出てくるパネルです。スワイプで閉じられるので、モバイルでの
+詳細表示やアクション一覧に向いています。デスクトップで広い面積のフォームを出すなら
+[`Sheet`](ui/sheet) が素直です。Base UI の `Drawer` の上に作っています。
+
+```tsx
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Drawer` | 状態。`open` / `defaultOpen` / `onOpenChange`、向き、スナップポイント |
+| `DrawerTrigger` | 開くきっかけ。`render` でボタンにする |
+| `DrawerContent` | 本体。オーバーレイとポータルを内包する |
+| `DrawerHeader` / `DrawerTitle` / `DrawerDescription` | 見出し |
+| `DrawerFooter` | ボタン行 |
+| `DrawerClose` | 閉じるトリガー |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `swipeDirection` | `"down" \| "up" \| "left" \| "right"` | `"down"` | `Drawer` に渡す。閉じるときにスワイプする向き(= 出てくる端)。 |
+| `showSwipeHandle` | `boolean` | `false` | `Drawer` に渡す。つまみ(ハンドル)を表示する。 |
+| `snapPoints` | `(number \| string)[]` |  | `Drawer` に渡す。途中で止まる高さ(`0.5` や `"20rem"`)。 |
+| `modal` | `boolean` | `true` | `Drawer` に渡す。`false` で背景を操作可能にし、オーバーレイを出さない。 |
+
+`DrawerTitle` は支援技術のために必須です。見せたくない場合も置いた上で `className="sr-only"` に
+してください。

package/docs/ja/ui/empty.md

@@ -10,7 +10,7 @@ import { Empty } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Nothing here yet"` | 見出し。 |
+| `title` | `string` | `"表示できるデータがありません"` | 見出し。 |
 | `description` | `string` |  | 見出しの下の補足文。 |
 | `icon` | `ReactNode` |  | 見出しの上に置く絵柄。 |
 | `action` | `ReactNode` |  | 下部に置く次の一手（ボタンやリンク）。 |

package/docs/ja/ui/error-state.md

@@ -10,8 +10,9 @@ import { ErrorState } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Something went wrong"` | 見出し。 |
-| `message` | `ReactNode` |  | 詳細。エラーメッセージをそのまま出せます。 |
+| `title` | `string` | `"データを読み込めませんでした"` | 見出し。 |
+| `message` | `ReactNode` | `"時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。"` | 何が起きたか、次に何をすればよいかを平易な言葉で。 |
+| `details` | `ReactNode` |  | 技術的な詳細（エラーメッセージやステータスコード）。「詳細を表示」の中に折りたたまれます。 |
 | `action` | `ReactNode` |  | 再試行ボタンなど。 |
 | `className` | `string` |  | 足すクラス。 |
 
@@ -34,7 +35,7 @@ export default function Customers() {
   if (error)
     return (
       <ErrorState
-        message={error.message}
+        details={error.message}
         action={<Button variant="outline" onClick={() => refetch()}>再試行</Button>}
       />
     );

package/docs/ja/ui/field.md

@@ -0,0 +1,42 @@
+# Field
+
+> ラベル・説明・エラーを入力と束ねるフォームのレイアウト部品。
+
+入力 1 つぶんのラベル・補足説明・エラーメッセージを、決まった間隔と向きで並べる部品です。
+入力そのものは [`Input`](ui/input) や [`Switch`](ui/switch) などを
+中に置きます。
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldContent,
+  FieldTitle,
+  FieldGroup,
+  FieldSet,
+  FieldLegend,
+  FieldSeparator,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Field` | 入力 1 つぶんの外枠。`orientation` で並び方を選ぶ |
+| `FieldLabel` | ラベル(`Label` を使う)。`htmlFor` で入力と結ぶ |
+| `FieldDescription` | 補足説明 |
+| `FieldError` | エラー。`children` か `errors`(`{ message }[]`)を渡す。空なら描画しない |
+| `FieldContent` | 横並びのときにラベルと説明をまとめる列 |
+| `FieldTitle` | `<label>` ではない見出し |
+| `FieldGroup` | 複数の `Field` を縦に並べる |
+| `FieldSet` / `FieldLegend` | `<fieldset>` / `<legend>` |
+| `FieldSeparator` | 区切り線。中に文字も置ける |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` | `Field` に渡す。`responsive` はコンテナ幅が広いときだけ横並びにする。 |
+| `data-invalid` | `boolean` |  | `Field` に付けるとラベルと説明がエラー色になる。入力には `aria-invalid` を付ける。 |
+| `errors` | `Array<{ message?: string } \| undefined>` |  | `FieldError` に渡す。複数あれば箇条書きにし、重複は 1 つにまとめる。 |

package/docs/ja/ui/hover-card.md

@@ -0,0 +1,21 @@
+# Hover Card
+
+> リンクにホバーすると出るプレビューカード。
+
+リンクや用語にポインタを載せたとき(キーボードではフォーカスしたとき)に、補足の内容を
+カードで見せます。指標の定義やユーザーのプロフィールなど、**読むだけ**の情報向けです。
+操作を伴うなら [`Popover`](ui/popover)、短い一言なら
+[`Tooltip`](ui/tooltip) を使ってください。Base UI の `PreviewCard` の上に作っています。
+
+```tsx
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "@squadbase/vantage/ui";
+```
+
+`HoverCardTrigger` は既定で `<a>` を描画します。別の要素にしたい場合は `render` を渡します。
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | `HoverCardContent` に渡す。トリガーのどちら側に出すか。 |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | `HoverCardContent` に渡す。 |
+| `sideOffset` | `number` | `4` | `HoverCardContent` とトリガーの距離(px)。 |
+| `delay` | `number` | `600` | `HoverCardTrigger` に渡す。開くまでのミリ秒。 |

package/docs/ja/ui/kbd.md

@@ -0,0 +1,16 @@
+# Kbd
+
+> キーボードのキー表示。
+
+ショートカットキーを表示するための小さな部品です。複数のキーは `KbdGroup` で並べます。
+
+```tsx
+import { Kbd, KbdGroup } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `Kbd` | `ComponentProps<"kbd">` | 1 つのキー。 |
+| `KbdGroup` | `ComponentProps<"div">` | キーを横に並べる。 |
+
+ボタンや [`Tooltip`](ui/tooltip) の中に置くと、周りの文字色に合わせて馴染みます。

package/docs/ja/ui/loading.md

@@ -12,7 +12,7 @@ import { Loading } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | 説明 |
 | --- | --- | --- | --- |
-| `label` | `string` | `"Loading…"` | スピナーの右に出すテキスト。 |
+| `label` | `string` | `"読み込んでいます…"` | スピナーの右に出すテキスト。 |
 | `className` | `string` |  | 足すクラス。既定では最小高 30vh で縦横中央に置かれます。 |
 
 レイアウトを保ったまま待たせたいときは [`Skeleton`](ui/skeleton)、ボタンの中など

package/docs/ja/ui/pagination.md

@@ -0,0 +1,36 @@
+# Pagination
+
+> ページ送りのリンク列。
+
+一覧をページに分けたときのページ送りです。見た目だけの部品で、現在ページや総ページ数は
+持ちません — 状態は呼び出し側(URL の検索パラメータや `useState`)で管理します。
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Pagination` | `<nav>`。`aria-label="pagination"` 付き |
+| `PaginationContent` / `PaginationItem` | `<ul>` / `<li>` |
+| `PaginationLink` | 1 ページ分の `<a>`。`isActive` で現在ページを示す |
+| `PaginationPrevious` / `PaginationNext` | 前後への `<a>`。`text` で文言を変える |
+| `PaginationEllipsis` | 省略記号 |
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `isActive` | `boolean` |  | `PaginationLink` に渡す。`aria-current="page"` と枠線付きの見た目になる。 |
+| `text` | `string` | `"Previous" / "Next"` | `PaginationPrevious` / `PaginationNext` のラベル(640px 未満では隠れる)。 |
+
+リンクは素の `<a>` なので、`href` を渡すとそのまま遷移します。画面内の状態だけを変えたい場合は
+`onClick` で `preventDefault()` してください。

package/docs/ja/ui/radio-group.md

@@ -0,0 +1,21 @@
+# Radio Group
+
+> 少数の選択肢から 1 つを選ぶラジオボタン。
+
+選択肢をすべて見せたまま 1 つ選ばせる入力です。選択肢が多いときは
+[`Select`](ui/select)、横並びのボタンで切り替えたいときは
+[`SegmentedControl`](parts/segmented-control) を検討してください。
+
+```tsx
+import { RadioGroup, RadioGroupItem } from "@squadbase/vantage/ui";
+```
+
+`RadioGroupItem` 自体はラベルを持ちません。`id` を振って [`Label`](ui/label) の
+`htmlFor` と結んでください。
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `value` | `unknown` | `RadioGroup` の選択値(制御)。 |
+| `defaultValue` | `unknown` | `RadioGroup` の初期値(非制御)。 |
+| `onValueChange` | `(value: unknown) => void` | `RadioGroup` に渡す。選ばれた `RadioGroupItem` の `value` を受け取る。 |
+| `disabled` | `boolean` | グループ全体、または項目単位で無効にする。 |

package/docs/ja/ui/toast.md

@@ -0,0 +1,46 @@
+# Toast
+
+> 画面の隅に一時的に出る通知。
+
+保存完了や失敗など、操作の結果を短く知らせる通知です。Base UI の `Toast` の上に作っており、
+`sonner` には依存しません。
+
+```tsx
+import { Toaster, toast } from "@squadbase/vantage/ui";
+```
+
+## 使い方
+
+アプリのルート付近を **`Toaster` で 1 度だけ包み**、どこからでも `toast.add()` を呼びます。
+`Toaster` は子要素を描画したうえで、画面右下(モバイルでは下部中央)に通知の置き場を出します。
+
+```tsx
+<Toaster>
+  <App />
+</Toaster>;
+
+toast.add({ title: "レポートを保存しました", type: "success" });
+```
+
+`toast` はモジュール単位で 1 つ作られたマネージャで、`add` / `close` / `update` / `promise` を
+持ちます。
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `ReactNode` |  | 見出し。 |
+| `description` | `ReactNode` |  | 本文。 |
+| `type` | `"success" \| "info" \| "warning" \| "error" \| "loading" \| string` |  | 左に出すアイコンを決める。省略するとアイコン無し。 |
+| `timeout` | `number` | `5000` | 自動で閉じるまでのミリ秒。`0` で閉じない。 |
+| `actionProps` | `ButtonProps` |  | 指定するとアクションボタンを出す(`children` がラベル、`onClick` が処理)。 |
+
+`toast.add()` は ID を返します。`toast.update(id, {...})` で中身を差し替え、
+`toast.close(id)` で閉じます。非同期処理には `toast.promise(promise, { loading, success, error })`
+が使えます。
+
+> [!NOTE]
+> shadcn/ui の `sonner` 版(`toast("…")` / `toast.success("…")`)とは呼び出し方が違います。
+> こちらは shadcn/ui の Base UI 版 `toast` と同じ API です。
+> `Toaster` の外で個別のマネージャが要るときは `createToastManager()` で作り、
+> `<Toaster toastManager={manager}>` に渡します。部品(`Toast` / `ToastTitle` /
+> `ToastDescription` / `ToastAction` / `ToastClose` / `ToastViewport` / `ToastPortal` /
+> `ToastProvider`、`useToastManager`)を組み直して独自の並びも作れます。

package/docs/ja/ui/toggle-group.md

@@ -14,14 +14,15 @@ import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";
 | --- | --- | --- | --- |
 | `value` | `string[]` |  | 選択中の値。**単一選択でも配列**。 |
 | `onValueChange` | `(value: string[]) => void` |  | 変更時。配列で返る。 |
-| `toggleMultiple` | `boolean` |  | 複数選択を許す。 |
+| `multiple` | `boolean` | `false` | `true` で複数選択を許す。 |
 | `variant` | `"default" \| "outline"` | `"default"` |  |
 | `size` | `"default" \| "sm" \| "lg"` | `"default"` |  |
 | `spacing` | `number` | `2` | 項目の間隔。`0` で連結された帯になる。 |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
 
 > [!WARNING]
-> Radix 版の `type="single"` / `type="multiple"` はありません。単一選択は「配列の長さを 1 に保つ」
-> という運用になります。その処理は
+> Radix 版の `type="single"` / `type="multiple"` はありません。代わりに boolean の `multiple` が
+> あり、既定（`false`）では同時に押せるのは 1 つだけです。ただし単一選択でも `value` は長さ 1 以下
+> の配列になります。その扱いは
 > [`SegmentedControl`](parts/segmented-control) に入っているので、
 > 単一選択ならそちらを使うのが確実です。

package/docs/ja/ui-and-theming.md

@@ -32,11 +32,16 @@ export default function Overview() {
 ```
 
 `/ui` にあるもの（抜粋）: `Button`、`Card`、`Table` プリミティブ、`Tabs`、`Input` / `Select` /
-`Checkbox` / `Switch` / `Slider`、`Calendar`、`Dialog` / `Sheet` / `Popover` / `Tooltip` /
-`DropdownMenu`、`Sidebar`、`Alert` / `Skeleton` / `Spinner`、`Loading` / `Empty` / `ErrorState`。
+`Checkbox` / `RadioGroup` / `Switch` / `Slider` / `Combobox` / `Field`、`Calendar`、`Dialog` /
+`AlertDialog` / `Sheet` / `Drawer` / `Popover` / `HoverCard` / `Tooltip` / `DropdownMenu`、`Sidebar`、
+`Pagination`、`Avatar`、`Kbd`、`Toaster` + `toast.add()`、`Alert` / `Skeleton` / `Spinner`、
+`Loading` / `Empty` / `ErrorState`。
 
 `/components` にあるもの（抜粋）: `PageShell`、`AppShell`、`DashboardCard`、`DataTable`、
-`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`MetricValue`、`TrendIndicator`。
+型付きチャート（`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` /
+`ProgressCircle` / `Tracker`）、`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`KpiCard`、
+`Delta`。グラフはまず型付きチャートで描き、その props で表せない図（二軸・散布図・
+ヒートマップなど）だけ `EChart` に `EChartsOption` を渡します。
 
 各コンポーネントの props と使い方は [コンポーネント](components) タブにまとめてあります。
 
@@ -203,13 +208,15 @@ import { cn } from "@squadbase/vantage/ui";
 コンポーネントの中身を自分のものにしたいときは、編集可能なソースを `components/` にコピーします。
 
 ```bash
-vantage add ui data-table      # 編集可能な DataTable をコピー
+vantage add ui data-table      # 編集可能な DataTable をコピー → components/ui/data-table.tsx
+vantage add ui bar-chart       # /components の部品も同じく add ui で取り出せる
 vantage add block sales-overview
 ```
 
-> [!NOTE]
-> 現行プロトタイプで `vantage add` がコピーできるのは `data-table`（ui）と `sales-overview`（block）
-> のみです。その他の UI コンポーネントは import 専用です。
+`/ui` のプリミティブも `/components` の部品も、すべて kebab-case の名前で `add ui` に渡せます
+（各コンポーネントのページに取り込みコマンドがあります）。コピーの中の import は公開サブパス
+（`@squadbase/vantage/ui` など）に書き換わっているので、そのまま動きます。使うだけならコピーは
+要りません。import が既定です。
 
 ## 次に読む
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage",
-  "version": "0.6.1-dev2.5f947f1",
+  "version": "0.6.2-dev1.0017a4d",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -99,62 +99,76 @@
     "templates",
     "NOTICE"
   ],
-  "scripts": {
-    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "build:js": "tsup --no-dts",
-    "build:types": "tsup --dts-only",
-    "build:docs": "node scripts/build-docs.mjs",
-    "dev": "tsup --watch --no-dts",
-    "dev:types": "tsc --noEmit --watch",
-    "typecheck": "tsc --noEmit",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
-    "site:install": "npm --prefix site install",
-    "site:dev": "npm --prefix site run dev",
-    "site:build": "npm --prefix site run build"
-  },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@hono/node-server": "^2.0.8",
+    "@hono/node-server": "^2.1.5",
     "@streamdown/code": "^1.1.1",
-    "@tailwindcss/vite": "^4.3.2",
+    "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "^1.170.17",
     "@tanstack/react-table": "^8.21.3",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react": "^6.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "echarts": "^6.0.0",
-    "esbuild": "^0.28.1",
+    "esbuild": "0.28.1",
     "fflate": "^0.8.3",
-    "hono": "^4.13.5",
+    "hono": "^4.13.13",
     "html-to-image": "^1.11.13",
     "lucide-react": "^0.468.0",
     "papaparse": "^5.7.0",
     "picocolors": "^1.1.1",
     "react-day-picker": "^10.0.1",
     "read-excel-file": "^9.3.10",
+    "shiki": "3.23.0",
     "streamdown": "^2.5.0",
-    "tailwind-merge": "^3.0.0",
-    "tailwindcss": "^4.3.2",
+    "tailwind-merge": "3.6.0",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.0.0",
-    "vite": "^8.1.4"
+    "vite": "^8.3.4"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "jsdom": "^26.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^5.0.5",
+    "@squadbase/squadkit": "0.0.0"
+  },
+  "gitHead": "0017a4d13781ae1f7e5b6425487b6ba9a212a628",
+  "scripts": {
+    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
+    "build:js": "tsup --no-dts",
+    "build:types": "tsup --dts-only",
+    "build:docs": "node scripts/build-docs.mjs",
+    "dev": "tsup --watch --no-dts",
+    "dev:types": "tsc --noEmit --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "registry": "node scripts/gen-registry.mjs",
+    "registry:check": "node scripts/gen-registry.mjs --check",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "type-check": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "release": "pnpm publish --@squadbase:registry=https://registry.npmjs.org",
+    "site:install": "npm --prefix site install",
+    "site:dev": "npm --prefix site run dev",
+    "site:build": "npm --prefix site run build"
   }
-}
+}

package/registry/ui/accordion.tsx

@@ -0,0 +1,76 @@
+// Copied by `vantage add ui accordion`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/accordion.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@squadbase/vantage/ui"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up motion-reduce:animate-none"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }