@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-display/permission-matrix.tsx

@@ -0,0 +1,184 @@
+/**
+ * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, gh#257).
+ *
+ * A REAL export from `@godxjp/ui/data-display` (the gh#251 lesson: a consumer cannot import a
+ * docs page). Read-only ✓/— by default; `onGrantChange` switches to editable checkbox cells with
+ * locked roles kept read-only; compare + 差分のみ come from `lib/permission-grid`; lifecycle
+ * states follow the DataTable #216 vocabulary. Domain data below is demo-only — the library
+ * encodes no platform role or permission.
+ */
+import * as React from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  PermissionMatrix,
+} from "@godxjp/ui/data-display";
+import { FormField, Label, Select, Switch } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { grantKey } from "@godxjp/ui/lib/permission-grid";
+
+const ROLES = [
+  { id: "admin", name: "管理者", description: "全操作", locked: true },
+  { id: "editor", name: "編集者", description: "作成・編集" },
+  { id: "viewer", name: "閲覧者", description: "閲覧のみ" },
+];
+
+const PERMISSIONS = [
+  { id: "user.manage", name: "ユーザー管理", description: "メンバーの追加・停止", group: "管理" },
+  { id: "member.invite", name: "メンバー招待", description: "招待リンクの発行", group: "管理" },
+  {
+    id: "billing.view",
+    name: "請求書の閲覧",
+    description: "請求・支払い履歴の参照",
+    group: "請求",
+  },
+  { id: "billing.edit", name: "請求書の編集", description: "請求先・明細の変更", group: "請求" },
+  {
+    id: "report.export",
+    name: "レポート出力",
+    description: "CSV / PDF のエクスポート",
+    group: "レポート",
+  },
+];
+
+const INITIAL_GRANTS = new Set<string>([
+  ...PERMISSIONS.map((p) => grantKey("admin", p.id)),
+  grantKey("editor", "member.invite"),
+  grantKey("editor", "billing.view"),
+  grantKey("editor", "report.export"),
+  grantKey("viewer", "billing.view"),
+]);
+
+const roleOptions = ROLES.map((r) => ({ value: r.id, label: r.name }));
+
+export default function Demo() {
+  const [grants, setGrants] = React.useState<ReadonlySet<string>>(INITIAL_GRANTS);
+  const [compareA, setCompareA] = React.useState("editor");
+  const [compareB, setCompareB] = React.useState("viewer");
+  const [diffOnly, setDiffOnly] = React.useState(false);
+
+  return (
+    <PageContainer
+      title="PermissionMatrix"
+      subtitle="ロール × 権限の付与グリッド。既定は読み取り専用、onGrantChange で編集可能。"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>読み取り専用（既定）</CardTitle>
+            <CardDescription>
+              onGrantChange を渡さない限りセルは ✓/—（形状 + sr-only、色のみに依存しない）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <PermissionMatrix roles={ROLES} permissions={PERMISSIONS} grants={grants} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>編集可能 + ロック済みロール</CardTitle>
+            <CardDescription>
+              onGrantChange があるとセルは実 Checkbox。locked の「管理者」列は読み取り専用のまま。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <PermissionMatrix
+              roles={ROLES}
+              permissions={PERMISSIONS}
+              grants={grants}
+              onGrantChange={(roleId, permissionId, granted) => {
+                setGrants((prev) => {
+                  const next = new Set(prev);
+                  if (granted) next.add(grantKey(roleId, permissionId));
+                  else next.delete(grantKey(roleId, permissionId));
+                  return next;
+                });
+              }}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>比較 + 差分のみ</CardTitle>
+            <CardDescription>
+              compare の 2 ロール列を強調し、diffOnly で一致行を隠す（lib/permission-grid
+              と同一ロジック）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" wrap align="end" gap="md">
+                {/* Bare Select has NO accessible name (axe button-name) — the compare
+                    pickers are labelled through FormField, exactly as the showcase does. */}
+                <FormField label="比較 A">
+                  <Select
+                    value={compareA}
+                    onValueChange={setCompareA}
+                    options={roleOptions}
+                    clearable={false}
+                    className="w-40"
+                  />
+                </FormField>
+                <FormField label="比較 B">
+                  <Select
+                    value={compareB}
+                    onValueChange={setCompareB}
+                    options={roleOptions}
+                    clearable={false}
+                    className="w-40"
+                  />
+                </FormField>
+                <Flex direction="row" align="center" gap="sm">
+                  <Switch
+                    id="pm-doc-diff-only"
+                    size="sm"
+                    checked={diffOnly}
+                    onCheckedChange={setDiffOnly}
+                  />
+                  <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
+                </Flex>
+              </Flex>
+              <div className="border-border overflow-hidden rounded-md border">
+                <PermissionMatrix
+                  roles={ROLES}
+                  permissions={PERMISSIONS}
+                  grants={grants}
+                  compare={[compareA, compareB]}
+                  diffOnly={diffOnly}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ライフサイクル状態（#216 と同じ語彙）</CardTitle>
+            <CardDescription>loading → denied → error → empty の優先順位。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <PermissionMatrix roles={ROLES} permissions={PERMISSIONS} grants={grants} loading />
+              <PermissionMatrix roles={ROLES} permissions={[]} grants={grants} denied />
+              <PermissionMatrix
+                roles={ROLES}
+                permissions={[]}
+                grants={grants}
+                error
+                onRetry={() => {}}
+              />
+              <PermissionMatrix roles={ROLES} permissions={[]} grants={grants} />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/popover-touch.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { PageContainer } from "@godxjp/ui/layout";
+
+/** Dedicated closed-state coarse-pointer journey: trigger → action → close. */
+export default function Demo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <PageContainer title="Popover touch journey">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button>フィルターを開く</Button>
+        </PopoverTrigger>
+        <PopoverContent aria-label="フィルター操作">
+          <PopoverDescription>タッチ操作の確認用パネルです。</PopoverDescription>
+          <Button onClick={() => setOpen(false)}>適用して閉じる</Button>
+        </PopoverContent>
+      </Popover>
+    </PageContainer>
+  );
+}

