@squadbase/vantage 0.0.1 → 0.1.1

package/docs/ja/ui/alert.md

@@ -0,0 +1,31 @@
+# Alert
+
+> ページ内に置く通知。中身は表示したまま注意を促す。
+
+ページの中に置く通知です。「この画面は失敗した」を表す
+[`ErrorState`](ui/error-state) と違い、中身が表示できている上での注意喚起に使います。
+
+```tsx
+import { Alert, AlertTitle, AlertDescription, AlertAction } from "@squadbase/vantage/ui";
+```
+
+## パーツと variant
+
+| パーツ | 役割 |
+| --- | --- |
+| `Alert` | 枠。`variant`: `default` \| `destructive` |
+| `AlertTitle` | 見出し |
+| `AlertDescription` | 本文 |
+| `AlertAction` | 右端に寄せるアクション |
+
+アイコンは `Alert` の直下に置くだけで、グリッドが自動で 2 列になります。`lucide-react` から直接
+import して構いません。
+
+```tsx
+import { Info } from "lucide-react";
+
+<Alert>
+  <Info />
+  <AlertTitle>読み取り専用です</AlertTitle>
+</Alert>;
+```

package/docs/ja/ui/badge.md

@@ -0,0 +1,23 @@
+# Badge
+
+> 小さなラベル。件数・状態・タグに。
+
+テキストの横に添える小さなラベルです。行の状態を色付きのドットで示したいときは
+[`StatusBadge`](parts/status-badge) を使ってください。
+
+```tsx
+import { Badge, badgeVariants } from "@squadbase/vantage/ui";
+```
+
+## Variant
+
+`default` / `secondary` / `destructive` / `outline` / `ghost` / `link`。
+
+`badgeVariants` はクラス文字列を返す関数で、`<a>` など別の要素にバッジの見た目を移したいときに
+使います。
+
+```tsx
+<a href="/docs" className={badgeVariants({ variant: "outline" })}>
+  ドキュメント
+</a>
+```

package/docs/ja/ui/breadcrumb.md

@@ -0,0 +1,38 @@
+# Breadcrumb
+
+> 階層を示すパンくずリスト。
+
+いま見ているページが階層のどこにあるかを示します。ドリルダウンする詳細ページ
+（`/sales/$customerId` など）で特に効きます。
+
+```tsx
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `BreadcrumbLink` | 途中の階層（リンク） |
+| `BreadcrumbPage` | 現在地。リンクにしない |
+| `BreadcrumbSeparator` | 区切り。中身を渡せば記号を差し替えられる |
+| `BreadcrumbEllipsis` | 省略した中間階層 |
+
+## ルーターのリンクと組み合わせる
+
+`BreadcrumbLink` は `render` プロップで別のコンポーネントに置き換えられます。Vantage の
+[`Link`](routing) を渡せばクライアントサイド遷移になります。
+
+```tsx
+import { Link } from "@squadbase/vantage/router";
+
+<BreadcrumbLink render={<Link to="/sales" />}>売上</BreadcrumbLink>;
+```

package/docs/ja/ui/button.md

@@ -0,0 +1,39 @@
+# Button
+
+> 6 つの variant と 8 つの size を持つボタン。
+
+いちばんよく使うコンポーネントです。`variant` で意味づけを、`size` で大きさを決めます。
+
+```tsx
+import { Button, buttonVariants } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `variant` | `"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"default"` | 見た目と意味づけ。 |
+| `size` | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` | 高さと余白。`icon` 系は正方形になる。 |
+| `render` | `ReactElement` |  | 別の要素として描画する（Radix の `asChild` に相当）。 |
+
+アイコンは子要素として置くだけでサイズと余白が揃います。アイコンだけのボタンには
+`size="icon"` と `aria-label` を必ず付けてください。
+
+## リンクをボタンに見せる
+
+`render` に要素を渡します。`asChild` は Base UI にはありません。
+
+```tsx
+import { Link } from "@squadbase/vantage/router";
+
+<Button render={<Link to="/sales" />}>売上を見る</Button>;
+```
+
+クラス文字列だけが欲しいときは `buttonVariants({ variant, size })` を使います。
+
+## 処理中の表示
+
+```tsx
+<Button disabled={isPending}>
+  {isPending && <Spinner />}
+  保存
+</Button>
+```

package/docs/ja/ui/calendar.md

@@ -0,0 +1,28 @@
+# Calendar
+
+> react-day-picker ベースの日付カレンダー。
+
+単日・複数日・期間を選べるカレンダーです。ダッシュボードで期間を選ばせたい場合は、これを直接
+使うより [`DateRangePicker`](parts/date-range-picker) の方が手早く済みます。
+
+```tsx
+import { Calendar, CalendarDayButton } from "@squadbase/vantage/ui";
+```
+
+props は [react-day-picker](https://daypicker.dev) の `DayPicker` そのままで、Vantage 側で足して
+いるのは次の 3 つだけです。
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `captionLayout` | `"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"` | `"label"` | 月・年の見出しをテキストにするかセレクトにするか。 |
+| `buttonVariant` | `Button の variant` | `"ghost"` | 前後の月へ送るボタンの見た目。 |
+| `showOutsideDays` | `boolean` | `true` | 前後の月の日を薄く表示するか。 |
+
+`mode` は `"single"` / `"multiple"` / `"range"` で、`selected` と `onSelect` の型がそれに追従
+します。`CalendarDayButton` は 1 日分のセルで、日付の下にドットやラベルを描きたいときに差し
+替えます。
+
+> [!NOTE]
+> ロケールは `locale` プロップに `date-fns` のロケールを渡して切り替えます。`date-fns` は
+> Vantage の依存に含まれていますが、アプリからの直接 import は避け、必要なら
+> [`DateRangePicker`](parts/date-range-picker) 側で完結させるのが安全です。

package/docs/ja/ui/card.md

@@ -0,0 +1,35 @@
+# Card
+
+> 汎用のカード。ダッシュボードのタイルには DashboardCard を。
+
+汎用のカードです。ダッシュボードのタイルには、余白とスケルトンまで組んである
+[`DashboardCard`](parts/dashboard-card) の方が向いています。
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Card` | 枠。`size`: `default` \| `sm`（内側の余白が変わる） |
+| `CardHeader` | 見出し行 |
+| `CardTitle` / `CardDescription` | 見出しと補足 |
+| `CardAction` | 見出し行の右端。置くとヘッダーが自動で 2 列になる |
+| `CardContent` | 本文 |
+| `CardFooter` | 下端。置くとカード下部の余白が自動で詰まる |
+
+余白は `--card-spacing` という CSS 変数 1 つで決まっているので、個別に上書きできます。
+
+```tsx
+<Card className="[--card-spacing:--spacing(6)]">…</Card>
+```

