@godxjp/ui 23.3.0 → 23.4.1

package/docs/data-entry/attachments.tsx

@@ -0,0 +1,160 @@
+import { useState } from "react";
+
+import { Attachments, type AttachmentsItemProp } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Bot, MessageSquare, Paperclip, Settings, Users } from "lucide-react";
+
+/**
+ * Attachments — the file collection that rides a chat surface (Ant Design X `Attachments`).
+ *
+ * Last of the #559 series. Every slot on this page is one Ant X axis at rest: the empty
+ * placeholder, a settled list, the three `overflow` modes, an upload in flight, a failed upload,
+ * and the disabled strip.
+ *
+ * The field names are antd's (`uid`, `name`, `size`, `status`, `percent`, `thumbUrl`,
+ * `originFileObj`) so an Ant X call site compiles here unchanged.
+ *
+ * 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 settled: AttachmentsItemProp[] = [
+  { uid: "1", name: "請求書_2026-03.pdf", size: 182_400, status: "done" },
+  { uid: "2", name: "経費明細.xlsx", size: 44_120, status: "done" },
+];
+
+const inFlight: AttachmentsItemProp[] = [
+  { uid: "3", name: "会議録画.mp4", size: 78_300_000, status: "uploading", percent: 42 },
+];
+
+const failed: AttachmentsItemProp[] = [
+  { uid: "4", name: "契約書_原本.pdf", size: 2_400_000, status: "error" },
+];
+
+const many: AttachmentsItemProp[] = Array.from({ length: 6 }, (_, i) => ({
+  uid: `m${i}`,
+  name: `添付_${i + 1}.pdf`,
+  size: 12_000 * (i + 1),
+  status: "done" as const,
+}));
+
+export default function AttachmentsDoc() {
+  const [items, setItems] = useState<AttachmentsItemProp[]>(settled);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chat"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={<Topbar />}
+    >
+      <PageContainer
+        title="添付ファイル"
+        subtitle="Attachments · チャットに載せるファイルの束（Ant Design X）"
+      >
+        {/* EMPTY. The placeholder is the whole control when there is nothing yet: one button,
+            one accessible name, and a drop target that is the same box. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            空のとき · placeholder
+          </Text>
+          <Attachments items={[]} />
+        </Flex>
+
+        {/* THE CONTROLLED LIST. `onChange` carries antd's `{ file, fileList }`, so the removed
+            row arrives as `file` with status "removed" and `fileList` is what remains. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            items · onChange · onRemove
+          </Text>
+          <Attachments
+            items={items}
+            onRemove={() => true}
+            onChange={({ fileList }) => setItems(fileList)}
+          />
+          <Text size="xs" tone="muted">
+            残り {items.length} 件。× を押すと `onChange` が `{"{ file, fileList }"}` で届く。
+          </Text>
+        </Flex>
+
+        {/* STATUS. Uploading carries a determinate Progress; error states the failure in words,
+            not only in tint. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            status · uploading と error
+          </Text>
+          <Attachments items={inFlight} />
+          <Attachments items={failed} />
+        </Flex>
+
+        {/* OVERFLOW. Three modes, same six items — what happens when the row runs out of box. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            overflow · wrap
+          </Text>
+          <Attachments items={many} overflow="wrap" />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            overflow · scrollX
+          </Text>
+          <Attachments items={many} overflow="scrollX" />
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            overflow · scrollY
+          </Text>
+          <Attachments items={many} overflow="scrollY" />
+        </Flex>
+
+        {/* PLACEHOLDER, OVERRIDDEN. An object, or a function of "inline" | "drop". */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            placeholder · 自分の文言
+          </Text>
+          <Attachments
+            items={[]}
+            placeholder={{
+              icon: <Paperclip />,
+              title: "証憑を添付",
+              description: "領収書・請求書・契約書。PDF と画像に対応します。",
+            }}
+          />
+        </Flex>
+
+        {/* DISABLED. The strip stays readable; nothing in it is reachable. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            disabled
+          </Text>
+          <Attachments items={settled} disabled />
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/feedback/dialog.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import {
   Dialog,
+  DialogAction,
+  DialogCancel,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -8,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@godxjp/ui/feedback";
+import { FormField, Textarea } from "@godxjp/ui/data-entry";
 import {
   Badge,
   Card,
@@ -40,6 +43,8 @@ export default function Demo() {
   const [detailOpen, setDetailOpen] = useState(false);
   const [toneOpen, setToneOpen] = useState(false);
   const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
+  const [terminateOpen, setTerminateOpen] = useState(false);
+  const [reason, setReason] = useState("");
 
   return (
     <PageContainer
@@ -187,6 +192,51 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Destructive confirmation with a required field</CardTitle>
+            <CardDescription>
+              variant is the one prop that decides three things that always travel together: the
+              ARIA role, whether an outside click dismisses, and the primary action emphasis.
+              variant=&quot;destructive&quot; renders role=&quot;alertdialog&quot;, ignores an
+              outside click and tints DialogAction, while the surface stays a plain Dialog, so a
+              required input can sit inside it. That combination used to need a rewrite: Dialog had
+              the form but lost the role, AlertDialog had the role but its parts assume a two-button
+              body. Escape still closes, exactly as the AlertDialog family already does.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Dialog open={terminateOpen} onOpenChange={setTerminateOpen} variant="destructive">
+              <DialogTrigger asChild>
+                <Button variant="destructive" size="sm">
+                  提携を終了
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-md">
+                <DialogHeader
+                  tone="destructive"
+                  title="提携を終了しますか？"
+                  subtitle="この操作は元に戻せません。終了理由は監査ログに残ります。"
+                />
+                <FormField id="termination-reason" label="終了理由" required>
+                  <Textarea
+                    id="termination-reason"
+                    value={reason}
+                    onChange={(event) => setReason(event.target.value)}
+                    placeholder="契約違反の内容を記載してください"
+                  />
+                </FormField>
+                <DialogFooter>
+                  <DialogCancel asChild>
+                    <Button variant="ghost">キャンセル</Button>
+                  </DialogCancel>
+                  <DialogAction disabled={reason.trim().length === 0}>終了する</DialogAction>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/general/actions.tsx

@@ -0,0 +1,175 @@
+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/float-button.tsx

@@ -0,0 +1,133 @@
+import type { CSSProperties } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FloatButton, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { MessageCircle, Printer, Share2 } from "lucide-react";
+
+/** One row up from the corner: the control's own height plus one stack step, both tokens. */
+const STEP_UP = "calc(var(--space-stack-xl) + var(--control-height-lg) + var(--space-stack-md))";
+/** Two rows up. */
+const STEP_UP_TWICE =
+  "calc(var(--space-stack-xl) + (var(--control-height-lg) + var(--space-stack-md)) * 2)";
+
+/**
+ * FloatButton — Ant Design のコーナーアクションを 100% 移植したもの（antd 6.6.3）。
+ *
+ * ページの内容ではないが常に手の届く場所にあるべき道具のための、ビューポートに固定された操作子。
+ * `Button` はレイアウトの流れの中にあるので、隅に留めるには呼び出し側が `position: fixed` を書く
+ * しかなく、それは `ui-audit` が止める（gh#558）。`Popover` はパネルの位置を決めるもので、
+ * トリガーの位置は決めない。`Banner` は全幅の帯であって隅の印ではない。
+ *
+ * 隅までの距離は `--float-button-offset-block-end` / `--float-button-offset-inline-end`。
+ * 下部に固定バーがあるサービスは、メディアクエリではなくトークン 1 つで印を動かす。
+ *
+ * このフレームは実際に固定表示される要素を含むため、画面の右下に印が重なって見える。
+ * それが正しい姿で、そこが FloatButton の唯一の居場所である。
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="FloatButton"
+      subtitle="ビューポートの隅に固定される操作子 · Group と BackTop つき"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>単体のボタン</CardTitle>
+            <CardDescription>
+              画面右下に丸い印が 1 つ出ている。`tooltip` を文字列で渡すと、それがアクセシブル名にも
+              なる —— アイコンだけの操作子に名前がないのは WCAG 4.1.2 違反であり、ツールチップは
+              タッチの利用者には決して届かないため。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Text size="sm" tone="muted">
+                type=&quot;primary&quot; はブランド塗り、type=&quot;default&quot; は面とヘアライン。
+                antd の語をそのまま使っている（この Library の他の場所では variant と呼ぶもの）。
+              </Text>
+              <Text size="sm" tone="muted">
+                badge は count / dot / overflowCount / showZero を取る。count が overflowCount を
+                超えると &quot;99+&quot; になる。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Group · 積み重ねか、1 つのトリガーの後ろか</CardTitle>
+            <CardDescription>
+              `trigger` がその切り替えスイッチ。渡さなければ全部のボタンが見えたままの素の積み重ね、
+              渡せば子はトリガーの後ろに畳まれ、click か hover で開く。`placement` は top / left /
+              right / bottom。left と right は `inset-inline-*` で解決されるので、
+              dir=&quot;rtl&quot; では画面上の向きが正しく反転する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Text size="sm" tone="muted">
+              Group のルート要素は `pointer-events: none`、ボタンだけが `auto`。タッチ画面で、
+              ボタンとボタンの隙間に落ちたスワイプがページのスクロールを殺さないため。
+            </Text>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>BackTop</CardTitle>
+            <CardDescription>
+              `visibilityHeight`（既定 400px）だけ下ったところで現れ、`duration`（既定 450ms）で
+              上まで戻す。`prefers-reduced-motion` では瞬時に移動する（WCAG 2.3.3）。 `target`
+              に「その要素を返す関数」を渡せば、document ではなくその要素を見張る —— 自前の
+              スクロール領域を持つシェルの中でも使えるのはこのため。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Text size="sm" tone="muted">
+              `showProgress` を付けると、どこまで読んだかをリングで描く。1 フレームごとに変わる値は
+              カスタムプロパティ 1 つだけで、呼び出し側に数値は 1 つも出てこない。
+            </Text>
+          </CardContent>
+        </Card>
+      </Flex>
+
+      {/*
+        実運用の画面に浮くボタンは 1 つである。このフレームは 3 つの形を同時に見せるため、
+        2 つ目と 3 つ目を 1 段ずつ上にずらしてある —— そして、そのずらし方こそが gh#558 の求めた
+        ものである: メディアクエリでも呼び出し側の px でもなく、トークンを 1 つ上書きするだけ。
+        段の高さはボタンの高さ + 段間で、どちらもトークンなので密度を変えても崩れない。
+      */}
+      <FloatButton
+        tooltip="アシスタントに聞く"
+        type="primary"
+        icon={<MessageCircle />}
+        badge={{ count: 3 }}
+      />
+
+      <FloatButton.Group
+        trigger="hover"
+        placement="left"
+        aria-label="その他の操作"
+        style={
+          {
+            "--float-button-offset-block-end": STEP_UP,
+          } as CSSProperties
+        }
+      >
+        <FloatButton tooltip="共有" icon={<Share2 />} />
+        <FloatButton tooltip="印刷" icon={<Printer />} />
+      </FloatButton.Group>
+
+      <FloatButton.BackTop
+        visibilityHeight={0}
+        showProgress
+        style={
+          {
+            "--float-button-offset-block-end": STEP_UP_TWICE,
+          } as CSSProperties
+        }
+      />
+    </PageContainer>
+  );
+}

