@godxjp/ui 19.4.2 → 19.6.0

package/docs/layout/nav-list.tsx

@@ -0,0 +1,63 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { MasterDetail, NavList, PageContainer } from "@godxjp/ui/layout";
+import { Bell, Palette, ShieldCheck, User } from "lucide-react";
+
+const items = [
+  { id: "profile", label: "Profile", icon: User },
+  { id: "appearance", label: "Appearance", icon: Palette },
+  { id: "notifications", label: "Notifications", icon: Bell, badge: "3" },
+  { id: "security", label: "Security", icon: ShieldCheck },
+];
+
+/**
+ * NavList — vertical route navigation for inside a page. Same rows as the Sidebar rail, in a
+ * `<nav>` landmark instead of the shell grid, so the settings-nav shape stops being hand-rolled
+ * out of Buttons.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="NavList" subtitle="ページ内のルート遷移ナビゲーション">
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>Master と組み合わせる</CardTitle>
+          <CardDescription>
+            選択中の行だけが aria-current=&quot;page&quot; を持ち、ラベルはアイコン列に揃います。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <MasterDetail
+            masterLabel="Settings"
+            railWidth="compact"
+            master={<NavList label="Settings" items={items} activeId="appearance" />}
+          >
+            <Card>
+              <CardHeader>
+                <CardTitle level={3}>Appearance</CardTitle>
+                <CardDescription>
+                  詳細ペインは選択された行が決めます。ナビゲーション自体は折りたたみ状態を持ちません。
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </MasterDetail>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>長いラベルと content stress</CardTitle>
+          <CardDescription>行は縮み、ラベルだけが切り詰められます。</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <NavList
+            label="Long labels"
+            activeId="long"
+            items={[
+              { id: "long", label: "組織全体の通知とメール配信の既定値", icon: Bell },
+              { id: "short", label: "Security", icon: ShieldCheck },
+            ]}
+          />
+        </CardContent>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/layout/topbar-item.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
+import type { SidebarSectionProp } from "@godxjp/ui/layout";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@godxjp/ui/navigation";
+import {
+  Bell,
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings,
+  Users,
+} from "lucide-react";
+
+/**
+ * TopbarItem — one interactive cell of a Topbar slot, shaped like part of the bar: full bar
+ * height, the bar's own hover surface, and the focus mark hosted INSIDE the cell. The second bar
+ * below shows the same triggers built from `Button` instead, which is the floating-pill read this
+ * component exists to replace.
+ */
+const SECTIONS: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+export default function Demo() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <AppShell
+      sidebarCollapsed={collapsed}
+      sidebar={<Sidebar activeId="dashboard" sections={SECTIONS} />}
+      topbar={
+        <Topbar
+          start={
+            <TopbarItem
+              aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
+              aria-expanded={!collapsed}
+              onClick={() => setCollapsed((open) => !open)}
+            >
+              {collapsed ? (
+                <PanelLeftOpen aria-hidden="true" />
+              ) : (
+                <PanelLeftClose aria-hidden="true" />
+              )}
+            </TopbarItem>
+          }
+          end={
+            <>
+              <TopbarItem aria-label="お知らせ">
+                <Bell aria-hidden="true" />
+              </TopbarItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <TopbarItem aria-label="アカウント">
+                    <Avatar>
+                      <AvatarFallback>SD</AvatarFallback>
+                    </Avatar>
+                  </TopbarItem>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>佐藤 大輔</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Settings aria-hidden="true" />
+                    設定
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <LogOut aria-hidden="true" />
+                    ログアウト
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          }
+        />
+      }
+    >
+      <PageContainer title="TopbarItem" subtitle="バーの一部として読める、バーの高さのセル">
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>上のバーがこのコンポーネントです</CardTitle>
+              <CardDescription>
+                セルの高さは自分では決めません。AppShell のグリッド行、単体で使うときは
+                --topbar-height、粗いポインタのときはその上書き。どれであっても、セルはバーの
+                高さまで伸びます。ホバー面もバー自身の面です。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Text size="sm" tone="muted">
+                DropdownMenuTrigger には `asChild` で渡します。メニューが開いている間は
+                [data-state=&quot;open&quot;] でセルが点いたままになります。
+              </Text>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>Button を入れた場合（比較）</CardTitle>
+              <CardDescription>
+                同じスロットに Button を置くと、背の高いバーの中に --control-height
+                の丸いピルが浮きます。バーの一部ではなく、バーに落ちてきた部品に見えます。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <Button variant="ghost" size="sm" aria-label="サイドバーを閉じる">
+                    <PanelLeftClose aria-hidden="true" />
+                  </Button>
+                }
+                end={
+                  <>
+                    <Button variant="ghost" size="sm" aria-label="お知らせ">
+                      <Bell aria-hidden="true" />
+                    </Button>
+                    <Button variant="ghost" size="sm" aria-label="アカウント">
+                      <Avatar>
+                        <AvatarFallback>SD</AvatarFallback>
+                      </Avatar>
+                    </Button>
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "19.4.2",
-  "godxUiMcp": "19.4.2",
+  "version": "19.6.0",
+  "godxUiMcp": "19.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -365,6 +365,10 @@
     "check:rtl": "node scripts/check-rtl.mjs",
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
+    "gen:antd-tokens": "node scripts/gen-antd-tokens.mjs",
+    "check:antd-tokens": "node scripts/gen-antd-tokens.mjs --check",
+    "report:antd-tokens": "node scripts/gen-antd-tokens.mjs --report",
+    "check:no-antd-runtime": "node scripts/check-no-antd-runtime.mjs",
     "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
@@ -461,6 +465,7 @@
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
@@ -478,6 +483,7 @@
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^4.1.11",
+    "antd": "6.6.2",
     "axe-core": "^4.13.0",
     "eslint": "^10.9.1",
     "eslint-plugin-react": "^7.37.5",