@godxjp/ui 31.31.8 → 32.0.0

package/docs/navigation/conversations.tsx

@@ -1,176 +0,0 @@
-import { useState } from "react";
-
-import { ChatBubbleList, type ChatMessageProp } from "@godxjp/ui/data-display";
-import { ChatComposer } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
-import {
-  AppShell,
-  Flex,
-  MasterDetail,
-  PageContainer,
-  Sidebar,
-  type SidebarSectionProp,
-  Topbar,
-} from "@godxjp/ui/layout";
-import { Conversations, type ConversationsEntryProp } from "@godxjp/ui/navigation";
-import { Bot, MessageSquare, Pencil, Settings, Trash2, Users } from "lucide-react";
-
-/**
- * Conversations — the session rail of a chat surface (Ant Design X `Conversations`).
- *
- * This page is the whole surface gh#559 is about: the rail on the left, the feed and the composer
- * on the right. They were shipped one half at a time, and the missing half is why every consumer
- * hand-rolled a stack of full-width Buttons — one tab stop per conversation, no per-row menu, no
- * recency buckets.
- *
- * The three cards below are one axis each, at rest, so the API is visible without clicking:
- * the live surface, the recency buckets (`groupable`), and the flat rail with a divider and a
- * disabled row. 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 }] },
-];
-
-/** The rail's data, bucketed by recency — the `group` field is what `groupable` reads. */
-const HISTORY: ConversationsEntryProp[] = [
-  { key: "invoice", label: "請求書の下書きを直す", group: "今日" },
-  { key: "expense", label: "経費精算の規則をまとめる", group: "今日" },
-  { key: "travel", label: "出張手当の確認", group: "過去7日間" },
-  { key: "onboarding", label: "入社手続きのチェックリスト", group: "過去7日間" },
-  { key: "payroll", label: "給与計算の締め日について", group: "それ以前" },
-];
-
-/** A flat rail — no buckets, one rule, one archived row. */
-const FLAT: ConversationsEntryProp[] = [
-  { key: "invoice", label: "請求書の下書きを直す", icon: <MessageSquare /> },
-  { key: "expense", label: "経費精算の規則をまとめる", icon: <MessageSquare /> },
-  { type: "divider", key: "rule" },
-  { key: "archived", label: "アーカイブ済みの相談", icon: <MessageSquare />, disabled: true },
-];
-
-const TRANSCRIPT: Record<string, ChatMessageProp[]> = {
-  invoice: [
-    { id: "m1", role: "user", content: "先月分の請求書の下書きを直したいです。" },
-    {
-      id: "m2",
-      role: "assistant",
-      content: "差分は3件でした。金額、支払期日、宛名のうちどれから直しますか。",
-    },
-  ],
-  expense: [
-    { id: "m1", role: "user", content: "経費精算の規則を3行でまとめてください。" },
-    {
-      id: "m2",
-      role: "assistant",
-      content: "領収書は原本、申請は当月末まで、3万円以上は事前承認が要ります。",
-    },
-  ],
-};
-
-export default function ConversationsDoc() {
-  const [active, setActive] = useState("invoice");
-  const [draft, setDraft] = useState("");
-
-  const menu = {
-    items: [
-      { key: "rename", label: "名前を変更", icon: <Pencil /> },
-      { key: "delete", label: "削除", icon: <Trash2 />, danger: true },
-    ],
-  };
-
-  return (
-    <AppShell
-      sidebar={
-        <Sidebar
-          activeId="chat"
-          sections={sections}
-          onSelect={() => {}}
-          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
-        />
-      }
-      topbar={<Topbar />}
-    >
-      <PageContainer
-        title="会話の履歴"
-        subtitle="過去の会話を選び、名前を変更し、不要になったものを消す · チャット面の左半分。"
-      >
-        {/* THE SURFACE. The rail is the master; the feed and the composer are the detail. */}
-        <MasterDetail
-          rail="master"
-          railWidth="compact"
-          masterViewport="compact"
-          masterLabel="会話の履歴"
-          detailLabel="選択中の会話"
-          detailId="assistant-transcript"
-          master={
-            <Conversations
-              label="会話の履歴"
-              items={HISTORY}
-              activeKey={active}
-              onActiveChange={setActive}
-              groupable={{ collapsible: true }}
-              creation={{ label: "新しい会話", onClick: () => setActive("invoice") }}
-              menu={menu}
-            />
-          }
-        >
-          <Flex direction="col" gap="md">
-            <ChatBubbleList
-              label="会話"
-              className="h-96"
-              items={TRANSCRIPT[active] ?? []}
-              roles={{
-                assistant: { placement: "start", variant: "filled" },
-                user: { placement: "end" },
-              }}
-            />
-            <ChatComposer
-              aria-label="メッセージ"
-              value={draft}
-              onValueChange={setDraft}
-              onSubmit={() => setDraft("")}
-              placeholder="メッセージを入力"
-            />
-          </Flex>
-        </MasterDetail>
-
-        {/* BUCKETS, EXPANDED. `groupable` with no options groups but never collapses. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            recency buckets · groupable
-          </Text>
-          <Text size="xs" tone="muted">
-            バケットの見出しは同じローヴィング順に入るので、畳む操作もレールを離れずに届く。
-          </Text>
-          <Conversations
-            label="会話の履歴（分類のみ）"
-            items={HISTORY}
-            defaultActiveKey="travel"
-            groupable
-            menu={menu}
-          />
-        </Flex>
-
-        {/* FLAT, WITH A RULE AND A DISABLED ROW. */}
-        <Flex direction="col" gap="sm">
-          <Text size="sm" weight="medium">
-            flat rail · divider and a disabled row
-          </Text>
-          <Text size="xs" tone="muted">
-            無効な行は見えるが選べず、矢印キーの巡回からも外れる。無効なコントロールは
-            フォーカスを受け取らないため。
-          </Text>
-          <Conversations label="会話の履歴（フラット）" items={FLAT} defaultActiveKey="invoice" />
-        </Flex>
-      </PageContainer>
-    </AppShell>
-  );
-}

