@godxjp/ui 19.2.0 → 19.4.0

package/docs/showcase/table-crud-list.tsx

@@ -497,7 +497,7 @@ export default function Demo() {
           </CardContent>
 
           {/* Footer totals — composed from CardFooter + Badge, not a hand-rolled bar. */}
-          <CardFooter className="flex-wrap justify-between gap-3">
+          <CardFooter className="flex-wrap justify-between">
             <Flex direction="row" gap="md" align="center" wrap>
               <Text size="xs" tone="muted">
                 選択中{" "}
@@ -508,19 +508,19 @@ export default function Demo() {
               </Text>
               <Badge tone="success" variant="outline">
                 出勤{" "}
-                <Text as="span" tabular className="ms-1">
+                <Text as="span" tabular>
                   {tally.present}
                 </Text>
               </Badge>
               <Badge tone="warning" variant="outline">
                 遅刻{" "}
-                <Text as="span" tabular className="ms-1">
+                <Text as="span" tabular>
                   {tally.late}
                 </Text>
               </Badge>
               <Badge tone="muted" variant="outline">
                 承認待ち{" "}
-                <Text as="span" tabular className="ms-1">
+                <Text as="span" tabular>
                   {tally.pendingApproval}
                 </Text>
               </Badge>

package/docs/showcase/table-density.tsx

@@ -25,12 +25,13 @@ import { Clock } from "lucide-react";
 
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
   DataTable,
+  type BadgeProps,
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
@@ -233,44 +234,48 @@ export default function Demo() {
       <Flex direction="col" gap="lg">
         {/* Control + live readout */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between gap-4">
+          <CardHeader>
             <CardTitle level={2}>行密度</CardTitle>
-            <Flex direction="row" align="center" gap="md">
-              <Text as="span" size="xs" tone="muted" className="inline-flex items-center gap-1.5">
-                <Clock className="size-3.5" aria-hidden="true" />
-                行高
-                <Text as="strong" weight="medium" tabular>
-                  {meta.px}px
-                </Text>
-                <span aria-hidden="true">·</span>
-                {meta.note}
-              </Text>
-              <ToggleGroup
-                type="single"
-                value={density}
-                onValueChange={(v) => {
-                  if (v) setDensity(v as DensityKey);
-                }}
-                variant="outline"
-                size="sm"
-                aria-label="行密度を切り替え"
-              >
-                {DENSITY_ORDER.map((key) => (
-                  <ToggleGroupItem
-                    key={key}
-                    value={key}
-                    aria-label={`${DENSITY_META[key].label} ${DENSITY_META[key].px}px`}
-                  >
-                    <Flex direction="row" align="center" gap="xs">
-                      <span>{DENSITY_META[key].label}</span>
-                      <Text size="2xs" tone="muted" tabular>
-                        {DENSITY_META[key].px}
-                      </Text>
-                    </Flex>
-                  </ToggleGroupItem>
-                ))}
-              </ToggleGroup>
-            </Flex>
+            <CardAction>
+              <Flex direction="row" align="center" gap="md">
+                <Flex align="center" gap="xs">
+                  <Text as="span" size="xs" tone="muted">
+                    <Clock className="size-3.5" aria-hidden="true" />
+                    行高
+                    <Text as="strong" weight="medium" tabular>
+                      {meta.px}px
+                    </Text>
+                    <span aria-hidden="true">·</span>
+                    {meta.note}
+                  </Text>
+                </Flex>
+                <ToggleGroup
+                  type="single"
+                  value={density}
+                  onValueChange={(v) => {
+                    if (v) setDensity(v as DensityKey);
+                  }}
+                  variant="outline"
+                  size="sm"
+                  aria-label="行密度を切り替え"
+                >
+                  {DENSITY_ORDER.map((key) => (
+                    <ToggleGroupItem
+                      key={key}
+                      value={key}
+                      aria-label={`${DENSITY_META[key].label} ${DENSITY_META[key].px}px`}
+                    >
+                      <Flex direction="row" align="center" gap="xs">
+                        <span>{DENSITY_META[key].label}</span>
+                        <Text size="2xs" tone="muted" tabular>
+                          {DENSITY_META[key].px}
+                        </Text>
+                      </Flex>
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+              </Flex>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             {/* The SAME DataTable. Only the density class changes — same columns,
@@ -314,11 +319,13 @@ export default function Demo() {
               const m = DENSITY_META[key];
               return (
                 <Card key={key}>
-                  <CardHeader className="flex flex-row items-center justify-between">
+                  <CardHeader>
                     <CardTitle level={2}>{m.label}</CardTitle>
-                    <Text size="xs" tone="muted" tabular>
-                      行高 {m.px}px · {m.note}
-                    </Text>
+                    <CardAction>
+                      <Text size="xs" tone="muted" tabular>
+                        行高 {m.px}px · {m.note}
+                      </Text>
+                    </CardAction>
                   </CardHeader>
                   <CardContent flush>
                     <DataTable

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

@@ -23,8 +23,8 @@ import { ChevronRight, Clock, Coffee, MapPin } from "lucide-react";
 
 import {
   Badge,
-  type BadgeProps,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -35,6 +35,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type BadgeProps,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -249,8 +250,7 @@ const EMPLOYEES: Employee[] = [
 
 // ── Shared cell padding to match compact DataTable density ─────────────────────
 
-const CELL = "px-3 py-2 align-middle";
-const HEAD = "px-3";
+const CELL = "align-middle";
 
 function StatusBadge({ status }: { status: ShiftStatus }) {
   return (
@@ -264,97 +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>
-          <Text size="xs" tone="muted" className="inline-flex items-center gap-1">
-            <MapPin className="size-3.5" aria-hidden="true" />
-            {employee.site}
-          </Text>
-        </Flex>
+    <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>
 
-        {/* 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 className="flex flex-row items-center justify-between">
-            <CardTitle level={2} className="text-[var(--font-size-xs)]">
-              今週の打刻
-            </CardTitle>
-            <Text size="xs" tone="muted" className="inline-flex items-center gap-1">
-              <Clock className="size-3.5" aria-hidden="true" />
-              直近 3 日
-            </Text>
-          </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>
   );
 }
 
@@ -374,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>
@@ -427,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>
@@ -449,11 +459,13 @@ export default function Demo() {
     >
       <Flex direction="col" gap="lg">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <CardTitle level={2}>従業員の勤怠（今週）</CardTitle>
-            <Text size="xs" tone="muted" tabular>
-              4 名 · 06/04 時点
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                4 名 · 06/04 時点
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <ExpandableList />

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,69 +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 px-2 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
@@ -430,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" className="mt-1" onClick={clearAll}>
-                フィルターを解除
-              </Button>
-            </Flex>
+            <EmptyState
+              variant="section"
+              titleAs="p"
+              title="該当する勤怠記録がありません"
+              description="フィルター条件を解除すると全件を表示します"
+              action={
+                <Button variant="outline" size="sm" onClick={clearAll}>
+                  フィルターを解除
+                </Button>
+              }
+            />
           }
         >
           <DataTable.Toolbar>