@godxjp/ui 31.31.8 → 32.0.0

package/docs/foundation/typography.tsx

@@ -1,147 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Typography · design-token foundation. Real semantic <h1>-<h6> elements (no
- * faked sizes): the base heading layer renders the reference-design scale and keeps
- * the document outline SEO/accessibility correct. Composed only from real
- * @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Typography"
-      subtitle="Noto Sans JP (M PLUS 2 fallback) · 14 / 1.7 body · headings 20/18/14/13 @ 500 · three weights only"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Heading scale</CardTitle>
-            <CardDescription>
-              h1 20 / h2 18 / h3 14 / h4-h6 13px, weight 500 (h5/h6 collapse to 13px). SEO/a11y:
-              exactly one &lt;h1&gt; per page (the page title above); h2-h6 below never skip a
-              level.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="xs">
-              <h2>&lt;h2&gt; 見出し · section heading · 18px / 500</h2>
-              <h3>&lt;h3&gt; 見出し · subsection · 14px / 500</h3>
-              <h4>&lt;h4&gt; 見出し · minor heading · 13px / 500</h4>
-              <h5>&lt;h5&gt; 見出し · 13px / 500</h5>
-              <h6>&lt;h6&gt; 見出し · 13px / 500</h6>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Body & weights</CardTitle>
-            <CardDescription>
-              Default body 14px / 1.7 (間 ma); dense tables 13px / 1.5. Three weights only · 400
-              body, 500 heading/label, 700 emphasis. NO 300, NO 600.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <p className="text-sm">
-                本文 14px / 1.7 · 漢字の密度に合わせて行間を広めに取り、読み疲れを抑えます。Body
-                copy mixes 日本語 and Latin without breaking rhythm.
-              </p>
-              <Flex direction="col" gap="xs">
-                <p className="text-sm font-normal">400 normal · 通常の本文 · regular body</p>
-                <p className="text-sm font-medium">
-                  500 medium · 見出し・ラベル · headings, labels
-                </p>
-                <p className="text-sm font-bold">700 bold · 強調のみ · emphasis only</p>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Tabular figures</CardTitle>
-            <CardDescription>
-              tabular-nums on every numeric column / large stat so digits align under 1.7 leading.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="xs">
-              <span className="text-2xl tabular-nums">¥1,284,500 · tabular ✓</span>
-              <span className="text-2xl normal-nums">¥1,284,500 · proportional ✗</span>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Size scale</CardTitle>
-            <CardDescription>
-              Six steps on the JP-dense base. text-sm (14px) is body; text-base+ are for stats /
-              large numerals, not running copy.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="xs">
-              <p className="text-xs">text-xs · 13px · 補足・密なテーブル</p>
-              <p className="text-sm">text-sm · 14px · 本文 body</p>
-              <p className="text-base">text-base · 15px · やや大きい本文</p>
-              <p className="text-lg">text-lg · 19px · リード文 lead</p>
-              <p className="text-xl">text-xl · 22px · 小見出し統計</p>
-              <p className="text-2xl">text-2xl · 26px · 大きな統計値</p>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Font family</CardTitle>
-            <CardDescription>
-              font-sans · Noto Sans JP by default (Japanese + Latin, incl. the Vietnamese subset); M
-              PLUS 2 is the fallback face for every supported locale. font-mono · the UI-monospace
-              stack for code, IDs and aligned digits.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <p className="font-sans text-sm">
-                春はあけぼの · Số hóa văn bản · The quick brown fox jumps over the lazy dog
-                0123456789
-              </p>
-              <code className="font-mono text-sm">
-                const id = &quot;EMP-2025-001&quot;; // 0123456789 IlO0
-              </code>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Line height</CardTitle>
-            <CardDescription>
-              tight 1.25 · headings · normal 1.5 · dense tables · body 1.7 · running 日本語/Latin
-              copy (the default applied to &lt;body&gt;).
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <p className="text-sm leading-tight">
-                tight 1.25 · 見出し向けの詰めた行間。Compact leading for headings and single-line
-                labels where vertical rhythm should stay tight.
-              </p>
-              <p className="text-sm leading-normal">
-                normal 1.5 · 密なテーブル向け。Slightly looser for dense tables and metadata where
-                rows must stay scannable but not cramped.
-              </p>
-              <p className="text-sm leading-[var(--line-height-body)]">
-                body 1.7 · 本文向け。Generous leading for running mixed 日本語 and Latin copy so the
-                kanji density never reads as a wall of text.
-              </p>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/general/actions.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-
-import { ChatBubble } from "@godxjp/ui/data-display";
-import {
-  Actions,
-  ActionsCopy,
-  ActionsFeedback,
-  ActionsItem,
-  type ActionsFeedbackValueProp,
-  Text,
-} from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import {
-  Bot,
-  Flag,
-  MessageSquare,
-  RefreshCw,
-  Settings,
-  Share2,
-  Users,
-  Volume2,
-} from "lucide-react";
-
-/**
- * Actions — the strip of actions under an assistant message (Ant Design X `Actions`).
- *
- * Every card is one axis at rest. The first shows the strip where it belongs, under a real
- * `ChatBubble`; the rest are the three variants, the `subItems` menu, the four `ActionsItem`
- * statuses, and the two ready-made actions (`ActionsCopy`, `ActionsFeedback`).
- *
- * The strip is a WAI-ARIA toolbar: one Tab reaches it, the arrows move inside it. Ant X's own
- * strip is a row of `<div onClick>` and cannot be reached from the keyboard at all.
- *
- * 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 }] },
-];
-
-const ANSWER = "差分は3件でした。金額、支払期日、宛名のうちどれから直しますか。";
-
-export default function ActionsDoc() {
-  const [vote, setVote] = useState<ActionsFeedbackValueProp>("default");
-  const [log, setLog] = useState("まだ何も押されていません。");
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chat"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="回答の操作"
-        subtitle="Actions · 一つの回答にぶら下がる操作の帯。Tab は一回、中は矢印キー。"
-      >
-        {/* WHERE IT BELONGS: under the answer it acts on. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            in place · 回答の下
-          </Text>
-          <ChatBubble placement="start" variant="filled">
-            {ANSWER}
-          </ChatBubble>
-          <Actions
-            label="回答の操作"
-            items={[
-              { key: "retry", label: "やり直す", icon: <RefreshCw /> },
-              { key: "copy", actionRender: <ActionsCopy text={ANSWER} /> },
-              {
-                key: "feedback",
-                actionRender: <ActionsFeedback value={vote} onChange={setVote} />,
-              },
-              {
-                key: "more",
-                label: "その他",
-                subItems: [
-                  { key: "share", label: "共有", icon: <Share2 /> },
-                  { key: "report", label: "報告", icon: <Flag />, danger: true },
-                ],
-              },
-            ]}
-            onClick={({ key, keyPath }) => setLog(`${key} — keyPath: ${keyPath.join(" ← ")}`)}
-          />
-          <Text size="xs" tone="muted">
-            {log}
-          </Text>
-        </Flex>
-
-        {/* THE THREE VARIANTS. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            variant · borderless · filled · outlined
-          </Text>
-          <Actions
-            label="borderless の例"
-            variant="borderless"
-            items={[
-              { key: "a", label: "やり直す", icon: <RefreshCw /> },
-              { key: "b", label: "共有", icon: <Share2 /> },
-            ]}
-          />
-          <Actions
-            label="filled の例"
-            variant="filled"
-            items={[
-              { key: "a", label: "やり直す", icon: <RefreshCw /> },
-              { key: "b", label: "共有", icon: <Share2 /> },
-            ]}
-          />
-          <Actions
-            label="outlined の例"
-            variant="outlined"
-            items={[
-              { key: "a", label: "やり直す", icon: <RefreshCw /> },
-              { key: "b", label: "共有", icon: <Share2 /> },
-            ]}
-          />
-        </Flex>
-
-        {/* ACTIONSITEM — the four statuses, side by side. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            ActionsItem · status
-          </Text>
-          <Text size="xs" tone="muted">
-            状態は字にもなる。読み上げのボタン名に「実行中」「失敗」が入るので、
-            アイコンの差し替えだけに頼らない。
-          </Text>
-          <Flex gap="sm">
-            <ActionsItem defaultIcon={<Volume2 />} label="読み上げ" />
-            <ActionsItem defaultIcon={<Volume2 />} label="読み上げ" status="running" />
-            <ActionsItem defaultIcon={<Volume2 />} label="読み上げ" status="loading" />
-            <ActionsItem defaultIcon={<Volume2 />} label="読み上げ" status="error" />
-          </Flex>
-        </Flex>
-
-        {/* THE TWO READY-MADE ACTIONS, alone. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            ActionsCopy · ActionsFeedback
-          </Text>
-          <Text size="xs" tone="muted">
-            どちらも両方のボタンが画面に残る。押した側は aria-pressed
-            で示され、押していない側が消えることはない。
-          </Text>
-          <Flex gap="sm">
-            <ActionsCopy text={ANSWER} />
-            <ActionsFeedback value={vote} onChange={setVote} />
-          </Flex>
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/general/activity.tsx

@@ -1,289 +0,0 @@
-import { Activity, Heading, Text } from "@godxjp/ui/general";
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Textarea } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
-
-/**
- * Activity · the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
- * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance.
- *
- * Reads the DS motion tokens (`--activity-interval`, `--activity-stagger-step`,
- * `--activity-mark-offset`, `--activity-color`, `--ease-standard`) so a consumer never hand-rolls a
- * looping `@keyframes` + its own `prefers-reduced-motion` guard. Under reduced motion the loop is
- * dropped and each mark falls back to a DESIGNED resting state · three solid dots, a solid pulse
- * mark, a bar segment parked at the reading-start · never to nothing.
- *
- * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
- */
-
-const MESSAGES = [
-  { id: "m1", who: "田中", initials: "田", body: "在庫の締めは今日の18時でお願いします。" },
-  { id: "m2", who: "佐藤", initials: "佐", body: "了解しました。倉庫Bの棚卸しを先に片付けます。" },
-  { id: "m3", who: "田中", initials: "田", body: "助かります。差異があれば共有してください。" },
-];
-
-const TONES = [
-  { tone: "muted", label: "muted · 既定（環境音）" },
-  { tone: "default", label: "default · 前景色" },
-  { tone: "primary", label: "primary · 主要導線" },
-  { tone: "success", label: "success · 接続中" },
-  { tone: "warning", label: "warning · 再接続中" },
-  { tone: "destructive", label: "destructive · 録画中" },
-  { tone: "info", label: "info · 同期中" },
-] as const;
-
-const SIZES = [
-  { size: "xs", label: "xs" },
-  { size: "sm", label: "sm（既定）" },
-  { size: "md", label: "md" },
-  { size: "lg", label: "lg" },
-] as const;
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Activity"
-      subtitle="環境モーション（無限ループ）· モーショントークン準拠 · prefers-reduced-motion で静止フレームに退避"
-    >
-      <Flex direction="col" gap="lg">
-        {/* ── The real screen: a channel with a live typing affordance under the composer ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>#倉庫-運用</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              {/* Ambient sync state at the top of the channel · the same primitive, `bar` mark. */}
-              <Activity variant="bar" tone="info" label="同期中…" />
-
-              {MESSAGES.map((message) => (
-                <Flex key={message.id} direction="row" gap="sm" align="start">
-                  <Avatar>
-                    <AvatarFallback>{message.initials}</AvatarFallback>
-                  </Avatar>
-                  <Flex direction="col" gap="xs">
-                    <Text weight="medium">{message.who}</Text>
-                    <Text tone="muted">{message.body}</Text>
-                  </Flex>
-                </Flex>
-              ))}
-
-              <Separator />
-
-              {/*
-               * The typing affordance. `announce` is left at its default `false`: typing flickers
-               * on and off with every socket event, and a live region there re-announces
-               * continuously. The row sits ABOVE the composer and keeps its own height, so the
-               * composer does not jump when the indicator appears or disappears.
-               */}
-              <Activity label="佐藤さんが入力しています…" />
-
-              <Textarea aria-label="メッセージを入力" placeholder="メッセージを入力…" rows={2} />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── variant × every union value ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>variant · 3 つのマーク</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  dots（既定）· 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
-                </Text>
-                <Activity variant="dots" label="佐藤さんが入力しています…" />
-              </Flex>
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  pulse · 単一の呼吸するマーク。ライブ / 録画中。
-                </Text>
-                <Activity variant="pulse" tone="destructive" label="録画中" />
-              </Flex>
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  bar · 不確定スイープ。同期中 / ストリーミング中。
-                </Text>
-                <Activity variant="bar" tone="info" label="仕訳を同期しています…" />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── size × every union value ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · マークとラベルが同時にスケール</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              {SIZES.map((step) => (
-                <Activity key={step.size} size={step.size} label={`入力中… (${step.label})`} />
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── tone × every union value ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>tone · 意味づけされた配色（既定は muted）</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              {TONES.map((entry) => (
-                <Activity key={entry.tone} tone={entry.tone} label={entry.label} />
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* ── children / label / announce ── */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>ラベルと読み上げ</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  label のみ ·
-                  マークの隣に可視テキストとして描画される。アニメーションだけで意味を運ばせない。
-                </Text>
-                <Activity label="佐藤さんが入力しています…" />
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  children + label · children が可視スロットを持ち、label は sr-only の説明になる。
-                </Text>
-                <Activity label="佐藤さんが入力しています…">
-                  <Text size="xs" tone="muted">
-                    <Text as="strong" size="xs" weight="medium">
-                      佐藤
-                    </Text>
-                    ほか 2 名
-                  </Text>
-                </Activity>
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  announce=&quot;polite&quot; · ライブリージョンは label だけを包む。既定は
-                  false（リージョンを一切出さない）。ソケットのたびに読み上げが走る面では使わないこと。
-                </Text>
-                <Activity announce="polite" tone="warning" label="接続を再試行しています…" />
-              </Flex>
-
-              <Flex direction="col" gap="xs">
-                <Text size="xs" tone="muted">
-                  label なし · 装飾のみ。支援技術には何も伝わらないので、意味を持つ場面では必ず
-                  label を渡す。
-                </Text>
-                <Activity variant="pulse" />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/*
-         * gh#830 — "there is no standalone spinner". There is; this is it. What was missing was
-         * the signpost, so it lives here, on the page someone lands on.
-         */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>スピナーを探して来た場合（antd Spin との対応）</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Text tone="muted">
-                antd の Spin は spinning という真偽値ひとつで 4
-                つの異なる状況を兼ねている。ここではそれが 4
-                つの別コンポーネントになっている。見た目ではなく、支援技術に対する意味が
-                それぞれ違うからで、形（「丸いやつが欲しい」）で選ぶと、常駐インジケータが
-                スクリーンリーダーに「このページはずっと処理中です」と言い続けることになる。
-              </Text>
-
-              <Flex direction="col" gap="sm">
-                <Flex direction="col" gap="xs">
-                  <Text weight="medium">1 · どこか別の場所で、無期限に、何かが起きている</Text>
-                  <Text size="xs" tone="muted">
-                    → この Activity。既定ではライブリージョンを一切出さない。
-                  </Text>
-                  <Activity variant="bar" tone="info" label="同期中…" />
-                </Flex>
-
-                <Separator />
-
-                <Flex direction="col" gap="xs">
-                  <Text weight="medium">2 · この領域の「中身」が読み込み中</Text>
-                  <Text size="xs" tone="muted">
-                    → Skeleton（aria-busy + aria-live と、形のあるプレースホルダ）。これが antd Spin
-                    の ラッパー形態（&lt;Spin spinning&gt;{"{children}"}&lt;/Spin&gt;）に当たる。
-                    クエリのライフサイクル全体（skeleton → 前提未充足 → 空 →
-                    エラー、原因別の再試行つき）なら DataState。
-                  </Text>
-                </Flex>
-
-                <Separator />
-
-                <Flex direction="col" gap="xs">
-                  <Text weight="medium">3 · 「この操作」が実行中</Text>
-                  <Text size="xs" tone="muted">
-                    → Button の loading。aria-busy はコントロール自身に付き、起動もブロックされる。
-                  </Text>
-                </Flex>
-
-                <Separator />
-
-                <Flex direction="col" gap="xs">
-                  <Text weight="medium">4 · 進捗の数値が分かっている</Text>
-                  <Text size="xs" tone="muted">
-                    → Progress。数値が分からないときが Activity の bar
-                    で、それがこの体系の不確定インジケータ。円が回る形ではなく走るバーなのは、
-                    システムとして決めたことであって、欠落ではない。antd の percent=&quot;auto&quot;
-                    （100% に決して到達しない合成の進捗率）は意図的に移植していない。
-                    分からない待ち時間に作った数字を被せるのは、確定に見える嘘だから。
-                  </Text>
-                </Flex>
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>prefers-reduced-motion</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="sm">
-              <Heading level={3}>静止フレームは「設計されたもの」であって「無」ではない</Heading>
-              <Text tone="muted">
-                OS
-                のモーション低減設定では、ループを止めるだけでマークは可視の休止状態に落ちる。dots
-                は 3 点が実体のまま並ぶ静的な省略記号、pulse は塗りつぶしのマーク、bar
-                は読み始め側に停めたセグメント（満杯にすると「完了」に読めてしまう）。ラベルはどちらの場合も可視テキストなので、意味は必ず伝わる。レイアウトシフトも起きない（WCAG
-                2.2 SC 2.3.3 / SC 2.2.2）。
-              </Text>
-              <Text tone="muted">
-                テーマ側のつまみ: --activity-interval · --activity-stagger-step ·
-                --activity-mark-size · --activity-mark-offset · --activity-mark-rest-alpha ·
-                --activity-pulse-mark-size · --activity-gap · --activity-font-size · --activity-bar
-                · --activity-color（--duration-loop がループ全体の基準間隔）。
-              </Text>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}