@godxjp/ui 19.1.0 → 19.3.1

package/docs/data-display/badge.tsx

@@ -0,0 +1,283 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatusBadge,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Star } from "lucide-react";
+
+/**
+ * Badge — status / category chip. Composed only from real @godxjp/ui components.
+ * variant is STRUCTURAL (default / secondary / outline); tone is SEMANTIC (ToneProp).
+ * the reference design: semantic mapping is FIXED (success 若竹 / warning 山吹 / info 群青 /
+ * destructive 茜). Labels never wrap (rule #35).
+ */
+const variants = [
+  { variant: "default" as const, label: "既定 Default" },
+  { variant: "secondary" as const, label: "区分 Category" },
+  { variant: "outline" as const, label: "補助 Subtle" },
+  { variant: "dashed" as const, label: "点線 Dashed" },
+];
+
+const shapes = [
+  { shape: "default" as const, label: "既定 Default" },
+  { shape: "pill" as const, label: "丸み Pill" },
+  { shape: "sharp" as const, label: "角 Sharp" },
+];
+
+/**
+ * Colours a person picked, not colours that mean something — a status and an
+ * issue type out of a project's own settings screen, plus the two ends of the
+ * range an administrator can still type. `#488a5a` is here because it is the
+ * worst case for a SOLID chip: near-black and white measure equal on it, both
+ * 4.15:1, under the 4.5 badge-sized text needs. Washed, it clears 8.52.
+ */
+const dataColours = [
+  { color: "#4488c5", label: "処理中 In progress" },
+  { color: "#ea9a10", label: "未対応 Open" },
+  { color: "#488a5a", label: "完了 Done" },
+  { color: "#000000", label: "黒 Black" },
+  { color: "#ffffff", label: "白 White" },
+];
+
+const tones = [
+  { tone: "default" as const, label: "既定 Default" },
+  { tone: "primary" as const, label: "ブランド Brand" },
+  { tone: "success" as const, label: "承認済 Approved" },
+  { tone: "warning" as const, label: "保留 Pending" },
+  { tone: "destructive" as const, label: "却下 Rejected" },
+  { tone: "info" as const, label: "情報 Info" },
+  { tone: "muted" as const, label: "控えめ Muted" },
+  { tone: "neutral" as const, label: "中立 Neutral" },
+];
+
+const statuses = ["active", "draft", "pending", "cancelled", "failed", "scheduled"];
+
+/**
+ * Subscription/billing lifecycle keys (gh#216). They ship the SAME canonical status→tone→icon
+ * map as every other key, so a billing screen never keeps a page-local colour table. They are
+ * demoed explicitly because their i18n labels were once missing. A missing key renders the raw
+ * `status.trialing` string, and only a rendered demo makes that regression visible.
+ */
+const billingStatuses = ["trialing", "past_due", "incomplete", "canceled"];
+
+/**
+ * StatusBadge is the status-first name for the same chip, so it carries the SAME structural
+ * axes. `incomplete` is the one canonical key that resolves to the tone-neutral default, which
+ * is why the four variants stay legible next to each other: a tone would repaint the fill.
+ */
+const statusBadgeVariants = [
+  { variant: "default" as const, note: "既定 Default" },
+  { variant: "secondary" as const, note: "控えめ Secondary" },
+  { variant: "outline" as const, note: "枠線 Outline" },
+  { variant: "dashed" as const, note: "点線 Dashed" },
+];
+
+/** A project status outside the canonical map declares its own tone; the label stays authored. */
+const statusBadgeTones = [
+  { tone: "default" as const, label: "受付 Received" },
+  { tone: "primary" as const, label: "優先対応 Priority" },
+  { tone: "success" as const, label: "検収済 Accepted" },
+  { tone: "warning" as const, label: "修正待ち Awaiting fix" },
+  { tone: "destructive" as const, label: "検収差戻し Rejected" },
+  { tone: "info" as const, label: "監査中 Under audit" },
+  { tone: "muted" as const, label: "対象外 Out of scope" },
+  { tone: "neutral" as const, label: "下書き Draft" },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Badge"
+      subtitle="Structural variants, semantic tones, and auto-mapped lifecycle status · labels never wrap"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Structural variants</CardTitle>
+            <CardDescription>
+              variant is structural emphasis only: default (filled), secondary (muted fill), outline
+              (bordered), dashed (dashed border). It carries no semantic meaning; use tone for that.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {variants.map((v) => (
+                <Badge key={v.variant} variant={v.variant}>
+                  {v.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Shape</CardTitle>
+            <CardDescription>
+              shape sets corner radius from the tokens: default (badge radius) / pill (fully
+              rounded) / sharp (square). Independent of variant and tone.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {shapes.map((s) => (
+                <Badge key={s.shape} shape={s.shape} tone="info">
+                  {s.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>The record&rsquo;s own colour</CardTitle>
+            <CardDescription>
+              color carries DATA: a status an administrator coloured, an issue type, a tag. The chip
+              is washed into the surface rather than filled, because a solid chip has to choose a
+              foreground and no choice is readable for every colour a picker can produce. Retune the
+              wash with --badge-tint-fill / --badge-tint-edge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {dataColours.map((c) => (
+                <Badge key={c.color} shape="pill" color={c.color}>
+                  {c.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Semantic tones</CardTitle>
+            <CardDescription>
+              tone conveys intent, pick by meaning, never aesthetics. success = approved/paid ·
+              warning = pending · destructive = rejected · info · muted · neutral = category.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {tones.map((t) => (
+                <Badge key={t.tone} tone={t.tone}>
+                  {t.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Lifecycle status</CardTitle>
+            <CardDescription>
+              status=&quot;key&quot; auto-maps known lifecycle keys to tone + icon + i18n label.
+              Unknown keys fall back to neutral + a generic icon + the raw key text.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {statuses.map((s) => (
+                <Badge key={s} status={s} />
+              ))}
+              <StatusBadge status="active" />
+              <Badge status="unknown-key" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Billing lifecycle</CardTitle>
+            <CardDescription>
+              Subscription keys map through the SAME canonical table · trialing = info · past_due =
+              warning · incomplete = default · canceled = destructive. Every label is translated, so
+              a billing screen never shows a raw status.* key and never keeps its own colour map.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {billingStatuses.map((s) => (
+                <StatusBadge key={s} status={s} />
+              ))}
+              {billingStatuses.map((s) => (
+                <StatusBadge key={`${s}-outline`} status={s} variant="outline" />
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>StatusBadge · 構造 / 形状 / トーン</CardTitle>
+            <CardDescription>
+              StatusBadge はステータス主導の別名で、Badge と同じ variant / shape / tone
+              を受け取ります。canonical マップに無い自社ステータスは tone
+              を明示し、色表をアプリ側に持たせません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  variant · status=&quot;incomplete&quot;（トーン中立のキー）
+                </Text>
+                <Flex direction="row" wrap align="center" gap="sm">
+                  {statusBadgeVariants.map((v) => (
+                    <StatusBadge key={v.variant} status="incomplete" variant={v.variant} />
+                  ))}
+                </Flex>
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  shape · 既定 / pill / sharp
+                </Text>
+                <Flex direction="row" wrap align="center" gap="sm">
+                  {shapes.map((s) => (
+                    <StatusBadge key={s.shape} status="scheduled" shape={s.shape} />
+                  ))}
+                </Flex>
+              </Flex>
+              <Flex direction="col" gap="xs">
+                <Text size="xs" tone="muted">
+                  tone · 自社ステータスに意味の色を与える
+                </Text>
+                <Flex direction="row" wrap align="center" gap="sm">
+                  {statusBadgeTones.map((t) => (
+                    <StatusBadge key={t.tone} tone={t.tone}>
+                      {t.label}
+                    </StatusBadge>
+                  ))}
+                </Flex>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Icon overrides</CardTitle>
+            <CardDescription>
+              icon replaces the status-mapped icon; icon=&#123;null&#125; suppresses it entirely
+              while keeping the resolved tone and label.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              <Badge status="active" icon={Star} />
+              <Badge status="active" icon={null} />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/card/examples/detail-panel.tsx

@@ -0,0 +1,106 @@
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+  StatCard,
+  Avatar,
+  AvatarFallback,
+} from "@godxjp/ui/data-display";
+import { Button } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  ResponsiveGrid,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { BookOpen, FileText, LayoutDashboard, ReceiptText, Users } from "lucide-react";
+
+/**
+ * Detail screen — Card as the structural surface: accent stripe + banded header +
+ * Descriptions body + separated footer action bar, beside a StatCard summary row.
+ * No hand-rolled panels; every surface is a real @godxjp/ui component.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "会計",
+    items: [
+      { id: "dashboard", label: "ダッシュボード", icon: LayoutDashboard },
+      { id: "journal", label: "仕訳", icon: FileText },
+      { id: "invoices", label: "請求書", icon: ReceiptText },
+      { id: "partners", label: "取引先", icon: BookOpen },
+    ],
+  },
+  { label: "管理", items: [{ id: "users", label: "ユーザー", icon: Users }] },
+];
+
+export default function Demo() {
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="invoices"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreBooks", role: "管理コンソール", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={
+        <Topbar
+          start={
+            <Avatar className="rounded-md">
+              <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                C
+              </AvatarFallback>
+            </Avatar>
+          }
+        />
+      }
+    >
+      <PageContainer
+        title="請求書 INV-2024-0312"
+        subtitle="株式会社ベトヤ · 2024-04-12"
+        breadcrumb={[{ label: "請求書", to: "#" }, { label: "INV-2024-0312" }]}
+        extra={<Badge tone="warning">承認待ち</Badge>}
+      >
+        <Flex direction="col" gap="lg">
+          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+            <StatCard label="合計金額" value="¥482,000" />
+            <StatCard label="消費税 (10%)" value="¥43,818" />
+            <StatCard label="支払期日" value="2024-05-31" hint="あと19日" />
+          </ResponsiveGrid>
+
+          <Card accent="primary">
+            <CardHeader banded>
+              <CardTitle level={2}>明細</CardTitle>
+              <CardDescription>4月分 受注</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Descriptions>
+                <Descriptions.Item label="取引先">株式会社ベトヤ</Descriptions.Item>
+                <Descriptions.Item label="勘定科目">売掛金 / 売上高</Descriptions.Item>
+                <Descriptions.Item label="小計">¥438,182</Descriptions.Item>
+                <Descriptions.Item label="消費税 (10%)">¥43,818</Descriptions.Item>
+                <Descriptions.Item label="合計">¥482,000</Descriptions.Item>
+                <Descriptions.Item label="摘要">INV-2024-0312 / 4月分</Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+            <CardFooter separated>
+              <Flex direction="row" wrap gap="sm" justify="end">
+                <Button variant="outline">却下</Button>
+                <Button>承認</Button>
+              </Flex>
+            </CardFooter>
+          </Card>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,3 @@
+--- title: Overview ---
+
+The surface container for almost everything. Body content always goes in `CardContent` (a bare `Card` has no padding); titles in `CardHeader`/`CardTitle`; action bars in `CardFooter`. Flat by design — 1px border, no shadow at rest.

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

@@ -0,0 +1,285 @@
+import {
+  Card,
+  CardAction,
+  CardBar,
+  CardContent,
+  CardCover,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Descriptions,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  StatCard,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { AspectRatio, Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+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
+ * 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. */
+
+/**
+ * Card — surface container. Body content ALWAYS goes in CardContent (a bare Card
+ * has zero padding); titles in CardHeader/CardTitle; action bars in CardFooter.
+ * Flat by design — 1px border, no shadow at rest. Composed only from real
+ * @godxjp/ui components.
+ */
+const accents = ["primary", "success", "warning", "info", "attention", "destructive"] as const;
+
+export default function Demo() {
+  return (
+    <PageContainer title="Card" subtitle="variant · accent · header / content / footer composition">
+      <Flex direction="col" gap="lg">
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            CardBar · scrollable controls + pinned action
+          </Text>
+          <Card>
+            <CardBar
+              extra={
+                <Button size="sm" variant="outline">
+                  保存
+                </Button>
+              }
+            >
+              <Button size="sm" variant="ghost">
+                すべて
+              </Button>
+              <Button size="sm" variant="ghost">
+                未払い
+              </Button>
+              <Button size="sm" variant="ghost">
+                超過
+              </Button>
+            </CardBar>
+            <CardContent>
+              main が混み合うと main のみ横スクロールし、extra は末尾に固定されます。
+            </CardContent>
+          </Card>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            StatCard · stacked / inline / inverse
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+            <StatCard label="月間売上" value="¥12,840,000" delta="+12.4%" hint="前月比" />
+            <StatCard label="未払い" value="28" delta="-3" accent="warning" />
+            <StatCard
+              label="平均処理時間"
+              value="2.8日"
+              delta="-0.4日"
+              inverse
+              layout="inline"
+              align="end"
+            />
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Variants
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+            <Card variant="default">
+              <CardHeader>
+                <CardTitle level={2}>default</CardTitle>
+              </CardHeader>
+              <CardContent>標準のサーフェス</CardContent>
+            </Card>
+            <Card variant="muted">
+              <CardHeader>
+                <CardTitle level={2}>muted</CardTitle>
+              </CardHeader>
+              <CardContent>控えめな塗り</CardContent>
+            </Card>
+            <Card variant="outline">
+              <CardHeader>
+                <CardTitle level={2}>outline</CardTitle>
+              </CardHeader>
+              <CardContent>枠線のみ</CardContent>
+            </Card>
+            <Card variant="featured">
+              <CardHeader>
+                <CardTitle level={2}>featured</CardTitle>
+              </CardHeader>
+              <CardContent>強調サーフェス</CardContent>
+            </Card>
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Accent · accentPlacement=&quot;edge&quot; (既定 · 先頭エッジのレール)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 6 }}>
+            {accents.map((a) => (
+              <Card key={a} accent={a}>
+                <CardContent>{a}</CardContent>
+              </Card>
+            ))}
+          </ResponsiveGrid>
+        </Flex>
+
+        {/* accentPlacement="perimeter" — the semantic attention border (gh#12) */}
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Accent · accentPlacement=&quot;perimeter&quot; (全周のアテンションボーダー)
+          </Text>
+          <Text size="xs" tone="muted">
+            variant=&quot;featured&quot;
+            は定義上ブランド色の全周ボーダー。トーンを自分で決めたいとき —
+            「対応が必要」「失敗した」— は accent と accentPlacement の 2
+            語で表す。本文の左インセットは レール版と同じ位置に戻るので、placement
+            を切り替えても文字は動かない。
+          </Text>
+          <ResponsiveGrid columns={{ sm: 2, md: 3, lg: 6 }}>
+            {accents.map((a) => (
+              <Card key={a} accent={a} accentPlacement="perimeter">
+                <CardContent>{a}</CardContent>
+              </Card>
+            ))}
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Composition · banded header + separated footer
+          </Text>
+          <Card accent="primary">
+            <CardHeader banded>
+              <CardTitle level={2}>請求書 INV-2024-0312</CardTitle>
+              <CardDescription>株式会社ベトヤ · 2024-04-12</CardDescription>
+              <CardAction>
+                <Button variant="ghost" size="icon-sm" aria-label="メニュー">
+                  <MoreHorizontal />
+                </Button>
+              </CardAction>
+            </CardHeader>
+            <CardContent>
+              <Descriptions>
+                <Descriptions.Item label="小計">¥438,182</Descriptions.Item>
+                <Descriptions.Item label="消費税 (10%)">¥43,818</Descriptions.Item>
+                <Descriptions.Item label="合計">¥482,000</Descriptions.Item>
+              </Descriptions>
+            </CardContent>
+            <CardFooter separated>
+              <Flex direction="row" wrap gap="sm" justify="end">
+                <Button variant="outline">却下</Button>
+                <Button>承認</Button>
+              </Flex>
+            </CardFooter>
+          </Card>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            Density · tight 12px · base 16px · cozy 20px
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+            <Card density="tight">
+              <CardHeader>
+                <CardTitle level={2}>tight</CardTitle>
+              </CardHeader>
+              <CardContent>余白を詰めた密度</CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle level={2}>base</CardTitle>
+              </CardHeader>
+              <CardContent>既定の密度</CardContent>
+            </Card>
+            <Card density="cozy">
+              <CardHeader>
+                <CardTitle level={2}>cozy</CardTitle>
+              </CardHeader>
+              <CardContent>ゆったりした密度</CardContent>
+            </Card>
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            CardContent · flush (edge-to-edge table) · solo (no header)
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, lg: 2 }}>
+            <Card>
+              <CardHeader banded>
+                <CardTitle level={2}>仕訳明細</CardTitle>
+              </CardHeader>
+              <CardContent flush>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>勘定科目</TableHead>
+                      <TableHead className="text-end">借方</TableHead>
+                      <TableHead className="text-end">貸方</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>売掛金</TableCell>
+                      <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                      <TableCell className="text-end">—</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>売上高</TableCell>
+                      <TableCell className="text-end">—</TableCell>
+                      <TableCell className="text-end tabular-nums">¥438,182</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>仮受消費税</TableCell>
+                      <TableCell className="text-end">—</TableCell>
+                      <TableCell className="text-end tabular-nums">¥43,818</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent solo>
+                ヘッダーのない本文。solo はトップパディングをカードのシェルに合わせます。
+              </CardContent>
+            </Card>
+          </ResponsiveGrid>
+        </Flex>
+
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            CardCover · full-bleed media, header below
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <Card>
+              <CardCover>
+                <AspectRatio ratio={16 / 9}>
+                  <img
+                    src={coverTerrain}
+                    alt="オフィスビルの外観"
+                    className="h-full w-full object-cover"
+                  />
+                </AspectRatio>
+              </CardCover>
+              <CardHeader>
+                <CardTitle level={2}>渋谷オフィス</CardTitle>
+                <CardDescription>東京都渋谷区 · 内見受付中</CardDescription>
+              </CardHeader>
+              <CardFooter separated>
+                <Button variant="ghost">詳細を見る</Button>
+              </CardFooter>
+            </Card>
+          </ResponsiveGrid>
+        </Flex>
+      </Flex>
+    </PageContainer>
+  );
+}