package/docs/ja/ui/checkbox.md

@@ -0,0 +1,34 @@
+# Checkbox
+
+> チェックボックス。中間状態は indeterminate プロップで。
+
+オン/オフの入力です。Base UI 版では `checked` が `boolean` のみを取り、中間状態は別プロップに
+分かれています — Radix 版から移ってきた場合の最大の違いです。
+
+```tsx
+import { Checkbox } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | 説明 |
+| --- | --- | --- |
+| `checked` | `boolean` | チェック状態。`"indeterminate"` は受け付けない。 |
+| `indeterminate` | `boolean` | 中間状態（一部だけ選択）。`checked` とは独立。 |
+| `onCheckedChange` | `(checked: boolean) => void` | 変更時。値は必ず boolean。 |
+| `disabled` | `boolean` | 操作を無効にする。 |
+
+> [!WARNING]
+> Radix 版の `checked={"indeterminate"}` は型エラーになります。Base UI では `indeterminate` を
+> 独立したプロップとして渡してください。
+
+## テーブルの全選択
+
+[`DataTable`](parts/data-table) の選択列がこの形です。
+
+```tsx
+<Checkbox
+  checked={table.getIsAllPageRowsSelected()}
+  indeterminate={table.getIsSomePageRowsSelected()}
+  onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
+  aria-label="全て選択"
+/>
+```

package/docs/ja/ui/cn.md

@@ -0,0 +1,34 @@
+# cn()
+
+> 条件付きでクラスを組み立て、競合を解決するヘルパー。
+
+`className` を条件付きで組み立てるヘルパーです。`clsx` で条件を解決し、`tailwind-merge` で競合
+するユーティリティを解決します。
+
+```tsx
+import { cn } from "@squadbase/vantage/ui";
+import type { ClassValue } from "@squadbase/vantage/ui";
+
+<div className={cn("p-4", isActive && "bg-accent", className)} />;
+```
+
+## 後から渡したクラスが勝つ
+
+`tailwind-merge` を通しているので、競合するユーティリティは**後ろが勝ちます**。
+
+```tsx
+cn("p-2", "p-4"); // → "p-4"
+```
+
+これが効くおかげで、コンポーネントに渡した `className` が既定のスタイルを確実に上書きできます。
+組み込みコンポーネントはすべて内部で `cn()` を使っているので、`className` は常に上書きとして
+機能します。
+
+```tsx
+// 既定の bg-primary を確実に打ち消せる
+<Button className="bg-emerald-600 hover:bg-emerald-700">実行</Button>
+```
+
+> [!NOTE]
+> `clsx` や `tailwind-merge` を直接 import する必要はありません（アプリからの直接 import は
+> 避けてください）。両方まとめてこの `cn()` が公開の入り口です。

package/docs/ja/ui/collapsible.md

@@ -0,0 +1,21 @@
+# Collapsible
+
+> 単独の折りたたみ。スタイルは付かない。
+
+中身をひとつ開閉するだけの、スタイルの付いていないプリミティブです。見出しが縦に並ぶ形なら
+[`Accordion`](ui/accordion) を使ってください。
+
+```tsx
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@squadbase/vantage/ui";
+```
+
+`open` / `defaultOpen` / `onOpenChange` で制御します。開いているかどうかはトリガーとパネルの
+両方に `data-open` が付くので、CSS だけで矢印を回せます。
+
+```tsx
+<ChevronRight className="transition-transform data-open:rotate-90" />
+```
+
+> [!NOTE]
+> `data-open` は Vantage の `theme.css` が定義している custom variant です。Radix 流の
+> `data-[state=open]:` も同じ variant で受けられるようにしてあります。

package/docs/ja/ui/command.md

@@ -0,0 +1,36 @@
+# Command
+
+> 絞り込み付きのコマンドリスト。⌘K パレットの土台。
+
+入力に応じて候補を絞り込むリストです。[`SearchableSelect`](parts/searchable-select) と
+[`MultiSelect`](parts/multi-select) の中身もこれで、単体では ⌘K パレットに使えます。
+
+```tsx
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Command` | 全体。絞り込みとキーボード操作を持つ |
+| `CommandDialog` | `Dialog` に入れた版。⌘K パレット向け |
+| `CommandInput` | 検索入力 |
+| `CommandList` | スクロール領域 |
+| `CommandEmpty` | 0 件のときの表示 |
+| `CommandGroup` | `heading` 付きのグループ |
+| `CommandItem` | 1 項目。`value` / `onSelect` |
+| `CommandShortcut` | 右端のキー表示 |
+
+絞り込みは既定で項目のテキストに対して行われます。サーバー側で検索したい場合は
+`shouldFilter={false}` にして、候補そのものを差し替えてください。

package/docs/ja/ui/dialog.md

@@ -0,0 +1,51 @@
+# Dialog
+
+> モーダルダイアログ。
+
+画面中央に出るモーダルです。横から出したいときは [`Sheet`](ui/sheet)、
+軽い吹き出しなら [`Popover`](ui/popover) を使ってください。
+
+```tsx
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+  DialogOverlay,
+  DialogPortal,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Dialog` | 状態。`open` / `defaultOpen` / `onOpenChange` |
+| `DialogTrigger` | 開くきっかけ。`render` でボタンにする |
+| `DialogContent` | 本体。`showCloseButton`（既定 `true`）で右上の × を出し分ける |
+| `DialogHeader` / `DialogTitle` / `DialogDescription` | 見出し |
+| `DialogFooter` | ボタン行。`showCloseButton` で閉じるボタンを足せる |
+| `DialogClose` | 閉じるトリガー |
+
+`DialogTitle` は支援技術のために必須です。見出しを見せたくない場合も、置いた上で
+`className="sr-only"` にしてください。
+
+## トリガー無しで開く
+
+フォーム送信後などプログラムから開く場合は、`open` を自分で持ちます。
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogContent>…</DialogContent>
+</Dialog>;
+```
+
+> [!NOTE]
+> `asChild` は Base UI にはありません。`<DialogTrigger render={<Button />}>ラベル</DialogTrigger>`
+> のように書きます（ラベルは `render` に渡す要素ではなく `children` に置きます）。

