@godxjp/ui 19.2.0 → 19.4.0

package/docs/layout/split-pane.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid, Separator, SplitPane } from "@godxjp/ui/layout";
 import {
   Card,
   CardContent,
@@ -17,7 +17,7 @@ import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-re
  * Shows: main list + detail panel, asideWidth sm/md, nested inside PageContainer.
  * It OWNS its query container (container-type: inline-size), so the two-column split
  * is chosen from the PANE's own width (≥48rem), not the viewport — a narrow embedded
- * pane on a large screen correctly stays single-column (gh#165).
+ * pane on a large screen correctly stays single-column.
  * Composed only from real @godxjp/ui components.
  *
  * NOTE: <Flex> defaults to direction="row"; vertical stacks set direction="col"
@@ -188,7 +188,7 @@ export default function Demo() {
                   </CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <Flex direction="col" gap="sm">
+                  <Flex direction="col" gap="xs">
                     <Flex direction="row" justify="between">
                       <Text tone="muted">小計</Text>
                       <Text tabular>{selected.amount}</Text>
@@ -197,7 +197,8 @@ export default function Demo() {
                       <Text tone="muted">消費税 (10%)</Text>
                       <Text tabular>{yen(base * 0.1)}</Text>
                     </Flex>
-                    <div className="border-border mt-1 border-t pt-2">
+                    <Separator />
+                    <div>
                       <Flex direction="row" justify="between">
                         <Text weight="bold">合計</Text>
                         <Text weight="bold" tabular>
@@ -417,31 +418,47 @@ export default function Demo() {
           <CardContent>
             <Flex direction="col" gap="md">
               {/* Narrow embed → stays single column (the container is < 48rem). */}
-              <div className="max-w-md border p-2">
-                <Text size="xs" tone="muted">
-                  約 28rem のコンテナ → 縦積み
-                </Text>
-                <SplitPane
-                  asideLabel="補助パネル（狭い埋め込み）"
-                  asideWidth="sm"
-                  aside={<div className="bg-muted p-4">補助パネル</div>}
-                >
-                  <div className="bg-muted p-4">メインコンテンツ</div>
-                </SplitPane>
-              </div>
+              <Card className="max-w-md">
+                <CardContent>
+                  <Text size="xs" tone="muted">
+                    約 28rem のコンテナ → 縦積み
+                  </Text>
+                  <SplitPane
+                    asideLabel="補助パネル（狭い埋め込み）"
+                    asideWidth="sm"
+                    aside={
+                      <Card variant="muted">
+                        <CardContent>補助パネル</CardContent>
+                      </Card>
+                    }
+                  >
+                    <Card variant="muted">
+                      <CardContent>メインコンテンツ</CardContent>
+                    </Card>
+                  </SplitPane>
+                </CardContent>
+              </Card>
               {/* Wide embed → splits into two columns (the container is ≥ 48rem). */}
-              <div className="max-w-4xl border p-2">
-                <Text size="xs" tone="muted">
-                  約 56rem のコンテナ → 2 カラム
-                </Text>
-                <SplitPane
-                  asideLabel="補助パネル（広い埋め込み）"
-                  asideWidth="sm"
-                  aside={<div className="bg-muted p-4">補助パネル</div>}
-                >
-                  <div className="bg-muted p-4">メインコンテンツ</div>
-                </SplitPane>
-              </div>
+              <Card className="max-w-4xl">
+                <CardContent>
+                  <Text size="xs" tone="muted">
+                    約 56rem のコンテナ → 2 カラム
+                  </Text>
+                  <SplitPane
+                    asideLabel="補助パネル（広い埋め込み）"
+                    asideWidth="sm"
+                    aside={
+                      <Card variant="muted">
+                        <CardContent>補助パネル</CardContent>
+                      </Card>
+                    }
+                  >
+                    <Card variant="muted">
+                      <CardContent>メインコンテンツ</CardContent>
+                    </Card>
+                  </SplitPane>
+                </CardContent>
+              </Card>
             </Flex>
           </CardContent>
         </Card>

package/docs/layout/topbar.tsx

@@ -37,10 +37,7 @@ import {
 
 /**
  * Topbar · a PURE SLOT bar. The shell only positions `start` / `center` / `end`; the CONSUMER
- * composes every control. This demo builds the chrome the OLD baked Topbar used to force ·
- * sidebar toggle, brand mark (Avatar), an entity switcher, a search trigger, a notifications button, a
- * user menu · entirely from real primitives, so you can see there is no hidden template (and no
- * dead dropdown: a control exists ONLY because it's placed here).
+ * composes every control.
  */
 const SECTIONS: SidebarSectionProp[] = [
   {
@@ -98,7 +95,7 @@ export default function Demo() {
         {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
       </Button>
       {/* Decorative mark — hidden below sm so the budget goes to the two real controls. */}
-      <Avatar className="hidden rounded-md sm:flex">
+      <Avatar className="rounded-md">
         <AvatarFallback className="bg-primary text-primary-foreground font-bold">C</AvatarFallback>
       </Avatar>
       <DropdownMenu>
@@ -120,7 +117,7 @@ export default function Demo() {
           <DropdownMenuSeparator />
           {ENTITIES.map((e) => (
             <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e)}>
-              <Building2 className="me-2 size-4" />
+              <Building2 className="size-4" />
               {e.name}
               {activeEntity.id === e.id ? (
                 <Badge variant="secondary" className="ms-auto text-xs">
@@ -153,11 +150,8 @@ export default function Demo() {
   // end · notifications + user menu, both consumer-composed.
   const end = (
     <>
-      {/* The end slot is `flex: 0 0 auto` — whatever sits here is taken out of the start slot's
-          budget before it gets a say. At 320 this environment chip alone claimed 93 of the bar's
-          198px, squeezing start to 25px and clipping the entity switcher inside it. An ambient
-          status label is the first thing a compact bar drops, so it appears from sm up. */}
-      <Badge tone="warning" className="hidden text-xs sm:inline-flex">
+      {}
+      <Badge tone="warning" className="text-xs">
         ステージング
       </Badge>
       <Button
@@ -184,16 +178,16 @@ export default function Demo() {
           <DropdownMenuLabel>佐藤 花子</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
-            <UserRound className="me-2 size-4" />
+            <UserRound className="size-4" />
             プロフィール
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <Settings className="me-2 size-4" />
+            <Settings className="size-4" />
             アカウント設定
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
-            <LogOut className="me-2 size-4" />
+            <LogOut className="size-4" />
             ログアウト
           </DropdownMenuItem>
         </DropdownMenuContent>
@@ -291,9 +285,9 @@ export default function Demo() {
                   { prop: "children", desc: "3 slot を使わず完全カスタムにする場合の逃げ道" },
                 ].map(({ prop, desc }) => (
                   <Flex key={prop} align="start" gap="sm">
-                    <code className="bg-muted shrink-0 rounded px-1.5 py-0.5 font-mono text-xs">
+                    <Badge variant="secondary" className="shrink-0">
                       {prop}
-                    </code>
+                    </Badge>
                     <Text tone="muted">{desc}</Text>
                   </Flex>
                 ))}
@@ -331,13 +325,15 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="max-w-80 overflow-hidden border p-2">
-                <Topbar
-                  start={<Text weight="medium">株式会社とても長い組織名称</Text>}
-                  center={<Button variant="outline">すべての取引を検索</Button>}
-                  end={<Button variant="ghost">山田 太郎 システム管理者</Button>}
-                />
-              </div>
+              <Card className="max-w-80 overflow-hidden">
+                <CardContent>
+                  <Topbar
+                    start={<Text weight="medium">株式会社とても長い組織名称</Text>}
+                    center={<Button variant="outline">すべての取引を検索</Button>}
+                    end={<Button variant="ghost">山田 太郎 システム管理者</Button>}
+                  />
+                </CardContent>
+              </Card>
             </CardContent>
           </Card>
         </Flex>

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

@@ -90,9 +90,11 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="max-w-80 border p-3" lang="ja">
-                <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
-              </div>
+              <Card className="max-w-80" lang="ja">
+                <CardContent>
+                  <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
+                </CardContent>
+              </Card>
             </CardContent>
           </Card>
 
@@ -106,7 +108,6 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <Topbar
-                className="rounded-md border"
                 start={
                   <Avatar className="rounded-md">
                     <AvatarFallback>G</AvatarFallback>

package/docs/navigation/breadcrumb.tsx

@@ -1,6 +1,13 @@
 import { forwardRef } from "react";
 import type { AnchorHTMLAttributes } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CodeBlock,
+} from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
 import { Breadcrumb } from "@godxjp/ui/layout";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -110,15 +117,15 @@ export default function Demo() {
               {/* tabIndex: the snippet scrolls sideways on a narrow viewport and holds no
                   focusable content, so without its own tab stop a keyboard user cannot reach the
                   clipped end of the line (WCAG 2.1.1). */}
-              <pre tabIndex={0} className="bg-muted overflow-x-auto rounded p-3 text-xs">
+              <CodeBlock size="xs" wrap={false}>
                 {`<Breadcrumb items={[{ label: "ホーム", to: "/" }, { label: "現在ページ" }]} />`}
-              </pre>
+              </CodeBlock>
               <Text as="p" size="xs" tone="muted">
                 PageContainer / AppShell の breadcrumb プロップに (任意):
               </Text>
-              <pre tabIndex={0} className="bg-muted overflow-x-auto rounded p-3 text-xs">
+              <CodeBlock size="xs" wrap={false}>
                 {`<PageContainer title="仕訳詳細" breadcrumb={[{ label: "ホーム", to: "/" }, { label: "JE-0042" }]}>`}
-              </pre>
+              </CodeBlock>
             </Flex>
           </CardContent>
         </Card>

package/docs/navigation/context-menu.tsx

@@ -47,8 +47,11 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <ContextMenu>
-              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
-                <Text tone="muted">ここを右クリックしてください</Text>
+              {/* 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>
@@ -89,8 +92,11 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <ContextMenu>
-              <ContextMenuTrigger className="border-border flex h-36 w-full cursor-context-menu items-center justify-center rounded-md border border-dashed">
-                <Text tone="muted">右クリック · 表示設定</Text>
+              {/* 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>

package/docs/navigation/filter-bar.tsx

@@ -39,7 +39,7 @@ export default function Demo() {
   const [period, setPeriod] = useState("all");
   const hasActiveFilters = query !== "" || status !== "all";
 
-  // Typed model (gh#258) — ALL state is consumer data; the bar only renders it.
+  // Typed model — ALL state is consumer data; the bar only renders it.
   const [modelQuery, setModelQuery] = useState("田中");
   const [modelStatus, setModelStatus] = useState("active");
   const [modelRole, setModelRole] = useState("");
@@ -80,7 +80,7 @@ export default function Demo() {
       subtitle="Search, labelled filters, active state, consumer-owned reset, and both responsive overflow strategies"
     >
       <Flex direction="col" gap="lg">
-        {/* Typed model (gh#258) — search/filters/chips/reset/result-count/actions as DATA.
+        {/* Typed model — search/filters/chips/reset/result-count/actions as DATA.
             The bar owns layout, token widths, chip lifecycle and keyboard order; the page owns
             every piece of state. Remove a chip, reset, or pick a filter and watch the chips row
             and the localized result count follow. */}

package/docs/navigation/navigation-menu.tsx

@@ -8,7 +8,7 @@ import {
   NavigationMenuTrigger,
   NavigationMenuViewport,
 } from "@godxjp/ui/navigation";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 import { Text } from "@godxjp/ui/general";
 
 /**
@@ -38,60 +38,56 @@ export default function Demo() {
                   <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>
+                    <ResponsiveGrid columns={{ sm: 1, md: 2 }} gap="sm" className="md:w-[400px]">
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              仕訳入力
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              借方・貸方を直接入力して仕訳を作成します。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              仕訳帳
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              全仕訳の一覧・検索・フィルタリング。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              総勘定元帳
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              勘定科目ごとの残高・取引履歴。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              試算表
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              期間指定で借方・貸方の合計を確認。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                    </ResponsiveGrid>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
 
@@ -99,47 +95,44 @@ export default function Demo() {
                   <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>
+                    <ResponsiveGrid columns={1} gap="sm" className="md:w-[360px]">
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              貸借対照表
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              特定日時点の資産・負債・純資産。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              損益計算書
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              期間中の収益・費用・利益の要約。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                      <NavigationMenuLink href="#" className="hover:bg-accent block rounded-md">
+                        <CardContent>
+                          <Flex direction="col" gap="xs">
+                            <Text as="div" weight="medium">
+                              キャッシュフロー計算書
+                            </Text>
+                            <Text as="p" size="xs" tone="muted">
+                              営業・投資・財務活動別の資金移動。
+                            </Text>
+                          </Flex>
+                        </CardContent>
+                      </NavigationMenuLink>
+                    </ResponsiveGrid>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
 

package/docs/navigation/pagination.tsx

@@ -97,7 +97,7 @@ export default function Demo() {
           onValueChange={handleChange}
         />
 
-        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in (gh#153). */}
+        {/* Regression: total=0, exactly one page, multiple pages, + the single-page opt-in. */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>境界状態 · 0 件 / 1 ページ / 複数ページ</CardTitle>
@@ -136,7 +136,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Long localized total label — the row stays ONE line and never wraps on desktop (gh#153). */}
+        {/* Long localized total label — the row stays ONE line and never wraps on desktop. */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>長いローカライズ済みラベル · 折り返さない</CardTitle>

package/docs/navigation/steps.tsx

@@ -187,16 +187,18 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="max-w-80 border p-2">
-              <Steps
-                value={1}
-                items={[
-                  { title: "会社情報の入力", description: "法人番号と所在地" },
-                  { title: "本人確認書類のアップロード", description: "代表者の確認" },
-                  { title: "申請内容の最終確認", description: "送信前の確認" },
-                ]}
-              />
-            </div>
+            <Card className="max-w-80">
+              <CardContent>
+                <Steps
+                  value={1}
+                  items={[
+                    { title: "会社情報の入力", description: "法人番号と所在地" },
+                    { title: "本人確認書類のアップロード", description: "代表者の確認" },
+                    { title: "申請内容の最終確認", description: "送信前の確認" },
+                  ]}
+                />
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -227,7 +229,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* Inline row — the hosted-identity / device progression (gh#12) */}
+        {/* Inline row — the hosted-identity / device progression */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>