@godxjp/ui 19.2.0 → 19.3.1

package/docs/showcase/futurelastic-web.tsx

@@ -247,13 +247,15 @@ function Bento() {
           {cells.map((c) => (
             <Card key={c.title} className={`fl-cell ${c.span ?? ""}`}>
               <CardContent>
-                <Medallion icon={c.icon} />
-                <Text as="div" weight="bold" size="lg" className="mt-5">
-                  {c.title}
-                </Text>
-                <Text as="p" size="sm" tone="muted" className="mt-2">
-                  {c.text}
-                </Text>
+                <Flex direction="col" gap="lg">
+                  <Medallion icon={c.icon} />
+                  <Text as="div" weight="bold" size="lg">
+                    {c.title}
+                  </Text>
+                  <Text as="p" size="sm" tone="muted">
+                    {c.text}
+                  </Text>
+                </Flex>
               </CardContent>
             </Card>
           ))}
@@ -275,12 +277,12 @@ function Stats() {
       <div className={SHELL}>
         <div className="fl-stats">
           {stats.map(([n, l]) => (
-            <div key={l} className="text-center">
+            <Flex key={l} direction="col" gap="sm" className="text-center">
               <div className="fl-stat-num">{n}</div>
-              <Text as="div" size="sm" tone="muted" className="mt-2">
+              <Text as="div" size="sm" tone="muted">
                 {l}
               </Text>
-            </div>
+            </Flex>
           ))}
         </div>
       </div>
@@ -294,20 +296,20 @@ function Cta() {
       <div className={SHELL}>
         <div className="fl-cta">
           <div className="fl-cta-glow" />
-          <div className="fl-cta-inner">
+          <Flex direction="col" gap="xl" className="fl-cta-inner">
             <h2 className="fl-h2">Cùng xây điều mới?</h2>
-            <p className="fl-lead mx-auto mt-3">
+            <p className="fl-lead mx-auto">
               Chúng tôi tìm đối tác, nhân tài và cơ hội M&amp;A trong công nghệ, logistics và
               F&amp;B tại Nhật Bản &amp; Việt Nam.
             </p>
-            <Flex direction="row" gap="md" className="mt-7 justify-center">
+            <Flex direction="row" gap="md" className="justify-center">
               <Button size="lg">Đặt lịch trao đổi</Button>
               <Button variant="ghost" size="lg">
                 Đọc blog
                 <ArrowRight aria-hidden="true" />
               </Button>
             </Flex>
-          </div>
+          </Flex>
         </div>
       </div>
     </section>
@@ -323,26 +325,26 @@ function Footer() {
   return (
     <footer className="fl-footer">
       <div className={`${SHELL} fl-footer-grid`}>
-        <div>
+        <Flex direction="col" gap="md">
           <span className="fl-brand">
             futur<span className="fl-gold">elastic</span>
           </span>
-          <Text as="p" size="sm" tone="muted" className="fl-footer-tagline mt-4">
+          <Text as="p" size="sm" tone="muted" className="fl-footer-tagline">
             Tech · AI · Holdings · building the elastic infrastructure of the future across Japan
             &amp; Vietnam.
           </Text>
-        </div>
+        </Flex>
         {cols.map(([h, items]) => (
-          <div key={h}>
+          <Flex direction="col" gap="md" key={h}>
             <Text
               as="div"
               size="2xs"
               weight="bold"
-              className="text-foreground mb-3 tracking-widest uppercase"
+              className="text-foreground tracking-widest uppercase"
             >
               {h}
             </Text>
-            <Flex direction="col" gap="xs" className="mt-2">
+            <Flex direction="col" gap="xs">
               {items.map((i) => (
                 <Button
                   key={i}
@@ -354,7 +356,7 @@ function Footer() {
                 </Button>
               ))}
             </Flex>
-          </div>
+          </Flex>
         ))}
       </div>
       <div className={`${SHELL} fl-footer-bottom`}>

package/docs/showcase/org-switcher.tsx

@@ -181,7 +181,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
               type="button"
               variant="ghost"
               size="sm"
-              className="w-full justify-start gap-2"
+              className="w-full justify-start"
               onClick={() => {
                 onCreate();
                 setOpen(false);
@@ -194,7 +194,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
               type="button"
               variant="ghost"
               size="sm"
-              className="w-full justify-start gap-2"
+              className="w-full justify-start"
               onClick={() => {
                 onJoin();
                 setOpen(false);

package/docs/showcase/permission-matrix.tsx

@@ -34,6 +34,7 @@ import { Check, Minus } from "lucide-react";
 import {
   Badge,
   Card,
+  CardAction,
   CardContent,
   CardHeader,
   CardTitle,
@@ -217,11 +218,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" tabular>
-              権限 {rows.length} / {PERMISSIONS.length} 件 · ロール {ROLES.length}
-            </Text>
+            <CardAction>
+              <Text size="xs" tone="muted" tabular>
+                権限 {rows.length} / {PERMISSIONS.length} 件 · ロール {ROLES.length}
+              </Text>
+            </CardAction>
           </CardHeader>
           <CardContent flush>
             <div className="overflow-x-auto">

package/docs/showcase/table-conditional-format.tsx

@@ -205,11 +205,11 @@ export default function Demo() {
       sortable: true,
       render: (r) =>
         isEarlyCell(r) ? (
-          <span className="bg-attention/10 text-attention inline-flex rounded-sm px-1.5 py-0.5">
+          <Badge tone="warning" shape="sharp">
             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
               {hours(r.earlyLeaveHours)}
             </Text>
-          </span>
+          </Badge>
         ) : (
           <Text tabular>{hours(r.earlyLeaveHours)}</Text>
         ),
@@ -221,11 +221,11 @@ export default function Demo() {
       sortable: true,
       render: (r) =>
         isOvertimeCell(r) ? (
-          <span className="bg-warning/10 text-warning-foreground inline-flex rounded-sm px-1.5 py-0.5">
+          <Badge tone="warning" shape="sharp">
             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
               {hours(r.overtime)}
             </Text>
-          </span>
+          </Badge>
         ) : (
           <Text tabular>{hours(r.overtime)}</Text>
         ),
@@ -312,11 +312,11 @@ export default function Demo() {
                       {/* 早退セル: > 2.0h は attention(朱) で背景＋前景強調 */}
                       <TableCell className="text-end">
                         {isEarlyCell(r) ? (
-                          <span className="bg-attention/10 text-attention inline-flex rounded-sm px-1.5 py-0.5">
+                          <Badge tone="warning" shape="sharp">
                             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
                               {hours(r.earlyLeaveHours)}
                             </Text>
-                          </span>
+                          </Badge>
                         ) : (
                           <Text tone="muted" tabular>
                             {hours(r.earlyLeaveHours)}
@@ -326,11 +326,11 @@ export default function Demo() {
                       {/* 残業セル: ≥ 45h は warning(山吹) で注意 */}
                       <TableCell className="text-end">
                         {isOvertimeCell(r) ? (
-                          <span className="bg-warning/10 text-warning-foreground inline-flex rounded-sm px-1.5 py-0.5">
+                          <Badge tone="warning" shape="sharp">
                             <Text as="span" weight="medium" tabular style={{ color: "inherit" }}>
                               {hours(r.overtime)}
                             </Text>
-                          </span>
+                          </Badge>
                         ) : (
                           <Text tabular>{hours(r.overtime)}</Text>
                         )}

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

@@ -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,7 +250,7 @@ const EMPLOYEES: Employee[] = [
 
 // ── Shared cell padding to match compact DataTable density ─────────────────────
 
-const CELL = "px-3 py-2 align-middle";
+const CELL = "align-middle";
 const HEAD = "px-3";
 
 function StatusBadge({ status }: { status: ShiftStatus }) {
@@ -270,10 +271,12 @@ function DetailPanel({ employee }: { employee: Employee }) {
           <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 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 */}
@@ -295,14 +298,18 @@ function DetailPanel({ employee }: { employee: Employee }) {
 
         {/* Per-day breakdown — quiet nested list, real Card chrome */}
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
+          <CardHeader>
             <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>
+            <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>
@@ -449,11 +456,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

@@ -407,12 +407,7 @@ export default function Demo() {
           )}
 
           {hasFilters && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="ms-auto h-6 px-2 text-xs"
-              onClick={clearAll}
-            >
+            <Button variant="ghost" size="sm" className="ms-auto h-6 text-xs" onClick={clearAll}>
               すべて解除
             </Button>
           )}
@@ -435,7 +430,7 @@ export default function Demo() {
               <Text size="xs" tone="muted">
                 フィルター条件を解除すると全件を表示します
               </Text>
-              <Button variant="outline" size="sm" className="mt-1" onClick={clearAll}>
+              <Button variant="outline" size="sm" onClick={clearAll}>
                 フィルターを解除
               </Button>
             </Flex>

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. */}

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,7 +226,7 @@ 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 className="ps-2 pe-0" colSpan={2}>
         <Button
           variant="ghost"
           size="sm"
@@ -241,10 +242,10 @@ function GroupHeaderRow({
           </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>
   );
 }
@@ -330,18 +331,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 +358,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 +373,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

@@ -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]">
@@ -452,11 +455,13 @@ export default function Demo() {
 
         {/* ── 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