package/docs/navigation/dropdown-menu.tsx

@@ -1,345 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@godxjp/ui/navigation";
-import { MoreHorizontal } from "lucide-react";
-
-/**
- * DropdownMenu — react-aria dropdown. Compose root/Trigger(asChild)/Content/Item/Separator.
- * Use asChild on Trigger so a godx-ui Button is the real trigger (no double-button).
- * `trigger` picks the gestures (click / hover / contextMenu) — antd's own prop.
- * Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const [status, setStatus] = useState("draft");
-  const [showAmount, setShowAmount] = useState(true);
-  const [showPartner, setShowPartner] = useState(true);
-  const [showDate, setShowDate] = useState(false);
-
-  return (
-    <PageContainer
-      title="DropdownMenu"
-      subtitle="trigger: click / hover / contextMenu · Trigger asChild + Content + Item/Separator/Sub"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>メニュー幅</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Flex wrap gap="md">
-              {(["auto", "trigger", "sm", "md", "lg"] as const).map((width) => (
-                <DropdownMenu key={width}>
-                  <DropdownMenuTrigger asChild>
-                    <Button id={`menu-width-${width}`} variant="outline">
-                      {width}
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent width={width}>
-                    <DropdownMenuItem>編集</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-        {/* Row action menu — the most common use */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>行アクションメニュー (DataTable 行の &quot;…&quot;)</CardTitle>
-            <CardDescription>
-              DropdownMenuTrigger に asChild を付けて godx-ui Button をトリガーにする。
-              DropdownMenuItem の variant は default と destructive の 2 つ。削除だけを
-              variant=&quot;destructive&quot; にし、className で色を上書きしない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" align="center" gap="md" wrap>
-              <Text>JE-0042 · 売上計上 ¥480,000</Text>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon-sm" aria-label="行アクション">
-                    <MoreHorizontal />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem>編集</DropdownMenuItem>
-                  <DropdownMenuItem>複製</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="default">アーカイブに移動</DropdownMenuItem>
-                  <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* antd `trigger` — which gestures open the menu */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>trigger · 右クリック（コンテキストメニュー）</CardTitle>
-            <CardDescription>
-              trigger={"{"}[&quot;contextMenu&quot;]{"}"} は右クリックの位置にメニューを開き、
-              ブラウザ標準のメニューを抑止する。左クリックでは開かない。キーボードからは Shift+F10
-              または ContextMenu キーで開く（トリガーにフォーカスしてから）。専用の ContextMenu
-              コンポーネントは v23 で廃止され、これがその置き換え。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" align="center" gap="md" wrap>
-              <DropdownMenu trigger={["contextMenu"]}>
-                <DropdownMenuTrigger asChild>
-                  {/* data-axe-open="contextmenu": the gate RIGHT-clicks this before its overlay
-                      scan. It is declared here rather than on one of the click menus above
-                      because the `defaultOpen` card at the bottom of this page already holds a
-                      click-opened menu mounted at rest, so the click path is measured either way
-                      — the right-click path is the one nothing else on this page reaches. */}
-                  <Button data-axe-open="contextmenu" variant="outline">
-                    仕訳 JE-0042 を右クリック
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>編集</DropdownMenuItem>
-                  <DropdownMenuItem>複製</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>trigger · ホバーで開く</CardTitle>
-            <CardDescription>
-              trigger={"{"}[&quot;hover&quot;]{"}"} はポインタが乗ると mouseEnterDelay（既定 0.15
-              秒）後に開き、離れると mouseLeaveDelay（既定 0.1
-              秒）後に閉じる。トリガーとメニューの間の隙間を渡れるよう、閉じるのは取り消せる予約。
-              ホバーでフォーカスは移動せず、キーボードでは Enter / Space / ↓
-              で開くので、ポインタ専用にはならない。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" align="center" gap="md" wrap>
-              <DropdownMenu trigger={["hover"]}>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline">エクスポート</Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>CSV</DropdownMenuItem>
-                  <DropdownMenuItem>PDF</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <DropdownMenu trigger={["click", "contextMenu"]}>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline">クリックでも右クリックでも</Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>編集</DropdownMenuItem>
-                  <DropdownMenuItem>複製</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <DropdownMenu disabled>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline">無効（disabled）</Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuItem>編集</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Status quick-change with RadioGroup */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>RadioGroup · ステータス即時変更</CardTitle>
-            <CardDescription>
-              DropdownMenuRadioGroup + DropdownMenuRadioItem でステータスを切り替える。 Select
-              の代替。フォーム外でのインライン状態遷移に使う。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" align="center" gap="md" wrap>
-              <span className="text-sm">
-                現在のステータス:{" "}
-                <strong>
-                  {status === "draft" ? "下書き" : status === "posted" ? "承認済" : "取消済"}
-                </strong>
-              </span>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" size="sm">
-                    ステータスを変更
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuLabel>ステータス</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuRadioGroup value={status} onValueChange={setStatus}>
-                    <DropdownMenuRadioItem value="draft">下書き</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="posted">承認済</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="voided">取消済</DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        {/* Column visibility toggle */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>CheckboxItem · 列の表示 / 非表示</CardTitle>
-            <CardDescription>
-              DropdownMenuCheckboxItem で DataTable の列表示を切り替える。 checked + onCheckedChange
-              で各列の状態を管理する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  列の設定
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuLabel>表示する列</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuCheckboxItem checked={showAmount} onCheckedChange={setShowAmount}>
-                  金額
-                </DropdownMenuCheckboxItem>
-                <DropdownMenuCheckboxItem checked={showPartner} onCheckedChange={setShowPartner}>
-                  取引先
-                </DropdownMenuCheckboxItem>
-                <DropdownMenuCheckboxItem checked={showDate} onCheckedChange={setShowDate}>
-                  日付
-                </DropdownMenuCheckboxItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardContent>
-        </Card>
-
-        {/* Nested sub-menu for export */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Sub-menu · エクスポート形式の選択</CardTitle>
-            <CardDescription>
-              DropdownMenuSub + DropdownMenuSubTrigger + DropdownMenuSubContent でネスト。
-              ChevronRight は DropdownMenuSubTrigger が自動で表示する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  一括操作
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>承認</DropdownMenuItem>
-                  <DropdownMenuItem>却下</DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>エクスポート</DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent>
-                      <DropdownMenuItem>CSV</DropdownMenuItem>
-                      <DropdownMenuItem>Excel (.xlsx)</DropdownMenuItem>
-                      <DropdownMenuItem>PDF</DropdownMenuItem>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">一括削除</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardContent>
-        </Card>
-
-        {/* Avatar chip / account menu */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>アカウントメニュー · トップバーのアバターチップ</CardTitle>
-            <CardDescription>
-              DropdownMenuLabel でユーザー情報を表示し、アクションを下に並べる標準パターン。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  田中 太郎
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                <DropdownMenuLabel>
-                  <Text as="div" weight="medium">
-                    田中 太郎
-                  </Text>
-                  <Text as="div" size="xs" tone="muted">
-                    tanaka@example.co.jp
-                  </Text>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>プロフィール</DropdownMenuItem>
-                <DropdownMenuItem>設定</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">ログアウト</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardContent>
-        </Card>
-        {/* defaultOpen — OPEN ON MOUNT, on purpose, and this is the only example on the page that
-            is. A menu paints nothing until it is opened, so for as long as this page has existed
-            no sweep has ever measured a single menu pixel: that is how
-            `.ui-dropdown-menu-item[data-variant="destructive"]` — the label on a Delete row, i.e.
-            prose — kept the destructive FILL tier at 2.95:1 on dark (gh#612). Same reasoning as
-            `?toast=` in check-contrast's route list: a surface that needs an interaction is a
-            surface no gate sees. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>defaultOpen · 計測できる状態で開いておく</CardTitle>
-            <CardDescription>
-              antd の open/defaultOpen。ここだけはマウント時から開いたままにしてある。
-              閉じたメニューは 1 ピクセルも描かないので、どのスイープにも測れない。
-              destructive の行が読める色で描かれているかは、開いていて初めて測れる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DropdownMenu defaultOpen>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  仕訳アクション
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
-                <DropdownMenuItem>編集</DropdownMenuItem>
-                <DropdownMenuItem>複製</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}