@godxjp/ui 20.0.0 → 20.2.0

package/docs/feedback/tooltip.tsx

@@ -125,7 +125,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Shared delay across a toolbar (TooltipProvider)</CardTitle>
             <CardDescription>
-              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside —
+              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside ·
               a dense toolbar feels snappy without repeating the prop on each Tooltip.
             </CardDescription>
           </CardHeader>

package/docs/general/activity.tsx

@@ -99,7 +99,7 @@ export default function Demo() {
             <Flex direction="col" gap="md">
               <Flex direction="col" gap="xs">
                 <Text size="xs" tone="muted">
-                  dots（既定）— 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
+                  dots（既定）· 3 点が順に浮く。&ldquo;入力中&rdquo; の省略記号の慣習。
                 </Text>
                 <Activity variant="dots" label="佐藤さんが入力しています…" />
               </Flex>
@@ -156,7 +156,7 @@ export default function Demo() {
             <Flex direction="col" gap="md">
               <Flex direction="col" gap="xs">
                 <Text size="xs" tone="muted">
-                  label のみ —
+                  label のみ ·
                   マークの隣に可視テキストとして描画される。アニメーションだけで意味を運ばせない。
                 </Text>
                 <Activity label="佐藤さんが入力しています…" />

package/docs/general/button/index.tsx

@@ -1,4 +1,11 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { Pencil, Plus, Trash2 } from "lucide-react";
@@ -56,6 +63,12 @@ export default function Demo() {
               <Button variant="dashed">追加 Add row</Button>
               <Button variant="ghost">詳細 Details</Button>
               <Button variant="link">もっと見る More</Button>
+              <Button id="bare-count" variant="bare">
+                返信 <Badge icon={null}>12</Badge>
+              </Button>
+              <Button id="ghost-count" variant="ghost">
+                返信 <Badge icon={null}>12</Badge>
+              </Button>
               <Button variant="destructive">削除 Delete</Button>
             </Flex>
           </CardContent>

package/docs/general/typography.tsx

@@ -1,4 +1,5 @@
-import { Button, Heading, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Button, Heading, Text, VisuallyHidden } from "@godxjp/ui/general";
 import {
   Card,
   CardContent,
@@ -35,6 +36,7 @@ const headingTones = [
 ] as const;
 
 export default function Demo() {
+  const { t } = useTranslation();
   return (
     <PageContainer
       title="Typography"
@@ -229,6 +231,17 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textExamples.preservedText")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text as="p" whitespace="pre-wrap">
+              {t("textExamples.sampleText")}
+            </Text>
+            <VisuallyHidden>{t("textExamples.preservedText")}</VisuallyHidden>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/app-launcher.tsx

@@ -0,0 +1,195 @@
+import { useState } from "react";
+import { BarChart3, LifeBuoy, MessagesSquare, Receipt, Users } from "lucide-react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AppLauncher,
+  type AppLauncherLabels,
+  Flex,
+  PageContainer,
+  ResponsiveGrid,
+  Topbar,
+} from "@godxjp/ui/layout";
+
+const apps = [
+  { id: "console", name: "Console", href: "/console", icon: <BarChart3 />, current: true },
+  { id: "billing", name: "Billing", href: "/billing", icon: <Receipt /> },
+  { id: "people", name: "People", href: "/people", icon: <Users /> },
+  { id: "chat", name: "Chat", href: "/chat", icon: <MessagesSquare /> },
+];
+
+const groups = [
+  {
+    label: "More from Acme",
+    apps: [
+      {
+        id: "support",
+        name: "Support",
+        href: "https://support.example.test",
+        icon: <LifeBuoy />,
+        // An external destination renders a plain anchor and bypasses `linkComponent` — a
+        // client-side router link to another origin is a router asked to route somewhere it
+        // does not own.
+        external: true,
+      },
+    ],
+  },
+];
+
+const labels: AppLauncherLabels = {
+  trigger: "Acme のアプリ",
+  title: "アプリを切り替える",
+  empty: "利用できるアプリがありません。",
+  loading: "アプリを読み込み中",
+  retry: "再試行",
+  externalHint: "（新しいタブで開きます）",
+};
+
+/**
+ * AppLauncher — the nine-dot platform app grid.
+ *
+ * WHERE IT SITS AMONG THINGS THAT LOOK LIKE IT:
+ *
+ * - `ServiceLauncherCard` (data-display) is also a launcher tile, but a PAGE-SIZED one — status,
+ *   hostname, plan, an action button, a reason it is locked — for a service-catalogue page where
+ *   choosing is a considered act. This tile is bar-sized: mark plus name, the whole tile one link,
+ *   because changing app is a reflex. A grid of `ServiceLauncherCard`s inside a popover is the
+ *   wrong component, not a smaller version of this one.
+ * - `AppShell navRail` says the SAME platform scope as a docked column. Pick ONE. The launcher for
+ *   a platform with MANY apps where switching is occasional (the Google Workspace shape); the rail
+ *   for a single product where switching workspace is constant enough to deserve permanent screen
+ *   width (the Slack shape). Shipping both puts one scope in two places.
+ */
+export default function Demo() {
+  const [error, setError] = useState<string | undefined>("アプリ一覧を取得できませんでした。");
+
+  return (
+    <PageContainer title="AppLauncher" subtitle="topbar のセル · popover/sheet · グループ · 状態">
+      <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>バーの中のセル</CardTitle>
+            <CardDescription>
+              trigger は `TopbarItem` なので、高さはバーそのもの（`align-self: stretch`）。 `Button
+              variant=&quot;ghost&quot;` を置くと、背の高い帯の中に浮いた丸薬になります。 panel は
+              `responsive=&quot;auto&quot;` で、共有トークン
+              `--sheet-responsive-breakpoint-width`（48rem）を境に popover と bottom sheet
+              が入れ替わります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Topbar
+                start={<Text weight="medium">Acme Console</Text>}
+                end={<AppLauncher apps={apps} groups={groups} labels={labels} />}
+              />
+              <Text size="sm" tone="muted">
+                current のアプリだけが `aria-current=&quot;page&quot;` を持ちます。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>列数と非同期状態</CardTitle>
+            <CardDescription>
+              既定は3列（Google と同じ形）。`columns` は1インスタンスの上書きです。 loading と error
+              は grid の代わりに同じ所有 surface へ表示されます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Topbar
+                start={<Text weight="medium">4 列</Text>}
+                end={
+                  <AppLauncher
+                    apps={apps}
+                    groups={groups}
+                    labels={labels}
+                    columns={4}
+                    responsive="popover"
+                  />
+                }
+              />
+              <Topbar
+                start={<Text weight="medium">loading</Text>}
+                end={<AppLauncher apps={apps} labels={labels} loading responsive="popover" />}
+              />
+              <Topbar
+                start={<Text weight="medium">empty</Text>}
+                end={<AppLauncher apps={[]} labels={labels} responsive="sheet" />}
+              />
+              <Topbar
+                start={<Text weight="medium">error</Text>}
+                end={
+                  <AppLauncher
+                    apps={apps}
+                    labels={labels}
+                    error={error}
+                    onRetry={() => setError(undefined)}
+                    responsive="popover"
+                  />
+                }
+              />
+              {!error ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setError("再試行に失敗しました。")}
+                >
+                  エラーを復元
+                </Button>
+              ) : null}
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>バー以外の chrome — icon とパネルの向き</CardTitle>
+            <CardDescription>
+              `appearance=&quot;icon&quot;` は正方形の ghost Button。バーではない chrome（nav rail、
+              カードのヘッダ、ツールバー）のための箱で、glyph は同じです。 パネルは既定で chrome
+              から外へ開きます（bar は下＋end、それ以外は inline-end＋start）。 位置を変えられる
+              chrome だけが向きを知っているので、`side` / `align` で明示できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md">
+              <AppLauncher apps={apps} groups={groups} labels={labels} appearance="icon" />
+              <AppLauncher
+                apps={apps}
+                groups={groups}
+                labels={labels}
+                appearance="icon"
+                side="bottom"
+                align="start"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Launchpad — 画面いっぱい</CardTitle>
+            <CardDescription>
+              `responsive=&quot;fullscreen&quot;` は plaform の start bar のための形。背後のページを
+              ぼかし、その地の上にタイルが並びます（macOS Launchpad / Windows Start）。 幅に関係なく
+              1つの surface に固定。列数だけが surface に合わせて 3 · 4 · 5 · 6 と上がります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AppLauncher
+              apps={apps}
+              groups={groups}
+              labels={labels}
+              appearance="icon"
+              responsive="fullscreen"
+            />
+          </CardContent>
+        </Card>
+      </ResponsiveGrid>
+    </PageContainer>
+  );
+}

package/docs/layout/app-shell-arrangements.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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
@@ -95,9 +95,9 @@ export default function Demo() {
       topbar={
         <Topbar
           start={
-            <Button
-              size="sm"
-              variant="ghost"
+            // A bar cell is a TopbarItem, not a Button: a Button in a bar is a --control-height
+            // pill floating in a taller strip, with its own hover fill and its own focus ring.
+            <TopbarItem
               aria-label={collapsed ? "サイドバーを開く" : "サイドバーを閉じる"}
               aria-expanded={!collapsed}
               onClick={() => setCollapsed((c) => !c)}
@@ -107,7 +107,7 @@ export default function Demo() {
               ) : (
                 <PanelLeftClose aria-hidden="true" />
               )}
-            </Button>
+            </TopbarItem>
           }
         />
       }

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/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

@@ -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>

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>

package/docs/navigation/pagination.tsx

@@ -235,6 +235,58 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — showQuickJumper / size / align / responsive */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>showQuickJumper · size · align (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              showQuickJumper はページ番号を直接入力するフィールド(Enter または goButton
+              で確定、範囲外はクランプ)。size=&quot;sm&quot; はバーに --control-height
+              を一度だけ再束縛するので、ページボタン・サイズ変更・ジャンプ欄が同時に縮む。align
+              は論理軸(start / center / end)。responsive は既定で有効で、モバイル幅では simple
+              形態に畳む。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <div id="antd-pagination-jumper">
+                <Pagination
+                  ariaLabel="クイックジャンパー付きページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  showTotal
+                  showSizeChanger
+                  showQuickJumper
+                  onValueChange={() => {}}
+                />
+              </div>
+              <div id="antd-pagination-sm">
+                <Pagination
+                  ariaLabel="小サイズ・中央寄せのページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  size="sm"
+                  align="center"
+                  showQuickJumper={{ goButton: "移動" }}
+                  onValueChange={() => {}}
+                />
+              </div>
+              <div id="antd-pagination-start">
+                <Pagination
+                  ariaLabel="先頭寄せのページネーション"
+                  value={3}
+                  total={95}
+                  pageSize={10}
+                  align="start"
+                  onValueChange={() => {}}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/steps.tsx

@@ -259,6 +259,43 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* Ant Design parity surface — percent + navigation */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>percent · navigation (Ant Design パリティ)</CardTitle>
+            <CardDescription>
+              percent は antd と同じく「現在ステップ」の進捗のみ(0–100
+              にクランプ)。マーカーの周りに確定アークを描き、role=&quot;progressbar&quot;
+              として読み上げられる。type=&quot;navigation&quot; は antd
+              のスラブ型ナビゲーションバーで、既定のヘアライン
+              コネクタは切られ、代わりにシェブロンで繋がる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <div id="antd-steps-percent">
+                <Steps
+                  value={1}
+                  percent={40}
+                  items={[{ title: "申込" }, { title: "審査" }, { title: "完了" }]}
+                />
+              </div>
+              <div id="antd-steps-navigation">
+                <Steps
+                  type="navigation"
+                  value={1}
+                  onValueChange={() => {}}
+                  items={[
+                    { title: "申込", description: "受付済" },
+                    { title: "審査", description: "書類確認中" },
+                    { title: "完了", description: "未着手" },
+                  ]}
+                />
+              </div>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );