@godxjp/ui 19.6.0 → 20.0.0

package/docs/data-display/legend.tsx

@@ -0,0 +1,145 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Legend,
+  Progress,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const COMPLIANCE = [
+  { name: "株式会社山田製作所", over: 2, near: 3, done: 12 },
+  { name: "佐藤食品株式会社", over: 1, near: 2, done: 9 },
+  { name: "東海精密工業株式会社", over: 0, near: 3, done: 21 },
+];
+
+const STATUS_KEYS = [
+  { tone: "destructive", label: "期限超過" },
+  { tone: "warning", label: "期限間近" },
+  { tone: "success", label: "対応済" },
+] as const;
+
+/**
+ * Legend — the KEY for a colour-coded surface: which tone means what, in words, once.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Legend" subtitle="tone → 意味 のキー · 凡例">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Progress の breakdown と組む</CardTitle>
+            <CardDescription>
+              CardAction に置くと、カード見出しと同じ行に凡例が並びます。色の意味をカードで
+              一度だけ言い、各行では繰り返しません。
+            </CardDescription>
+            <CardAction>
+              <Legend items={[...STATUS_KEYS]} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gapRaw={11}>
+              {COMPLIANCE.map((row) => (
+                <Flex key={row.name} align="center" gapRaw={14}>
+                  <Flex width={180}>
+                    <Text weight="medium" truncate>
+                      {row.name}
+                    </Text>
+                  </Flex>
+                  <Flex fill direction="col">
+                    <Progress
+                      segments={[
+                        { value: row.over, tone: "destructive", label: "期限超過" },
+                        { value: row.near, tone: "warning", label: "期限間近" },
+                        { value: row.done, tone: "success", label: "対応済" },
+                      ]}
+                      aria-label={row.name}
+                    />
+                  </Flex>
+                  <Flex width={150} justify="end" align="center" gapRaw={12}>
+                    <Text tone="destructive" weight="semibold" tabular>
+                      {row.over}
+                    </Text>
+                    <Text tone="warning" weight="semibold" tabular>
+                      {row.near}
+                    </Text>
+                    <Text tone="success" weight="semibold" tabular>
+                      {row.done}
+                    </Text>
+                    <Text tone="muted" tabular>
+                      計 {row.over + row.near + row.done}
+                    </Text>
+                  </Flex>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tones</CardTitle>
+            <CardDescription>
+              vocabulary の 7 tone すべてに塗りがあります。色だけで意味を運ばないため label
+              は必須です（WCAG 1.4.1）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Legend
+              items={[
+                { tone: "default", label: "既定（primary）" },
+                { tone: "success", label: "成功" },
+                { tone: "warning", label: "注意" },
+                { tone: "destructive", label: "危険" },
+                { tone: "info", label: "情報" },
+                { tone: "muted", label: "控えめ" },
+                { tone: "neutral", label: "中立" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Named legend</CardTitle>
+            <CardDescription>
+              aria-label を渡すと、その凡例が「何のキーか」を読み上げます。項目は list /
+              listitem として並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Legend items={[...STATUS_KEYS]} aria-label="コンプライアンス状況の凡例" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wrapping</CardTitle>
+            <CardDescription>
+              狭い幅では折り返します（横スクロールしません）。凡例が視界の外に出ると、色の意味
+              そのものが失われるためです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex width={240}>
+              <Legend
+                items={[
+                  { tone: "destructive", label: "期限超過" },
+                  { tone: "warning", label: "期限間近" },
+                  { tone: "success", label: "対応済" },
+                  { tone: "info", label: "確認中" },
+                  { tone: "muted", label: "対象外" },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/progress.tsx

@@ -33,6 +33,38 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Breakdown（segments）</CardTitle>
+            <CardDescription>
+              1 つの合計を状態ごとに分割します。割合ではなく実数を渡すと、各スライスの比率は
+              コンポーネントが計算します。メーターより背の高いトラックになるのは、0.5rem の pill
+              上に 3 色を並べると比率が読めなくなるためです。role=&quot;img&quot;
+              として、全スライスを 1 つの名前で読み上げます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Progress
+                segments={[
+                  { value: 2, tone: "destructive", label: "期限超過" },
+                  { value: 3, tone: "warning", label: "期限間近" },
+                  { value: 12, tone: "success", label: "対応済" },
+                ]}
+                label="株式会社山田製作所"
+              />
+              <Progress
+                segments={[
+                  { value: 0, tone: "destructive", label: "期限超過" },
+                  { value: 1, tone: "warning", label: "期限間近" },
+                  { value: 6, tone: "success", label: "対応済" },
+                ]}
+                label="みどり農産株式会社（0 件のスライスは幅 0）"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Over capacity</CardTitle>

package/docs/data-entry/segmented.tsx

@@ -7,7 +7,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
 
 /**
- * Segmented — one-of-N from a small, closed, always-visible set. antd's Segmented drawn on Radix
+ * Segmented — one-of-N from a small, closed, always-visible set. The enterprise Segmented drawn on Radix
  * RadioGroup: a recessed track with the chosen item as a lifted slab, radiogroup semantics, arrow
  * keys between members. The track measures exactly --control-height, so it sits level with an
  * Input or a Button on the same row.

package/docs/data-entry/select.tsx

@@ -286,8 +286,8 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>labelRender · custom selected display</CardTitle>
             <CardDescription>
-              `labelRender` (Ant Design) customizes the SELECTED value shown on the trigger: here an
-              avatar + name + a role badge. The placeholder still shows when nothing is selected.
+              `labelRender` customizes the SELECTED value shown on the trigger: here an avatar +
+              name + a role badge. The placeholder still shows when nothing is selected.
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/feedback/sheet.tsx

@@ -47,7 +47,7 @@ const headerTones = [
  * Sheet > SheetTrigger (asChild) > SheetContent(side) > SheetHeader >
  * SheetTitle (a11y required) > scrollable body > SheetFooter.
  *
- * SheetFooter is an Ant-Design-style PINNED action bar: it sticks to the bottom
+ * SheetFooter is a PINNED action bar: it sticks to the bottom
  * via mt-auto, draws a full-bleed top border, and right-aligns its actions with
  * the PRIMARY button rightmost. A destructive / clear / reset action goes
  * far-LEFT · give THAT button className="me-auto". Never stack footer buttons

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/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/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";
 
 /**
@@ -123,6 +123,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>
+  );
+}