package/docs/general/typography.tsx

@@ -1,5 +1,14 @@
 import { useTranslation } from "@godxjp/ui/i18n";
-import { Button, Heading, Text, VisuallyHidden } from "@godxjp/ui/general";
+import {
+  Button,
+  Heading,
+  Link,
+  Paragraph,
+  Text,
+  Title,
+  Typography,
+  VisuallyHidden,
+} from "@godxjp/ui/general";
 import {
   Card,
   CardContent,
@@ -231,6 +240,59 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>antd Typography · Title / Paragraph / Link</CardTitle>
+            <CardDescription>
+              antd の Typography をそのまま移植したもの。Text と Heading は変わらず、Title は 5
+              段階、Paragraph は rows 付きの ellipsis、Link は target=&quot;_blank&quot; に rel
+              を自動で付けます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Typography>
+                <Title level={3}>請求サマリー</Title>
+                <Paragraph>今月の請求は 3 件です。明細は各行のリンクから確認できます。</Paragraph>
+                <Link href="#typography">変更履歴を見る</Link>
+              </Typography>
+
+              <Title level={5}>内訳（level 5 · Heading にはない段）</Title>
+
+              <Paragraph ellipsis={{ rows: 2, expandable: true }}>
+                ログイン画面の余白が狭く、パスワード再設定リンクが本文と重なって見えます。
+                発生条件は 390px 幅の端末で、日本語ロケールのときのみです。
+                再現手順とスクリーンショットは添付の通りです。
+              </Paragraph>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>copyable · editable · 装飾</CardTitle>
+            <CardDescription>
+              antd の copyable / editable と、7 つの装飾フラグ。装飾は本物の要素を包むので、意味が
+              スクリーンリーダーにも届きます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Text mono copyable>
+                RC-204881
+              </Text>
+              <Text editable>案件名をここで直接編集できます</Text>
+              <Text type="secondary">
+                type=&quot;secondary&quot;（tone=&quot;muted&quot; と同じ軸）
+              </Text>
+              <Text disabled>disabled · 使えないことを示します</Text>
+              <Text>
+                <Text code>npm run build</Text> と <Text keyboard>Ctrl</Text> +{" "}
+                <Text keyboard>S</Text>、<Text mark>強調</Text>、<Text delete>取り消し</Text>、
+                <Text strong>強い</Text>、<Text italic>斜体</Text>
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>{t("textExamples.preservedText")}</CardTitle>