@godxjp/ui 19.1.0 → 19.2.0

package/docs/navigation/menubar.tsx

@@ -0,0 +1,141 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@godxjp/ui/navigation";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Menubar — アプリトップバー型メニュー。MenubarMenu > MenubarTrigger +
+ * MenubarContent > items で構成。チェック・ラジオ・サブメニュー・ショートカット対応。
+ * デスクトップ風のコマンドパレットや会計ソフトのツールバーに最適。
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [autoSave, setAutoSave] = useState(true);
+  const [showRuler, setShowRuler] = useState(false);
+  const [theme, setTheme] = useState("light");
+
+  return (
+    <PageContainer
+      title="Menubar"
+      subtitle="アプリケーションメニューバー · デスクトップ風のコマンドメニュー"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>会計アプリメニュー</CardTitle>
+            <CardDescription>
+              ファイル・編集・表示・ヘルプメニューを含む標準的なアプリメニューバー。MenubarItem の
+              variant は default と destructive の 2 つ。編集メニューの末尾で両方を並べている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Menubar>
+              <MenubarMenu>
+                <MenubarTrigger>ファイル</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    新規仕訳
+                    <MenubarShortcut>⌘N</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    開く
+                    <MenubarShortcut>⌘O</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarSub>
+                    <MenubarSubTrigger>エクスポート</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      <MenubarItem>仕訳帳 CSV</MenubarItem>
+                      <MenubarItem>試算表 PDF</MenubarItem>
+                      <MenubarItem>貸借対照表 Excel</MenubarItem>
+                    </MenubarSubContent>
+                  </MenubarSub>
+                  <MenubarSeparator />
+                  <MenubarItem>
+                    終了
+                    <MenubarShortcut>⌘Q</MenubarShortcut>
+                  </MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>編集</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>
+                    元に戻す
+                    <MenubarShortcut>⌘Z</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    やり直す
+                    <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>
+                    コピー
+                    <MenubarShortcut>⌘C</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarItem>
+                    貼り付け
+                    <MenubarShortcut>⌘V</MenubarShortcut>
+                  </MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem variant="default">選択行をアーカイブ</MenubarItem>
+                  <MenubarItem variant="destructive">
+                    選択行を削除
+                    <MenubarShortcut>⌫</MenubarShortcut>
+                  </MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>表示</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarLabel>オプション</MenubarLabel>
+                  <MenubarCheckboxItem checked={autoSave} onCheckedChange={setAutoSave}>
+                    自動保存
+                  </MenubarCheckboxItem>
+                  <MenubarCheckboxItem checked={showRuler} onCheckedChange={setShowRuler}>
+                    ルーラーを表示
+                  </MenubarCheckboxItem>
+                  <MenubarSeparator />
+                  <MenubarLabel>テーマ</MenubarLabel>
+                  <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+                    <MenubarRadioItem value="light">ライト</MenubarRadioItem>
+                    <MenubarRadioItem value="dark">ダーク</MenubarRadioItem>
+                    <MenubarRadioItem value="system">システム</MenubarRadioItem>
+                  </MenubarRadioGroup>
+                </MenubarContent>
+              </MenubarMenu>
+
+              <MenubarMenu>
+                <MenubarTrigger>ヘルプ</MenubarTrigger>
+                <MenubarContent>
+                  <MenubarItem>ドキュメント</MenubarItem>
+                  <MenubarItem>キーボードショートカット</MenubarItem>
+                  <MenubarSeparator />
+                  <MenubarItem>バージョン情報</MenubarItem>
+                </MenubarContent>
+              </MenubarMenu>
+            </Menubar>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/navigation-menu.tsx

@@ -0,0 +1,165 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "@godxjp/ui/navigation";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Text } from "@godxjp/ui/general";
+
+/**
+ * NavigationMenu — 水平ナビゲーションメニュー。Trigger でドロップダウン展開、
+ * Link で直接ページ遷移。NavigationMenu > NavigationMenuList >
+ * NavigationMenuItem > Trigger + Content で構成。Viewport で浮動パネルを制御。
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="NavigationMenu"
+      subtitle="水平ナビゲーション · トリガー展開コンテンツ・リンク・ビューポートをサポート"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>会計モジュールナビゲーション</CardTitle>
+            <CardDescription>
+              各メニュートリガーをホバーするとコンテンツパネルが展開します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <NavigationMenu>
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>会計</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    {/* ui-audit-disable-next-line no-arbitrary-size — NavigationMenu flyout panel width (demo layout) */}
+                    <ul className="grid gap-2 p-4 md:w-[400px] md:grid-cols-2">
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            仕訳入力
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            借方・貸方を直接入力して仕訳を作成します。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            仕訳帳
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            全仕訳の一覧・検索・フィルタリング。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            総勘定元帳
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            勘定科目ごとの残高・取引履歴。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            試算表
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            期間指定で借方・貸方の合計を確認。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>レポート</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    {/* ui-audit-disable-next-line no-arbitrary-size — NavigationMenu flyout panel width (demo layout) */}
+                    <ul className="grid gap-2 p-4 md:w-[360px]">
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            貸借対照表
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            特定日時点の資産・負債・純資産。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            損益計算書
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            期間中の収益・費用・利益の要約。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                      <li>
+                        <NavigationMenuLink
+                          href="#"
+                          className="hover:bg-accent block rounded-md p-3"
+                        >
+                          <Text as="div" weight="medium">
+                            キャッシュフロー計算書
+                          </Text>
+                          <Text as="p" size="xs" tone="muted" className="mt-1">
+                            営業・投資・財務活動別の資金移動。
+                          </Text>
+                        </NavigationMenuLink>
+                      </li>
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+
+                <NavigationMenuItem>
+                  <NavigationMenuLink href="#" className="text-sm font-medium">
+                    マスタ管理
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+
+                <NavigationMenuItem>
+                  <NavigationMenuLink href="#" className="text-sm font-medium">
+                    設定
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+              <NavigationMenuViewport />
+            </NavigationMenu>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/navigation/pagination.tsx

