@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-display/legend.tsx

@@ -1,158 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Legend,
-  Progress,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const COMPLIANCE = [
-  { name: "株式会社山田製作所", over: 2, near: 3, done: 12 },
-  { name: "佐藤食品株式会社", over: 1, near: 2, done: 9 },
-  { name: "東海精密工業株式会社", over: 0, near: 3, done: 21 },
-];
-
-const STATUS_KEYS = [
-  { tone: "destructive", label: "期限超過" },
-  { tone: "warning", label: "期限間近" },
-  { tone: "success", label: "対応済" },
-] as const;
-
-/**
- * Legend — the KEY for a colour-coded surface: which tone means what, in words, once.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="Legend" subtitle="tone → 意味 のキー · 凡例">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Progress の breakdown と組む</CardTitle>
-            <CardDescription>
-              CardAction に置くと、カード見出しと同じ行に凡例が並びます。色の意味をカードで
-              一度だけ言い、各行では繰り返しません。
-            </CardDescription>
-            <CardAction>
-              <Legend items={[...STATUS_KEYS]} />
-            </CardAction>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gapRaw={11}>
-              {COMPLIANCE.map((row) => (
-                <Flex key={row.name} align="center" gapRaw={14}>
-                  <Flex width={180}>
-                    <Text weight="medium" truncate>
-                      {row.name}
-                    </Text>
-                  </Flex>
-                  <Flex fill direction="col">
-                    <Progress
-                      segments={[
-                        { value: row.over, tone: "destructive", label: "期限超過" },
-                        { value: row.near, tone: "warning", label: "期限間近" },
-                        { value: row.done, tone: "success", label: "対応済" },
-                      ]}
-                      aria-label={row.name}
-                    />
-                  </Flex>
-                  {/* A COLUMN OF NUMBERS NEEDS COLUMNS, not a row of shrink-to-fit boxes.
-                      `tabular` makes DIGITS equal-width inside one Text; it cannot align two Texts
-                      with different digit COUNTS. Laid out as a flex row and right-aligned as a
-                      group, a row ending in "9" sat 8px right of one ending in "21" — measured on
-                      the published site, and the reason this readout looked crooked. Fixed tracks
-                      give each value its own cell, so every row lines up whatever the digits. */}
-                  <div
-                    className="grid items-center"
-                    style={{
-                      gridTemplateColumns: "2.5rem 2.5rem 2.5rem 4.5rem",
-                      justifyItems: "end",
-                      columnGap: "var(--space-2)",
-                    }}
-                  >
-                    <Text tone="destructive" weight="semibold" tabular>
-                      {row.over}
-                    </Text>
-                    <Text tone="warning" weight="semibold" tabular>
-                      {row.near}
-                    </Text>
-                    <Text tone="success" weight="semibold" tabular>
-                      {row.done}
-                    </Text>
-                    <Text tone="muted" tabular>
-                      計 {row.over + row.near + row.done}
-                    </Text>
-                  </div>
-                </Flex>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Tones</CardTitle>
-            <CardDescription>
-              vocabulary の 7 tone すべてに塗りがあります。色だけで意味を運ばないため label
-              は必須です（WCAG 1.4.1）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Legend
-              items={[
-                { tone: "default", label: "既定（primary）" },
-                { tone: "success", label: "成功" },
-                { tone: "warning", label: "注意" },
-                { tone: "destructive", label: "危険" },
-                { tone: "info", label: "情報" },
-                { tone: "muted", label: "控えめ" },
-                { tone: "neutral", label: "中立" },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Named legend</CardTitle>
-            <CardDescription>
-              aria-label を渡すと、その凡例が「何のキーか」を読み上げます。項目は list / listitem
-              として並びます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Legend items={[...STATUS_KEYS]} aria-label="コンプライアンス状況の凡例" />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Wrapping</CardTitle>
-            <CardDescription>
-              狭い幅では折り返します（横スクロールしません）。凡例が視界の外に出ると、色の意味
-              そのものが失われるためです。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex width={240}>
-              <Legend
-                items={[
-                  { tone: "destructive", label: "期限超過" },
-                  { tone: "warning", label: "期限間近" },
-                  { tone: "success", label: "対応済" },
-                  { tone: "info", label: "確認中" },
-                  { tone: "muted", label: "対象外" },
-                ]}
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

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

@@ -1,441 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  ListRow,
-} from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { KeyRound, Laptop, Link2, Smartphone } from "lucide-react";
-
-/**
- * ListRow — the single-line entity-row surface for SHORT lists inside a Card. Replaces the
- * hand-rolled `flex items-center justify-between border-b py-3` repeated across account pages.
- * Drop rows into a flush CardContent: they stack with a quiet divider and the Card border closes
- * the list. Border / radius / padding are tokenized (`--list-row-*`).
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="ListRow"
-      subtitle="leading · title/description · trailing action · short entity lists inside a Card"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Navigation rows</CardTitle>
-            <CardDescription>
-              The whole row is one link, including its metadata. Current location uses aria-current.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              asChild
-              title="Roles and permissions"
-              description="Inspect organization access"
-              overflow="wrap"
-            >
-              <a href="?section=roles" aria-current="page" />
-            </ListRow>
-            <ListRow asChild title="Members" description="Assign roles to organization members">
-              <a href="?section=members" />
-            </ListRow>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>アクティブなセッション Active sessions</CardTitle>
-            <CardDescription>
-              Rows live in a flush CardContent and draw their own dividers. Trailing holds the row
-              action: a status Badge or a destructive Button.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              leading={<Smartphone aria-hidden="true" />}
-              title="iPhone 15 · Tokyo"
-              description="最終アクセス 2分前 · 153.240.x.x"
-              trailing={<Badge status="active" />}
-            />
-            <ListRow
-              leading={<Laptop aria-hidden="true" />}
-              title="MacBook Pro · Osaka"
-              description="最終アクセス 3日前 · 126.18.x.x"
-              trailing={
-                <Button size="xs" variant="outline">
-                  ログアウト Sign out
-                </Button>
-              }
-            />
-            <ListRow
-              leading={<Laptop aria-hidden="true" />}
-              title="Windows · Nagoya"
-              description="最終アクセス 先月 · 49.98.x.x"
-              trailing={
-                <Button size="xs" variant="outline">
-                  ログアウト Sign out
-                </Button>
-              }
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>連携アカウント Linked accounts</CardTitle>
-            <CardDescription>
-              Leading takes an icon or Avatar; trailing takes any action control. `as="li"` when the
-              rows are a semantic list.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            {/* `as="li"` rows are a SEMANTIC list — axe's `listitem` rule requires the parent to
-                actually be a list container (ul/ol/role=list), not just visually stacked divs. */}
-            <ul>
-              <ListRow
-                as="li"
-                leading={<Link2 aria-hidden="true" className="size-4" />}
-                title="GitHub"
-                description="taro@example.com として接続済み"
-                trailing={
-                  <Button size="xs" variant="ghost">
-                    解除 Disconnect
-                  </Button>
-                }
-              />
-              <ListRow
-                as="li"
-                leading={<KeyRound aria-hidden="true" />}
-                title="Passkey · iCloud Keychain"
-                description="2026年3月12日に追加"
-                trailing={<Badge tone="neutral">未使用</Badge>}
-              />
-            </ul>
-          </CardContent>
-        </Card>
-
-        {/* #224 — a long organization name plus TWO trailing Buttons. The content column shrinks
-            to `min(--list-row-body-min-width, 100%)` and the actions wrap onto their own line at
-            narrow widths, so the page root never scrolls horizontally at 390px. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>招待 Pending invitations</CardTitle>
-            <CardDescription>
-              Long titles + two actions: the row wraps instead of widening the page. Retune the
-              stack threshold with `--list-row-body-min-width`, the action gap with
-              `--list-row-trailing-gap`.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              align="start"
-              overflow="wrap"
-              leading={
-                <Avatar className="size-8">
-                  <AvatarFallback>グ</AvatarFallback>
-                </Avatar>
-              }
-              title="グローバル・トランスフォーメーション推進本部 デジタルプラットフォーム統括部"
-              description="招待者 山田 太郎 · 2026-07-28"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    辞退 Decline
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    参加 Accept
-                  </Button>
-                </>
-              }
-            />
-            <ListRow
-              align="start"
-              overflow="wrap"
-              leading={
-                <Avatar className="size-8">
-                  <AvatarFallback>T</AvatarFallback>
-                </Avatar>
-              }
-              title="Trung tâm Điều phối Chuyển đổi số và Quản trị Dữ liệu Doanh nghiệp Toàn cầu"
-              description="Người mời nguyễn.van.a@example.com · 2026-07-27"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    Từ chối
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    Chấp nhận
-                  </Button>
-                </>
-              }
-            />
-            <ListRow
-              leading={
-                <Avatar className="size-8">
-                  <AvatarFallback>A</AvatarFallback>
-                </Avatar>
-              }
-              title="Acme Global Transformation Office · Data Platform Division"
-              description="Invited by taro@example.com · 2026-07-26"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    Decline
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    Accept
-                  </Button>
-                </>
-              }
-            />
-          </CardContent>
-        </Card>
-
-        {/* #246 — `density="compact"` inline-actions geometry. Inside the canonical narrow card
-            (358px at a 390px viewport → 326px content column) the 36px Avatar, the shrinkable
-            title/description and the two small trailing Buttons stay on ONE line, and the history
-            rows keep their status Badge + ISO-8601 date inline with the title. The #224 wrap
-            contract is untouched: a cluster that cannot fit still wraps, never widening the page. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>招待 · コンパクト Compact invitations</CardTitle>
-            <CardDescription>
-              `density=&quot;compact&quot;` lowers the row inset, the column gap and the body
-              threshold (`--list-row-compact-*`) so avatar · title · actions read as one line in a
-              narrow card, instead of the actions dropping to a second row.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              density="compact"
-              leading={
-                <Avatar className="size-9">
-                  <AvatarFallback>グ</AvatarFallback>
-                </Avatar>
-              }
-              title="グローバル推進本部"
-              description="山田 太郎 · 2026-07-28"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    辞退
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    参加
-                  </Button>
-                </>
-              }
-            />
-            <ListRow
-              density="compact"
-              leading={
-                <Avatar className="size-9">
-                  <AvatarFallback>T</AvatarFallback>
-                </Avatar>
-              }
-              title="Trung tâm Dữ liệu"
-              description="nguyen.van.a@example.com · 2026-07-27"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    Từ chối
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    Đồng ý
-                  </Button>
-                </>
-              }
-            />
-            <ListRow
-              density="compact"
-              leading={
-                <Avatar className="size-9">
-                  <AvatarFallback>A</AvatarFallback>
-                </Avatar>
-              }
-              title="Acme Data Platform"
-              description="taro@example.com · 2026-07-26"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    Decline
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    Accept
-                  </Button>
-                </>
-              }
-            />
-            {/* Compact does NOT give up the #224 safety net: a title too long for the compact
-                threshold still wraps (and the actions drop to their own line if they cannot fit),
-                so the page root never scrolls horizontally. */}
-            <ListRow
-              density="compact"
-              align="start"
-              overflow="wrap"
-              leading={
-                <Avatar className="size-9">
-                  <AvatarFallback>グ</AvatarFallback>
-                </Avatar>
-              }
-              title="グローバル・トランスフォーメーション推進本部 デジタルプラットフォーム統括部"
-              description="Trung tâm Điều phối Chuyển đổi số · 2026-07-25"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    辞退 Decline
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    参加 Accept
-                  </Button>
-                </>
-              }
-            />
-          </CardContent>
-        </Card>
-
-        {/* #246 — the compact HISTORY row: no leading slot, status Badge + ISO-8601 date inline. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>履歴 Invitation history</CardTitle>
-            <CardDescription>
-              A compact row with a status Badge and an ISO-8601 date in `trailing` stays a single
-              line at 390px. The metadata never drops under the title.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              density="compact"
-              title="グローバル推進本部"
-              trailing={
-                <>
-                  <Badge tone="success">承認済み</Badge>
-                  <Text size="xs" tone="muted">
-                    2026-07-12
-                  </Text>
-                </>
-              }
-            />
-            <ListRow
-              density="compact"
-              title="Trung tâm Dữ liệu"
-              trailing={
-                <>
-                  <Badge tone="neutral">期限切れ</Badge>
-                  <Text size="xs" tone="muted">
-                    2026-06-30
-                  </Text>
-                </>
-              }
-            />
-            <ListRow
-              density="compact"
-              title="Acme Data Platform"
-              trailing={
-                <>
-                  <Badge tone="destructive">辞退</Badge>
-                  <Text size="xs" tone="muted">
-                    2026-06-18
-                  </Text>
-                </>
-              }
-            />
-          </CardContent>
-        </Card>
-
-        {/* Both density branches on the same content, so the inset difference is readable at rest
-            without toggling anything. `default` is what a row renders with density omitted. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>密度の対比 density=default vs compact</CardTitle>
-            <CardDescription>
-              同じ行を density=&quot;default&quot;（既定 · ゆとりのある行間）と
-              density=&quot;compact&quot;（明細向けの詰めた行間）で並べています。切り替えるのは
-              inset · 列間 · 本文の折り返し閾値だけで、内容と操作は変わりません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              density="default"
-              leading={<Laptop aria-hidden="true" />}
-              title="MacBook Pro · Osaka"
-              description={'density="default" · 最終アクセス 3日前'}
-              trailing={<Badge status="active" />}
-            />
-            <ListRow
-              density="compact"
-              leading={<Laptop aria-hidden="true" />}
-              title="MacBook Pro · Osaka"
-              description={'density="compact" · 最終アクセス 3日前'}
-              trailing={<Badge status="active" />}
-            />
-          </CardContent>
-        </Card>
-
-        {/* #225 — notification rows. `unread` renders the indicator dot (a SHAPE with localized
-            sr-only text, never colour alone) plus the tokenized emphasis surface; read rows keep
-            the gutter so every title stays on one optical axis. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>通知 Notifications</CardTitle>
-            <CardDescription>
-              `unread` = indicator dot + `--list-row-unread-background`; `unread={false}` = the
-              neutral `--list-row-read-background`. Zero, one or two inline trailing actions.
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <ListRow
-              unread
-              align="start"
-              overflow="wrap"
-              title="組織「グローバル・トランスフォーメーション推進本部」への招待が届いています"
-              description="2026-07-30 09:12"
-              trailing={
-                <>
-                  <Button size="xs" variant="ghost">
-                    既読にする
-                  </Button>
-                  <Button size="xs" variant="outline">
-                    開く
-                  </Button>
-                </>
-              }
-            />
-            <ListRow
-              unread
-              align="start"
-              overflow="wrap"
-              title="Yêu cầu phê duyệt hợp đồng cung cấp dịch vụ vận hành hạ tầng đám mây quý III"
-              description="2026-07-29 17:04"
-              trailing={
-                <Button size="xs" variant="outline">
-                  Mở
-                </Button>
-              }
-            />
-            <ListRow
-              unread={false}
-              align="start"
-              overflow="wrap"
-              title="Your monthly platform usage report for the Data Platform Division is ready"
-              description="2026-07-28 08:00"
-            />
-            <ListRow
-              unread={false}
-              align="start"
-              overflow="wrap"
-              title="請求書 INV-2026-0731 が発行されました"
-              description="2026-07-27 18:40"
-              trailing={<Badge tone="neutral">既読</Badge>}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/markdown.tsx

@@ -1,86 +0,0 @@
-import { Markdown, RENDERER_VERSION } from "@godxjp/markdown";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Prose,
-} from "@godxjp/ui/data-display";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
-
-const page = `# 結合テスト計画
-
-決済モジュールの請求書再発行シナリオを対象にする。詳細は[設計書](/wiki/設計/決済)を参照[^1]。
-
-## 範囲
-
-| シナリオ | 担当 | 状態 |
-|:--|:--|--:|
-| 再発行（通常） | 田中 | 完了 |
-| 再発行（税率変更後） | 佐藤 | 進行中 |
-
-- [x] テストデータ作成
-- [ ] ステージング反映
-- [ ] 受入レビュー
-
-## 流れ
-
-\`\`\`mermaid
-graph LR
-  A[申請] --> B{承認}
-  B -->|承認| C[再発行]
-  B -->|差戻し| A
-\`\`\`
-
-\`\`\`ts
-await invoices.reissue(id, { reason: "tax-rate" });
-\`\`\`
-
-[^1]: 設計書は 2026-10 版。`;
-
-const hostile = `<script>alert(1)</script>
-
-[危険なリンク](javascript:alert(1)) と ![データ画像](data:image/svg+xml;base64,PHN2Zz4=)
-
-<img src=x onerror="alert(1)">`;
-
-/**
- * @godxjp/markdown — the one Markdown renderer (gh#1108). A wiki page body rendered as the
- * published page shows it, and a hostile body rendered by the same component.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  return (
-    <PageContainer
-      title="Markdown"
-      subtitle={t("markdownDocs.subtitle", { version: String(RENDERER_VERSION) })}
-    >
-      <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="md">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("markdownDocs.page.title")}</CardTitle>
-            <CardDescription>{t("markdownDocs.page.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Prose>
-              <Markdown>{page}</Markdown>
-            </Prose>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("markdownDocs.hostile.title")}</CardTitle>
-            <CardDescription>{t("markdownDocs.hostile.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Prose>
-              <Markdown>{hostile}</Markdown>
-            </Prose>
-          </CardContent>
-        </Card>
-      </ResponsiveGrid>
-    </PageContainer>
-  );
-}