@godxjp/ui 19.2.0 → 19.4.0

package/docs/data-display/card/index.tsx

@@ -23,10 +23,12 @@ import { MoreHorizontal } from "lucide-react";
 
 import coverTerrain from "../../assets/cover-terrain.svg";
 
-/* A committed SVG under docs/assets, imported so the bundler rewrites the URL against
+/*
+ *  A committed SVG under docs/assets, imported so the bundler rewrites the URL against
  * PREVIEW_BASE. It replaces a picsum.photos fetch that hung `networkidle` and timed this page out
- * at 30s in CI (gh#333); it was briefly an inline data: URI, which fixed the hang but put 700
- * unreadable characters in the middle of the example a consumer is meant to copy. */
+ * at 30s in CI; it was briefly an inline data: URI, which fixed the hang but put 700
+ * unreadable characters in the middle of the example a consumer is meant to copy.
+ */
 
 /**
  * Card — surface container. Body content ALWAYS goes in CardContent (a bare Card
@@ -131,7 +133,7 @@ export default function Demo() {
           </ResponsiveGrid>
         </Flex>
 
-        {/* accentPlacement="perimeter" — the semantic attention border (gh#12) */}
+        {/* accentPlacement="perimeter" — the semantic attention border */}
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
             Accent · accentPlacement=&quot;perimeter&quot; (全周のアテンションボーダー)

package/docs/data-display/carousel.tsx

