@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/data-table/index.tsx

@@ -1,407 +0,0 @@
-import { useMemo, useState } from "react";
-
-import { AppProvider } from "@godxjp/ui/app";
-import { Badge, Card, CardContent, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@godxjp/ui/navigation";
-import type { DensityProp, SortStateProp } from "@godxjp/ui/props";
-import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
-
-/**
- * DataTable — the admin list primitive: sticky header, sorting, bulk selection,
- * density toggle, per-row click navigation, a loading row, and a built-in empty
- * state (never hand-roll a data.length===0 guard). Composed only from real
- * @godxjp/ui components.
- */
-type Invoice = {
-  id: string;
-  partner: string;
-  amount: number;
-  status: "active" | "pending" | "draft" | "failed";
-  date: string;
-};
-
-const invoices: Invoice[] = [
-  {
-    id: "INV-0312",
-    partner: "株式会社ベトヤ",
-    amount: 482000,
-    status: "active",
-    date: "2024-04-12",
-  },
-  { id: "INV-0311", partner: "ハノイ物流", amount: 128400, status: "pending", date: "2024-04-11" },
-  { id: "INV-0310", partner: "GMO決済", amount: 64800, status: "draft", date: "2024-04-10" },
-  { id: "INV-0309", partner: "東京ロジ", amount: 312000, status: "failed", date: "2024-04-09" },
-];
-
-const yen = new Intl.NumberFormat("ja-JP", {
-  style: "currency",
-  currency: "JPY",
-  maximumFractionDigits: 0,
-});
-
-const columns: ColumnDef<Invoice>[] = [
-  { key: "id", header: "請求書番号", width: "w-32" },
-  { key: "partner", header: "取引先", sortable: true },
-  {
-    key: "amount",
-    header: "金額",
-    align: "right",
-    sortable: true,
-    render: (row) => <Text tabular>{yen.format(row.amount)}</Text>,
-  },
-  {
-    key: "status",
-    header: "状態",
-    align: "center",
-    render: (row) => <Badge status={row.status} />,
-  },
-  { key: "date", header: "発行日", align: "right", hiddenOnMobile: true },
-  {
-    key: "_actions",
-    header: "",
-    ariaLabel: "操作",
-    align: "right",
-    enableHiding: false,
-    render: (row) => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon-sm" aria-label={`${row.id} の操作`}>
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem>
-            <Pencil />
-            編集
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">
-            <Trash2 />
-            削除
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-];
-
-/* Five 240px columns: wider than the frame at every viewport the gates sweep, and wide for a
- * reason no font can change — the width is declared, so the overflow is deterministic in CI. */
-const wideColumns: ColumnDef<Invoice>[] = [
-  { key: "id", header: "請求書番号", width: "240px" },
-  { key: "partner", header: "取引先", width: "240px" },
-  { key: "amount", header: "金額", align: "right", width: "240px" },
-  { key: "status", header: "状態", width: "240px" },
-  { key: "date", header: "期限日", width: "240px" },
-];
-
-export default function Demo() {
-  const [selected, setSelected] = useState<Set<string>>(new Set(["INV-0311"]));
-  const [sort, setSort] = useState<SortStateProp | undefined>({
-    key: "amount",
-    direction: "desc",
-  });
-  const [density, setDensity] = useState<DensityProp>("comfortable");
-  const { t } = useTranslation();
-
-  const rows = useMemo(() => {
-    if (!sort) return invoices;
-    const dir = sort.direction === "asc" ? 1 : -1;
-    return [...invoices].sort((a, b) => {
-      const av = a[sort.key as keyof Invoice];
-      const bv = b[sort.key as keyof Invoice];
-      return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
-    });
-  }, [sort]);
-
-  return (
-    <PageContainer
-      title="DataTable"
-      subtitle="sortable · selectable · bulk actions · row actions · loading · clickable rows · empty state"
-    >
-      <Flex direction="col" gap="lg">
-        {/* A table WIDER than its frame, inside a flush Card — the shape a list page uses. It must
-            scroll inside its own box with the fade at the inline end, never cut its last columns
-            (WCAG 1.4.10). `check:data-table-overflow` measures this section. */}
-        <Flex direction="col" gap="sm" id="wide-overflow" className="max-w-3xl">
-          <Text weight="medium">枠より広い表（横スクロール · 列を切らない）</Text>
-          <Card>
-            <CardContent flush>
-              <DataTable
-                data={invoices}
-                columns={wideColumns}
-                getRowId={(row) => row.id}
-                selectable
-              />
-            </CardContent>
-          </Card>
-        </Flex>
-        <Flex direction="col" gap="sm" id="text-action-width">
-          <Text weight="medium">日本語の行アクション</Text>
-          <DataTable
-            preset="action-collection"
-            columns={[
-              { key: "partner", header: "取引先" },
-              { key: "date", header: "期限日", width: "104px" },
-              {
-                key: "action",
-                header: "操作",
-                priority: "actions",
-                // No width: the actions column grows to the text button on its own (gh#1067).
-                render: () => (
-                  <Button size="sm" variant="ghost">
-                    対応する
-                  </Button>
-                ),
-              },
-            ]}
-            data={invoices}
-            getRowId={(row) => row.id}
-          />
-        </Flex>
-        {/* The RECORD collection — a wide, heterogeneous record set. The fold is a CONTAINER
-            query, not a viewport one, so the same table folds by the width it is GIVEN: the two
-            blocks below are one component and one column list, rendered wide and narrow.
-
-            Below `collapseBelow` the header row hides and every `<tr>` becomes a bordered
-            key-value card. The per-cell labels are DERIVED from the same `ColumnDef.header` the
-            `<th>` uses (gh#864) — one declaration, so the card can never drift from the table it
-            collapsed out of, and the value that loses its header keeps its name. */}
-        <Flex direction="col" gap="sm" id="stacked-record-collection">
-          <Text weight="medium">{t("dataTableDocs.stackedRecordWide")}</Text>
-          <DataTable
-            preset="stacked-record-collection"
-            collapseBelow="sm"
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-          />
-        </Flex>
-        <Flex direction="col" gap="sm" id="stacked-record-collection-folded" className="max-w-xs">
-          <Text weight="medium">{t("dataTableDocs.stackedRecordFolded")}</Text>
-          <DataTable
-            preset="stacked-record-collection"
-            collapseBelow="sm"
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-          />
-        </Flex>
-        {/* Row TONE — the leading-edge rail + wash for a row in a named state. The status Badge
-            stays in its own cell: the rail makes the row findable, it does not carry the meaning
-            (WCAG 1.4.1). */}
-        <Flex direction="col" gap="sm" id="row-tone">
-          <Text weight="medium">行のトーン（要対応の行）</Text>
-          <DataTable
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-            rowTone={(row) =>
-              row.status === "failed"
-                ? "destructive"
-                : row.status === "pending"
-                  ? "attention"
-                  : undefined
-            }
-          />
-        </Flex>
-        {/* Primary: sorted (amount desc), one row preselected, clickable rows,
-            controlled density (comfortable), kebab row actions, pagination footer. */}
-        <DataTable
-          data={rows}
-          columns={columns}
-          getRowId={(row) => row.id}
-          selectable
-          selected={selected}
-          onSelectChange={setSelected}
-          onRowClick={() => {}}
-          density={density}
-          onDensityChange={setDensity}
-          sort={sort}
-          onSortChange={setSort}
-        >
-          <DataTable.Toolbar>
-            <DataTable.BulkActions>
-              <Button size="sm" variant="outline">
-                エクスポート
-              </Button>
-              <Button size="sm">入金消込</Button>
-            </DataTable.BulkActions>
-            <DataTable.DensityToggle />
-          </DataTable.Toolbar>
-          <DataTable.Content />
-          <DataTable.Pagination cursor="INV-0309" hasMore onChange={() => {}} />
-        </DataTable>
-
-        {/* The three density branches rendered statically. The DensityToggle above reaches the
-            same values, but a toggle only proves them after a click; these prove them at rest. */}
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            密度 compact（明細の一覧 · 行高さを最小に）
-          </Text>
-          <DataTable
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-            density="compact"
-          />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            密度 default（既定 · 管理画面の標準）
-          </Text>
-          <DataTable
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-            density="default"
-          />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            密度 comfortable（少数行 · 承認画面など読み取り重視）
-          </Text>
-          <DataTable
-            data={invoices}
-            columns={columns}
-            getRowId={(row) => row.id}
-            density="comfortable"
-          />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            読み込み中（loading=true で行を置き換え）
-          </Text>
-          <DataTable data={invoices} columns={columns} getRowId={(row) => row.id} loading />
-        </Flex>
-
-        <Flex direction="col" gap="sm" className="max-w-sm">
-          <Text as="div" weight="medium">
-            Narrow footer · VI expanded rows-per-page label
-          </Text>
-          <AppProvider defaultLocale="vi" persist={false}>
-            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
-              <DataTable.Pagination pageSizeOptions={[10, 20]} />
-            </DataTable>
-          </AppProvider>
-        </Flex>
-
-        <Flex direction="col" gap="sm" className="max-w-sm">
-          <Text as="div" weight="medium">
-            Narrow footer · JA rows-per-page label
-          </Text>
-          <AppProvider defaultLocale="ja" persist={false}>
-            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
-              <DataTable.Pagination pageSizeOptions={[10, 20]} />
-            </DataTable>
-          </AppProvider>
-        </Flex>
-
-        <Flex direction="col" gap="sm" className="max-w-sm">
-          <Text as="div" weight="medium">
-            Narrow footer · EN longest supported rows-per-page label
-          </Text>
-          <AppProvider defaultLocale="en" persist={false}>
-            <DataTable data={invoices} columns={columns} getRowId={(row) => row.id}>
-              <DataTable.Pagination pageSizeOptions={[10, 20]} />
-            </DataTable>
-          </AppProvider>
-        </Flex>
-
-        <Flex direction="col" gap="sm" id="empty-builtin">
-          <Text as="div" weight="medium">
-            空の状態（data が空のとき自動表示）
-          </Text>
-          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} />
-        </Flex>
-
-        {/* The SAME cell with consumer content in it. `empty` takes a ReactNode, so a plain string
-            is a legal call — and the lifecycle cell used to be `padding: 0`, which put that string
-            flush against the table's edge. Measured here; see check:data-table-empty-inset. */}
-        <Flex direction="col" gap="sm" id="empty-plain-string">
-          <Text as="div" weight="medium">
-            空の状態（empty に文字列を渡す）
-          </Text>
-          <DataTable
-            data={[]}
-            columns={columns}
-            getRowId={(row) => row.id}
-            empty="まだ登録がありません"
-          />
-        </Flex>
-
-        {/* — the two failure states, in the same table grid as empty/loading. */}
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            エラー（error · role=&quot;alert&quot; · onRetry で再試行を表示）
-          </Text>
-          <DataTable
-            data={[]}
-            columns={columns}
-            getRowId={(row) => row.id}
-            error
-            onRetry={() => {}}
-          />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            エラー（onRetry なし · 再試行ボタンは出さない）
-          </Text>
-          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} error />
-        </Flex>
-
-        <Flex direction="col" gap="sm" id="error-custom-node">
-          <Text as="div" weight="medium">
-            エラー（error にノードを渡して文言を差し替え）
-          </Text>
-          <DataTable
-            data={[]}
-            columns={columns}
-            getRowId={(row) => row.id}
-            error={<Text tone="muted">コード INV_FETCH_504 · リクエストID req_7f3a91c0d2</Text>}
-          />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            権限なし（denied · 403 は再試行を出さない）
-          </Text>
-          <DataTable data={[]} columns={columns} getRowId={(row) => row.id} denied />
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            0 件 + numbered pagination（境界状態）
-          </Text>
-          <DataTable data={[]} columns={columns} getRowId={(row) => row.id}>
-            <DataTable.Content />
-            <DataTable.Pagination pageSizeOptions={[10, 20]} />
-          </DataTable>
-        </Flex>
-
-        <Flex direction="col" gap="sm">
-          <Text as="div" weight="medium">
-            1 件 / 1 ページ + numbered pagination（境界状態）
-          </Text>
-          <DataTable data={invoices.slice(0, 1)} columns={columns} getRowId={(row) => row.id}>
-            <DataTable.Content />
-            <DataTable.Pagination pageSizeOptions={[10, 20]} />
-          </DataTable>
-        </Flex>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/descriptions.tsx

@@ -1,263 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  Progress,
-  Thumbnail,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Download, ExternalLink, FileText } from "lucide-react";
-
-/**
- * Descriptions — the label/value grid every detail page is made of.
- *
- * WHY THIS PAGE IS LONG. It was five tidy cards of short strings, and the owner's verdict was that
- * it shows nothing about whether the component holds up. That is right: a label/value grid is
- * trivial when every label is four characters and every value is one line.
- *
- * A real detail screen is not that. It has a label that runs to three lines beside one that is two
- * characters; a value that is an image, a file to download, a link, a status, a progress bar, a
- * 40-character machine ID, or nothing at all; and it has to survive all of them in the same grid,
- * at every breakpoint, bordered and not.
- *
- * So every section below is a case a real detail page hits. Where a section looks bad, the
- * component owes an answer — the sample data is not there to flatter it.
- */
-const ID = "01JBQ9X7M4K2R8VT3NZ6YHF0PA";
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Descriptions"
-      subtitle="label/value grid — every shape a detail page asks for"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>1 · columns × bordered × layout — the three axes</CardTitle>
-            <CardDescription>
-              Every combination changes where the label sits and how the grid divides. These are the
-              four a project actually picks between.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="lg">
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  columns=3 · bordered · horizontal — the dense admin default
-                </Text>
-                <Descriptions columns={3} bordered layout="horizontal">
-                  <Descriptions.Item label="取引先">株式会社山田製作所</Descriptions.Item>
-                  <Descriptions.Item label="担当">佐藤 玲</Descriptions.Item>
-                  <Descriptions.Item label="状態">
-                    <Badge tone="success">有効</Badge>
-                  </Descriptions.Item>
-                  <Descriptions.Item label="登録日">2024-04-01</Descriptions.Item>
-                  <Descriptions.Item label="与信枠">¥12,000,000</Descriptions.Item>
-                  <Descriptions.Item label="支払条件">月末締め翌月末払い</Descriptions.Item>
-                </Descriptions>
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  columns=2 · no border · vertical — the reading layout, label above value
-                </Text>
-                <Descriptions columns={2} layout="vertical">
-                  <Descriptions.Item label="取引先">株式会社山田製作所</Descriptions.Item>
-                  <Descriptions.Item label="担当">佐藤 玲</Descriptions.Item>
-                  <Descriptions.Item label="与信枠">¥12,000,000</Descriptions.Item>
-                  <Descriptions.Item label="支払条件">月末締め翌月末払い</Descriptions.Item>
-                </Descriptions>
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  columns=1 · bordered — a narrow column or a phone
-                </Text>
-                <Descriptions columns={1} bordered>
-                  <Descriptions.Item label="取引先">株式会社山田製作所</Descriptions.Item>
-                  <Descriptions.Item label="状態">
-                    <Badge tone="success">有効</Badge>
-                  </Descriptions.Item>
-                </Descriptions>
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="sm" tone="muted">
-                  labelAlign=end — right-aligned labels, so the values start on one line
-                </Text>
-                <Descriptions columns={2} bordered labelAlign="end">
-                  <Descriptions.Item label="ID">{ID}</Descriptions.Item>
-                  <Descriptions.Item label="状態">
-                    <Badge tone="success">有効</Badge>
-                  </Descriptions.Item>
-                </Descriptions>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>2 · responsive columns</CardTitle>
-            <CardDescription>
-              `columns` takes a breakpoint object. Narrow this frame with the Dimensions control: 1
-              column on a phone, 2 on a tablet, 3 on a desktop — the same markup throughout.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Descriptions columns={{ sm: 1, md: 2, lg: 3 }} bordered>
-              <Descriptions.Item label="会社名">株式会社山田製作所</Descriptions.Item>
-              <Descriptions.Item label="法人番号" mono>
-                7010001071491
-              </Descriptions.Item>
-              <Descriptions.Item label="業種">精密機器製造</Descriptions.Item>
-              <Descriptions.Item label="代表">山田 太郎</Descriptions.Item>
-              <Descriptions.Item label="従業員数">248 名</Descriptions.Item>
-              <Descriptions.Item label="設立">1974-06-12</Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>3 · the value is not a string</CardTitle>
-            <CardDescription>
-              The value slot takes any node. These are the ones a detail page actually puts there —
-              an image, a file, a link, a status, a proportion, a secret, money, a long memo.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Descriptions columns={{ sm: 1, md: 2 }} bordered>
-              <Descriptions.Item label="製品画像">
-                <Thumbnail src="/godxjp-ui/favicon.svg" alt="製品サムネイル" size="md" />
-              </Descriptions.Item>
-              <Descriptions.Item label="状態">
-                <Flex direction="row" gap="xs" wrap>
-                  <Badge tone="success">出荷可</Badge>
-                  <Badge tone="warning" variant="outline">
-                    在庫僅少
-                  </Badge>
-                </Flex>
-              </Descriptions.Item>
-              <Descriptions.Item label="仕様書">
-                <Button variant="outline" size="sm">
-                  <FileText className="size-4" />
-                  仕様書_v4.2.pdf
-                </Button>
-              </Descriptions.Item>
-              <Descriptions.Item label="検査成績書">
-                <Button variant="ghost" size="sm">
-                  <Download className="size-4" />
-                  ダウンロード（2.4 MB）
-                </Button>
-              </Descriptions.Item>
-              <Descriptions.Item label="外部リンク">
-                <Button variant="link" size="sm">
-                  <ExternalLink className="size-4" />
-                  サプライヤーポータル
-                </Button>
-              </Descriptions.Item>
-              <Descriptions.Item label="検収進捗">
-                <Progress value={72} tone="success" label="検収進捗 72%" />
-              </Descriptions.Item>
-              <Descriptions.Item label="単価">¥128,400</Descriptions.Item>
-              <Descriptions.Item label="ロットID" mono>
-                {ID}
-              </Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>4 · span — a value that needs the whole row</CardTitle>
-            <CardDescription>
-              An address, a memo or a JSON blob does not belong in a one-third cell. `span` widens
-              the item; `span=&quot;filled&quot;` takes whatever is left on the row, so the grid
-              stays aligned instead of leaving a hole.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Descriptions columns={3} bordered>
-              <Descriptions.Item label="取引先">株式会社山田製作所</Descriptions.Item>
-              <Descriptions.Item label="担当">佐藤 玲</Descriptions.Item>
-              <Descriptions.Item label="電話">03-5555-0198</Descriptions.Item>
-              <Descriptions.Item label="本社所在地" span={3}>
-                〒105-0011 東京都港区芝公園四丁目2番8号 東京タワー内 グローバルビジネスセンター 23F
-                株式会社山田製作所 東日本統括本部
-              </Descriptions.Item>
-              <Descriptions.Item label="備考" span="filled">
-                検収は毎月第2・第4火曜のみ。祝日と重なる場合は翌営業日に振替。先方の受入窓口は
-                資材部・資材管理課（内線
-                4821）。2026年4月以降は電子取引のみとなるため、紙の納品書は不可。
-              </Descriptions.Item>
-              <Descriptions.Item label="与信枠">¥12,000,000</Descriptions.Item>
-              <Descriptions.Item label="使用中">¥8,214,930</Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>5 · the cases that break a label/value grid</CardTitle>
-            <CardDescription>
-              This is the only section on the page that can tell you whether Descriptions is any
-              good. If a row here looks wrong, the component owes an answer — not the data.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Descriptions columns={{ sm: 1, md: 2, lg: 3 }} bordered>
-              <Descriptions.Item label="グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）連携ステータス">
-                <Badge tone="success">連携済</Badge>
-              </Descriptions.Item>
-              <Descriptions.Item label="率">96.8%</Descriptions.Item>
-              <Descriptions.Item label="ID" mono>
-                urn:godx:entitlement:ap-northeast-1:7010001071491:workforce/identity/administration/v4
-              </Descriptions.Item>
-              <Descriptions.Item label="未設定">
-                <Text tone="muted">—</Text>
-              </Descriptions.Item>
-              <Descriptions.Item label="空文字">{""}</Descriptions.Item>
-              <Descriptions.Item label="ゼロ">0</Descriptions.Item>
-              <Descriptions.Item label="累計取扱高">¥128,400,932,517</Descriptions.Item>
-              <Descriptions.Item label="差引">−¥412,880</Descriptions.Item>
-              <Descriptions.Item label="長い英数字" mono>
-                AKIAIOSFODNN7EXAMPLEWJALRXUTNFEMIK7MDENGBPXRFICYEXAMPLEKEY
-              </Descriptions.Item>
-            </Descriptions>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>使い方の要点</CardTitle>
-            <CardDescription>この3点で、上のほとんどが決まります。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Text as="div" size="sm">
-                直下の子は <code>Descriptions.Item</code> だけです。生の <code>&lt;div&gt;</code> や
-                <code>&lt;dt&gt;/&lt;dd&gt;</code> を混ぜるとグリッドが崩れます。
-              </Text>
-              <Text as="div" size="sm">
-                機械可読な値（ID・パス・鍵・通貨コード）には <code>mono</code> を付けてください。
-                等幅になるだけでなく <code>break-all</code> が効き、上の 57
-                文字の鍵がセルを突き破らずに折り返します。
-              </Text>
-              <Text as="div" size="sm">
-                住所・備考・JSON のような長い値には <code>span</code> を。 1/3
-                セルに押し込むと、その行だけ高さが跳ねて表全体が読みにくくなります。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}