package/docs/ja/ui/dropdown-menu.md

@@ -0,0 +1,50 @@
+# DropdownMenu
+
+> ボタンから開くメニュー。チェック項目・ラジオ・サブメニュー対応。
+
+ボタンから開く操作メニューです。行ごとの「…」メニューや、テーブルの表示列切り替えに使います。
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from "@squadbase/vantage/ui";
+```
+
+## よく使うプロップ
+
+| プロップ | 置き場所 | 意味 |
+| --- | --- | --- |
+| `align` / `side` / `sideOffset` | `DropdownMenuContent` | 開く位置 |
+| `variant="destructive"` | `DropdownMenuItem` | 破壊的操作の色 |
+| `inset` | `Item` / `Label` / `SubTrigger` | アイコン列の分だけ字下げ |
+| `checked` / `onCheckedChange` | `DropdownMenuCheckboxItem` | チェック状態 |
+| `value` / `onValueChange` | `DropdownMenuRadioGroup` | 単一選択 |
+
+## サブメニュー
+
+```tsx
+<DropdownMenuSub>
+  <DropdownMenuSubTrigger>エクスポート</DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem>CSV</DropdownMenuItem>
+    <DropdownMenuItem>JSON</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+
+> [!NOTE]
+> トリガーをボタンにするときは `render` を使います。`asChild` は Base UI にはありません。

