@godxjp/ui 19.3.1 → 19.4.0

package/docs/showcase/table-expandable-rows.tsx

@@ -251,7 +251,6 @@ const EMPLOYEES: Employee[] = [
 // ── Shared cell padding to match compact DataTable density ─────────────────────
 
 const CELL = "align-middle";
-const HEAD = "px-3";
 
 function StatusBadge({ status }: { status: ShiftStatus }) {
   return (
@@ -265,103 +264,105 @@ function StatusBadge({ status }: { status: ShiftStatus }) {
 
 function DetailPanel({ employee }: { employee: Employee }) {
   return (
-    <div className="border-s-primary bg-muted/30 border-s-[3px] px-4 py-3">
-      <Flex direction="col" gap="md">
-        <Flex direction="row" wrap align="center" gap="md">
-          <Text size="sm" weight="medium">
-            {employee.name} · {employee.dept}
-          </Text>
-          <Flex align="center" gap="xs">
-            <Text size="xs" tone="muted">
-              <MapPin className="size-3.5" aria-hidden="true" />
-              {employee.site}
+    <Card className="border-s-primary bg-muted/30 border-s-[3px]">
+      <CardContent solo>
+        <Flex direction="col" gap="md">
+          <Flex direction="row" wrap align="center" gap="md">
+            <Text size="sm" weight="medium">
+              {employee.name} · {employee.dept}
             </Text>
+            <Flex align="center" gap="xs">
+              <Text size="xs" tone="muted">
+                <MapPin className="size-3.5" aria-hidden="true" />
+                {employee.site}
+              </Text>
+            </Flex>
           </Flex>
-        </Flex>
 
-        {/* KPI mini-row inside the panel — real StatCard primitives */}
-        <Flex direction="row" wrap gap="sm">
-          <StatCard label="出勤日数" value={employee.workDays} layout="inline" />
-          <StatCard
-            label="遅刻回数"
-            value={employee.lateCount}
-            layout="inline"
-            inverse
-            delta={employee.lateCount === 0 ? "問題なし" : "要確認"}
-          />
-          <StatCard
-            label="残業 累計"
-            value={<Text tabular>{employee.overtime}</Text>}
-            layout="inline"
-          />
-        </Flex>
+          {/* KPI mini-row inside the panel — real StatCard primitives */}
+          <Flex direction="row" wrap gap="sm">
+            <StatCard label="出勤日数" value={employee.workDays} layout="inline" />
+            <StatCard
+              label="遅刻回数"
+              value={employee.lateCount}
+              layout="inline"
+              inverse
+              delta={employee.lateCount === 0 ? "問題なし" : "要確認"}
+            />
+            <StatCard
+              label="残業 累計"
+              value={<Text tabular>{employee.overtime}</Text>}
+              layout="inline"
+            />
+          </Flex>
 
-        {/* Per-day breakdown — quiet nested list, real Card chrome */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2} className="text-[var(--font-size-xs)]">
-              今週の打刻
-            </CardTitle>
-            <CardAction>
-              <Flex align="center" gap="xs">
-                <Text size="xs" tone="muted">
-                  <Clock className="size-3.5" aria-hidden="true" />
-                  直近 3 日
-                </Text>
-              </Flex>
-            </CardAction>
-          </CardHeader>
-          <CardContent flush>
-            <Table>
-              <TableHeader className="bg-secondary">
-                <TableRow>
-                  <TableHead className={HEAD}>日付</TableHead>
-                  <TableHead className={HEAD}>状態</TableHead>
-                  <TableHead className={HEAD}>出勤</TableHead>
-                  <TableHead className={HEAD}>退勤</TableHead>
-                  <TableHead className={HEAD}>休憩</TableHead>
-                  <TableHead className={`${HEAD} text-end`}>実働</TableHead>
-                  <TableHead className={HEAD}>備考</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {employee.days.map((d) => (
-                  <TableRow key={d.date}>
-                    <TableCell className={`${CELL} text-xs whitespace-nowrap tabular-nums`}>
-                      {d.date}（{d.weekday}）
-                    </TableCell>
-                    <TableCell className={CELL}>
-                      <StatusBadge status={d.status} />
-                    </TableCell>
-                    <TableCell className={`${CELL} tabular-nums`}>{d.clockIn}</TableCell>
-                    <TableCell className={`${CELL} tabular-nums`}>{d.clockOut}</TableCell>
-                    <TableCell
-                      className={`${CELL} text-muted-foreground inline-flex items-center gap-1 tabular-nums`}
-                    >
-                      <Coffee className="size-3.5" aria-hidden="true" />
-                      {d.break}
-                    </TableCell>
-                    <TableCell className={`${CELL} text-end font-medium tabular-nums`}>
-                      {d.work}
-                    </TableCell>
-                    <TableCell className={`${CELL} text-muted-foreground text-xs`}>
-                      {d.note ?? "—"}
-                    </TableCell>
+          {/* Per-day breakdown — quiet nested list, real Card chrome */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2} className="text-[var(--font-size-xs)]">
+                今週の打刻
+              </CardTitle>
+              <CardAction>
+                <Flex align="center" gap="xs">
+                  <Text size="xs" tone="muted">
+                    <Clock className="size-3.5" aria-hidden="true" />
+                    直近 3 日
+                  </Text>
+                </Flex>
+              </CardAction>
+            </CardHeader>
+            <CardContent flush>
+              <Table>
+                <TableHeader className="bg-secondary">
+                  <TableRow>
+                    <TableHead>日付</TableHead>
+                    <TableHead>状態</TableHead>
+                    <TableHead>出勤</TableHead>
+                    <TableHead>退勤</TableHead>
+                    <TableHead>休憩</TableHead>
+                    <TableHead className="text-end">実働</TableHead>
+                    <TableHead>備考</TableHead>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
+                </TableHeader>
+                <TableBody>
+                  {employee.days.map((d) => (
+                    <TableRow key={d.date}>
+                      <TableCell className={`${CELL} text-xs whitespace-nowrap tabular-nums`}>
+                        {d.date}（{d.weekday}）
+                      </TableCell>
+                      <TableCell className={CELL}>
+                        <StatusBadge status={d.status} />
+                      </TableCell>
+                      <TableCell className={`${CELL} tabular-nums`}>{d.clockIn}</TableCell>
+                      <TableCell className={`${CELL} tabular-nums`}>{d.clockOut}</TableCell>
+                      <TableCell className={`${CELL} text-muted-foreground tabular-nums`}>
+                        <Flex align="center" gap="xs">
+                          <Coffee className="size-3.5" aria-hidden="true" />
+                          {d.break}
+                        </Flex>
+                      </TableCell>
+                      <TableCell className={`${CELL} text-end font-medium tabular-nums`}>
+                        {d.work}
+                      </TableCell>
+                      <TableCell className={`${CELL} text-muted-foreground text-xs`}>
+                        {d.note ?? "—"}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
 
-        <Flex direction="row" gap="sm">
-          <Button size="sm" variant="outline">
-            勤怠詳細を開く
-          </Button>
-          <Button size="sm">承認する</Button>
+          <Flex direction="row" gap="sm">
+            <Button size="sm" variant="outline">
+              勤怠詳細を開く
+            </Button>
+            <Button size="sm">承認する</Button>
+          </Flex>
         </Flex>
-      </Flex>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 
@@ -381,12 +382,12 @@ function ExpandableList() {
     <Table>
       <TableHeader className="bg-secondary sticky top-0 z-10">
         <TableRow>
-          <TableHead className={`${HEAD} w-10`} aria-label="展開" />
-          <TableHead className={HEAD}>従業員</TableHead>
-          <TableHead className={HEAD}>部署</TableHead>
-          <TableHead className={`${HEAD} text-center`}>直近の状態</TableHead>
-          <TableHead className={`${HEAD} text-end`}>出勤日数</TableHead>
-          <TableHead className={`${HEAD} text-end`}>残業 累計</TableHead>
+          <TableHead className="w-10" aria-label="展開" />
+          <TableHead>従業員</TableHead>
+          <TableHead>部署</TableHead>
+          <TableHead className="text-center">直近の状態</TableHead>
+          <TableHead className="text-end">出勤日数</TableHead>
+          <TableHead className="text-end">残業 累計</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -434,7 +435,9 @@ function ExpandableList() {
               </TableRow>
               {isOpen && (
                 <TableRow className="hover:bg-transparent">
-                  <TableCell colSpan={COLSPAN} className="p-0" id={panelId}>
+                  {/* `flush` — the detail panel owns its own inset, so it spans the full cell
+                      width instead of being indented by the cell padding. */}
+                  <TableCell flush colSpan={COLSPAN} id={panelId}>
                     <DetailPanel employee={emp} />
                   </TableCell>
                 </TableRow>

package/docs/showcase/table-filter-chips.tsx

@@ -27,7 +27,14 @@ import * as React from "react";
 import { X, Filter } from "lucide-react";
 
 import { Button, Text } from "@godxjp/ui/general";
-import { Badge, DataTable, type ColumnDef } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  DataTable,
+  EmptyState,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
 import { SearchInput, Select } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import type { SortStateProp } from "@godxjp/ui/props";
@@ -256,7 +263,7 @@ function FilterChip({
   onRemove: () => void;
 }) {
   return (
-    <Badge tone={tone ?? "neutral"} variant="outline" className="gap-1 pe-1">
+    <Badge tone={tone ?? "neutral"} variant="outline">
       {label}
       <Button
         variant="ghost"
@@ -354,64 +361,67 @@ export default function Demo() {
         </Flex>
 
         {/* Active-filter chip bar — visible at rest because filters are seeded */}
-        <Flex
-          direction="row"
-          wrap
-          align="center"
-          gap="xs"
-          className="border-border bg-secondary/30 min-h-9 rounded-md border px-2.5 py-1.5"
-        >
-          <Flex direction="row" align="center" gap="xs" className="text-muted-foreground pe-1">
-            <Filter className="size-3.5" aria-hidden="true" />
-            <Text size="xs">適用中</Text>
-          </Flex>
+        <Card>
+          <CardContent solo>
+            <Flex direction="row" wrap align="center" gap="xs">
+              <Flex direction="row" align="center" gap="xs" className="text-muted-foreground">
+                <Filter className="size-3.5" aria-hidden="true" />
+                <Text size="xs">適用中</Text>
+              </Flex>
 
-          {!hasFilters && (
-            <Text size="xs" tone="muted">
-              条件なし · 全 {ROWS.length} 件
-            </Text>
-          )}
+              {!hasFilters && (
+                <Text size="xs" tone="muted">
+                  条件なし · 全 {ROWS.length} 件
+                </Text>
+              )}
 
-          {query.trim() && (
-            <FilterChip
-              label={`検索: ${query.trim()}`}
-              onRemove={() => {
-                setQuery("");
-              }}
-            />
-          )}
-          {status && (
-            <FilterChip
-              tone={STATUS_META[status].tone}
-              label={`状態: ${STATUS_META[status].label}`}
-              onRemove={() => {
-                setStatus(undefined);
-              }}
-            />
-          )}
-          {dept && (
-            <FilterChip
-              label={`部署: ${dept}`}
-              onRemove={() => {
-                setDept(undefined);
-              }}
-            />
-          )}
-          {ot !== "any" && (
-            <FilterChip
-              label={ot === "ot" ? "残業あり" : "残業 60分以上"}
-              onRemove={() => {
-                setOt("any");
-              }}
-            />
-          )}
+              {query.trim() && (
+                <FilterChip
+                  label={`検索: ${query.trim()}`}
+                  onRemove={() => {
+                    setQuery("");
+                  }}
+                />
+              )}
+              {status && (
+                <FilterChip
+                  tone={STATUS_META[status].tone}
+                  label={`状態: ${STATUS_META[status].label}`}
+                  onRemove={() => {
+                    setStatus(undefined);
+                  }}
+                />
+              )}
+              {dept && (
+                <FilterChip
+                  label={`部署: ${dept}`}
+                  onRemove={() => {
+                    setDept(undefined);
+                  }}
+                />
+              )}
+              {ot !== "any" && (
+                <FilterChip
+                  label={ot === "ot" ? "残業あり" : "残業 60分以上"}
+                  onRemove={() => {
+                    setOt("any");
+                  }}
+                />
+              )}
 
-          {hasFilters && (
-            <Button variant="ghost" size="sm" className="ms-auto h-6 text-xs" onClick={clearAll}>
-              すべて解除
-            </Button>
-          )}
-        </Flex>
+              {hasFilters && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="ms-auto h-6 text-xs"
+                  onClick={clearAll}
+                >
+                  すべて解除
+                </Button>
+              )}
+            </Flex>
+          </CardContent>
+        </Card>
 
         {/* The filtered table */}
         <DataTable
@@ -425,15 +435,17 @@ export default function Demo() {
           onSortChange={setSort}
           density="compact"
           empty={
-            <Flex direction="col" align="center" gap="xs" className="py-8">
-              <Text weight="medium">該当する勤怠記録がありません</Text>
-              <Text size="xs" tone="muted">
-                フィルター条件を解除すると全件を表示します
-              </Text>
-              <Button variant="outline" size="sm" onClick={clearAll}>
-                フィルターを解除
-              </Button>
-            </Flex>
+            <EmptyState
+              variant="section"
+              titleAs="p"
+              title="該当する勤怠記録がありません"
+              description="フィルター条件を解除すると全件を表示します"
+              action={
+                <Button variant="outline" size="sm" onClick={clearAll}>
+                  フィルターを解除
+                </Button>
+              }
+            />
           }
         >
           <DataTable.Toolbar>

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

@@ -289,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

@@ -226,18 +226,18 @@ function GroupHeaderRow({
   const Chevron = open ? ChevronDown : ChevronRight;
   return (
     <TableRow className="bg-secondary hover:bg-secondary border-b">
-      <TableCell className="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>
@@ -266,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>

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
@@ -398,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} />
                   ) : (
@@ -410,7 +410,7 @@ export default function Demo() {
                       />
                     </Flex>
                   )}
-                </div>
+                </CardContent>
               </ResizablePanel>
             </ResizablePanelGroup>
           </CardContent>
@@ -442,13 +442,11 @@ 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>
@@ -472,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>