@godxjp/ui 19.6.0 → 20.1.0

package/docs/layout/app-shell-arrangements.tsx

@@ -0,0 +1,225 @@
+import { useState } from "react";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import type { SidebarSectionProp } from "@godxjp/ui/layout";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  Building2,
+  Hash,
+  LayoutDashboard,
+  MessagesSquare,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings,
+  Users,
+} from "lucide-react";
+
+/**
+ * AppShell · column arrangements.
+ *
+ * THE SHELL HAS TWO INDEPENDENT GEOMETRY AXES, and this page exists so they can be seen next to
+ * each other rather than rediscovered:
+ *
+ *   - `topbarSpan` — how far the BAR reaches. "content" starts it beside the sidebar (the rail
+ *     runs the full window height); "full" runs it edge to edge with the navigation beneath it.
+ *   - `navRail`    — how many navigation COLUMNS there are. Passing the slot adds a second,
+ *     narrower track before the sidebar: the workspace/organization switcher shape.
+ *
+ * They are axes, not a preset list. All four combinations are real product shapes, so there is no
+ * invalid pairing and nothing to reconcile — which is why the rail is a SLOT and not a fourth
+ * value bolted onto `topbarSpan`.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+
+const WORKSPACE_RAIL: SidebarSectionProp[] = [
+  {
+    items: [
+      { id: "home", label: "ホーム", icon: LayoutDashboard },
+      { id: "chat", label: "チャット", icon: MessagesSquare },
+      { id: "people", label: "メンバー", icon: Users },
+      { id: "admin", label: "管理", icon: Settings },
+    ],
+  },
+];
+
+const CHANNELS: SidebarSectionProp[] = [
+  {
+    label: "チャンネル",
+    items: [
+      { id: "general", label: "general", icon: Hash },
+      { id: "design", label: "design", icon: Hash },
+      { id: "incident", label: "incident-2026", icon: Hash },
+    ],
+  },
+  {
+    label: "ダイレクトメッセージ",
+    items: [
+      { id: "dm-sato", label: "佐藤 花子", icon: Users },
+      { id: "dm-tanaka", label: "田中 一郎", icon: Users },
+    ],
+  },
+];
+
+export default function Demo() {
+  const [withRail, setWithRail] = useState(true);
+  const [fullSpan, setFullSpan] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // The rail is ordinary navigation, so it is an ordinary <Sidebar> in icon-only mode — the shell
+  // owns the TRACK, never the content that goes in it.
+  const rail = (
+    <Sidebar aria-label="ワークスペース" activeId="chat" collapsed sections={WORKSPACE_RAIL} />
+  );
+
+  return (
+    <AppShell
+      topbarSpan={fullSpan ? "full" : "content"}
+      navRail={withRail ? rail : undefined}
+      navRailLabel="ワークスペース"
+      sidebarCollapsed={collapsed}
+      logo={
+        <Flex align="center" gap="sm">
+          <Building2 aria-hidden="true" />
+          <Text weight="medium">CoreChat</Text>
+        </Flex>
+      }
+      sidebar={
+        <Sidebar
+          aria-label="チャンネル"
+          activeId="general"
+          collapsed={collapsed}
+          sections={CHANNELS}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Button
+              size="sm"
+              variant="ghost"
+              aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
+              aria-expanded={!collapsed}
+              onClick={() => setCollapsed((c) => !c)}
+            >
+              {collapsed ? (
+                <PanelLeftOpen aria-hidden="true" />
+              ) : (
+                <PanelLeftClose aria-hidden="true" />
+              )}
+            </Button>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="列の構成"
+        subtitle={`${withRail ? "3 列" : "2 列"} · topbarSpan="${fullSpan ? "full" : "content"}"${
+          collapsed ? " · 折りたたみ" : ""
+        }`}
+        extra={
+          <Flex gap="sm">
+            <Button
+              size="sm"
+              variant={withRail ? "default" : "outline"}
+              aria-pressed={withRail}
+              onClick={() => setWithRail((v) => !v)}
+            >
+              navRail
+            </Button>
+            <Button
+              size="sm"
+              variant={fullSpan ? "default" : "outline"}
+              aria-pressed={fullSpan}
+              onClick={() => setFullSpan((v) => !v)}
+            >
+              topbarSpan=full
+            </Button>
+            <Button
+              size="sm"
+              variant={collapsed ? "default" : "outline"}
+              aria-pressed={collapsed}
+              onClick={() => setCollapsed((v) => !v)}
+            >
+              折りたたみ
+            </Button>
+          </Flex>
+        }
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>2 本の軸は独立している</CardTitle>
+              <CardDescription>
+                上の 3 つのボタンは互いに干渉しない。<code>navRail</code> は「ナビゲーションの列が
+                何本か」を、<code>topbarSpan</code> は「バーがどこまで伸びるか」を答える別々の軸で、
+                4 通りの組み合わせはすべて実在するプロダクトの形なので、禁止すべき組み合わせは
+                存在しない。だから rail は <code>topbarSpan</code> に足した 4 つ目の値ではなく
+                スロットとして実装されている ― プリセット名を 4 つ覚える API にはしない。
+              </CardDescription>
+              <CardDescription>
+                列幅はすべてトークン。<code>--app-shell-nav-rail-width</code>（4rem）が rail、
+                <code>--app-shell-sidebar-width</code>（16rem）がサイドバー、
+                <code>--app-shell-sidebar-collapsed-width</code>（4rem）が折りたたみ時の
+                サイドバー。3 つ目は 19.x では <code>--app-shell-rail-width</code> という名前で、
+                20.0.0 で追加された本物の rail と正面衝突した ― 同じ 4rem、同じ「rail」の綴り、
+                意味は別物。エイリアスを残さず改名したのは、どちらの読み方でも
+                もっともらしい幅に解決してしまい、静かに壊れるため。
+              </CardDescription>
+            </CardHeader>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>折りたたみは 1 本の列だけを畳む</CardTitle>
+              <CardDescription>
+                「折りたたみ」を押すと、サイドバーの列だけが 16rem → 4rem になり、rail
+                は幅を保つ。Slack の挙動であり、折りたたみ中も rail
+                の行き先に手が届き続ける唯一の形。 rail まで一緒に畳むと、意味の分からない
+                アイコンの帯が 2 本並ぶだけになる。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="sm">
+                <Flex justify="between">
+                  <Text tone="muted">rail</Text>
+                  <Text mono>{withRail ? "4rem（固定）" : "—"}</Text>
+                </Flex>
+                <Flex justify="between">
+                  <Text tone="muted">sidebar</Text>
+                  <Text mono>{collapsed ? "4rem" : "16rem"}</Text>
+                </Flex>
+                <Flex justify="between">
+                  <Text tone="muted">コンテンツ左端</Text>
+                  <Text mono>
+                    {withRail ? (collapsed ? "128px" : "320px") : collapsed ? "64px" : "256px"}
+                  </Text>
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>900px 以下では両方の列が消える</CardTitle>
+              <CardDescription>
+                Frame の Dimensions を 900px 以下にすると、rail とサイドバーの両方が隠れ、
+                AppShell 所有のドロワーが navigation を引き受ける。 rail
+                を渡している場合、ドロワーの既定値は「rail のあとにサイドバー」になる ―
+                両方の列が隠れる幅で <code>sidebar</code> だけを既定にすると、rail
+                が運んでいるアプリ階層の行き先が 端末によって存在したりしなかったりする。
+                いくつかの画面幅にしか無いコントロールは、コントロールではなく罠。
+              </CardDescription>
+              <CardDescription>
+                グリッドのテンプレートから領域名が消えるだけでは要素は消えない ―
+                実測では、狭幅テンプレートを当てて <code>.app-sidebar</code> だけを隠した状態で
+                rail が暗黙の列に自動配置され、33×168px の断片としてページ本文の上に残った。
+                だから狭幅ブロックは rail を明示的に隠す。
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/app-shell.tsx

@@ -372,3 +372,14 @@ export default function Demo() {
     </AppShell>
   );
 }
+
+/** A dashboard keeps the canonical topbar and main area without a sidebar track. */
+export function WithoutSidebar() {
+  return (
+    <AppShell topbar={<Topbar start={<Text>Workspace</Text>} />}>
+      <PageContainer title="Dashboard">
+        <Text>Project overview</Text>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/aspect-ratio.tsx

@@ -4,7 +4,7 @@ import { Skeleton } from "@godxjp/ui/feedback";
 import { AspectRatio, Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
- * AspectRatio · Radix AspectRatio wrapper. Stabilises media/preview frames so
+ * AspectRatio · AspectRatio (thuộc tính CSS aspect-ratio, một node). Stabilises media/preview frames so
  * they do not reflow during load. ratio = width / height (number). Children fill
  * the constrained box · use object-fit: cover on images, width/height 100% on
  * iframes and SVG charts. Do not use for unconstrained text content. Composed

package/docs/layout/flex.tsx

@@ -260,6 +260,56 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レスポンシブな操作行</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex
+              id="responsive-actions"
+              direction={{ base: "col", lg: "row" }}
+              gap="md"
+              align="start"
+            >
+              <Flex fill>
+                <Text>画面幅に合わせて操作をまとめます。</Text>
+              </Flex>
+              <Button>保存</Button>
+              <Button variant="outline">キャンセル</Button>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>軽い強調と行アクション</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex id="hover-notice" surface="warning" pad={3} tabIndex={0}>
+                <Text>締切を確認してください。</Text>
+                <Flex reveal="hover" surface="popover" gap="xs" pad={1}>
+                  <Button variant="ghost" size="sm">
+                    編集
+                  </Button>
+                  <Button variant="ghost" size="sm">
+                    解除
+                  </Button>
+                </Flex>
+              </Flex>
+              <Flex as="ul" direction="col" gap="xs">
+                <li>添付ファイルを確認</li>
+                <li>担当者を選択</li>
+              </Flex>
+              <Flex surface="muted" pad={{ block: 2, inline: 3 }}>
+                <Text as="code" chip decoration="line-through">
+                  old_status
+                </Text>
+                <Text>更新済み</Text>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/responsive-grid.tsx

@@ -217,7 +217,7 @@ export default function Demo() {
             <CardDescription>
               名前付きコレクション geometry: コンテナ幅が lg ステップ（64rem）に達するまでは 1
               列、そこから 3 列に切り替わる。ResponsiveGrid には lg
-              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる —
+              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる ·
               課金プランカタログの「3/3/1」契約 （dxs-platform/platform#333）。`columns` の代わりに
               `preset` を渡すだけで、呼び出し側がブレークポイント値を自作する必要がない。
             </CardDescription>
@@ -254,6 +254,26 @@ export default function Demo() {
             </ResponsiveGrid>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 1, lg: 3 }} pad={{ block: 2 }}>
+              <ResponsiveGrid.Item span={{ base: 1, lg: 2 }}>
+                <Flex id="grid-main" surface="muted" pad={3}>
+                  <Text>メインの一覧</Text>
+                </Flex>
+              </ResponsiveGrid.Item>
+              <ResponsiveGrid.Item>
+                <Flex id="grid-rail" surface="muted" pad={3}>
+                  <Text>補助情報</Text>
+                </Flex>
+              </ResponsiveGrid.Item>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/topbar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { AppShell, Flex, PageContainer, Sidebar, Topbar } from "@godxjp/ui/layout";
+import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import {
   Avatar,
@@ -154,18 +154,14 @@ export default function Demo() {
       <Badge tone="warning" className="text-xs">
         ステージング
       </Badge>
-      <Button
-        variant="ghost"
-        size="icon-sm"
+      <TopbarItem
         aria-label="通知"
-        className="relative"
+        badge={unread ? 12 : undefined}
+        badgeTone="destructive"
         onClick={() => setUnread(false)}
       >
         <Bell />
-        {unread ? (
-          <span className="bg-destructive absolute end-1.5 top-1.5 size-1.5 rounded-full" />
-        ) : null}
-      </Button>
+      </TopbarItem>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon-sm" aria-label="アカウントメニュー">

package/docs/navigation/app-setting-picker.tsx

@@ -9,7 +9,7 @@ import {
   CardTitle,
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
+import { Flex, PageContainer, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
@@ -33,6 +33,17 @@ export default function Demo() {
         subtitle="kind で 1 つの AppProvider 設定を読み書きする統合ピッカー"
       >
         <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>インライン表示</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Flex gap="md" align="center">
+                <Text>表示言語</Text>
+                <AppSettingPicker kind="locale" appearance="inline" id="setting-inline" />
+              </Flex>
+            </CardContent>
+          </Card>
           <Card>
             <CardHeader>
               <CardTitle level={2}>kind で対象設定を選ぶ</CardTitle>
@@ -123,6 +134,31 @@ export default function Demo() {
             </CardContent>
           </Card>
 
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>バーのセル（appearance=&quot;bar&quot;）</CardTitle>
+              <CardDescription>
+                <code>icon</code> と同じ構造上の省略を保ったまま、箱だけがバーの
+                <strong>セル</strong>になる。バーの高さいっぱいに伸び、角は
+                <code>--topbar-item-radius</code>（<code>TopbarItem</code> と同じつまみ）で四角い。
+                ホバーの面はバーそのものを塗る。
+                <code>icon</code> をバーに置くと <code>--control-height</code>
+                の丸い錠剤が背の高い帯の中に浮き、バー本来のクロームとは別系統に読める。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={<TopbarItem>プロジェクト</TopbarItem>}
+                end={
+                  <>
+                    <AppSettingPicker kind="locale" appearance="bar" id="topbar-locale-bar" />
+                    <AppSettingPicker kind="theme" appearance="bar" id="topbar-theme-bar" />
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+
           <Card>
             <CardHeader>
               <CardTitle level={2}>無効化</CardTitle>

package/docs/navigation/app-setting-toggle.tsx

@@ -0,0 +1,111 @@
+import { AppProvider } from "@godxjp/ui/app";
+import {
+  Avatar,
+  AvatarFallback,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
+import { AppSettingToggle } from "@godxjp/ui/navigation";
+
+/**
+ * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value and
+ * shows that value as its glyph. The no-menu counterpart to AppSettingPicker: same binding
+ * contract, same option order, one tap instead of open-then-choose. `appearance="bar"` (the
+ * default) is a CELL of the bar — full bar height, the bar's own hover surface, square corners.
+ */
+export default function Demo() {
+  return (
+    <AppProvider defaultLocale="ja" defaultTimeFormat="24h" persist={false}>
+      <PageContainer
+        title="AppSettingToggle"
+        subtitle="押すたびに次の値へ送る 1 ボタン。ドロップダウンなし。"
+      >
+        <Flex direction="col" gap="lg">
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>トップバーのセル（既定）</CardTitle>
+              <CardDescription>
+                appearance=&quot;bar&quot; はバーの一部として全高で伸び、角は
+                --topbar-item-radius。--control-height の錠剤がバーの中に浮くことはない。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <Avatar className="rounded-md">
+                    <AvatarFallback>G</AvatarFallback>
+                  </Avatar>
+                }
+                end={
+                  <>
+                    <AppSettingToggle kind="theme" id="topbar-theme-toggle" />
+                    <AppSettingToggle kind="density" id="topbar-density-toggle" />
+                    <AppSettingToggle kind="fontSize" id="topbar-font-size-toggle" />
+                    <AppSettingToggle kind="timeFormat" id="topbar-time-format-toggle" />
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>バー以外（appearance=&quot;icon&quot;）</CardTitle>
+              <CardDescription>
+                設定行やカードヘッダーなど、バーではない場所。--control-height
+                の正方形ゴーストボタン。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="row" gap="md" align="center" wrap>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text weight="medium">テーマ</Text>
+                  <AppSettingToggle kind="theme" appearance="icon" id="icon-theme-toggle" />
+                </Flex>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text weight="medium">時刻形式</Text>
+                  <AppSettingToggle
+                    kind="timeFormat"
+                    appearance="icon"
+                    id="icon-time-format-toggle"
+                  />
+                </Flex>
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>制御モードと無効化</CardTitle>
+              <CardDescription>
+                value + onValueChange で外部状態に紐づけ、disabled で操作を止める。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="row" gap="md" align="center">
+                <AppSettingToggle
+                  kind="density"
+                  appearance="icon"
+                  value="comfortable"
+                  onValueChange={() => {}}
+                  id="controlled-density-toggle"
+                />
+                <AppSettingToggle
+                  kind="theme"
+                  appearance="icon"
+                  disabled
+                  id="disabled-theme-toggle"
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppProvider>
+  );
+}

package/docs/navigation/breadcrumb.tsx

@@ -129,6 +129,54 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — separator / itemRender / item menu */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>separator · itemRender · menu (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              separator は既定のシェブロンを任意のノードに置き換える(空文字で消える)。常に
+              aria-hidden なので、読み上げは ol / li の構造のまま。menu は antd の
+              BreadcrumbItemType.menu で、その区切りを兄弟切り替えのメニューボタンにする
+              (パス付きエントリは role=&quot;menuitem&quot; を保ったまま本物のアンカーになる)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <div id="antd-breadcrumb-slash">
+                <Breadcrumb
+                  ariaLabel="区切り文字のパンくず"
+                  separator="/"
+                  items={[
+                    { label: "ホーム", to: "/" },
+                    { label: "会員管理", to: "/members" },
+                    { label: "田中 太郎" },
+                  ]}
+                />
+              </div>
+              <div id="antd-breadcrumb-menu">
+                <Breadcrumb
+                  ariaLabel="プロジェクト切替のパンくず"
+                  items={[
+                    { label: "ホーム", to: "/" },
+                    {
+                      label: "プロジェクト A",
+                      to: "/p/a",
+                      menu: {
+                        items: [
+                          { value: "b", label: "プロジェクト B", to: "/p/b" },
+                          { value: "c", label: "プロジェクト C", to: "/p/c" },
+                          { value: "d", label: "プロジェクト D (準備中)", disabled: true },
+                        ],
+                      },
+                    },
+                    { label: "設定" },
+                  ]}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/dropdown-menu.tsx

@@ -37,6 +37,27 @@ export default function Demo() {
       subtitle="Radix dropdown · 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>