@@ -0,0 +1,241 @@
+import { useState } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Pagination } from "@godxjp/ui/navigation";
+
+/**
+ * Pagination — fully controlled offset/page bar. Sits BELOW a table card.
+ * Pass total as raw item count (not page count). onValueChange receives (page, pageSize).
+ * Composed only from real @godxjp/ui components.
+ */
+const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
+
+const invoices = Array.from({ length: 47 }, (_, i) => ({
+  id: `INV-${String(i + 1).padStart(4, "0")}`,
+  partner: ["株式会社山田商事", "有限会社田中工業", "ABC株式会社", "合同会社鈴木", "株式会社佐藤"][
+    i % 5
+  ],
+  amount: (i + 1) * 38500 + 12000,
+  status: ["承認済", "未承認", "取消済"][i % 3],
+}));
+
+export default function Demo() {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [simplePage, setSimplePage] = useState(1);
+
+  const start = (page - 1) * pageSize;
+  const pageData = invoices.slice(start, start + pageSize);
+
+  function handleChange(p: number, ps: number) {
+    setPage(p);
+    setPageSize(ps);
+  }
+
+  return (
+    <PageContainer
+      title="Pagination"
+      subtitle="Fully controlled offset/page bar · total is raw item count, not page count"
+    >
+      <Flex direction="col" gap="lg">
+        {/* Full pagination below a Table */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>請求書一覧 (47 件)</CardTitle>
+            <CardDescription>
+              Pagination sits BELOW the card. value + pageSize are controlled state. showTotal shows
+              the built-in i18n count label. showSizeChanger lets users pick rows per page.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>番号</TableHead>
+                  <TableHead>取引先</TableHead>
+                  <TableHead className="text-end">金額 (円)</TableHead>
+                  <TableHead>ステータス</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {pageData.map((inv) => (
+                  <TableRow key={inv.id}>
+                    <TableCell className="font-mono text-sm">{inv.id}</TableCell>
+                    <TableCell>{inv.partner}</TableCell>
+                    <TableCell className="text-end">{yen.format(inv.amount)}</TableCell>
+                    <TableCell>{inv.status}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        {/* Pagination component itself — outside the card, below it */}
+        <Pagination
+          ariaLabel="請求書一覧のページネーション"
+          value={page}
+          total={invoices.length}
+          pageSize={pageSize}
+          showTotal
+          showSizeChanger
+          pageSizeOptions={[5, 10, 20, 50]}
+          onValueChange={handleChange}
+        />
+
+        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in (gh#153). */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>境界状態 · 0 件 / 1 ページ / 複数ページ</CardTitle>
+            <CardDescription>
+              Pagination は複数ページ間のナビゲーション。0 件と 1 ページ（total ≤ pageSize）は
+              既定で「非表示」になる（下の 2 例は何もレンダリングしない）。合計だけ見せたい 1
+              ページでは hideOnSinglePage={"{false}"} で明示的にオプトインする。複数ページでは 1
+              行のまま折り返さずに全ページャを表示する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* total=0 → hidden (nothing renders). */}
+              <Pagination total={0} pageSize={10} showTotal />
+              {/* exactly one page → hidden by default (nothing renders). */}
+              <Pagination total={8} pageSize={10} showTotal />
+              {/* single-page opt-in → the bar renders so the total stays visible. */}
+              <Pagination
+                total={8}
+                pageSize={10}
+                hideOnSinglePage={false}
+                showTotal={(total, [from, to]) => `${from}〜${to} / ${total} 件`}
+                ariaLabel="1 ページのみ・opt-in 表示のページネーション"
+              />
+              {/* multiple pages → full pager, one horizontal row, no wrap. */}
+              <Pagination
+                value={2}
+                total={137}
+                pageSize={10}
+                showTotal
+                showSizeChanger
+                onValueChange={() => {}}
+                ariaLabel="複数ページの境界状態のページネーション"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* Long localized total label — the row stays ONE line and never wraps on desktop (gh#153). */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>長いローカライズ済みラベル · 折り返さない</CardTitle>
+            <CardDescription>
+              長い合計ラベル（JA/VI）でも Pagination は 1 行を維持する。ラベルは省略記号で切り詰め、
+              ページ送りを 2 行目に押し出さない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Pagination
+                value={3}
+                total={1284}
+                pageSize={20}
+                showSizeChanger
+                showTotal={(total, [from, to]) =>
+                  `${from.toLocaleString("ja-JP")}〜${to.toLocaleString("ja-JP")} 件目 / 全 ${total.toLocaleString("ja-JP")} 件の請求書を表示中`
+                }
+                onValueChange={() => {}}
+                ariaLabel="日本語ラベルのページネーション"
+              />
+              <Pagination
+                value={3}
+                total={1284}
+                pageSize={20}
+                showSizeChanger
+                showTotal={(total, [from, to]) =>
+                  `Đang hiển thị ${from}–${to} trong tổng số ${total.toLocaleString("vi-VN")} hoá đơn`
+                }
+                onValueChange={() => {}}
+                ariaLabel="Phân trang nhãn tiếng Việt"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* showTotal custom label */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>showTotal · カスタムラベル関数</CardTitle>
+            <CardDescription>
+              showTotal に関数を渡すと範囲ラベルをカスタマイズできる。 例: &quot;1〜10 / 47
+              件の請求書&quot;
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Pagination
+              ariaLabel="カスタムラベル例のページネーション"
+              value={page}
+              total={invoices.length}
+              pageSize={pageSize}
+              showTotal={(total, [from, to]) => `${from}〜${to} / ${total} 件の請求書`}
+              onValueChange={handleChange}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Simple mode for compact contexts */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Simple モード · コンパクト表示</CardTitle>
+            <CardDescription>
+              simple=true でモーダルフッターやサイドバーに収まるコンパクトな Prev / n/total / Next
+              を表示する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Pagination
+              ariaLabel="コンパクト例のページネーション"
+              simple
+              value={simplePage}
+              total={200}
+              pageSize={20}
+              onValueChange={(p) => setSimplePage(p)}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Disabled state */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled 状態</CardTitle>
+            <CardDescription>
+              disabled=true でデータ読み込み中などページ送りを一時的に無効にする。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Pagination
+              ariaLabel="無効状態例のページネーション"
+              value={1}
+              total={100}
+              pageSize={10}
+              showTotal
+              disabled
+              onValueChange={() => {}}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}