@godxjp/ui 22.0.0 → 23.1.0

package/docs/data-entry/select.tsx

@@ -21,7 +21,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { X } from "lucide-react";
 
 /**
  * Select — the single-select control. Prefer the data-driven `options` API
@@ -38,6 +40,12 @@ export default function Demo() {
   const [reviewerAsync, setReviewerAsync] = useState("tanaka");
   const [reviewerCustom, setReviewerCustom] = useState("tanaka");
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
+  const [prefixed, setPrefixed] = useState("JPY");
+  const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
+  const [assignedTo, setAssignedTo] = useState<
+    { value: string; label: React.ReactNode } | undefined
+  >({ value: "52", label: "東京本社" });
 
   const people = [
     { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
@@ -82,9 +90,7 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens this Select before scanning, so the
-              overlay-open a11y state is measured. See docs/FRAME-A11Y-CI.md. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="status" label="状態">
               <Select
                 id="status"
@@ -392,6 +398,105 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              Ant Design 6 · prefix・suffixIcon・placement・listHeight
+            </CardTitle>
+            <CardDescription>
+              グループは options のネスト（{`{ label, options }`}）でも、行の group
+              でも同じ一覧になります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="prefixed" label="通貨">
+              <Select
+                id="prefixed"
+                name="currency_prefixed"
+                value={prefixed}
+                onValueChange={setPrefixed}
+                prefix={<Badge tone="muted">¥</Badge>}
+                placement="bottomEnd"
+                listHeight={220}
+                options={[
+                  {
+                    label: "アジア",
+                    options: [
+                      { value: "JPY", label: "日本円" },
+                      { value: "VND", label: "ベトナムドン" },
+                    ],
+                  },
+                  {
+                    label: "ヨーロッパ",
+                    options: [{ value: "EUR", label: "ユーロ" }],
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>mode=&quot;tags&quot; · tokenSeparators・tagRender</CardTitle>
+            <CardDescription>
+              一覧にない値も入力できます。カンマ区切りの貼り付けは一度にまとめて確定します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="tags" label="ラベル">
+              <Select
+                id="tags"
+                name="labels[]"
+                mode="tags"
+                value={tags}
+                onValueChange={setTags}
+                tokenSeparators={[",", "\n"]}
+                maxTagTextLength={6}
+                options={[
+                  { value: "至急", label: "至急" },
+                  { value: "要確認", label: "要確認" },
+                ]}
+                tagRender={({ label, onClose }) => (
+                  <Badge tone="info">
+                    {label}
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      aria-label={`${String(label)} を外す`}
+                      onClick={onClose}
+                    >
+                      <X aria-hidden="true" />
+                    </Button>
+                  </Badge>
+                )}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>
+            <CardDescription>
+              値が {`{ value, label }`} を持つので、選択肢がまだ届いていなくても ID
+              ではなく名前を表示できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="assigned" label="担当拠点">
+              <Select
+                id="assigned"
+                name="office_id"
+                labelInValue
+                value={assignedTo}
+                onValueChange={setAssignedTo}
+                notFoundContent="拠点を読み込み中"
+                options={[]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

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>
+  );
+}