package/docs/data-display/popover.tsx

@@ -0,0 +1,245 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@godxjp/ui/data-display";
+import { Checkbox, FormField, Input, Label } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Info, SlidersHorizontal } from "lucide-react";
+
+/**
+ * Popover — floating panel anchored to a trigger. Always compose
+ * PopoverTrigger + PopoverContent; never a raw div overlay. Composed only from
+ * real @godxjp/ui components.
+ */
+export default function Demo() {
+  // Card 1 — controlled filter panel: open/onOpenChange drive the panel, and
+  // 適用 closes it. Staged defaultOpen via initial state so the open panel is
+  // visible at rest in a static screenshot.
+  const [filterOpen, setFilterOpen] = useState(true);
+
+  return (
+    <PageContainer title="Popover" subtitle="Floating panel anchored to a trigger · click to open">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>PopoverAnchor · non-trigger positioning reference</CardTitle>
+            <CardDescription>Anchor positions content without becoming its toggle.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover defaultOpen>
+              <PopoverAnchor asChild>
+                <span className="inline-flex rounded border px-3 py-2">請求額 ¥482,000</span>
+              </PopoverAnchor>
+              <PopoverContent side="right" aria-label="請求額の補足">
+                <PopoverDescription>税額と支払条件の補足情報です。</PopoverDescription>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled trigger + content</CardTitle>
+            <CardDescription>
+              Common for compact filter / settings panels off a button. Controlled via open /
+              onOpenChange so 適用 closes the panel. Shown open at rest.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover open={filterOpen} onOpenChange={setFilterOpen}>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  <SlidersHorizontal />
+                  絞り込み
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent aria-label="絞り込みパネル">
+                <Flex direction="col" gap="md">
+                  <FormField id="min" label="最小金額">
+                    <Input id="min" type="number" placeholder="0" />
+                  </FormField>
+                  <Flex direction="row" wrap align="center" gap="xs">
+                    <Checkbox id="unpaid" />
+                    <Label htmlFor="unpaid">未払いのみ</Label>
+                  </Flex>
+                  <Button size="sm" onClick={() => setFilterOpen(false)}>
+                    適用
+                  </Button>
+                </Flex>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Header / title / description slots</CardTitle>
+            <CardDescription>
+              The titled info-panel pattern: PopoverHeader › PopoverTitle + PopoverDescription, then
+              body. Shown open at rest via defaultOpen.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover defaultOpen>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  <Info />
+                  保険料の内訳
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent aria-label="保険料の内訳">
+                <Flex direction="col" gap="md">
+                  <PopoverHeader>
+                    <PopoverTitle>保険料の内訳</PopoverTitle>
+                    <PopoverDescription>
+                      健康保険・厚生年金・雇用保険の控除額を表示します。
+                    </PopoverDescription>
+                  </PopoverHeader>
+                  <Flex direction="col" gap="xs">
+                    <Flex direction="row" justify="between">
+                      <span>健康保険</span>
+                      <span>¥12,400</span>
+                    </Flex>
+                    <Flex direction="row" justify="between">
+                      <span>厚生年金</span>
+                      <span>¥22,800</span>
+                    </Flex>
+                  </Flex>
+                </Flex>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Placement · side</CardTitle>
+            <CardDescription>
+              PopoverContent accepts side: top / right / bottom (default) / left, with sideOffset.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="sm">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">side=top</Button>
+                </PopoverTrigger>
+                <PopoverContent side="top" aria-label="上側の配置例">
+                  <PopoverDescription>上に開きます。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">side=right</Button>
+                </PopoverTrigger>
+                <PopoverContent side="right" aria-label="右側の配置例">
+                  <PopoverDescription>右に開きます。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">side=bottom</Button>
+                </PopoverTrigger>
+                <PopoverContent side="bottom" aria-label="下側の配置例">
+                  <PopoverDescription>下に開きます（既定）。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">side=left</Button>
+                </PopoverTrigger>
+                <PopoverContent side="left" aria-label="左側の配置例">
+                  <PopoverDescription>左に開きます。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Alignment · align</CardTitle>
+            <CardDescription>
+              align: start / center (default) / end positions the panel along the trigger edge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap gap="sm">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">align=start</Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" aria-label="開始端の配置例">
+                  <PopoverDescription>開始端に揃えます。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">align=center</Button>
+                </PopoverTrigger>
+                <PopoverContent align="center" aria-label="中央の配置例">
+                  <PopoverDescription>中央に揃えます（既定）。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline">align=end</Button>
+                </PopoverTrigger>
+                <PopoverContent align="end" aria-label="終了端の配置例">
+                  <PopoverDescription>終了端に揃えます。</PopoverDescription>
+                </PopoverContent>
+              </Popover>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Modal</CardTitle>
+            <CardDescription>
+              modal traps focus and blocks outside interaction while open, which also marks the rest
+              of the page aria-hidden. Shown CLOSED at rest: an open modal layer would take the
+              frame&apos;s own main landmark and heading out of the accessibility tree. Open it from
+              the trigger to inspect it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover modal>
+              <PopoverTrigger asChild>
+                <Button variant="outline">確認が必要</Button>
+              </PopoverTrigger>
+              <PopoverContent aria-label="下書きを削除しますか？">
+                <Flex direction="col" gap="md">
+                  <PopoverHeader>
+                    <PopoverTitle>下書きを削除しますか？</PopoverTitle>
+                    <PopoverDescription>この操作は取り消せません。</PopoverDescription>
+                  </PopoverHeader>
+                  <Flex direction="row" justify="end" gap="xs">
+                    <Button variant="outline" size="sm">
+                      キャンセル
+                    </Button>
+                    <Button variant="destructive" size="sm">
+                      削除
+                    </Button>
+                  </Flex>
+                </Flex>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/progress.tsx

@@ -0,0 +1,84 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Progress,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Progress — horizontal 0–100 bar with an optional label and a semantic tone.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Progress" subtitle="0–100 bar · optional label + semantic tone">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tones</CardTitle>
+            <CardDescription>
+              Tone carries meaning。success（既定）/ warning / destructive。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Progress value={72} tone="success" label="処理スループット" />
+              <Progress value={28} tone="warning" label="SLA 超過リスク" />
+              <Progress value={84} tone="destructive" label="エラー率の上限接近" />
+              <Progress value={60} label="（tone 指定なし → success）" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Over capacity</CardTitle>
+            <CardDescription>
+              over=true で 100% を超えた実値を aria-valuetext
+              に残し、破壊的なストライプで区別します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Progress value={132} over label="予約容量 132%" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Labelled / unlabelled</CardTitle>
+            <CardDescription>
+              label を渡すと bar 下にテキストを表示し aria-labelledby で関連付け。省略時は
+              aria-label=&quot;Progress&quot;。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Progress value={45} label="アップロード進捗" />
+              <Progress value={45} />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Edge values &amp; clamping</CardTitle>
+            <CardDescription>
+              value は 0–100 にクランプ（Math.max(0, Math.min(100, value))）。範囲外でも安全に描画。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Progress value={0} label="0%（空）" />
+              <Progress value={100} tone="success" label="100%（完了）" />
+              <Progress value={130} tone="warning" label="130 → 100 にクランプ" />
+              <Progress value={-5} label="-5 → 0 にクランプ" />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/prose.tsx

@@ -0,0 +1,105 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Prose,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Prose — typography for rendered content (Markdown, CMS bodies, issue descriptions). Styles the
+ * semantic HTML inside it from the tokens; the HTML can come from react-markdown, a sanitised
+ * string or JSX. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Prose" subtitle="レンダリングされた本文のタイポグラフィ">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wiki page (size="md")</CardTitle>
+            <CardDescription>
+              見出し・段落・リスト・引用・表・コードを一つの本文として。ソフト改行の扱いは Markdown
+              パイプライン側 (remark-breaks) の責務。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose size="md" imageSize="fit">
+              <h1>請求書の発行手順</h1>
+              <p>
+                月次の請求書は <strong>締日の翌営業日</strong> に発行する。手順は{" "}
+                <a href="#flow">承認フロー</a> に従う。
+              </p>
+              <h2 id="flow">承認フロー</h2>
+              <ol>
+                <li>担当者が下書きを作成する</li>
+                <li>
+                  経理が金額を確認する
+                  <ul>
+                    <li>消費税区分</li>
+                    <li>源泉徴収の有無</li>
+                  </ul>
+                </li>
+                <li>責任者が承認し、送付する</li>
+              </ol>
+              <blockquote>
+                <p>締日を過ぎた修正は翌月の請求に繰り越す。</p>
+              </blockquote>
+              <h3>環境</h3>
+              {/* Inside Prose the table is rendered content, not page chrome. */}
+              {/* ui-audit-disable-next-line no-raw-table */}
+              <table>
+                <thead>
+                  <tr>
+                    <th>項目</th>
+                    <th>値</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Browser</td>
+                    <td>Chrome 140</td>
+                  </tr>
+                  <tr>
+                    <td>Viewport</td>
+                    <td>1440 x 900</td>
+                  </tr>
+                </tbody>
+              </table>
+              <h4>再現コード</h4>
+              <p>
+                <code>estimate.total</code> を <code>hydrate()</code> より前に読むと落ちる。
+              </p>
+              <pre>{`const total = estimate.total; // undefined before hydrate()`}</pre>
+              <hr />
+              <p>最終更新: 2026-09-05</p>
+            </Prose>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Issue description (size="sm", imageSize="original")</CardTitle>
+            <CardDescription>
+              コンパクトな本文。貼り付けたスクリーンショットを原寸で見せる設定は横スクロールになる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose size="sm" imageSize="original">
+              <h2>見積画面で合計が更新されない</h2>
+              <p>明細を追加しても合計欄が 0 のまま。リロードすると正しい値になる。</p>
+              <h3>手順</h3>
+              <ol>
+                <li>見積 EST-102 を開く</li>
+                <li>明細を 1 行追加する</li>
+                <li>合計欄を見る</li>
+              </ol>
+            </Prose>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}