@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-display/table.tsx

@@ -1,362 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  ListRow,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-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() {
-  const { t } = useTranslation();
-  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="text-start" style={{ padding: "var(--space-2) var(--space-4)" }}>
-                <Text size="xs" tone="muted">
-                  2026年5月 売上計上（税込）
-                </Text>
-              </caption>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>勘定科目</TableHead>
-                  <TableHead align="end">借方</TableHead>
-                  <TableHead align="end">貸方</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>売掛金</TableCell>
-                  <TableCell numeric>¥482,000</TableCell>
-                  <TableCell align="end">—</TableCell>
-                </TableRow>
-                {/* Built-in selected-row state — data-[state=selected]:bg-primary/[0.06]. */}
-                <TableRow data-state="selected">
-                  <TableCell>売上高</TableCell>
-                  <TableCell align="end">—</TableCell>
-                  <TableCell numeric>¥438,182</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>仮受消費税</TableCell>
-                  <TableCell align="end">—</TableCell>
-                  <TableCell numeric>¥43,818</TableCell>
-                </TableRow>
-                <TableRow className="font-medium">
-                  <TableCell>合計</TableCell>
-                  <TableCell numeric>¥482,000</TableCell>
-                  <TableCell numeric>¥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 align="end">1月</TableHead>
-                  <TableHead align="end">2月</TableHead>
-                  <TableHead align="end">3月</TableHead>
-                  <TableHead align="end">4月</TableHead>
-                  <TableHead align="end">5月</TableHead>
-                  <TableHead align="end">6月</TableHead>
-                  <TableHead align="end">7月</TableHead>
-                  <TableHead align="end">8月</TableHead>
-                  <TableHead align="end">9月</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>売上高</TableCell>
-                  <TableCell numeric>¥412,000</TableCell>
-                  <TableCell numeric>¥438,182</TableCell>
-                  <TableCell numeric>¥455,900</TableCell>
-                  <TableCell numeric>¥471,300</TableCell>
-                  <TableCell numeric>¥482,000</TableCell>
-                  <TableCell numeric>¥499,540</TableCell>
-                  <TableCell numeric>¥510,200</TableCell>
-                  <TableCell numeric>¥528,770</TableCell>
-                  <TableCell numeric>¥541,090</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>売上原価</TableCell>
-                  <TableCell numeric>¥206,000</TableCell>
-                  <TableCell numeric>¥219,091</TableCell>
-                  <TableCell numeric>¥227,950</TableCell>
-                  <TableCell numeric>¥235,650</TableCell>
-                  <TableCell numeric>¥241,000</TableCell>
-                  <TableCell numeric>¥249,770</TableCell>
-                  <TableCell numeric>¥255,100</TableCell>
-                  <TableCell numeric>¥264,385</TableCell>
-                  <TableCell numeric>¥270,545</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        {/* ── The flush full-bleed FRAME contract ───────────────────────────
-            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 align="end">個数</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell rowSpan={2}>東京第一</TableCell>
-                  <TableCell>SH-2026-0412</TableCell>
-                  <TableCell numeric>18</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>SH-2026-0413</TableCell>
-                  <TableCell numeric>6</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>大阪南</TableCell>
-                  <TableCell>SH-2026-0414</TableCell>
-                  <TableCell numeric>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 flush>
-            <Table bordered>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>倉庫</TableHead>
-                  <TableHead>伝票番号</TableHead>
-                  <TableHead align="end">個数</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>東京第一</TableCell>
-                  <TableCell>SH-2026-0412</TableCell>
-                  <TableCell numeric>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 align="end">個数</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>東京第一</TableCell>
-                  <TableCell>SH-2026-0412</TableCell>
-                  <TableCell numeric>18</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        {/* ── The COLUMN AXES (gh#410) ──────────────────────────────────────
-            align · numeric · wrap · width. Every one of these was a className before, and the
-            alignment utility the catalog recommended was a physical direction this package lints
-            against. `wrap` is the one that is not cosmetic: a cell is `white-space: nowrap` by
-            default (right for a data grid) and that inherits into everything it holds, so a
-            free-text column can never break without it. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>問い合わせ一覧 · column axes</CardTitle>
-            <CardDescription>
-              `width` fixes the id and status columns; the free-text subject takes `wrap` so a long
-              Japanese title breaks inside its cell instead of stretching the table into a scroll;
-              the count column takes `numeric`, which is tabular figures and end alignment as one
-              concept, and the status column takes `align=&quot;center&quot;`.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead width="7rem">受付番号</TableHead>
-                  <TableHead wrap>件名</TableHead>
-                  <TableHead width="6rem" align="center">
-                    状態
-                  </TableHead>
-                  <TableHead width="5rem" numeric>
-                    返信
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>INQ-2026-0188</TableCell>
-                  <TableCell wrap>
-                    請求書の宛名を法人名から屋号に変更したいのですが、過去分もまとめて再発行できますか
-                  </TableCell>
-                  <TableCell align="center">対応中</TableCell>
-                  <TableCell numeric>3</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>INQ-2026-0189</TableCell>
-                  <TableCell wrap>
-                    ログイン時の二要素認証コードが届かない端末があるため、SMS
-                    から認証アプリへ切り替える手順を知りたい
-                  </TableCell>
-                  <TableCell align="center">未対応</TableCell>
-                  <TableCell numeric>0</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>INQ-2026-0190</TableCell>
-                  <TableCell wrap>API のレート制限について</TableCell>
-                  <TableCell align="center">完了</TableCell>
-                  <TableCell numeric>12</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        {/* ── gh#876 — TableRow tone, a typed route to the same paint DataTable's own
-            `rowTone` writes onto `data-tone` (wash + leading rail + `--surface-*` grounding,
-            gh#866). A hand-composed row discovers it from types now; `data-tone` written by
-            hand keeps working unchanged — this is an addition, not a migration. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("tableDocs.title")}</CardTitle>
-            <CardDescription>
-              `TableRow tone` writes the same `data-tone` attribute `DataTable`&apos;s `rowTone`
-              already writes for you — no more reaching for the raw attribute to discover the row
-              can be toned at all.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t("tableDocs.item")}</TableHead>
-                  <TableHead align="end">{t("tableDocs.amount")}</TableHead>
-                  <TableHead>{t("tableDocs.status")}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow>
-                  <TableCell>{t("tableDocs.fee")}</TableCell>
-                  <TableCell numeric>¥440</TableCell>
-                  <TableCell>
-                    <Badge tone="neutral">{t("tableDocs.done")}</Badge>
-                  </TableCell>
-                </TableRow>
-                <TableRow tone="warning">
-                  <TableCell>{t("tableDocs.overdue")}</TableCell>
-                  <TableCell numeric>¥128,000</TableCell>
-                  <TableCell>
-                    <Badge tone="warning">{t("tableDocs.check")}</Badge>
-                  </TableCell>
-                </TableRow>
-                <TableRow tone="destructive">
-                  <TableCell>{t("tableDocs.failed")}</TableCell>
-                  <TableCell numeric>¥52,300</TableCell>
-                  <TableCell>
-                    <Badge tone="destructive">{t("tableDocs.failedBadge")}</Badge>
-                  </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/text-diff.tsx

@@ -1,89 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  TextDiff,
-} from "@godxjp/ui/data-display";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const PREVIOUS_ORIGINAL = "来週の定例会議までに、見積書を承認してください。";
-const CURRENT_ORIGINAL = "今週金曜までに、見積書と請求書を却下してください。";
-
-const PREVIOUS_POLICY = [
-  "1. 申請は月末までに提出する。",
-  "2. 領収書の原本を添付する。",
-  "3. 上長の承認を得る。",
-  "4. 経理部が内容を確認する。",
-  "5. 承認後、翌月の給与と合わせて支払う。",
-  "6. 不備がある場合は差し戻す。",
-  "7. 差し戻しから五営業日以内に再提出する。",
-  "8. 期限を過ぎた申請は受け付けない。",
-].join("\n");
-
-const CURRENT_POLICY = [
-  "1. 申請は毎月二十日までに提出する。",
-  "2. 領収書の原本を添付する。",
-  "3. 上長の承認を得る。",
-  "4. 経理部が内容を確認する。",
-  "5. 承認後、翌月の給与と合わせて支払う。",
-  "6. 不備がある場合は差し戻す。",
-  "7. 差し戻しから五営業日以内に再提出する。",
-  "8. 期限を過ぎた申請は、部長の承認があれば受け付ける。",
-].join("\n");
-
-/**
- * TextDiff — what changed between two versions of a text (gh#1096).
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  return (
-    <PageContainer title="TextDiff" subtitle={t("textDiffDocs.subtitle")}>
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textDiffDocs.source.title")}</CardTitle>
-            <CardDescription>{t("textDiffDocs.source.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TextDiff before={PREVIOUS_ORIGINAL} after={CURRENT_ORIGINAL} lang="ja" />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textDiffDocs.policy.title")}</CardTitle>
-            <CardDescription>{t("textDiffDocs.policy.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TextDiff
-              mode="split"
-              before={PREVIOUS_POLICY}
-              after={CURRENT_POLICY}
-              lang="ja"
-              beforeLabel={t("textDiffDocs.policy.before")}
-              afterLabel={t("textDiffDocs.policy.after")}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("textDiffDocs.words.title")}</CardTitle>
-            <CardDescription>{t("textDiffDocs.words.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TextDiff
-              before="Please approve the quotation before next week's meeting."
-              after="Please reject the quotation and the invoice by Friday."
-              lang="en"
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/thought-chain.tsx

@@ -1,176 +0,0 @@
-import { useState } from "react";
-
-import { ChatBubble, ThoughtChain, ThoughtChainItem } from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Bot, MessageSquare, Search, Settings, Users } from "lucide-react";
-
-/**
- * ThoughtChain — the assistant's reasoning, step by step (Ant Design X `ThoughtChain`).
- *
- * Each card is one axis at rest: the chain as it appears above an answer, the four statuses, the
- * three connector strokes, and the standalone `ThoughtChainItem` chip in its three variants.
- *
- * The step that collapses is a real disclosure button, so this page is drivable from the keyboard
- * alone; Ant X's own step is a `<div onClick>`.
- *
- * Composed only from real @godxjp/ui components.
- */
-const sections: SidebarSectionProp[] = [
-  {
-    label: "アシスタント",
-    items: [
-      { id: "chat", label: "チャット", icon: MessageSquare },
-      { id: "agents", label: "エージェント", icon: Bot },
-      { id: "members", label: "メンバー", icon: Users },
-    ],
-  },
-  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
-];
-
-export default function ThoughtChainDoc() {
-  const [open, setOpen] = useState<string[]>(["search"]);
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chat"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="思考の手順"
-        subtitle="ThoughtChain · 回答の前に何をしたのか。畳める手順は本物の開閉ボタン。"
-      >
-        {/* IN PLACE: above the answer it explains. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            in place · 回答の前
-          </Text>
-          <ThoughtChain
-            label="思考の手順"
-            expandedKeys={open}
-            onExpand={setOpen}
-            items={[
-              {
-                key: "read",
-                title: "添付の請求書を読む",
-                description: "3件",
-                status: "success",
-              },
-              {
-                key: "search",
-                title: "社内規程を検索",
-                description: "「支払期日」",
-                status: "success",
-                collapsible: true,
-                content: (
-                  <Text size="xs" tone="muted">
-                    第4章 支払 — 請求書の支払期日は受領月の翌月末日とする。
-                  </Text>
-                ),
-              },
-              {
-                key: "write",
-                title: "差分をまとめる",
-                status: "loading",
-                blink: true,
-              },
-            ]}
-          />
-          <ChatBubble placement="start" variant="filled">
-            差分は3件でした。金額、支払期日、宛名のうちどれから直しますか。
-          </ChatBubble>
-        </Flex>
-
-        {/* THE FOUR STATUSES. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            status · loading · success · error · abort
-          </Text>
-          <Text size="xs" tone="muted">
-            状態は字にもなる。読み上げでは各手順のあとに「完了」「失敗」などが続く。
-          </Text>
-          <ThoughtChain
-            label="状態の一覧"
-            items={[
-              { key: "a", title: "実行中の手順", status: "loading" },
-              { key: "b", title: "終わった手順", status: "success" },
-              { key: "c", title: "失敗した手順", status: "error" },
-              { key: "d", title: "中断した手順", status: "abort" },
-            ]}
-          />
-        </Flex>
-
-        {/* THE CONNECTOR. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            line · solid · dashed · none
-          </Text>
-          <ThoughtChain
-            label="実線"
-            line="solid"
-            items={[
-              { key: "a", title: "一歩目" },
-              { key: "b", title: "二歩目" },
-            ]}
-          />
-          <ThoughtChain
-            label="破線"
-            line="dashed"
-            items={[
-              { key: "a", title: "一歩目" },
-              { key: "b", title: "二歩目" },
-            ]}
-          />
-          <ThoughtChain
-            label="線なし"
-            line={false}
-            items={[
-              { key: "a", title: "一歩目" },
-              { key: "b", title: "二歩目" },
-            ]}
-          />
-        </Flex>
-
-        {/* THE STANDALONE CHIP. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            ThoughtChainItem · solid · outlined · text
-          </Text>
-          <Text size="xs" tone="muted">
-            押せる手順は本物のボタンとして描かれる。押せないものは div のまま。要素が実体に従う。
-          </Text>
-          <Flex gap="sm">
-            <ThoughtChainItem
-              variant="solid"
-              icon={<Search />}
-              title="社内規程を検索"
-              description="3件ヒット"
-              status="success"
-            />
-            <ThoughtChainItem variant="outlined" icon={<Search />} title="再検索" />
-            <ThoughtChainItem
-              variant="text"
-              icon={<Search />}
-              title="詳細を見る"
-              onClick={() => setOpen(["search"])}
-            />
-          </Flex>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}