@godxjp/ui 21.0.0 → 23.0.0

package/docs/data-entry/date-range-picker.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-import { ja } from "date-fns/locale";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { DateRangePicker, FormField } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DateRange } from "react-day-picker";
-
-/**
- * DateRangePicker — WAI-ARIA date-range control with two typeable ISO inputs
- * + popover calendar. Submits as ${name}_from / ${name}_to. Never compose
- * two DatePickers side-by-side to fake a range. Composed only from real
- * @godxjp/ui components.
- */
-export default function Demo() {
-  const [period, setPeriod] = useState<DateRange | undefined>({
-    from: new Date(2026, 3, 1),
-    to: new Date(2027, 2, 31),
-  });
-  const [reportRange, setReportRange] = useState<DateRange | undefined>(undefined);
-  const [campaign, setCampaign] = useState<DateRange | undefined>({
-    from: new Date(2026, 5, 1),
-    to: new Date(2026, 5, 30),
-  });
-
-  return (
-    <PageContainer
-      title="DateRangePicker"
-      subtitle="期間入力 · 開始/終了 ISO 入力 + 範囲カレンダーポップオーバー"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 (controlled)</CardTitle>
-            <CardDescription>
-              value + onValueChange
-              で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンを開いて
-              範囲を選択できる。name=&#34;period&#34; を指定すると period_from / period_to として
-              ISO yyyy-MM-dd でフォーム送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="period" label="会計期間" required>
-              <DateRangePicker
-                id="period"
-                name="period"
-                value={period}
-                onValueChange={setPeriod}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レポート期間フィルター (未選択)</CardTitle>
-            <CardDescription>
-              初期値なし。選択後は reportRange_from / reportRange_to
-              がクエリパラメータとして使われる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="report-range" label="レポート期間">
-              <DateRangePicker
-                id="report-range"
-                name="reportRange"
-                value={reportRange}
-                onValueChange={setReportRange}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2026, 11, 31)}
-                placeholder="yyyy-mm-dd"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>非制御 (defaultValue)</CardTitle>
-            <CardDescription>
-              value / onValueChange を渡さず defaultValue
-              で初期範囲だけ与える。状態はコンポーネント内部で 保持され、name=&#34;fiscal_year&#34;
-              のまま fiscal_year_from / fiscal_year_to として送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-year" label="会計年度 (初期値のみ)">
-              <DateRangePicker
-                id="fiscal-year"
-                name="fiscal_year"
-                defaultValue={{
-                  from: new Date(2026, 3, 1),
-                  to: new Date(2027, 2, 31),
-                }}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>locale で日本語カレンダー</CardTitle>
-            <CardDescription>
-              locale=&#123;ja&#125; を渡すとポップオーバーのカレンダーが日本語表記 (曜日・月名)
-              になる。 入力欄は常に ISO yyyy-MM-dd を保持する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="campaign-period" label="キャンペーン期間">
-              <DateRangePicker
-                id="campaign-period"
-                name="campaign_period"
-                value={campaign}
-                onValueChange={setCampaign}
-                locale={ja}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2027, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disabled 状態</CardTitle>
-            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="locked-period" label="確定期間">
-              <DateRangePicker
-                id="locked-period"
-                name="locked_period"
-                value={{
-                  from: new Date(2025, 3, 1),
-                  to: new Date(2026, 2, 31),
-                }}
-                disabled
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>期間プリセットと確定</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="preset-range" label="集計期間">
-              <DateRangePicker
-                id="preset-range"
-                name="report"
-                format="yyyy/MM/dd"
-                needConfirm
-                allowEmpty={[false, true]}
-                showWeek
-                minDate={new Date(2026, 0, 1)}
-                maxDate={new Date(2026, 11, 31)}
-                presets={[
-                  {
-                    label: "9月",
-                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
-                  },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/month-picker.tsx

@@ -1,101 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, MonthPicker } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/** MonthPicker — typeable yyyy/MM field with a localized month-grid affordance. */
-export default function Demo() {
-  const [month, setMonth] = useState<Date | undefined>(new Date(2026, 6, 1));
-
-  return (
-    <PageContainer title="MonthPicker" subtitle="年月入力 · yyyy/MM + 月グリッド">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Controlled · form submission</CardTitle>
-            <CardDescription>
-              value + onValueChange で制御し、name は yyyy/MM の表示値を送信する。直接入力と
-              月グリッド選択のどちらも利用できる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="billing-month" label="請求年月" required helper="yyyy/MM 形式">
-              <MonthPicker
-                id="billing-month"
-                name="billing_month"
-                value={month}
-                onValueChange={setMonth}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Uncontrolled · bounded years</CardTitle>
-            <CardDescription>
-              defaultValue で内部状態を初期化し、fromYear / toYear で年移動を制限する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-month" label="会計年月">
-              <MonthPicker
-                id="fiscal-month"
-                name="fiscal_month"
-                defaultValue={new Date(2025, 3, 1)}
-                fromYear={2024}
-                toYear={2027}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Clear affordance variants</CardTitle>
-            <CardDescription>
-              値がある既定状態ではクリア操作を表示する。必須フィールドでは allowClear=false
-              にして不用意な空値を防ぐ。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="clearable-month" label="クリア可能">
-                <MonthPicker id="clearable-month" defaultValue={new Date(2026, 0, 1)} />
-              </FormField>
-              <FormField id="fixed-month" label="クリア不可" required>
-                <MonthPicker
-                  id="fixed-month"
-                  defaultValue={new Date(2026, 0, 1)}
-                  allowClear={false}
-                />
-              </FormField>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled · empty and populated</CardTitle>
-            <CardDescription>権限不足または確定済みデータの操作不可状態。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="disabled-month-empty" label="無効（未選択）">
-                <MonthPicker id="disabled-month-empty" disabled />
-              </FormField>
-              <FormField id="disabled-month-value" label="無効（選択済み）">
-                <MonthPicker
-                  id="disabled-month-value"
-                  defaultValue={new Date(2026, 8, 1)}
-                  disabled
-                />
-              </FormField>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/month-range-picker.tsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, MonthRangePicker } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DateRange } from "react-day-picker";
-
-/**
- * MonthRangePicker — 年月 (yyyy/MM) 範囲入力。DateRangePicker と同じ
- * 「ひとつのコントロール [開始 → 終了 ✕ 📅]」規約で、月グリッドポップオーバーを
- * 視覚的アフォーダンスとして持つ。逆順 (from > to) は自動で入れ替え正規化される。
- * MonthPicker を 2 つ並べて範囲を偽装しないこと。
- */
-export default function Demo() {
-  const [closing, setClosing] = useState<DateRange | undefined>({
-    from: new Date(2026, 0, 1),
-    to: new Date(2026, 5, 1),
-  });
-  const [negotiation, setNegotiation] = useState<DateRange | undefined>(undefined);
-
-  return (
-    <PageContainer
-      title="MonthRangePicker"
-      subtitle="年月範囲入力 · 開始/終了 yyyy/MM 入力 + 月グリッドポップオーバー"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 (controlled)</CardTitle>
-            <CardDescription>
-              value + onValueChange で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンから
-              月グリッドで 2 ステップ選択 (開始 → 終了)。逆順に選んでも from ≤ to
-              に自動正規化される。name=&#34;closing_ym&#34; を指定すると closing_ym_from /
-              closing_ym_to として yyyy/MM でフォーム送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="closing-ym" label="締め年月" required>
-              <MonthRangePicker
-                id="closing-ym"
-                name="closing_ym"
-                value={closing}
-                onValueChange={setClosing}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>検索フィルター (未選択)</CardTitle>
-            <CardDescription>
-              初期値なし。確定済み範囲の上でもう一度選ぶと新しい範囲が開始される (reset-on-complete
-              · 開始月が固まって選び直せない、が起きない)。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="negotiation-ym" label="商談発生年月">
-              <MonthRangePicker
-                id="negotiation-ym"
-                name="search_negotiation_ym"
-                value={negotiation}
-                onValueChange={setNegotiation}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>非制御 (defaultValue) + 年クランプ</CardTitle>
-            <CardDescription>
-              defaultValue で初期範囲だけ与え、fromYear / toYear
-              でグリッドの年ナビゲーションを境界年で止める。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-ym" label="会計年度範囲 (2024–2027)">
-              <MonthRangePicker
-                id="fiscal-ym"
-                name="fiscal_ym"
-                defaultValue={{
-                  from: new Date(2026, 3, 1),
-                  to: new Date(2027, 2, 1),
-                }}
-                fromYear={2024}
-                toYear={2027}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disabled 状態</CardTitle>
-            <CardDescription>確定済み範囲や読み取り専用フィールドに使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="locked-ym" label="確定範囲">
-              <MonthRangePicker
-                id="locked-ym"
-                name="locked_ym"
-                value={{
-                  from: new Date(2025, 3, 1),
-                  to: new Date(2026, 2, 1),
-                }}
-                disabled
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/context-menu.tsx

@@ -1,128 +0,0 @@
-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>
-              {/* ui-audit-disable-next-line no-hand-rolled-surface — the dashed area is the right-click target the demo asks you to use */}
-              {/* data-axe-open="contextmenu": check-frame-axe right-clicks here before its
-                  overlay scan. */}
-              <ContextMenuTrigger
-                data-axe-open="contextmenu"
-                className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed"
-              >
-                <Flex align="center" justify="center" gap="xs">
-                  <Text tone="muted">ここを右クリックしてください</Text>
-                </Flex>
-              </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>
-              {/* ui-audit-disable-next-line no-hand-rolled-surface — the dashed area is the right-click target the demo asks you to use */}
-              <ContextMenuTrigger className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed">
-                <Flex align="center" justify="center" gap="xs">
-                  <Text tone="muted">右クリック · 表示設定</Text>
-                </Flex>
-              </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/menubar.tsx

@@ -1,141 +0,0 @@
-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>
-  );
-}