@godxjp/ui 19.0.0 → 19.2.0

package/docs/navigation/context-menu.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@godxjp/ui/navigation";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * ContextMenu — right-click action menu over a target area. Compose
+ * ContextMenu > ContextMenuTrigger + ContextMenuContent > items. Supports
+ * sub-menus, checkbox/radio items, separators, and keyboard shortcuts.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [showRuby, setShowRuby] = useState(true);
+  const [showGrid, setShowGrid] = useState(false);
+  const [sort, setSort] = useState("date");
+
+  return (
+    <PageContainer
+      title="ContextMenu"
+      subtitle="右クリックで開くコンテキストメニュー · 行・カード・エリアへのアクション"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本アクション</CardTitle>
+            <CardDescription>
+              領域を右クリックするとメニューが開きます。サブメニュー・区切り・ショートカットを含む。
+              ContextMenuItem の variant は default と destructive の 2 つ。破棄系のアクションだけを
+              destructive にする。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ContextMenu>
+              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
+                <Text tone="muted">ここを右クリックしてください</Text>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuLabel>仕訳操作</ContextMenuLabel>
+                <ContextMenuItem>
+                  編集
+                  <ContextMenuShortcut>⌘E</ContextMenuShortcut>
+                </ContextMenuItem>
+                <ContextMenuItem>
+                  複製
+                  <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuSub>
+                  <ContextMenuSubTrigger>エクスポート</ContextMenuSubTrigger>
+                  <ContextMenuSubContent>
+                    <ContextMenuItem>CSV</ContextMenuItem>
+                    <ContextMenuItem>PDF</ContextMenuItem>
+                    <ContextMenuItem>Excel</ContextMenuItem>
+                  </ContextMenuSubContent>
+                </ContextMenuSub>
+                <ContextMenuSeparator />
+                <ContextMenuItem variant="default">アーカイブに移動</ContextMenuItem>
+                <ContextMenuItem variant="destructive">
+                  削除
+                  <ContextMenuShortcut>⌫</ContextMenuShortcut>
+                </ContextMenuItem>
+              </ContextMenuContent>
+            </ContextMenu>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>チェックボックス・ラジオアイテム</CardTitle>
+            <CardDescription>
+              表示設定の切り替えに使用。CheckboxItem は個別トグル、RadioGroup は排他選択。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ContextMenu>
+              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
+                <Text tone="muted">右クリック · 表示設定</Text>
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                <ContextMenuLabel>表示オプション</ContextMenuLabel>
+                <ContextMenuCheckboxItem checked={showRuby} onCheckedChange={setShowRuby}>
+                  ルビ表示
+                </ContextMenuCheckboxItem>
+                <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+                  グリッド線
+                </ContextMenuCheckboxItem>
+                <ContextMenuSeparator />
+                <ContextMenuLabel>並び順</ContextMenuLabel>
+                <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
+                  <ContextMenuRadioItem value="date">日付順</ContextMenuRadioItem>
+                  <ContextMenuRadioItem value="amount">金額順</ContextMenuRadioItem>
+                  <ContextMenuRadioItem value="account">科目順</ContextMenuRadioItem>
+                </ContextMenuRadioGroup>
+              </ContextMenuContent>
+            </ContextMenu>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/dropdown-menu.tsx

@@ -0,0 +1,213 @@
+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 — Radix dropdown. Compose root/Trigger(asChild)/Content/Item/Separator.
+ * Use asChild on Trigger so a godx-ui Button is the real trigger (no double-button).
+ * 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="Radix dropdown · Trigger asChild + Content + Item/Separator/Sub"
+    >
+      <Flex direction="col" gap="lg">
+        {/* 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">
+              <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>
+
+        {/* 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">
+              <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>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/filter-bar.tsx

@@ -0,0 +1,227 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  SearchInput,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { FilterBar, FilterBarGroup } from "@godxjp/ui/navigation";
+
+const STATUSES = [
+  { value: "all", label: "All statuses" },
+  { value: "active", label: "Active" },
+  { value: "paused", label: "Paused" },
+];
+
+const MODEL_STATUSES = [
+  { value: "active", label: "有効" },
+  { value: "invited", label: "招待中" },
+  { value: "suspended", label: "停止" },
+];
+
+const MODEL_ROLES = [
+  { value: "member", label: "Thành viên" },
+  { value: "manager", label: "Quản lý" },
+];
+
+/** FilterBar — domain-neutral list filtering with consumer-owned state and clear behavior. */
+export default function Demo() {
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState("all");
+  const [department, setDepartment] = useState("all");
+  const [approval, setApproval] = useState("all");
+  const [period, setPeriod] = useState("all");
+  const hasActiveFilters = query !== "" || status !== "all";
+
+  // Typed model (gh#258) — ALL state is consumer data; the bar only renders it.
+  const [modelQuery, setModelQuery] = useState("田中");
+  const [modelStatus, setModelStatus] = useState("active");
+  const [modelRole, setModelRole] = useState("");
+  const modelChips = [
+    ...(modelQuery !== "" ? [{ value: "q", label: `検索: ${modelQuery}` }] : []),
+    ...(modelStatus !== ""
+      ? [
+          {
+            value: "status",
+            label: `状態: ${MODEL_STATUSES.find((s) => s.value === modelStatus)?.label ?? modelStatus}`,
+          },
+        ]
+      : []),
+    ...(modelRole !== ""
+      ? [
+          {
+            value: "role",
+            label: `Vai trò: ${MODEL_ROLES.find((r) => r.value === modelRole)?.label ?? modelRole}`,
+          },
+        ]
+      : []),
+  ];
+  const removeModelChip = (value: string) => {
+    if (value === "q") setModelQuery("");
+    if (value === "status") setModelStatus("");
+    if (value === "role") setModelRole("");
+  };
+  const clearModelFilters = () => {
+    setModelQuery("");
+    setModelStatus("");
+    setModelRole("");
+  };
+  const modelResultCount = modelChips.length === 0 ? 128 : 42 - modelChips.length * 11;
+
+  return (
+    <PageContainer
+      title="FilterBar"
+      subtitle="Search, labelled filters, active state, consumer-owned reset, and both responsive overflow strategies"
+    >
+      <Flex direction="col" gap="lg">
+        {/* Typed model (gh#258) — search/filters/chips/reset/result-count/actions as DATA.
+            The bar owns layout, token widths, chip lifecycle and keyboard order; the page owns
+            every piece of state. Remove a chip, reset, or pick a filter and watch the chips row
+            and the localized result count follow. */}
+        <Flex direction="col" gap="xs">
+          <Text size="xs" tone="muted">
+            typed model · search + filters + chips + reset + result count + actions, all
+            consumer-controlled data
+          </Text>
+          <FilterBar
+            search={{
+              value: modelQuery,
+              onValueChange: setModelQuery,
+              placeholder: "氏名・メールで検索",
+              ariaLabel: "メンバーを検索",
+            }}
+            filters={[
+              {
+                value: "status",
+                label: "ステータス",
+                options: MODEL_STATUSES,
+                selected: modelStatus,
+                onSelectedChange: setModelStatus,
+                placeholder: "すべて",
+              },
+              {
+                value: "role",
+                label: "Vai trò",
+                options: MODEL_ROLES,
+                selected: modelRole,
+                onSelectedChange: setModelRole,
+                placeholder: "Tất cả",
+              },
+            ]}
+            chips={modelChips}
+            onChipRemove={removeModelChip}
+            onClear={clearModelFilters}
+            hasActiveFilters={modelChips.length > 0}
+            resultCount={modelResultCount}
+            actions={
+              <Button size="sm">
+                <Plus aria-hidden="true" />
+                メンバーを追加
+              </Button>
+            }
+          />
+        </Flex>
+
+        {/* overflow="wrap" (default) — stacked below 640px, wrapping rows above. */}
+        <Flex direction="col" gap="xs">
+          <Text size="xs" tone="muted">
+            overflow=&quot;wrap&quot; (default) · a small filter set wraps onto extra rows
+          </Text>
+          <FilterBar
+            hasActiveFilters={hasActiveFilters}
+            onClear={() => {
+              setQuery("");
+              setStatus("all");
+            }}
+          >
+            <SearchInput
+              aria-label="Search records"
+              placeholder="Search records"
+              value={query}
+              onSearch={setQuery}
+            />
+            {/* controlId makes the visible caption the Select's real <label>. */}
+            <FilterBarGroup label="Status" controlId="fb-status">
+              <Select value={status} onValueChange={setStatus}>
+                <SelectTrigger id="fb-status">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {STATUSES.map((s) => (
+                    <SelectItem key={s.value} value={s.value}>
+                      {s.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FilterBarGroup>
+          </FilterBar>
+        </Flex>
+
+        {/* overflow="scroll" — one bounded inline-scrolling row at >= 640px. The long JA/EN/VI
+            captions are the point: with `wrap` this same set becomes a three-row strip. */}
+        <Flex direction="col" gap="xs">
+          <Text size="xs" tone="muted">
+            overflow=&quot;scroll&quot; · many filters with long JA/EN/VI labels stay on ONE bounded
+            row (still stacked below 640px)
+          </Text>
+          <FilterBar
+            overflow="scroll"
+            hasActiveFilters={department !== "all" || approval !== "all" || period !== "all"}
+            onClear={() => {
+              setDepartment("all");
+              setApproval("all");
+              setPeriod("all");
+            }}
+          >
+            <FilterBarGroup label="部署（すべての拠点を含む）" controlId="fb-department">
+              <Select value={department} onValueChange={setDepartment}>
+                <SelectTrigger id="fb-department">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">すべての部署</SelectItem>
+                  <SelectItem value="warehouse">倉庫</SelectItem>
+                </SelectContent>
+              </Select>
+            </FilterBarGroup>
+            <FilterBarGroup
+              label="Trạng thái phê duyệt của toàn bộ phòng ban"
+              controlId="fb-approval"
+            >
+              <Select value={approval} onValueChange={setApproval}>
+                <SelectTrigger id="fb-approval">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tất cả trạng thái</SelectItem>
+                  <SelectItem value="pending">Chờ phê duyệt</SelectItem>
+                </SelectContent>
+              </Select>
+            </FilterBarGroup>
+            <FilterBarGroup
+              label="Reporting period including carried-over adjustments"
+              controlId="fb-period"
+            >
+              <Select value={period} onValueChange={setPeriod}>
+                <SelectTrigger id="fb-period">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All periods</SelectItem>
+                  <SelectItem value="month">This month</SelectItem>
+                </SelectContent>
+              </Select>
+            </FilterBarGroup>
+          </FilterBar>
+        </Flex>
+      </Flex>
+    </PageContainer>
+  );
+}