@godxjp/ui 19.2.0 → 19.4.0

package/docs/showcase/table-footer-totals.tsx

@@ -28,6 +28,7 @@ import * as React from "react";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -199,11 +200,13 @@ export default function Demo() {
       density="compact"
     >
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
+        <CardHeader>
           <CardTitle level={2}>従業員別 月次集計</CardTitle>
-          <Text size="xs" tone="muted" tabular>
-            対象 {ROWS.length} 名
-          </Text>
+          <CardAction>
+            <Text size="xs" tone="muted" tabular>
+              対象 {ROWS.length} 名
+            </Text>
+          </CardAction>
         </CardHeader>
         {/* flush so the table meets the card edge; vertical scroll inside the
             card with header pinned top and totals pinned bottom. */}
@@ -286,25 +289,29 @@ export default function Demo() {
         </CardContent>
       </Card>
 
-      <Flex direction="row" align="center" gap="xs" className="mt-3">
-        <Text size="xs" tone="muted">
-          残業 凡例:
-        </Text>
-        <Badge tone="success" variant="outline">
-          ~15h
-        </Badge>
-        <Badge tone="info" variant="outline">
-          15h~
-        </Badge>
-        <Badge tone="warning" variant="outline">
-          25h~
-        </Badge>
-        <Text size="xs" tone="muted" className="ms-2">
-          遅刻:
-        </Text>
-        <Badge tone="destructive" variant="outline">
-          回数
-        </Badge>
+      <Flex direction="row" align="center" wrap gap="md">
+        <Flex direction="row" align="center" gap="xs">
+          <Text size="xs" tone="muted">
+            残業 凡例:
+          </Text>
+          <Badge tone="success" variant="outline">
+            ~15h
+          </Badge>
+          <Badge tone="info" variant="outline">
+            15h~
+          </Badge>
+          <Badge tone="warning" variant="outline">
+            25h~
+          </Badge>
+        </Flex>
+        <Flex direction="row" align="center" gap="xs">
+          <Text size="xs" tone="muted">
+            遅刻:
+          </Text>
+          <Badge tone="destructive" variant="outline">
+            回数
+          </Badge>
+        </Flex>
       </Flex>
     </PageContainer>
   );

package/docs/showcase/table-grouped-subtotals.tsx

@@ -19,6 +19,7 @@ import { Button, Text } from "@godxjp/ui/general";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -225,26 +226,26 @@ function GroupHeaderRow({
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
     <TableRow className="bg-secondary hover:bg-secondary border-b">
-      <TableCell className="py-2 ps-2 pe-0" colSpan={2}>
+      <TableCell colSpan={2}>
         <Button
           variant="ghost"
           size="sm"
           onClick={onToggle}
           aria-expanded={open}
           aria-controls={`grp-${group.id}`}
-          className="h-7 gap-2 font-medium"
+          className="h-7 font-medium"
         >
           <Chevron className="text-muted-foreground size-4" aria-hidden="true" />
           {group.label}
-          <Badge variant="outline" tone="neutral" className="ms-1">
+          <Badge variant="outline" tone="neutral">
             {group.members.length}名
           </Badge>
         </Button>
       </TableCell>
-      <TableCell className="py-2 text-end font-medium tabular-nums">{s.days}日</TableCell>
-      <TableCell className="py-2 text-end font-medium tabular-nums">{fmtH(s.work)}</TableCell>
-      <TableCell className="py-2 text-end font-medium tabular-nums">{fmtH(s.overtime)}</TableCell>
-      <TableCell className="py-2 text-end tabular-nums">
+      <TableCell className="text-end font-medium tabular-nums">{s.days}日</TableCell>
+      <TableCell className="text-end font-medium tabular-nums">{fmtH(s.work)}</TableCell>
+      <TableCell className="text-end font-medium tabular-nums">{fmtH(s.overtime)}</TableCell>
+      <TableCell className="text-end tabular-nums">
         {s.late > 0 ? (
           <Badge variant="outline" tone="warning">
             {s.late}回
@@ -255,7 +256,7 @@ function GroupHeaderRow({
           </Text>
         )}
       </TableCell>
-      <TableCell className="py-2" />
+      <TableCell />
     </TableRow>
   );
 }
@@ -265,7 +266,10 @@ function GroupHeaderRow({
 function MemberRow({ m }: { m: Employee }) {
   return (
     <TableRow>
-      <TableCell className="text-muted-foreground ps-10 font-mono text-xs">{m.id}</TableCell>
+      {/* `indent` — the detail row sits one hierarchy level under its group header. */}
+      <TableCell indent={1} className="text-muted-foreground font-mono text-xs">
+        {m.id}
+      </TableCell>
       <TableCell>{m.name}</TableCell>
       <TableCell className="text-end tabular-nums">{m.days}日</TableCell>
       <TableCell className="text-end tabular-nums">{fmtH(m.work)}</TableCell>
@@ -330,18 +334,16 @@ function GroupedTable({
           })}
           {/* 総計フッター行 */}
           <TableRow className="bg-muted/40 hover:bg-muted/40 border-t-2">
-            <TableCell className="py-2 font-medium" colSpan={2}>
+            <TableCell className="font-medium" colSpan={2}>
               総計 · 全{groups.reduce((n, g) => n + g.members.length, 0)}名
             </TableCell>
-            <TableCell className="py-2 text-end font-bold tabular-nums">{total.days}日</TableCell>
-            <TableCell className="py-2 text-end font-bold tabular-nums">
-              {fmtH(total.work)}
-            </TableCell>
-            <TableCell className="py-2 text-end font-bold tabular-nums">
+            <TableCell className="text-end font-bold tabular-nums">{total.days}日</TableCell>
+            <TableCell className="text-end font-bold tabular-nums">{fmtH(total.work)}</TableCell>
+            <TableCell className="text-end font-bold tabular-nums">
               {fmtH(total.overtime)}
             </TableCell>
-            <TableCell className="py-2 text-end font-bold tabular-nums">{total.late}回</TableCell>
-            <TableCell className="py-2" />
+            <TableCell className="text-end font-bold tabular-nums">{total.late}回</TableCell>
+            <TableCell />
           </TableRow>
         </TableBody>
       </Table>
@@ -359,11 +361,13 @@ export default function Demo() {
       <Flex direction="col" gap="lg">
         {/* 全展開（既定）— 各グループの小計と明細が同時に見える */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>2026年5月度 勤怠集計</CardTitle>
-            <Text size="xs" tone="muted" tabular>
-              締め: 2026-05-31
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                締め: 2026-05-31
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <GroupedTable groups={GROUPS} />
@@ -372,11 +376,13 @@ export default function Demo() {
 
         {/* 折りたたみ済みの状態を静的に提示 — 「カスタマーサポート部」は閉じて小計のみ表示 */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>折りたたみ状態</CardTitle>
-            <Text size="xs" tone="muted">
-              閉じたグループは小計のみ表示（クリックで展開）
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted">
+                閉じたグループは小計のみ表示（クリックで展開）
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <GroupedTable groups={GROUPS} defaultClosed={["support"]} />

package/docs/showcase/table-master-detail.tsx

@@ -8,7 +8,7 @@
  *
  * Composition map (intent → real @godxjp/ui primitive):
  *   resizable split ........ ResizablePanelGroup + ResizablePanel + ResizableHandle
- *   fixed-track split ...... MasterDetail (tokenized rail + stacking threshold, gh#223)
+ * fixed-track split ...... MasterDetail (tokenized rail + stacking threshold, )
  *   master list ............ DataTable (compact, clickable rows, selected row)
  *   status cell ............ Badge tone (出勤/遅刻/早退/休暇 — fixed signaling)
  *   detail header .......... Avatar + heading + Badge + action Buttons
@@ -31,16 +31,17 @@ import {
   Avatar,
   AvatarFallback,
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
-  type ColumnDef,
   DataTable,
   Descriptions,
   EmptyState,
   Timeline,
+  type BadgeProps,
+  type ColumnDef,
   type TimelineItem,
 } from "@godxjp/ui/data-display";
 import {
@@ -369,11 +370,13 @@ export default function Demo() {
       <Flex direction="col" gap="lg">
         {/* ── Resizable master/detail split (Gmail-style) ── */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>本日の出勤状況</CardTitle>
-            <Text size="xs" tone="muted" tabular>
-              2026-06-04 · {EMPLOYEES.length}名
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                2026-06-04 · {EMPLOYEES.length}名
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <ResizablePanelGroup orientation="horizontal" className="min-h-[460px]">
@@ -395,7 +398,7 @@ export default function Demo() {
 
               {/* Detail pane */}
               <ResizablePanel defaultSize="58%" minSize="34%">
-                <div className="h-full overflow-auto p-5">
+                <CardContent solo className="h-full overflow-auto">
                   {selected ? (
                     <EmployeeDetail employee={selected} />
                   ) : (
@@ -407,7 +410,7 @@ export default function Demo() {
                       />
                     </Flex>
                   )}
-                </div>
+                </CardContent>
               </ResizablePanel>
             </ResizablePanelGroup>
           </CardContent>
@@ -439,24 +442,24 @@ export default function Demo() {
                 />
               }
             >
-              <div className="rounded-md border border-dashed p-8">
-                <EmptyState
-                  icon={UserRound}
-                  title="従業員を選択してください"
-                  description="一覧から行を選ぶと詳細が表示されます。"
-                />
-              </div>
+              <EmptyState
+                icon={UserRound}
+                title="従業員を選択してください"
+                description="一覧から行を選ぶと詳細が表示されます。"
+              />
             </MasterDetail>
           </CardContent>
         </Card>
 
         {/* ── Narrow fallback: stacked list + detail (no side room) ── */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>狭幅レイアウト（縦積み）</CardTitle>
-            <Text size="xs" tone="muted">
-              サイドペインが取れない幅では一覧の下に詳細を重ねます
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted">
+                サイドペインが取れない幅では一覧の下に詳細を重ねます
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <DataTable
@@ -467,10 +470,10 @@ export default function Demo() {
               selected={new Set(["E-1042"])}
               onRowClick={() => {}}
             />
-            <Separator />
-            <div className="p-5">
-              <EmployeeDetail employee={EMPLOYEES[0]} />
-            </div>
+          </CardContent>
+          <Separator />
+          <CardContent solo>
+            <EmployeeDetail employee={EMPLOYEES[0]} />
           </CardContent>
         </Card>
       </Flex>

package/docs/showcase/table-pagination.tsx

@@ -26,6 +26,7 @@ import * as React from "react";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -145,11 +146,13 @@ function NumberedPaginationCard() {
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
+      <CardHeader>
         <CardTitle level={2}>番号付き + 件数選択</CardTitle>
-        <Text size="xs" tone="muted" tabular>
-          全 {NUMBERED_DATA.length} 件
-        </Text>
+        <CardAction>
+          <Text size="xs" tone="muted" tabular>
+            全 {NUMBERED_DATA.length} 件
+          </Text>
+        </CardAction>
       </CardHeader>
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
@@ -198,11 +201,13 @@ function LoadMoreCard() {
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
+      <CardHeader>
         <CardTitle level={2}>もっと読む</CardTitle>
-        <Text size="xs" tone="muted" tabular>
-          {rows.length} / {LOADMORE_DATA.length} 件表示
-        </Text>
+        <CardAction>
+          <Text size="xs" tone="muted" tabular>
+            {rows.length} / {LOADMORE_DATA.length} 件表示
+          </Text>
+        </CardAction>
       </CardHeader>
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
@@ -263,26 +268,28 @@ function CursorPeriodCard() {
 
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between gap-3">
+      <CardHeader>
         <CardTitle level={2}>カーソル / 期間ジャンプ</CardTitle>
-        <Select
-          value={period}
-          onValueChange={(v: string) => {
-            setPeriod(v);
-            setCursor(undefined); // jumping period resets the cursor to the first page
-          }}
-        >
-          <SelectTrigger size="sm" aria-label="期間を選択" className="w-36">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {PERIODS.map((p) => (
-              <SelectItem key={p.value} value={p.value}>
-                {p.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <CardAction>
+          <Select
+            value={period}
+            onValueChange={(v: string) => {
+              setPeriod(v);
+              setCursor(undefined); // jumping period resets the cursor to the first page
+            }}
+          >
+            <SelectTrigger size="sm" aria-label="期間を選択" className="w-36">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PERIODS.map((p) => (
+                <SelectItem key={p.value} value={p.value}>
+                  {p.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </CardAction>
       </CardHeader>
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />

package/docs/showcase/table-states.tsx

@@ -29,12 +29,13 @@ import { Button, Heading, Text } from "@godxjp/ui/general";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
-  type ColumnDef,
   DataTable,
   EmptyState,
+  type ColumnDef,
 } from "@godxjp/ui/data-display";
 import {
   Alert,
@@ -190,20 +191,26 @@ function StateSection({
  *  the loading skeleton visibly preserves the table's column layout. */
 function TableShell({
   caption,
+  banner,
   children,
 }: {
   caption: React.ReactNode;
-  children: React.ReactNode;
+  /** Padded band between the header and the flush table body (an Alert). */
+  banner?: React.ReactNode;
+  children?: React.ReactNode;
 }) {
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between">
+      <CardHeader>
         <CardTitle level={2}>本日の打刻</CardTitle>
-        <Text size="xs" tone="muted">
-          {caption}
-        </Text>
+        <CardAction>
+          <Text size="xs" tone="muted">
+            {caption}
+          </Text>
+        </CardAction>
       </CardHeader>
-      <CardContent flush>{children}</CardContent>
+      {banner ? <CardContent>{banner}</CardContent> : null}
+      {children ? <CardContent flush>{children}</CardContent> : null}
     </Card>
   );
 }
@@ -285,8 +292,9 @@ export default function Demo() {
           title="エラー"
           note="エラーコード・リクエストID・再試行を明示する。"
         >
-          <TableShell caption="取得に失敗しました">
-            <div className="p-4">
+          <TableShell
+            caption="取得に失敗しました"
+            banner={
               <Alert tone="destructive">
                 <AlertTitle>勤怠データを取得できませんでした</AlertTitle>
                 <AlertDescription>
@@ -304,8 +312,8 @@ export default function Demo() {
                   </Button>
                 </AlertActions>
               </Alert>
-            </div>
-          </TableShell>
+            }
+          />
         </StateSection>
 
         {/* 4 ─ partial: some rows loaded, one segment failed / stale */}
@@ -314,29 +322,29 @@ export default function Demo() {
           title="部分的"
           note="一部のみ取得できた状態。失敗した区分だけを再取得できる。"
         >
-          <TableShell caption="4 / 5 部署を表示中">
-            <div>
-              <div className="p-4 pb-0">
-                <Alert tone="warning">
-                  <AlertTitle>一部のデータを取得できませんでした</AlertTitle>
-                  <AlertDescription>
-                    「倉庫」部署の打刻が取得できなかったため、最新ではない可能性があります。
-                    <br />
-                    <Text tone="muted">
-                      コード <code className="tabular-nums">ATTEND_PARTIAL_倉庫</code> ・
-                      リクエストID <code className="tabular-nums">req_7f3a91c0e8</code>
-                    </Text>
-                  </AlertDescription>
-                  <AlertActions>
-                    <Button variant="outline" size="sm">
-                      <RefreshCw aria-hidden="true" />
-                      倉庫を再取得
-                    </Button>
-                  </AlertActions>
-                </Alert>
-              </div>
-              <DataTable data={PARTIAL_ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
-            </div>
+          <TableShell
+            caption="4 / 5 部署を表示中"
+            banner={
+              <Alert tone="warning">
+                <AlertTitle>一部のデータを取得できませんでした</AlertTitle>
+                <AlertDescription>
+                  「倉庫」部署の打刻が取得できなかったため、最新ではない可能性があります。
+                  <br />
+                  <Text tone="muted">
+                    コード <code className="tabular-nums">ATTEND_PARTIAL_倉庫</code> ・ リクエストID{" "}
+                    <code className="tabular-nums">req_7f3a91c0e8</code>
+                  </Text>
+                </AlertDescription>
+                <AlertActions>
+                  <Button variant="outline" size="sm">
+                    <RefreshCw aria-hidden="true" />
+                    倉庫を再取得
+                  </Button>
+                </AlertActions>
+              </Alert>
+            }
+          >
+            <DataTable data={PARTIAL_ROWS} columns={COLUMNS} getRowId={(r) => r.id} />
           </TableShell>
         </StateSection>
 

package/docs/showcase/table-sticky-columns.tsx

@@ -22,8 +22,8 @@ import { Check } from "lucide-react";
 import { Button, Text } from "@godxjp/ui/general";
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -33,6 +33,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
@@ -221,11 +222,13 @@ export default function Demo() {
     >
       <Flex direction="col" gap="lg">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>2026年6月 第1週</CardTitle>
-            <Text size="xs" tone="muted" tabular>
-              従業員 {EMPLOYEES.length} 名 · 横スクロールで全日表示
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                従業員 {EMPLOYEES.length} 名 · 横スクロールで全日表示
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             {/* The scroll container. `overflow-x-auto` clips; the table holds a
@@ -238,12 +241,13 @@ export default function Demo() {
                     <TableHead className={`${PIN_LEFT} w-56 min-w-56`}>従業員</TableHead>
                     {DAYS.map((d) => (
                       <TableHead key={d.key} className="text-center">
-                        <span className="flex flex-col leading-tight">
+                        {/* Weekday over its date reads as ONE label — no seam between the lines. */}
+                        <Flex direction="col" gap="none" className="leading-tight">
                           <Text weight="medium">{d.label}</Text>
                           <Text size="2xs" tone="muted" tabular>
                             {d.date}
                           </Text>
-                        </span>
+                        </Flex>
                       </TableHead>
                     ))}
                     <TableHead className="text-end tabular-nums">実働</TableHead>