@godxjp/ui 27.0.0 → 27.3.1

package/docs/data-display/timeline.tsx

@@ -91,6 +91,10 @@ export default function Demo() {
     new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }).format(
       Date.UTC(2026, 8, day),
     );
+  const monthLabel = (month: number) =>
+    new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", timeZone: "UTC" }).format(
+      Date.UTC(2026, month, 1),
+    );
   return (
     <PageContainer title="Timeline" subtitle="現在のステップを強調する縦型のイベント一覧">
       <Flex direction="col" gap="lg">
@@ -162,23 +166,83 @@ export default function Demo() {
         <Card>
           <CardHeader>
             <CardTitle level={2}>RangeTimeline</CardTitle>
+            <CardDescription>
+              日単位の軸。行ごとの区切り線と、列ごとの縦線が本体全体に引かれます（bordered は既定で
+              true）。土日は columns[].muted
+              で本体の高さいっぱいに塗り分け、表示範囲の外にある期間は、その方向の端に矢印付きで示します。
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <RangeTimeline
               label={t("rangeTimeline.schedule")}
-              bands={[
-                {
-                  label: new Intl.DateTimeFormat(locale, {
-                    year: "numeric",
-                    month: "long",
-                    timeZone: "UTC",
-                  }).format(Date.UTC(2026, 8, 1)),
-                  units: 7,
-                },
+              today={8}
+              bands={[{ label: monthLabel(8), units: 14 }]}
+              columns={Array.from({ length: 14 }, (_, index) => {
+                const weekday = new Date(Date.UTC(2026, 8, index + 1)).getUTCDay();
+                return {
+                  label: new Intl.NumberFormat(locale).format(index + 1),
+                  units: 1,
+                  muted: weekday === 0 || weekday === 6,
+                };
+              })}
+              rows={[
+                { id: "design", label: "要件定義", start: 0, end: 3 },
+                { id: "build", label: "実装", start: 3, end: 10 },
+                { id: "review", label: "レビュー", start: 9, end: 12 },
+                { id: "kickoff", label: "キックオフ（前月）", start: -12, end: -9 },
+                { id: "release", label: "リリース（来月）", start: 20, end: 22 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月単位の軸（列ごとに units が異なる）</CardTitle>
+            <CardDescription>
+              units
+              は日数です。9月30・10月31・11月30と幅が異なっても、本体の縦線はヘッダーの列の境界に揃います。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              columns={[
+                { label: monthLabel(8), units: 30 },
+                { label: monthLabel(9), units: 31 },
+                { label: monthLabel(10), units: 30 },
               ]}
+              rows={[
+                { id: "phase-1", label: "第1期", start: 0, end: 44 },
+                { id: "phase-2", label: "第2期", start: 45, end: 90 },
+              ].map((row) => ({
+                ...row,
+                startLabel: dayLabel(row.start + 1),
+                endLabel: dayLabel(row.end + 1),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>罫線なし（bordered=false）</CardTitle>
+            <CardDescription>
+              ヘッダーの列線だけを残し、本体の罫線を外します。muted の列の塗りは残ります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bordered={false}
               columns={Array.from({ length: 7 }, (_, index) => ({
                 label: dayLabel(index + 1),
                 units: 1,
+                muted: index === 5,
               }))}
               rows={[
                 {

package/docs/data-entry/command.tsx

@@ -1,7 +1,17 @@
 import { useEffect, useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@godxjp/ui/data-display";
+import {
+  Checkbox,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -10,7 +20,9 @@ import {
   CommandList,
 } from "@godxjp/ui/data-entry";
 import { Skeleton } from "@godxjp/ui/feedback";
+import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { ChevronDown } from "lucide-react";
 
 /**
  * Command — キーボードナビゲーション対応のコマンドパレット。
@@ -30,6 +42,14 @@ const VENDOR_DIRECTORY: Suggestion[] = [
   { value: "v-005", label: "田中物産" },
 ];
 
+const MEMBERS: Suggestion[] = [
+  { value: "m-001", label: "山田 太郎" },
+  { value: "m-002", label: "佐藤 花子" },
+  { value: "m-003", label: "鈴木 一郎" },
+  { value: "m-004", label: "高橋 美咲" },
+  { value: "m-005", label: "PHAM THAI DUONG（プロジェクト外）" },
+];
+
 export default function Demo() {
   // Card 1: grouped quick-select. Controlled `value` pre-highlights an item so the
   // [aria-selected=true] accent is visible at rest, without keyboard interaction.
@@ -44,6 +64,13 @@ export default function Demo() {
   const [loading, setLoading] = useState<boolean>(true);
   const [results, setResults] = useState<Suggestion[]>([]);
 
+  // Card 4: filter facet — a checklist, so the list is `split` (ruled rows, 0 list padding).
+  const [assignees, setAssignees] = useState<string[]>(["m-002"]);
+  const toggleAssignee = (member: string) =>
+    setAssignees((current) =>
+      current.includes(member) ? current.filter((m) => m !== member) : [...current, member],
+    );
+
   useEffect(() => {
     let active = true;
     setLoading(true);
@@ -131,6 +158,58 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>担当者フィルター（split）</CardTitle>
+            <CardDescription>
+              Popover + Command に split を付けると、行間に区切り線・リスト余白 0・行は popover
+              の端まで届く一つの箱として描画されます。チェックボックスで複数選択（選択中:{" "}
+              {assignees.length} 名）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline">
+                  担当者{assignees.length > 0 ? ` (${assignees.length})` : ""}
+                  <ChevronDown aria-hidden="true" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent flush align="start">
+                <Command label="担当者を絞り込む" split>
+                  <CommandInput placeholder="担当者 を絞り込む" />
+                  <CommandList>
+                    <CommandEmpty>該当する担当者がいません。</CommandEmpty>
+                    <CommandGroup>
+                      {MEMBERS.map((member) => {
+                        const checked = assignees.includes(member.value);
+                        return (
+                          <CommandItem
+                            key={member.value}
+                            value={member.label}
+                            aria-checked={checked}
+                            onSelect={() => toggleAssignee(member.value)}
+                          >
+                            {/* The ROW is the option and owns the click; the box only mirrors it,
+                                so it leaves the tab ring (TreeSelect does the same). */}
+                            <Checkbox
+                              checked={checked}
+                              tabIndex={-1}
+                              onCheckedChange={() => toggleAssignee(member.value)}
+                              aria-labelledby={`assignee-${member.value}`}
+                            />
+                            <span id={`assignee-${member.value}`}>{member.label}</span>
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>勤怠アクションパレット（Cmd+K 想定）</CardTitle>

package/docs/data-entry/form-root.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { z } from "zod";
 import { Alert, AlertDescription } from "@godxjp/ui/feedback";
-import { Input } from "@godxjp/ui/data-entry";
+import { Checkbox, Input } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -10,12 +10,13 @@ import { FormFieldControl, FormRoot, useZodForm } from "@godxjp/ui/form";
 const schema = z.object({
   name: z.string().min(1, "組織名を入力してください"),
   email: z.string().email("有効なメールアドレスを入力してください"),
+  is_shared: z.boolean(),
 });
 
 export default function Demo() {
   const [status, setStatus] = useState<"idle" | "pending" | "success" | "server-error">("idle");
   const form = useZodForm(schema, {
-    defaultValues: { name: "株式会社アクメ", email: "billing@example.jp" },
+    defaultValues: { name: "株式会社アクメ", email: "billing@example.jp", is_shared: false },
   });
 
   async function submit() {
@@ -70,6 +71,15 @@ export default function Demo() {
                 />
               )}
             </FormFieldControl>
+            {/* Boolean field (antd `valuePropName="checked"`): the label is the Checkbox's children,
+                on the same line as the box — no label row above it. */}
+            <FormFieldControl name="is_shared" valuePropName="checked">
+              {(field) => (
+                <Checkbox {...field} disabled={status === "pending"}>
+                  請求書をプロジェクトメンバーに共有する
+                </Checkbox>
+              )}
+            </FormFieldControl>
             <Flex gap="sm" wrap>
               <Button type="submit" loading={status === "pending"}>
                 保存

package/docs/feedback/dialog.tsx

@@ -34,6 +34,15 @@ const headerTones = [
   "neutral",
 ] as const;
 
+/** Order lines behind the non-modal payment dialog — they stay editable while it is open. */
+const initialLines = [
+  { id: "coffee", name: "ブレンドコーヒー", unitPrice: 480, quantity: 2 },
+  { id: "sandwich", name: "ミックスサンド", unitPrice: 650, quantity: 1 },
+  { id: "cake", name: "チーズケーキ", unitPrice: 520, quantity: 1 },
+];
+
+const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
+
 /**
  * Dialog · compound controlled modal for form-style flows. Always control via
  * open + onOpenChange. Include DialogHeader > DialogTitle (required for a11y).
@@ -46,6 +55,16 @@ export default function Demo() {
   const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
   const [terminateOpen, setTerminateOpen] = useState(false);
   const [reason, setReason] = useState("");
+  const [paymentOpen, setPaymentOpen] = useState(false);
+  const [lines, setLines] = useState(initialLines);
+  const total = lines.reduce((sum, line) => sum + line.unitPrice * line.quantity, 0);
+  const changeQuantity = (id: string, delta: number) => {
+    setLines((current) =>
+      current.map((line) =>
+        line.id === id ? { ...line, quantity: Math.max(0, line.quantity + delta) } : line,
+      ),
+    );
+  };
 
   return (
     <PageContainer
@@ -249,6 +268,69 @@ export default function Demo() {
             </Dialog>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Non-modal dialog: the list behind stays editable</CardTitle>
+            <CardDescription>
+              modal=&#123;false&#125; renders a non-modal dialog, a pattern WAI-ARIA APG allows. The
+              page behind keeps working: no scrim, no scroll lock, nothing hidden from assistive
+              tech, and a press outside does not close the dialog. Open the payment dialog, then
+              change a quantity below. The total inside the dialog follows. Focus moves into the
+              dialog on open, Tab can leave it, Escape closes it while focus is inside, and focus
+              returns to the trigger.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {lines.map((line) => (
+                <Flex key={line.id} direction="row" align="center" justify="between" gap="sm">
+                  <Text>{line.name}</Text>
+                  <Flex direction="row" align="center" gap="sm">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      aria-label={`${line.name}を減らす`}
+                      disabled={line.quantity === 0}
+                      onClick={() => changeQuantity(line.id, -1)}
+                    >
+                      −
+                    </Button>
+                    <Text aria-live="polite">{line.quantity}</Text>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      aria-label={`${line.name}を増やす`}
+                      onClick={() => changeQuantity(line.id, 1)}
+                    >
+                      ＋
+                    </Button>
+                  </Flex>
+                </Flex>
+              ))}
+              <Dialog modal={false} open={paymentOpen} onOpenChange={setPaymentOpen}>
+                <DialogTrigger asChild>
+                  <Button size="sm">お会計へ</Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-sm">
+                  <DialogHeader title="お会計" subtitle="注文明細は背面で編集を続けられます。" />
+                  <DialogBody>
+                    <Flex direction="row" justify="between">
+                      <Text tone="muted">合計</Text>
+                      <Text>{yen.format(total)}</Text>
+                    </Flex>
+                  </DialogBody>
+                  <DialogFooter>
+                    <Button variant="outline" onClick={() => setPaymentOpen(false)}>
+                      キャンセル
+                    </Button>
+                    <Button onClick={() => setPaymentOpen(false)}>支払いを確定</Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/feedback/sheet.tsx

@@ -42,6 +42,15 @@ const headerTones = [
   "neutral",
 ] as const;
 
+/** Order lines behind the non-modal sheet — they stay editable while it is open. */
+const initialLines = [
+  { id: "coffee", name: "ブレンドコーヒー", unitPrice: 480, quantity: 2 },
+  { id: "sandwich", name: "ミックスサンド", unitPrice: 650, quantity: 1 },
+  { id: "cake", name: "チーズケーキ", unitPrice: 520, quantity: 1 },
+];
+
+const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
+
 /**
  * Sheet · side-panel drawer (Radix Dialog). Slides in from an edge. Compose
  * Sheet > SheetTrigger (asChild) > SheetContent(side) > SheetHeader >
@@ -84,6 +93,18 @@ export default function Demo() {
   const [toneOpen, setToneOpen] = useState(false);
   const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
 
+  // Card 6 · non-modal sheet: the order lines behind it stay editable while it is open.
+  const [summaryOpen, setSummaryOpen] = useState(false);
+  const [lines, setLines] = useState(initialLines);
+  const total = lines.reduce((sum, line) => sum + line.unitPrice * line.quantity, 0);
+  const changeQuantity = (id: string, delta: number) => {
+    setLines((current) =>
+      current.map((line) =>
+        line.id === id ? { ...line, quantity: Math.max(0, line.quantity + delta) } : line,
+      ),
+    );
+  };
+
   return (
     <PageContainer
       title="Sheet"
@@ -415,6 +436,69 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Non-modal sheet: the list behind stays editable</CardTitle>
+            <CardDescription>
+              modal=&#123;false&#125; on Sheet renders a non-modal panel, a pattern WAI-ARIA APG
+              allows. The page behind keeps working: no scrim, no scroll lock, nothing hidden from
+              assistive tech, and a press outside does not close the panel. Open the order summary
+              (side=&quot;left&quot;, so the quantity controls stay uncovered), then change a quantity
+              below. The total inside the panel follows. Focus moves into the
+              panel on open, Tab can leave it, Escape closes it while focus is inside, and focus
+              returns to the trigger.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {lines.map((line) => (
+                <Flex key={line.id} direction="row" align="center" justify="between" gap="sm">
+                  <Text>{line.name}</Text>
+                  <Flex direction="row" align="center" gap="sm">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      aria-label={`${line.name}を減らす`}
+                      disabled={line.quantity === 0}
+                      onClick={() => changeQuantity(line.id, -1)}
+                    >
+                      −
+                    </Button>
+                    <Text aria-live="polite">{line.quantity}</Text>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      aria-label={`${line.name}を増やす`}
+                      onClick={() => changeQuantity(line.id, 1)}
+                    >
+                      ＋
+                    </Button>
+                  </Flex>
+                </Flex>
+              ))}
+              <Sheet modal={false} open={summaryOpen} onOpenChange={setSummaryOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    注文サマリー
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="left" width={360}>
+                  <SheetHeader title="注文サマリー" subtitle="明細は背面で編集を続けられます。" />
+                  <SheetBody>
+                    <Flex direction="row" justify="between">
+                      <Text tone="muted">合計</Text>
+                      <Text>{yen.format(total)}</Text>
+                    </Flex>
+                  </SheetBody>
+                  <SheetFooter>
+                    <Button onClick={() => setSummaryOpen(false)}>完了</Button>
+                  </SheetFooter>
+                </SheetContent>
+              </Sheet>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/layout/responsive-grid.tsx

@@ -1,11 +1,20 @@
+import { useState } from "react";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+  ScrollArea,
   StatCard,
 } from "@godxjp/ui/data-display";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";
 
@@ -20,7 +29,25 @@ import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layou
  * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
  * real @godxjp/ui components.
  */
+const KANBAN_LANES = [
+  { key: "todo", title: "未着手" },
+  { key: "doing", title: "進行中" },
+  { key: "done", title: "完了" },
+] as const;
+
+type KanbanLane = (typeof KANBAN_LANES)[number]["key"];
+
+const KANBAN_TASKS: { id: string; title: string; lane: KanbanLane; priority: string }[] = [
+  { id: "T-101", title: "請求書テンプレートの改訂", lane: "todo", priority: "high" },
+  { id: "T-102", title: "取引先マスタの重複整理", lane: "todo", priority: "medium" },
+  { id: "T-103", title: "月次締めチェックリスト", lane: "doing", priority: "low" },
+];
+
 export default function Demo() {
+  // Kanban: which lane each card is in, moved by native drag and drop.
+  const [tasks, setTasks] = useState(KANBAN_TASKS);
+  const moveTask = (id: string, lane: KanbanLane) =>
+    setTasks((current) => current.map((task) => (task.id === id ? { ...task, lane } : task)));
   return (
     <PageContainer
       title="ResponsiveGrid"
@@ -255,6 +282,79 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              flow=&quot;columns&quot; align=&quot;stretch&quot; · カンバンのレーン
+            </CardTitle>
+            <CardDescription>
+              align=&quot;stretch&quot;（antd Row
+              align）で全レーンが最も高いレーンと同じ高さになり、空の
+              「完了」レーンも全高のドロップ先になる。省略時は columns フローが start、rows フローが
+              stretch のまま。カードはドラッグでき、中の Select
+              はドラッグ画像をカードの外へ広げない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea orientation="horizontal">
+              <ResponsiveGrid flow="columns" align="stretch">
+                {KANBAN_LANES.map((lane) => (
+                  <Card
+                    key={lane.key}
+                    data-lane={lane.key}
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={(event) => {
+                      event.preventDefault();
+                      moveTask(event.dataTransfer.getData("text/plain"), lane.key);
+                    }}
+                  >
+                    <CardHeader>
+                      <CardTitle>{lane.title}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <Flex direction="col" gap="sm">
+                        {tasks
+                          .filter((task) => task.lane === lane.key)
+                          .map((task) => (
+                            <Card
+                              key={task.id}
+                              draggable
+                              data-task={task.id}
+                              onDragStart={(event) =>
+                                event.dataTransfer.setData("text/plain", task.id)
+                              }
+                            >
+                              <CardContent>
+                                <Flex direction="col" gap="xs">
+                                  <Text tone="muted">{task.id}</Text>
+                                  <Text>{task.title}</Text>
+                                  <Select
+                                    aria-label={`${task.id} 優先度`}
+                                    name={`priority-${task.id}`}
+                                    defaultValue={task.priority}
+                                  >
+                                    <SelectTrigger aria-label={`${task.id} 優先度`} size="sm">
+                                      <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      <SelectItem value="high">高</SelectItem>
+                                      <SelectItem value="medium">中</SelectItem>
+                                      <SelectItem value="low">低</SelectItem>
+                                    </SelectContent>
+                                  </Select>
+                                </Flex>
+                              </CardContent>
+                            </Card>
+                          ))}
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                ))}
+              </ResponsiveGrid>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "27.0.0",
-  "godxUiMcp": "27.0.0",
+  "version": "27.3.1",
+  "godxUiMcp": "27.3.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -317,6 +317,7 @@
     "test:visual:topbar-collision": "node scripts/topbar-collision-visual.mjs",
     "test:visual:table-collection-cjk": "node scripts/table-collection-cjk-visual.mjs",
     "test:visual:chart-cjk-axis": "node scripts/chart-cjk-axis-visual.mjs",
+    "test:visual:kanban-select": "node scripts/kanban-select-visual.mjs",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
@@ -460,6 +461,7 @@
     "input-otp": "^1.5.0",
     "lucide-react": "^1.37.0",
     "qrcode.react": "4.2.0",
+    "react-aria": "3.52.1",
     "react-aria-components": "^1.21.1",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.3",