@squadbase/vantage 0.0.1 → 0.1.0

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) の方が
+適しています。

package/docs/ja/ui/scroll-area.md

@@ -0,0 +1,24 @@
+# ScrollArea
+
+> OS 依存しないスクロールバーを持つ領域。
+
+高さを固定した領域に、OS 標準ではないスクロールバーを付けます。ドロップダウンの中身や、長い
+ログの表示に使います。
+
+```tsx
+import { ScrollArea, ScrollBar } from "@squadbase/vantage/ui";
+```
+
+高さ（または幅）は `className` で指定します。既定は縦スクロールで、横に流したいときは
+`ScrollBar orientation="horizontal"` を子に置きます。
+
+```tsx
+<ScrollArea className="w-96 whitespace-nowrap">
+  <div className="flex gap-3">…</div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>
+```
+
+> [!NOTE]
+> スクロールバー自体を消したいだけなら、`no-scrollbar` ユーティリティが `theme.css` に定義されて
+> います。

package/docs/ja/ui/select.md

@@ -0,0 +1,64 @@
+# Select
+
+> 単一選択のセレクト。onValueChange は null を渡しうる。
+
+候補から 1 つ選ぶ入力です。候補が多くて検索したい場合は
+[`SearchableSelect`](parts/searchable-select)、少数を横並びで見せたい場合は
+[`SegmentedControl`](parts/segmented-control) を検討してください。
+
+```tsx
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from "@squadbase/vantage/ui";
+```
+
+## パーツ
+
+| パーツ | 役割 |
+| --- | --- |
+| `Select` | 状態。`value` / `defaultValue` / `onValueChange` / `items` |
+| `SelectTrigger` | 閉じているときの見た目。`size`: `default` \| `sm` |
+| `SelectValue` | 選択中の表示。`placeholder` は未選択時 |
+| `SelectContent` | 開いたときのリスト |
+| `SelectGroup` + `SelectLabel` | 見出し付きのグループ |
+| `SelectItem` | 1 項目。`value` は必須 |
+
+> [!WARNING]
+> `onValueChange` は **`string | null`** を渡します（Base UI では選択解除がありうるため）。
+> `null` を握りつぶすガードを必ず書いてください。
+>
+> ```tsx
+> <Select onValueChange={(value) => value !== null && setRegion(value)}>
+> ```
+
+> [!WARNING]
+> `SelectValue` は既定で**選択中の `value` をそのまま表示します** — `SelectItem` の中身は見ません。
+> `value="kanto"` なら、トリガーには「関東」ではなく `kanto` と出ます。値とラベルの対応を
+> `items` に渡してください。
+>
+> ```tsx
+> const regions = { hokkaido: "北海道", kanto: "関東", kansai: "関西" };
+>
+> <Select items={regions} value={region} onValueChange={…}>
+>   <SelectTrigger><SelectValue placeholder="地域を選ぶ" /></SelectTrigger>
+>   …
+> </Select>;
+> ```
+>
+> `items` を持たせたくない場合は、`SelectValue` の children に関数を渡しても同じことができます。
+>
+> ```tsx
+> <SelectValue>{(value) => regions[value] ?? "地域を選ぶ"}</SelectValue>
+> ```
+
+`SelectContent` は既定で選択中の項目をトリガーに重ねて開きます。素直に下へ開かせたいときは
+`alignItemWithTrigger={false}` を渡します。

package/docs/ja/ui/separator.md