package/docs/ja/ui/empty.md

@@ -0,0 +1,22 @@
+# Empty
+
+> データが 0 件のときの表示。
+
+結果が 1 件も無いときの表示です。アイコン・説明・アクションはすべて任意です。
+
+```tsx
+import { Empty } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` | `"Nothing here yet"` | 見出し。 |
+| `description` | `string` |  | 見出しの下の補足文。 |
+| `icon` | `ReactNode` |  | 見出しの上に置く絵柄。 |
+| `action` | `ReactNode` |  | 下部に置く次の一手（ボタンやリンク）。 |
+| `className` | `string` |  | 足すクラス。 |
+
+> [!NOTE]
+> [`DataTable`](parts/data-table) は行が 0 件のとき、表の中に「データがありません」の
+> 行を自分で描きます。`Empty` はテーブル全体を差し替えたいとき — 例えば「まだ 1 件も登録されて
+> いない」ときの案内 — に使います。

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

@@ -0,0 +1,50 @@
+# ErrorState
+
+> 失敗したときの表示。
+
+読み込みや処理が失敗したときの表示です。`role="alert"` が付き、`destructive` 系の色で囲まれます。
+
+```tsx
+import { ErrorState } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `title` | `string` | `"Something went wrong"` | 見出し。 |
+| `message` | `ReactNode` |  | 詳細。エラーメッセージをそのまま出せます。 |
+| `action` | `ReactNode` |  | 再試行ボタンなど。 |
+| `className` | `string` |  | 足すクラス。 |
+
+## 3 つの状態をまとめて使う
+
+クエリの状態をそのまま分岐に落とすのが基本形です。
+
+```tsx
+import { useQuery, apiFetch } from "@squadbase/vantage/query";
+import { Button, Loading, Empty, ErrorState } from "@squadbase/vantage/ui";
+import { DataTablePreset } from "@squadbase/vantage/components";
+
+export default function Customers() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["customers"],
+    queryFn: () => apiFetch("/api/customers").then((r) => r.json()),
+  });
+
+  if (isLoading) return <Loading label="顧客を読み込んでいます…" />;
+  if (error)
+    return (
+      <ErrorState
+        message={error.message}
+        action={<Button variant="outline" onClick={() => refetch()}>再試行</Button>}
+      />
+    );
+  if (data.length === 0) return <Empty title="顧客がまだいません" />;
+
+  return <DataTablePreset columns={columns} data={data} />;
+}
+```
+
+> [!NOTE]
+> API 側で意図的に返したエラーメッセージをクライアントに見せたい場合は、`server/api` で
+> `HttpError(status, message)` を投げます。それ以外の例外は汎用の 500 になります —
+> [API とサーバー](api-and-server) を参照してください。

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

@@ -0,0 +1,30 @@
+# InputGroup
+
+> 入力欄の前後にアイコン・テキスト・ボタンを添える。
+
+入力欄の内側にアイコンや単位、小さなボタンを配置するための枠です。検索欄や「円」「%」といった
+単位付きの入力に使います。
+
+```tsx
+import {
+  InputGroup,
+  InputGroupInput,
+  InputGroupTextarea,
+  InputGroupAddon,
+  InputGroupText,
+  InputGroupButton,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `InputGroup` | 枠。フォーカスリングはここに出る |
+| `InputGroupInput` / `InputGroupTextarea` | 中身の入力。枠線は持たない |
+| `InputGroupAddon` | 添え物の置き場。`align`: `inline-start`（既定）\| `inline-end` \| `block-start` \| `block-end` |
+| `InputGroupText` | 単位などの短いテキスト |
+| `InputGroupButton` | 小さなボタン。`size`: `xs`（既定）\| `sm` \| `icon-xs` \| `icon-sm` |
+
+`block-start` / `block-end` は入力欄の上下に置く指定で、`InputGroupTextarea` と組み合わせると
+ツールバー付きのテキストエリアになります。

package/docs/ja/ui/input.md

@@ -0,0 +1,28 @@
+# Input
+
+> 1 行のテキスト入力。
+
+素の `<input>` にテーマの枠線とフォーカスリングを付けたものです。props はネイティブの
+`<input>` と同じで、`type` もそのまま使えます。
+
+```tsx
+import { Input } from "@squadbase/vantage/ui";
+```
+
+ラベルは [`Label`](ui/label) を `htmlFor` で結び付けてください。
+
+## 状態
+
+| 書き方 | 見た目 |
+| --- | --- |
+| `disabled` | 薄くなり操作不可 |
+| `aria-invalid` | 枠線とリングが `destructive` 色になる |
+| `readOnly` | 見た目はそのまま、編集不可 |
+
+バリデーションエラーの表示は `aria-invalid` を付けるだけで揃います。真偽値をそのまま渡せます。
+
+```tsx
+<Input aria-invalid={Boolean(error)} />
+```
+
+前後にアイコンやボタンを添えたいときは [`InputGroup`](ui/input-group) を使います。

package/docs/ja/ui/label.md

@@ -0,0 +1,19 @@
+# Label
+
+> フォーム項目のラベル。
+
+`<label>` に揃った字送りと、無効時の淡色を足したものです。`htmlFor` で入力と結び付けるか、入力を
+そのまま包みます。
+
+```tsx
+import { Label } from "@squadbase/vantage/ui";
+```
+
+チェックボックスやスイッチは、`Label` で包むとラベル部分のクリックでも切り替わります。
+
+```tsx
+<Label className="flex items-center gap-2">
+  <Switch />
+  自動更新
+</Label>
+```

package/docs/ja/ui/loading.md

@@ -0,0 +1,19 @@
+# Loading
+
+> ラベル付きの中央寄せスピナー。
+
+画面ぶんの読み込み中を示します。`role="status"` と `aria-live="polite"` が付くので、スクリーン
+リーダーにも読み込み中が伝わります。`Empty` と `ErrorState` と合わせて、Vantage が足している
+3 つの状態表示のひとつです（shadcn/ui にはありません）。
+
+```tsx
+import { Loading } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `label` | `string` | `"Loading…"` | スピナーの右に出すテキスト。 |
+| `className` | `string` |  | 足すクラス。既定では最小高 30vh で縦横中央に置かれます。 |
+
+レイアウトを保ったまま待たせたいときは [`Skeleton`](ui/skeleton)、ボタンの中など
+狭い場所には [`Spinner`](ui/spinner) を使ってください。

package/docs/ja/ui/popover.md

@@ -0,0 +1,34 @@
+# Popover
+
+> トリガーに寄り添う吹き出し。
+
+要素に寄り添って開く吹き出しです。フォーカスを奪うモーダルが必要なら
+[`Dialog`](ui/dialog)、説明文だけなら [`Tooltip`](ui/tooltip) を使います。
+
+```tsx
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+} from "@squadbase/vantage/ui";
+```
+
+## 位置
+
+`PopoverContent` の `side`（既定 `bottom`）、`align`（既定 `center`）、`sideOffset`（既定 `4`）で
+決まります。
+
+## トリガーの幅に合わせる
+
+Base UI は `--anchor-width` という CSS 変数を出しています（Radix の
+`--radix-popover-trigger-width` に相当）。
+
+```tsx
+<PopoverContent className="w-(--anchor-width)">…</PopoverContent>
+```
+
+> [!NOTE]
+> トリガーをボタンにするときは `render={<Button />}` です。`asChild` は Base UI にはありません。

package/docs/ja/ui/progress.md

@@ -0,0 +1,28 @@
+# Progress
+
+> 進捗バー。ラベルと値の表示を組める。
+
+0〜100 の進捗を示すバーです。`Progress` の中にラベルや値を置くと、バーはその下に自動で描かれます。
+
+```tsx
+import {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Progress` | 全体。`value`（`null` で不定） |
+| `ProgressLabel` | 見出し |
+| `ProgressValue` | 現在値。既定でパーセント表示 |
+| `ProgressTrack` / `ProgressIndicator` | バー本体。`Progress` が自動で描くので、普段は書かない |
+
+進捗の総量が分からないときは `value={null}` にすると不定表示になります。読み込み中を示したい
+だけなら [`Skeleton`](ui/skeleton) や [`Spinner`](ui/spinner) の方が
+適しています。