@@ -39,7 +39,7 @@ const slides = [
 function DotNavExample() {
   return (
     <Carousel
-      className="px-10"
+      style={{ paddingInline: "var(--space-10)" }}
       opts={{ loop: true }}
       aria-label="ドットナビゲーション付きカルーセル"
     >
@@ -71,7 +71,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Carousel className="px-10" aria-label="月次 KPI カルーセル">
+            <Carousel style={{ paddingInline: "var(--space-10)" }} aria-label="月次 KPI カルーセル">
               <CarouselContent>
                 {months.map((m) => (
                   <CarouselItem key={m.label} className="basis-full sm:basis-1/2 lg:basis-1/3">
@@ -96,7 +96,7 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Carousel
-              className="px-10"
+              style={{ paddingInline: "var(--space-10)" }}
               opts={{ loop: true, align: "start" }}
               aria-label="ループギャラリーカルーセル"
             >
@@ -137,7 +137,11 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Carousel className="py-10" opts={{ axis: "y" }} aria-label="縦方向カルーセル">
+            <Carousel
+              style={{ paddingBlock: "var(--space-10)" }}
+              opts={{ axis: "y" }}
+              aria-label="縦方向カルーセル"
+            >
               <CarouselContent className="h-48">
                 {slides.map((s) => (
                   <CarouselItem key={s.label}>

package/docs/data-display/data-table/examples/approval-queue.tsx

@@ -19,7 +19,7 @@ import {
 import { ClipboardCheck, LayoutDashboard, MoreHorizontal, ScrollText } from "lucide-react";
 
 /**
- * Access-approval queue (SCR-105 / gh#253) — the canonical five-column approval collection driven
+ * Access-approval queue (SCR-105 / ) — the canonical five-column approval collection driven
  * by the TanStack-powered DataTable, at 1440 · 1024 · 390 with ONLY public API.
  *
  * The whole responsive contract is two props: `preset="action-collection"` on the DataTable and a

package/docs/data-display/data-table/examples/grid-features.tsx

@@ -149,7 +149,7 @@ export default function Demo() {
       </Card>
 
       {lastClicked ? (
-        <Text as="p" tone="muted" className="mt-3">
+        <Text as="p" tone="muted">
           行クリック: {lastClicked}
         </Text>
       ) : null}

package/docs/data-display/data-table/index.tsx

@@ -230,7 +230,7 @@ export default function Demo() {
           <DataTable data={[]} columns={columns} getRowId={(row) => row.id} />
         </Flex>
 
-        {/* gh#216 — the two failure states, in the same table grid as empty/loading. */}
+        {/* — the two failure states, in the same table grid as empty/loading. */}
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
             エラー（error · role=&quot;alert&quot; · onRetry で再試行を表示）

package/docs/data-display/permission-matrix.tsx

@@ -1,7 +1,7 @@
 /**
- * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, gh#257).
+ * PermissionMatrix — 権限マトリクス (canonical RBAC role × permission grid, ).
  *
- * A REAL export from `@godxjp/ui/data-display` (the gh#251 lesson: a consumer cannot import a
+ * A REAL export from `@godxjp/ui/data-display` (the lesson: a consumer cannot import a
  * docs page). Read-only ✓/— by default; `onGrantChange` switches to editable checkbox cells with
  * locked roles kept read-only; compare + 差分のみ come from `lib/permission-grid`; lifecycle
  * states follow the DataTable #216 vocabulary. Domain data below is demo-only — the library
@@ -145,15 +145,19 @@ export default function Demo() {
                   <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
                 </Flex>
               </Flex>
-              <div className="border-border overflow-hidden rounded-md border">
-                <PermissionMatrix
-                  roles={ROLES}
-                  permissions={PERMISSIONS}
-                  grants={grants}
-                  compare={[compareA, compareB]}
-                  diffOnly={diffOnly}
-                />
-              </div>
+              <Card variant="outline" className="overflow-hidden">
+                <CardContent flush>
+                  <div>
+                    <PermissionMatrix
+                      roles={ROLES}
+                      permissions={PERMISSIONS}
+                      grants={grants}
+                      compare={[compareA, compareB]}
+                      diffOnly={diffOnly}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
             </Flex>
           </CardContent>
         </Card>

package/docs/data-display/popover.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import {
+  Badge,
   Card,
   CardContent,
   CardDescription,
@@ -40,7 +41,7 @@ export default function Demo() {
           <CardContent>
             <Popover defaultOpen>
               <PopoverAnchor asChild>
-                <span className="inline-flex rounded border px-3 py-2">請求額 ¥482,000</span>
+                <Badge variant="outline">請求額 ¥482,000</Badge>
               </PopoverAnchor>
               <PopoverContent side="right" aria-label="請求額の補足">
                 <PopoverDescription>税額と支払条件の補足情報です。</PopoverDescription>

package/docs/data-display/scroll-area.tsx

@@ -27,7 +27,7 @@ const entries = Array.from(
 const shortEntries = entries.slice(0, 3);
 
 /**
- * The live-stream screen (gh#311). A deterministic clock: the demo never reads `Date.now()`, so the
+ * The live-stream screen. A deterministic clock: the demo never reads `Date.now()`, so the
  * frame is stable, and every timestamp still goes through `Intl.DateTimeFormat` (IANA tz, 24h).
  */
 const STREAM_EPOCH = Date.UTC(2026, 2, 3, 0, 30, 0);
@@ -109,31 +109,38 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea
-              anchor="bottom"
-              viewportRef={streamViewport}
-              onAnchoredChange={setAnchored}
-              type="always"
-              className="border-border h-64 w-full rounded-md border"
-            >
-              <Flex direction="col" className="px-3">
-                {posts.map((post) => (
-                  <Flex key={post.id} direction="col" className="py-2">
-                    <Flex gap="sm" align="baseline">
-                      <Text size="sm" weight="medium">
-                        {post.author}
-                      </Text>
-                      <Text size="xs" tone="muted">
-                        {timeFormatter.format(new Date(STREAM_EPOCH + post.id * STREAM_STEP_MS))}
-                      </Text>
+            <Card variant="outline" className="h-64 w-full">
+              <CardContent flush>
+                <ScrollArea
+                  anchor="bottom"
+                  viewportRef={streamViewport}
+                  onAnchoredChange={setAnchored}
+                  type="always"
+                >
+                  <CardContent>
+                    <Flex direction="col">
+                      {posts.map((post) => (
+                        <Flex key={post.id} direction="col" gap="xs">
+                          <Flex gap="sm" align="baseline">
+                            <Text size="sm" weight="medium">
+                              {post.author}
+                            </Text>
+                            <Text size="xs" tone="muted">
+                              {timeFormatter.format(
+                                new Date(STREAM_EPOCH + post.id * STREAM_STEP_MS),
+                              )}
+                            </Text>
+                          </Flex>
+                          <Text size="sm" tone="muted">
+                            {post.body}
+                          </Text>
+                        </Flex>
+                      ))}
                     </Flex>
-                    <Text size="sm" tone="muted">
-                      {post.body}
-                    </Text>
-                  </Flex>
-                ))}
-              </Flex>
-            </ScrollArea>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
           <CardFooter>
             <Flex gap="sm" wrap>
@@ -164,20 +171,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea
-              anchor="bottom"
-              anchorOffset={0}
-              type="always"
-              className="border-border h-40 w-full rounded-md border"
-            >
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <Text key={e} size="sm" className="tabular-nums">
-                    {e}
-                  </Text>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-40 w-full">
+              <CardContent flush>
+                <ScrollArea anchor="bottom" anchorOffset={0} type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <Text key={e} size="sm" className="tabular-nums">
+                          {e}
+                        </Text>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -189,15 +197,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -210,15 +224,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea type="always" className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -233,16 +253,22 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea className="border-border w-full rounded-md border">
-              <Flex gap="lg" className="w-max p-3">
-                {columns.map((c) => (
-                  <div key={c} className="text-sm whitespace-nowrap tabular-nums">
-                    {c}
-                  </div>
-                ))}
-              </Flex>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+            <Card variant="outline" className="w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <CardContent>
+                    <Flex gap="lg" className="w-max">
+                      {columns.map((c) => (
+                        <div key={c} className="text-sm whitespace-nowrap tabular-nums">
+                          {c}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                  <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -254,15 +280,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea type="always" className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {shortEntries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {shortEntries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
       </Flex>

package/docs/data-display/table.tsx

@@ -38,7 +38,7 @@ export default function Demo() {
           </CardHeader>
           <CardContent flush>
             <Table>
-              <caption className="px-4 py-2 text-start">
+              <caption className="text-start" style={{ padding: "var(--space-2) var(--space-4)" }}>
                 <Text size="xs" tone="muted">
                   2026年5月 売上計上（税込）
                 </Text>
@@ -131,7 +131,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* ── The flush full-bleed FRAME contract (gh#305 · gh#306) ───────────────────────────
+        {/* ── The flush full-bleed FRAME contract ───────────────────────────
             Four cards, side by side, so the whole rule is visible at once: which edges a
             full-bleed table keeps inside a card, and who draws the line under the header. */}
         <Card>

package/docs/data-display/timeline-grid.tsx

@@ -0,0 +1,119 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TimelineGrid,
+  type TimelineGridColumnProp,
+  type TimelineGridEventProp,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * TimelineGrid — a vertical hour axis, one column per day, and event blocks placed by start time
+ * and duration. It is the time-axis half of the Timeline family; Timeline itself is one lane of
+ * ordered events with no scale.
+ */
+const WEEK: TimelineGridColumnProp[] = [
+  { id: "05-11", label: "月 11" },
+  { id: "05-12", label: "火 12" },
+  { id: "05-13", label: "水 13" },
+  { id: "05-14", label: "木 14", description: "本日", current: true },
+  { id: "05-15", label: "金 15" },
+];
+
+const SHIFTS: TimelineGridEventProp[] = [
+  { id: "s1", columnId: "05-11", start: "09:00", end: "22:00", title: "通し", description: "佐藤" },
+  { id: "s2", columnId: "05-12", start: "06:00", end: "22:00", title: "有給", description: "鈴木" },
+  { id: "s3", columnId: "05-14", start: "09:00", end: "17:30", title: "早番", description: "田中" },
+  { id: "s4", columnId: "05-14", start: "13:00", end: "22:00", title: "遅番", description: "高橋" },
+  // end at or before start = the shift runs into the next day (夜勤 22:00–06:00).
+  { id: "s5", columnId: "05-14", start: "22:00", end: "06:00", title: "夜勤", description: "伊藤" },
+  { id: "s6", columnId: "05-15", start: "09:00", end: "17:30", title: "早番", description: "佐藤" },
+  { id: "s7", columnId: "05-15", start: "18:00", end: "21:00", title: "残業", description: "鈴木" },
+];
+
+// One column, a finer axis, and a colour carried by the record itself — the day view of the same
+// data. `color` is decorative: the block still prints its hours and its title as text.
+const ROOMS: TimelineGridColumnProp[] = [
+  { id: "a", label: "会議室 A", description: "12名" },
+  { id: "b", label: "会議室 B", description: "6名" },
+];
+
+const BOOKINGS: TimelineGridEventProp[] = [
+  {
+    id: "b1",
+    columnId: "a",
+    start: "09:30",
+    end: "10:30",
+    title: "定例会",
+    description: "営業部",
+    color: "var(--wa-gunjo)",
+  },
+  {
+    id: "b2",
+    columnId: "a",
+    start: "10:00",
+    end: "11:00",
+    title: "面談",
+    description: "人事",
+    color: "var(--wa-akane)",
+  },
+  {
+    id: "b3",
+    columnId: "b",
+    start: "13:00",
+    end: "14:30",
+    title: "設計レビュー",
+    description: "開発部",
+    color: "var(--wa-wakatake)",
+  },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer title="TimelineGrid" subtitle="時間軸に沿って予定ブロックを置く週／日グリッド">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>週シフト</CardTitle>
+            <CardDescription>
+              start / end で軸を 06:00–24:00 に固定し、interval=2
+              で2時間ごとに目盛りを引きます。木曜の早番と遅番は時間が重なるため、自動で横に並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <TimelineGrid
+              label="週シフト 2026年5月11日〜15日"
+              columns={WEEK}
+              events={SHIFTS}
+              start="06:00"
+              end="24:00"
+              interval={2}
+              now="14:35"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>会議室の予約</CardTitle>
+            <CardDescription>
+              start / end を省略すると、軸は予定の範囲から自動で決まります。onEventSelect
+              を渡すと各ブロックが button になり、キーボードでも選べます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <TimelineGrid
+              label="会議室の予約 5月14日"
+              columns={ROOMS}
+              events={BOOKINGS}
+              onEventSelect={() => {}}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/branch-scope-picker.tsx

@@ -1,5 +1,5 @@
 /**
- * BranchScopePicker — 適用範囲 (all branches vs an explicit subset, gh#257).
+ * BranchScopePicker — 適用範囲 (all branches vs an explicit subset).
  *
  * One controlled `{ mode, branchIds }` value; real RadioGroup + CheckboxGroup + SearchInput
  * underneath. `error` is FIELD VALIDATION (aria-errormessage); a failed branch read is

package/docs/data-entry/calendar.tsx

@@ -83,7 +83,7 @@ export default function Demo() {
                   期間を選択
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
+              <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
                 <Calendar
                   mode="range"
                   selected={range}

package/docs/data-entry/checkbox.tsx

@@ -111,7 +111,7 @@ export default function Demo() {
                   onCheckedChange={(next) => setScopes(next === true ? ALL_SCOPES : [])}
                 />
               </Field>
-              <Flex direction="col" gap="sm" className="ps-6">
+              <Flex direction="col" gap="sm" style={{ paddingInlineStart: "var(--space-6)" }}>
                 <Field id="scope-read" label="閲覧">
                   <Checkbox
                     id="scope-read"

package/docs/data-entry/country-picker-recipe.tsx

@@ -1,6 +1,13 @@
 import { useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { FormField, Select } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -63,12 +70,10 @@ async function loadCountries({ query }: SelectLoadParams): Promise<SelectLoadRes
 // real product ships an SVG flag set and renders it here. Tokens only — no hex, no inline style.
 function renderCountry(option: SelectOption) {
   return (
-    <span className="flex items-center gap-2">
-      <Text size="xs" tone="muted" mono className="bg-muted rounded px-1.5 py-0.5">
-        {option.value}
-      </Text>
+    <Flex align="center" gap="sm">
+      <Badge variant="secondary">{option.value}</Badge>
       <Text truncate>{option.label}</Text>
-    </span>
+    </Flex>
   );
 }