@@ -0,0 +1,15 @@
+# Separator
+
+> 1 本の区切り線。
+
+内容を分ける線です。`orientation="vertical"` にするときは、親に高さが要ります。
+
+```tsx
+import { Separator } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | 線の向き。 |
+
+装飾目的の線なので、支援技術には読み上げられません。

package/docs/ja/ui/sheet.md

@@ -0,0 +1,28 @@
+# Sheet
+
+> 画面の端から出るパネル。
+
+画面の端から滑り出すパネルです。フィルタ一式や詳細の編集など、モーダルより広い面積が要る場面に
+向いています。
+
+```tsx
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
+} from "@squadbase/vantage/ui";
+```
+
+構成は [`Dialog`](ui/dialog) と同じで、違うのは出てくる向きだけです。
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | `SheetContent` に渡す。どの端から出すか。 |
+
+`SheetTitle` は支援技術のために必須です。見せたくない場合も置いた上で `className="sr-only"` に
+してください。

package/docs/ja/ui/sidebar.md

@@ -0,0 +1,92 @@
+# Sidebar
+
+> 折りたためるアプリのサイドバー一式。
+
+アプリ全体のナビゲーションを組むための、20 以上のパーツからなるキットです。ナビゲーションの
+定義を配列で渡すだけで済ませたいなら、これを直接使うより
+[`AppShell`](parts/app-shell) の方が早く終わります。
+
+```tsx
+import {
+  Sidebar,
+  SidebarProvider,
+  SidebarInset,
+  SidebarTrigger,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarGroupAction,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarSeparator,
+  SidebarInput,
+  SidebarRail,
+  useSidebar,
+} from "@squadbase/vantage/ui";
+```
+
+## 骨組み
+
+`SidebarProvider` が開閉の状態を持ち、`Sidebar` と `SidebarInset`（本文側）がその中に並びます。
+
+```tsx
+<SidebarProvider>
+  <Sidebar>
+    <SidebarHeader>Acme Analytics</SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>分析</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton isActive>概要</SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton>売上</SidebarMenuButton>
+              <SidebarMenuBadge>12</SidebarMenuBadge>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+
+  <SidebarInset>
+    <SidebarTrigger />
+    {children}
+  </SidebarInset>
+</SidebarProvider>
+```
+
+## 覚えておくと効くもの
+
+| もの | 効果 |
+| --- | --- |
+| `SidebarMenuButton` の `isActive` | 現在地の強調 |
+| `SidebarMenuButton` の `tooltip` | 折りたたみ時にラベルをツールチップで見せる |
+| `SidebarMenuButton` の `render` | リンクコンポーネントに差し替える |
+| `SidebarRail` | 端をドラッグして開閉できる細い帯 |
+| `SidebarMenuSkeleton` | 読み込み中のメニュー |
+| `useSidebar()` | 開閉状態とモバイル判定を読む |
+
+## リンクにする
+
+```tsx
+import { Link } from "@squadbase/vantage/router";
+
+<SidebarMenuButton render={<Link to="/sales" />}>売上</SidebarMenuButton>;
+```
+
+> [!NOTE]
+> `asChild` は Base UI にはありません。`render` に要素を渡します。

package/docs/ja/ui/skeleton.md

@@ -0,0 +1,16 @@
+# Skeleton
+
+> 中身と同じ形をした読み込み中の箱。
+
+あとから入る中身と同じ形の箱を、読み込み中に置いておくためのものです。
+[`Loading`](ui/loading) の全画面スピナーと違い、レイアウトを保ったまま待てます。
+
+```tsx
+import { Skeleton } from "@squadbase/vantage/ui";
+```
+
+大きさは `className` で決めます（`h-4 w-32` のように）。実際に入る要素と同じ高さにしておくと、
+読み込み完了時に画面が跳ねません。
+
+ダッシュボードのタイルには、同じ形をあらかじめ組んである
+[`DashboardCardSkeleton`](parts/dashboard-card) が使えます。

package/docs/ja/ui/slider.md

@@ -0,0 +1,21 @@
+# Slider
+
+> つまみで数値を選ぶ。範囲指定にも対応。
+
+数値をつまみで選ぶ入力です。`value` に配列を渡すとつまみが増え、範囲指定になります。
+
+```tsx
+import { Slider } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Default | 説明 |
+| --- | --- | --- | --- |
+| `value` | `number \| number[]` |  | つまみの位置。配列なら範囲指定になる。 |
+| `defaultValue` | `number \| number[]` |  | 非制御時の初期値。 |
+| `onValueChange` | `(value: number \| number[]) => void` |  | 変更時。`value` に渡した形と同じ形が返る。 |
+| `min` | `number` | `0` | 下限。 |
+| `max` | `number` | `100` | 上限。 |
+| `step` | `number` | `1` | 刻み。 |
+| `disabled` | `boolean` |  | 操作を無効にする。 |
+
+つまみは端で内側に収まるよう配置されるので、`min` / `max` のところでトラックからはみ出しません。