@godxjp/ui 19.0.0 → 19.2.0

package/docs/data-display/table.tsx

@@ -0,0 +1,251 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ListRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Table — the primitive table shell (Table/TableHeader/TableBody/TableRow/
+ * TableHead/TableCell). Prefer DataTable for admin lists; reach for these only
+ * for a custom one-off table. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Table"
+      subtitle="Primitive table shell · prefer DataTable for admin lists"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>仕訳明細</CardTitle>
+            <CardDescription>
+              A fixed double-entry breakdown. The second row is rendered with the built-in selected
+              state (TableRow data-state=&quot;selected&quot;), and a caption + total footer row
+              exercise caption-bottom and a summary row.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table>
+              <caption className="px-4 py-2 text-start">
+                <Text size="xs" tone="muted">
+                  2026年5月 売上計上（税込）
+                </Text>
+              </caption>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>勘定科目</TableHead>
+                  <TableHead className="text-end">借方</TableHead>
+                  <TableHead className="text-end">貸方</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>売掛金</TableCell>
+                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                  <TableCell className="text-end">—</TableCell>
+                </TableRow>
+                {/* Built-in selected-row state — data-[state=selected]:bg-primary/[0.06]. */}
+                <TableRow data-state="selected">
+                  <TableCell>売上高</TableCell>
+                  <TableCell className="text-end">—</TableCell>
+                  <TableCell className="text-end tabular-nums">¥438,182</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>仮受消費税</TableCell>
+                  <TableCell className="text-end">—</TableCell>
+                  <TableCell className="text-end tabular-nums">¥43,818</TableCell>
+                </TableRow>
+                <TableRow className="font-medium">
+                  <TableCell>合計</TableCell>
+                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月次推移</CardTitle>
+            <CardDescription>
+              A wide table, more columns than the viewport can hold, so the built-in scroll wrapper
+              (.relative w-full overflow-auto) scrolls horizontally.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>勘定科目</TableHead>
+                  <TableHead className="text-end">1月</TableHead>
+                  <TableHead className="text-end">2月</TableHead>
+                  <TableHead className="text-end">3月</TableHead>
+                  <TableHead className="text-end">4月</TableHead>
+                  <TableHead className="text-end">5月</TableHead>
+                  <TableHead className="text-end">6月</TableHead>
+                  <TableHead className="text-end">7月</TableHead>
+                  <TableHead className="text-end">8月</TableHead>
+                  <TableHead className="text-end">9月</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>売上高</TableCell>
+                  <TableCell className="text-end tabular-nums">¥412,000</TableCell>
+                  <TableCell className="text-end tabular-nums">¥438,182</TableCell>
+                  <TableCell className="text-end tabular-nums">¥455,900</TableCell>
+                  <TableCell className="text-end tabular-nums">¥471,300</TableCell>
+                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                  <TableCell className="text-end tabular-nums">¥499,540</TableCell>
+                  <TableCell className="text-end tabular-nums">¥510,200</TableCell>
+                  <TableCell className="text-end tabular-nums">¥528,770</TableCell>
+                  <TableCell className="text-end tabular-nums">¥541,090</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>売上原価</TableCell>
+                  <TableCell className="text-end tabular-nums">¥206,000</TableCell>
+                  <TableCell className="text-end tabular-nums">¥219,091</TableCell>
+                  <TableCell className="text-end tabular-nums">¥227,950</TableCell>
+                  <TableCell className="text-end tabular-nums">¥235,650</TableCell>
+                  <TableCell className="text-end tabular-nums">¥241,000</TableCell>
+                  <TableCell className="text-end tabular-nums">¥249,770</TableCell>
+                  <TableCell className="text-end tabular-nums">¥255,100</TableCell>
+                  <TableCell className="text-end tabular-nums">¥264,385</TableCell>
+                  <TableCell className="text-end tabular-nums">¥270,545</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        {/* ── The flush full-bleed FRAME contract (gh#305 · gh#306) ───────────────────────────
+            Four cards, side by side, so the whole rule is visible at once: which edges a
+            full-bleed table keeps inside a card, and who draws the line under the header. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>出荷伝票一覧 · bordered, flush</CardTitle>
+            <CardDescription>
+              `bordered` draws the full cell grid for merged (rowSpan) cells. Inside a flush
+              CardContent the three edges that coincide with the CARD frame are dropped, so there is
+              no doubled frame. The block-start edge stays, as the divider under this header. Its
+              width is `--table-flush-divider-width`.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table bordered>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>倉庫</TableHead>
+                  <TableHead>伝票番号</TableHead>
+                  <TableHead className="text-end">個数</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell rowSpan={2}>東京第一</TableCell>
+                  <TableCell>SH-2026-0412</TableCell>
+                  <TableCell className="text-end tabular-nums">18</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>SH-2026-0413</TableCell>
+                  <TableCell className="text-end tabular-nums">6</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>大阪南</TableCell>
+                  <TableCell>SH-2026-0414</TableCell>
+                  <TableCell className="text-end tabular-nums">24</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>出荷伝票一覧 · bordered, NOT flush</CardTitle>
+            <CardDescription>
+              The same table in a padded CardContent. Nothing frames it here, so it keeps its own
+              full frame. The suppression above is scoped to a flush body, never to `bordered`.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table bordered>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>倉庫</TableHead>
+                  <TableHead>伝票番号</TableHead>
+                  <TableHead className="text-end">個数</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>東京第一</TableCell>
+                  <TableCell>SH-2026-0412</TableCell>
+                  <TableCell className="text-end tabular-nums">18</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader banded>
+            <CardTitle level={2}>出荷伝票一覧 · banded header</CardTitle>
+            <CardDescription>
+              A banded header already draws its own bottom border, so the flush table below stands
+              its divider down instead of stacking a second hairline on it. Same for a CardBar or a
+              DataTable.Toolbar above the table. Same again for a card with no header at all, where
+              the card frame IS the top edge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table bordered>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>倉庫</TableHead>
+                  <TableHead>伝票番号</TableHead>
+                  <TableHead className="text-end">個数</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>東京第一</TableCell>
+                  <TableCell>SH-2026-0412</TableCell>
+                  <TableCell className="text-end tabular-nums">18</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>関連ファイル · flush, no table</CardTitle>
+            <CardDescription>
+              A flush body that is not a table at all. `flush` zeroes BOTH block edges for every
+              full-bleed body, so these rows butt against the header band exactly like the tables
+              above. The header supplies the gap, not the body.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow title="出荷指図書_2026-04.pdf" description="1.2 MB · 2026-04-12" />
+            <ListRow title="検品記録_2026-04.csv" description="18 KB · 2026-04-12" />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/timeline.tsx

@@ -0,0 +1,112 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Timeline,
+  type TimelineItem,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Timeline — vertical event list with an icon rail; the current item gets a
+ * highlighted glyph. Composed only from real @godxjp/ui components.
+ */
+const items: TimelineItem[] = [
+  {
+    title: "承認待ち",
+    location: "経理 田中",
+    time: "10:24",
+    note: "金額が20万円を超えるため部長承認が必要",
+    current: true,
+  },
+  { title: "仕訳を作成", location: "システム", time: "10:20" },
+  { title: "請求書を発行", location: "営業 グエン", time: "09:50" },
+  { title: "受注を登録", location: "営業 グエン", time: "09:30" },
+];
+
+// Second shape: a title-only minimal item, and the current step at the END
+// (so the connector line is omitted on the highlighted item).
+const compactItems: TimelineItem[] = [
+  { title: "出荷完了", location: "東京倉庫", time: "14:02" },
+  { title: "梱包" },
+  { title: "ピッキング中", current: true },
+];
+
+// Pattern A — route stepper: numbered circles via variant="ordinal";
+// status drives colour only, `location` reads "from → to".
+const routeItems: TimelineItem[] = [
+  { title: "集荷", location: "東京 → 名古屋", status: "pending" },
+  { title: "幹線輸送", location: "名古屋 → 大阪", status: "pending" },
+  { title: "ラストマイル", location: "大阪 → 配達先", status: "pending" },
+];
+
+// Pattern B — VAT / approval tracker: variant="status" picks the glyph by
+// status (done → check, current → filled dot, pending → number).
+const approvalItems: TimelineItem[] = [
+  { title: "請求書を発行", location: "営業 グエン", time: "09:50", status: "done" },
+  { title: "仕訳を作成", location: "システム", time: "10:20", status: "done" },
+  { title: "承認待ち", location: "経理 田中", time: "10:24", status: "current" },
+  { title: "消費税を計上", location: "経理", status: "pending" },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer title="Timeline" subtitle="現在のステップを強調する縦型のイベント一覧">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>承認フロー</CardTitle>
+            <CardDescription>
+              items 配列を渡し、進行中のステップに current: true
+              を付与します。variant=&quot;icon&quot;
+              が既定で、全ステップ共通のドットグリフを描きます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Timeline variant="icon" items={items} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>出荷ステータス</CardTitle>
+            <CardDescription>
+              タイトルのみの最小項目と、最後尾の current（接続線が省略される）を示します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Timeline items={compactItems} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>配送ルート進捗</CardTitle>
+            <CardDescription>
+              variant="ordinal" で各ステップを連番（1,2,3…）で表示し、status
+              で色だけを切り替えます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Timeline variant="ordinal" items={routeItems} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>承認・消費税トラッカー</CardTitle>
+            <CardDescription>
+              variant="status" は status ごとにグリフを切り替えます（done → チェック、current →
+              塗りつぶしドット、pending → 連番）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Timeline variant="status" items={approvalItems} />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { DataTable, ListRow, type ColumnDef } from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+type Row = { id: string; name: string };
+const rows: Row[] = [{ id: "1", name: "請求書 INV-1" }];
+const columns: ColumnDef<Row>[] = [{ key: "name", header: "名前" }];
+
+export default function Demo() {
+  const [buttonCount, setButtonCount] = useState(0);
+  const [rowActions, setRowActions] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  return (
+    <PageContainer title="Touch action journeys">
+      <Flex direction="col" gap="lg">
+        <Button onClick={() => setButtonCount((n) => n + 1)}>Button action</Button>
+        <output aria-label="Button result">{buttonCount}</output>
+        <ListRow
+          title="Session"
+          trailing={<Button onClick={() => setRowActions((n) => n + 1)}>Sign out</Button>}
+        />
+        <output aria-label="ListRow result">{rowActions}</output>
+        <DataTable
+          data={rows}
+          columns={columns}
+          getRowId={(row) => row.id}
+          selectable
+          selected={selected}
+          onSelectChange={setSelected}
+        />
+        <output aria-label="Selection result">{selected.size}</output>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/tree-list.tsx

@@ -0,0 +1,107 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  TreeList,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { FolderTree } from "lucide-react";
+
+/**
+ * TreeList — a flat array rendered as an indented hierarchy; depth is data-driven
+ * (never nest DOM). active highlights a row (aria-current); badge surfaces a
+ * secondary label. Indentation is defined for depth 0-2, so flatten deeper
+ * branches before rendering. Composed only from real @godxjp/ui components.
+ */
+const accounts = [
+  { id: "1000", title: "資産", depth: 0, badge: "親科目" },
+  { id: "1100", title: "流動資産", depth: 1, description: "1年以内に現金化" },
+  {
+    id: "1110",
+    title: "現金及び預金",
+    description: "普通・当座・小口",
+    depth: 2,
+    badge: "3 口座",
+    active: true,
+  },
+  {
+    id: "1120",
+    title: "売掛金",
+    description: "得意先への未回収債権",
+    depth: 2,
+    badge: (
+      <Badge variant="outline" tone="warning">
+        要確認
+      </Badge>
+    ),
+  },
+  { id: "2000", title: "負債", depth: 0, badge: "親科目" },
+  { id: "2100", title: "流動負債", depth: 1, description: "1年以内に支払" },
+  { id: "2110", title: "買掛金", depth: 2, badge: "12 件" },
+];
+
+// Independent data: active is allowed on any depth, including a top-level parent.
+const departments = [
+  { id: "d0", title: "本社", depth: 0, active: true, badge: "選択中" },
+  { id: "d1", title: "営業部", depth: 1, description: "首都圏・関西" },
+  { id: "d2", title: "開発部", depth: 1, description: "プロダクト・基盤" },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="TreeList"
+      subtitle="Hierarchical list · depth lives in the data, not the DOM"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勘定科目ツリー</CardTitle>
+            <CardDescription>
+              Pre-filter server-side; each item still carries its depth (0-2). An active leaf
+              carries aria-current; badges accept a string or a nested Badge node.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TreeList items={accounts} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>組織ツリー（親を選択中）</CardTitle>
+            <CardDescription>
+              active is data-driven and works at any depth. Here the depth-0 parent is the current
+              row.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TreeList items={departments} />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>空の状態</CardTitle>
+            <CardDescription>
+              An empty items={"{[]}"} array renders an empty list. Pair it with an EmptyState
+              placeholder.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TreeList items={[]} />
+            <EmptyState
+              icon={FolderTree}
+              title="科目がありません"
+              description="フィルター条件に一致する勘定科目が見つかりませんでした。"
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/branch-scope-picker.tsx

@@ -0,0 +1,123 @@
+/**
+ * BranchScopePicker — 適用範囲 (all branches vs an explicit subset, gh#257).
+ *
+ * One controlled `{ mode, branchIds }` value; real RadioGroup + CheckboxGroup + SearchInput
+ * underneath. `error` is FIELD VALIDATION (aria-errormessage); a failed branch read is
+ * `listError`, a refused one is `denied` (#216 vocabulary). Branch data below is demo-only.
+ */
+import * as React from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { BranchScopePicker, FormField, type BranchScopeValueProp } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+const BRANCHES = [
+  { id: "hq", name: "東京本社", description: "東京都千代田区" },
+  { id: "osaka", name: "大阪支店", description: "大阪府大阪市" },
+  { id: "nagoya", name: "名古屋支店", description: "愛知県名古屋市" },
+  { id: "fukuoka", name: "福岡営業所", description: "福岡県福岡市" },
+  {
+    id: "hanoi",
+    name: "Chi nhánh Hà Nội",
+    description: "Việt Nam · đang chuẩn bị",
+    disabled: true,
+  },
+];
+
+export default function Demo() {
+  const [scope, setScope] = React.useState<BranchScopeValueProp>({ mode: "all" });
+  const [validated, setValidated] = React.useState<BranchScopeValueProp>({
+    mode: "selected",
+    branchIds: [],
+  });
+
+  const validationError =
+    validated.mode === "selected" && (validated.branchIds?.length ?? 0) === 0
+      ? "1 件以上のブランチを選択してください"
+      : undefined;
+
+  return (
+    <PageContainer
+      title="BranchScopePicker"
+      subtitle="「すべてのブランチ」か「選択したブランチのみ」かを 1 つの値で扱う適用範囲コントロール。"
+      density="compact"
+    >
+      <Flex direction="col" gap="lg">
+        <ResponsiveGrid columns={{ md: 2 }}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>基本</CardTitle>
+              <CardDescription>
+                既定は「すべてのブランチ」。subset に切り替えると検索付きチェックリストが開く。 mode
+                を戻しても branchIds は保持される。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <FormField label="適用範囲" required>
+                <BranchScopePicker branches={BRANCHES} value={scope} onValueChange={setScope} />
+              </FormField>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>バリデーション</CardTitle>
+              <CardDescription>
+                「選択したブランチのみ」で 0 件のままのとき、error が aria-errormessage
+                付きで表示される。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <FormField label="通知の配信範囲" required>
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={validated}
+                  onValueChange={setValidated}
+                  error={validationError}
+                />
+              </FormField>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>読み取り専用 / 無効</CardTitle>
+              <CardDescription>
+                readOnly は現在値の静的サマリー（バッジ）。disabled は表示のまま操作不可。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={{ mode: "selected", branchIds: ["hq", "osaka"] }}
+                  readOnly
+                />
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={{ mode: "selected", branchIds: ["hq"] }}
+                  disabled
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>コレクション状態（#216 の語彙）</CardTitle>
+              <CardDescription>loading → denied → listError → empty の優先順位。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <BranchScopePicker branches={[]} loading />
+                <BranchScopePicker branches={[]} denied />
+                <BranchScopePicker branches={[]} listError />
+                <BranchScopePicker branches={[]} />
+              </Flex>
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </Flex>
+    </PageContainer>
+  );
+}