@godxjp/ui 21.0.0 → 23.0.0

package/docs/data-entry/slider.tsx

@@ -2,82 +2,111 @@ import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { FormField, Slider } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { Text } from "@godxjp/ui/general";
 
 /**
- * Slider — Radix Slider wrapper. value/defaultValue MUST be number[] not a plain
- * number. Single-thumb: [50], dual-thumb range: [20, 80].
- * Use onValueCommit (not onValueChange) for expensive side-effects.
+ * Slider — react-aria-components underneath, the antd 6 API on top.
+ * `value` is a plain number for one thumb and an array for a `range`; the Radix-era
+ * `number[]` + `onValueChange` spelling still compiles and still works.
+ * Use `onChange` for live UI and `onChangeComplete` for the expensive work.
  * Composed only from real @godxjp/ui components.
  */
-const yen = (n: number) =>
-  new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(n);
+const yen = (value: number) =>
+  new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(value);
 
 export default function Demo() {
-  const [taxRate, setTaxRate] = useState<number[]>([10]);
+  const [taxRate, setTaxRate] = useState(10);
   const [amountRange, setAmountRange] = useState<number[]>([50000, 300000]);
+  const [committedRange, setCommittedRange] = useState<number[]>([50000, 300000]);
+  const [plan, setPlan] = useState(30);
   const [allocation, setAllocation] = useState<number[]>([40]);
+  const [bands, setBands] = useState<number[]>([25, 60]);
+  const [volume, setVolume] = useState(60);
 
   return (
     <PageContainer
       title="Slider"
-      subtitle="Numeric range slider · value/defaultValue must be number[] (single-thumb: [n], range: [min, max])"
+      subtitle="数値スライダー · 単一は number、range は [number, number] · onChange は逐次、onChangeComplete は確定時"
     >
       <Flex direction="col" gap="lg">
         <Card>
           <CardHeader>
             <CardTitle level={2}>単一スライダー · 税率設定</CardTitle>
             <CardDescription>
-              Single-thumb controlled slider. value={`[n]`} — plain number breaks rendering.
-              onValueChange fires on every drag; onValueCommit fires on release.
+              antd と同じ書き味: value に数値を渡し、onChange が数値を返す。tooltip.formatter は
+              吹き出しの表記であると同時に読み上げ (aria-valuetext) にもなる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="tax-rate" label={`消費税率: ${taxRate}%`} helper="0% / 2% 刻みで選択">
+              <Slider
+                value={taxRate}
+                onChange={setTaxRate}
+                min={0}
+                max={10}
+                step={2}
+                name="tax_rate"
+                tooltip={{ formatter: (value) => `${value}%` }}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レンジスライダー · 請求金額フィルタ</CardTitle>
+            <CardDescription>
+              range を明示すると、値が未到着でも [min, max] の 2 つのつまみで描画される。
+              再取得のような重い処理は onChangeComplete に置く。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
               <FormField
-                id="tax-rate"
-                label={`消費税率: ${taxRate[0]}%`}
-                helper="0% / 8% (軽減税率) / 10% から選択"
+                id="amount-range"
+                label={`請求金額: ${yen(amountRange[0])} 〜 ${yen(amountRange[1])}`}
               >
                 <Slider
-                  value={taxRate}
-                  onValueChange={setTaxRate}
+                  range
+                  value={amountRange}
+                  onChange={setAmountRange}
+                  onChangeComplete={setCommittedRange}
                   min={0}
-                  max={10}
-                  step={2}
-                  name="tax_rate"
-                  aria-label="消費税率"
+                  max={1000000}
+                  step={10000}
+                  minStepsBetweenThumbs={1}
+                  tooltip={{ formatter: yen }}
                 />
               </FormField>
+              <Text tone="muted" size="sm">
+                確定値 (onChangeComplete): {yen(committedRange[0])} 〜 {yen(committedRange[1])}
+              </Text>
             </Flex>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>レンジスライダー · 請求金額フィルタ</CardTitle>
+            <CardTitle level={2}>目盛りだけを値にする · step={"{null}"}</CardTitle>
             <CardDescription>
-              Dual-thumb range slider: value={`[min, max]`}. Use minStepsBetweenThumbs to prevent
-              thumbs overlapping.
+              marks と step={"{null}"} を組み合わせると、つまみは目盛り・min・max にしか止まらない。
+              dots は目盛りごとの点で、included の範囲内だけが濃くなる。
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <FormField
-              id="amount-range"
-              label={`請求金額: ${yen(amountRange[0])} 〜 ${yen(amountRange[1])}`}
-            >
+            <FormField id="plan" label={`料金プラン: ${plan}`} helper="無料 / 標準 / 上位 / 特別">
               <Slider
-                value={amountRange}
-                onValueChange={setAmountRange}
-                onValueCommit={(v) => {
-                  // expensive filter refetch only on commit (pointer/key release)
-                  void v;
+                value={plan}
+                onChange={setPlan}
+                step={null}
+                dots
+                marks={{
+                  0: "無料",
+                  30: "標準",
+                  70: "上位",
+                  100: { style: { fontWeight: 700 }, label: "特別" },
                 }}
-                min={0}
-                max={1000000}
-                step={10000}
-                minStepsBetweenThumbs={1}
-                aria-label="請求金額範囲"
               />
             </FormField>
           </CardContent>
@@ -85,17 +114,17 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>予算配分スライダー</CardTitle>
+            <CardTitle level={2}>予算配分 · Radix 時代の書き方も有効</CardTitle>
             <CardDescription>
-              step=5 for coarse granularity. Use name= to submit with a native form without JS
-              wiring.
+              number[] の value と onValueChange / onValueCommit はそのまま動く。name を付ければ
+              JavaScript なしでフォーム送信できる (つまみが複数なら name[])。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <FormField
               id="allocation"
               label={`広告費配分: ${allocation[0]}%`}
-              helper="残り ${100 - allocation[0]}% が運転資金へ充当されます"
+              helper={`残り ${100 - allocation[0]}% が運転資金へ充当されます`}
             >
               <Slider
                 value={allocation}
@@ -104,7 +133,7 @@ export default function Demo() {
                 max={100}
                 step={5}
                 name="ad_allocation"
-                aria-label="広告費配分"
+                marks={{ 0: "0%", 50: "50%", 100: "100%" }}
               />
             </FormField>
           </CardContent>
@@ -112,16 +141,65 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Disabled (read-only indicator)</CardTitle>
+            <CardTitle level={2}>編集できるレンジ · range={"{{ editable: true }}"}</CardTitle>
             <CardDescription>
-              Pass disabled with a controlled value to show a non-interactive bar. Use Progress for
-              pure status display.
+              レール上を押すとつまみが増え、Delete / Backspace で減る (minCount 〜 maxCount)。
+              included=false は「ここまで」を塗らない目盛り専用のレール。
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <FormField id="locked-rate" label="確定済み税率 (変更不可)">
-              <Slider value={[10]} disabled min={0} max={20} step={1} aria-label="確定済み税率" />
-            </FormField>
+            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg">
+              <FormField id="bands" label={`区切り: ${bands.join(" / ")}`}>
+                <Slider
+                  range={{ editable: true, minCount: 1, maxCount: 4, draggableTrack: false }}
+                  value={bands}
+                  onChange={setBands}
+                  step={5}
+                />
+              </FormField>
+              <FormField id="scale" label="評価スケール (included={false})">
+                <Slider
+                  defaultValue={50}
+                  included={false}
+                  marks={{ 0: "低", 50: "中", 100: "高" }}
+                />
+              </FormField>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>縦・逆向き・無効</CardTitle>
+            <CardDescription>
+              vertical は下が min、reverse は向きを入れ替える (矢印キーも一緒に反転)。 disabled
+              は配列でつまみ単位にもできる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg">
+              <FormField id="volume-vertical" label={`音量 (縦): ${volume}`}>
+                <Slider
+                  vertical
+                  value={volume}
+                  onChange={setVolume}
+                  marks={{ 0: "0", 50: "50", 100: "100" }}
+                  tooltip
+                />
+              </FormField>
+              <FormField id="countdown" label="残り日数 (reverse)">
+                <Slider
+                  reverse
+                  defaultValue={30}
+                  max={60}
+                  step={5}
+                  marks={{ 0: "0日", 30: "30日", 60: "60日" }}
+                />
+              </FormField>
+              <FormField id="locked-rate" label="確定済み税率 (変更不可)">
+                <Slider value={10} disabled min={0} max={20} step={1} />
+              </FormField>
+            </ResponsiveGrid>
           </CardContent>
         </Card>
       </Flex>

package/docs/feedback/dialog.tsx

@@ -109,8 +109,7 @@ export default function Demo() {
           <CardContent>
             <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
               <DialogTrigger asChild>
-                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
-                <Button data-axe-open variant="outline" size="sm">
+                <Button variant="outline" size="sm">
                   取引詳細を見る
                 </Button>
               </DialogTrigger>

package/docs/feedback/sheet.tsx

@@ -213,8 +213,7 @@ export default function Demo() {
           <CardContent>
             <Sheet open={editOpen} onOpenChange={setEditOpen}>
               <SheetTrigger asChild>
-                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
-                <Button data-axe-open variant="ghost" size="sm">
+                <Button variant="ghost" size="sm">
                   取引先を編集
                 </Button>
               </SheetTrigger>

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

@@ -0,0 +1,143 @@
+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 {
+  Bell,
+  Building2,
+  FileText,
+  LayoutDashboard,
+  MessageSquare,
+  Plus,
+  Receipt,
+  Users,
+} from "lucide-react";
+
+/**
+ * AppShell · grid states, one per URL.
+ *
+ * The shell's grid is keyed on four attributes — `data-sidebar`, `data-nav-rail(-position)`,
+ * `data-collapsed` and `data-topbar-span` — and every combination is a real product shape. This
+ * frame renders ONE AppShell in whichever state the query names, so a browser gate can walk all of
+ * them (`scripts/check-app-shell-narrow-grid.mjs`) without stacking several `main` landmarks on a
+ * single page:
+ *
+ *   ?topbarSpan=content|full   ?navRail=start|end|top|bottom   ?collapsed=1   ?sidebar=none
+ *   ?responsive=docked
+ *
+ * With no query it is `topbarSpan="full"` without a rail — the state gh#474 found collapsing
+ * `main` into a 170px implicit track below 900px, with the page actions laid out past the edge.
+ */
+
+const SECTIONS: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+      { id: "invoices", label: "請求書", icon: Receipt },
+    ],
+  },
+  {
+    label: "管理",
+    items: [
+      { id: "partners", label: "取引先", icon: Building2 },
+      { id: "users", label: "ユーザー", icon: Users },
+    ],
+  },
+];
+
+type RailPosition = "start" | "end" | "top" | "bottom";
+
+function readState() {
+  const params = new URLSearchParams(window.location.search);
+  const rail = params.get("navRail");
+  return {
+    topbarSpan: params.get("topbarSpan") === "content" ? ("content" as const) : ("full" as const),
+    navRail: (["start", "end", "top", "bottom"] as const).find((p) => p === rail) as
+      RailPosition | undefined,
+    collapsed: params.get("collapsed") === "1",
+    hasSidebar: params.get("sidebar") !== "none",
+    responsiveNavigation:
+      params.get("responsive") === "docked" ? ("docked" as const) : ("drawer" as const),
+  };
+}
+
+export default function Demo() {
+  const [{ topbarSpan, navRail, collapsed, hasSidebar, responsiveNavigation }] =
+    useState(readState);
+  const [activeId, setActiveId] = useState("dashboard");
+  const strip = navRail === "top" || navRail === "bottom";
+
+  return (
+    <AppShell
+      topbarSpan={topbarSpan}
+      responsiveNavigation={responsiveNavigation}
+      sidebarCollapsed={collapsed}
+      sidebar={
+        hasSidebar ? (
+          <Sidebar
+            activeId={activeId}
+            collapsed={collapsed}
+            onSelect={setActiveId}
+            sections={SECTIONS}
+            product={{ name: "CoreBooks", role: "株式会社アクメ" }}
+          />
+        ) : undefined
+      }
+      navRail={
+        navRail ? (
+          <Flex direction={strip ? "row" : "col"} gap="xs" align="center">
+            <Button variant="ghost" size="icon-sm" aria-label="会計">
+              <Receipt />
+            </Button>
+            <Button variant="ghost" size="icon-sm" aria-label="チャット">
+              <MessageSquare />
+            </Button>
+          </Flex>
+        ) : undefined
+      }
+      navRailPosition={navRail}
+      topbar={
+        <Topbar
+          start={<Text weight="medium">CoreBooks</Text>}
+          end={
+            <Button variant="ghost" size="icon-sm" aria-label="通知">
+              <Bell />
+            </Button>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="請求書"
+        subtitle="株式会社アクメ · 2026年5月"
+        extra={
+          <Flex gap="sm" wrap>
+            <Button size="sm" variant="outline">
+              取引先へ一括送信する
+            </Button>
+            <Button size="sm">
+              <Plus />
+              新しい請求書を作成する
+            </Button>
+          </Flex>
+        }
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>今月の請求</CardTitle>
+            <CardDescription>未送信 3 件 · 入金待ち 12 件</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Text tone="muted">
+              状態はクエリで切り替えます。どの状態でも 900px 以下では 1 列になり、main
+              は画面幅いっぱいに広がります。
+            </Text>
+          </CardContent>
+        </Card>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/layout/mobile-shell.tsx

@@ -32,6 +32,11 @@ export default function Demo() {
 
   return (
     <MobileShell
+      // `width="phone"` because this frame is READ ON A DESKTOP. The shell's own docstring already
+      // named this case on the block axis (`height="fill"` for "a phone view embedded in a wider
+      // page"); the inline axis had no answer until now, so this page drew a 1232px-wide handheld
+      // app with its four tab-bar destinations spread across the screen.
+      width="phone"
       statusBar={
         <>
           <Text size="sm" weight="medium" tabular>

package/docs/navigation/dropdown-menu.tsx

@@ -21,8 +21,9 @@ import {
 import { MoreHorizontal } from "lucide-react";
 
 /**
- * DropdownMenu — Radix dropdown. Compose root/Trigger(asChild)/Content/Item/Separator.
+ * DropdownMenu — react-aria dropdown. Compose root/Trigger(asChild)/Content/Item/Separator.
  * Use asChild on Trigger so a godx-ui Button is the real trigger (no double-button).
+ * `trigger` picks the gestures (click / hover / contextMenu) — antd's own prop.
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
@@ -34,7 +35,7 @@ export default function Demo() {
   return (
     <PageContainer
       title="DropdownMenu"
-      subtitle="Radix dropdown · Trigger asChild + Content + Item/Separator/Sub"
+      subtitle="trigger: click / hover / contextMenu · Trigger asChild + Content + Item/Separator/Sub"
     >
       <Flex direction="col" gap="lg">
         <Card>
@@ -73,8 +74,7 @@ export default function Demo() {
               <Text>JE-0042 · 売上計上 ¥480,000</Text>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
-                  <Button data-axe-open variant="ghost" size="icon-sm" aria-label="行アクション">
+                  <Button variant="ghost" size="icon-sm" aria-label="行アクション">
                     <MoreHorizontal />
                   </Button>
                 </DropdownMenuTrigger>
@@ -90,6 +90,77 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* antd `trigger` — which gestures open the menu */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>trigger · 右クリック（コンテキストメニュー）</CardTitle>
+            <CardDescription>
+              trigger={"{"}[&quot;contextMenu&quot;]{"}"} は右クリックの位置にメニューを開き、
+              ブラウザ標準のメニューを抑止する。左クリックでは開かない。キーボードからは Shift+F10
+              または ContextMenu キーで開く（トリガーにフォーカスしてから）。専用の ContextMenu
+              コンポーネントは v23 で廃止され、これがその置き換え。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" align="center" gap="md">
+              <DropdownMenu trigger={["contextMenu"]}>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">仕訳 JE-0042 を右クリック</Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>編集</DropdownMenuItem>
+                  <DropdownMenuItem>複製</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>trigger · ホバーで開く</CardTitle>
+            <CardDescription>
+              trigger={"{"}[&quot;hover&quot;]{"}"} はポインタが乗ると mouseEnterDelay（既定 0.15
+              秒）後に開き、離れると mouseLeaveDelay（既定 0.1
+              秒）後に閉じる。トリガーとメニューの間の隙間を渡れるよう、閉じるのは取り消せる予約。
+              ホバーでフォーカスは移動せず、キーボードでは Enter / Space / ↓
+              で開くので、ポインタ専用にはならない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" align="center" gap="md">
+              <DropdownMenu trigger={["hover"]}>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">エクスポート</Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>CSV</DropdownMenuItem>
+                  <DropdownMenuItem>PDF</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <DropdownMenu trigger={["click", "contextMenu"]}>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">クリックでも右クリックでも</Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>編集</DropdownMenuItem>
+                  <DropdownMenuItem>複製</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <DropdownMenu disabled>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">無効（disabled）</Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>編集</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </Flex>
+          </CardContent>
+        </Card>
+
         {/* Status quick-change with RadioGroup */}
         <Card>
           <CardHeader>