@godxjp/ui 19.6.0 → 20.1.0

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

@@ -117,6 +117,29 @@ export default function Demo() {
       subtitle="sortable · selectable · bulk actions · row actions · loading · clickable rows · empty state"
     >
       <Flex direction="col" gap="lg">
+        <Flex direction="col" gap="sm" id="text-action-width">
+          <Text weight="medium">日本語の行アクション</Text>
+          <DataTable
+            preset="action-collection"
+            columns={[
+              { key: "partner", header: "取引先" },
+              { key: "date", header: "期限日", width: "104px" },
+              {
+                key: "action",
+                header: "操作",
+                priority: "actions",
+                width: "104px",
+                render: () => (
+                  <Button size="sm" variant="ghost">
+                    対応する
+                  </Button>
+                ),
+              },
+            ]}
+            data={invoices}
+            getRowId={(row) => row.id}
+          />
+        </Flex>
         {/* Primary: sorted (amount desc), one row preselected, clickable rows,
             controlled density (comfortable), kebab row actions, pagination footer. */}
         <DataTable

package/docs/data-display/descriptions.tsx

@@ -7,6 +7,7 @@ import {
   CardTitle,
   Descriptions,
 } from "@godxjp/ui/data-display";
+import type { CSSProperties } from "react";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
@@ -137,6 +138,46 @@ export default function Demo() {
             </Descriptions>
           </CardContent>
         </Card>
+
+        {/* ── The RULED property panel (gh#414) ─────────────────────────────
+            Two token knobs, both OFF by default, turn a horizontal Descriptions into the ruled
+            panel a detail page usually wants. They exist so a service stops hand-rolling a
+            `<Flex className="min-h-10 border-b">` row: the label column, the gaps and the value
+            type step were already Descriptions'; only the rule and the band height were missing.
+            The row gap goes to 0 in the same declaration — the gap is the space BETWEEN rules, so
+            leaving it would draw detached hairlines instead of a ruled list. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>案件の詳細 · ruled rows</CardTitle>
+            <CardDescription>
+              一行ごとに罫線を引いた属性パネル。--descriptions-row-border と
+              --descriptions-row-min-height をテーマで一度設定するだけで、コンポーネントは同じです。
+            </CardDescription>
+          </CardHeader>
+          {/* The knobs are declared on the CARD BODY, not on the grid: custom properties inherit,
+              so one scope re-tunes every Descriptions inside it — which is how a service theme
+              would set them (once, globally), not per call site. */}
+          <CardContent
+            style={
+              {
+                "--descriptions-row-border": "1px solid hsl(var(--border))",
+                "--descriptions-row-min-height": "var(--band-height-lg)",
+                "--descriptions-row-gap": "0px",
+              } as CSSProperties
+            }
+          >
+            <Descriptions columns={1} layout="horizontal">
+              <Descriptions.Item label="案件名">2026年度 基幹システム更改</Descriptions.Item>
+              <Descriptions.Item label="担当">山田 太郎</Descriptions.Item>
+              <Descriptions.Item label="状態">
+                <Badge status="active" />
+              </Descriptions.Item>
+              <Descriptions.Item label="契約ID" mono>
+                CT-2026-0088
+              </Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-display/legend.tsx

@@ -0,0 +1,145 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Legend,
+  Progress,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const COMPLIANCE = [
+  { name: "株式会社山田製作所", over: 2, near: 3, done: 12 },
+  { name: "佐藤食品株式会社", over: 1, near: 2, done: 9 },
+  { name: "東海精密工業株式会社", over: 0, near: 3, done: 21 },
+];
+
+const STATUS_KEYS = [
+  { tone: "destructive", label: "期限超過" },
+  { tone: "warning", label: "期限間近" },
+  { tone: "success", label: "対応済" },
+] as const;
+
+/**
+ * Legend — the KEY for a colour-coded surface: which tone means what, in words, once.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer title="Legend" subtitle="tone → 意味 のキー · 凡例">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Progress の breakdown と組む</CardTitle>
+            <CardDescription>
+              CardAction に置くと、カード見出しと同じ行に凡例が並びます。色の意味をカードで
+              一度だけ言い、各行では繰り返しません。
+            </CardDescription>
+            <CardAction>
+              <Legend items={[...STATUS_KEYS]} />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gapRaw={11}>
+              {COMPLIANCE.map((row) => (
+                <Flex key={row.name} align="center" gapRaw={14}>
+                  <Flex width={180}>
+                    <Text weight="medium" truncate>
+                      {row.name}
+                    </Text>
+                  </Flex>
+                  <Flex fill direction="col">
+                    <Progress
+                      segments={[
+                        { value: row.over, tone: "destructive", label: "期限超過" },
+                        { value: row.near, tone: "warning", label: "期限間近" },
+                        { value: row.done, tone: "success", label: "対応済" },
+                      ]}
+                      aria-label={row.name}
+                    />
+                  </Flex>
+                  <Flex width={150} justify="end" align="center" gapRaw={12}>
+                    <Text tone="destructive" weight="semibold" tabular>
+                      {row.over}
+                    </Text>
+                    <Text tone="warning" weight="semibold" tabular>
+                      {row.near}
+                    </Text>
+                    <Text tone="success" weight="semibold" tabular>
+                      {row.done}
+                    </Text>
+                    <Text tone="muted" tabular>
+                      計 {row.over + row.near + row.done}
+                    </Text>
+                  </Flex>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Tones</CardTitle>
+            <CardDescription>
+              vocabulary の 7 tone すべてに塗りがあります。色だけで意味を運ばないため label
+              は必須です（WCAG 1.4.1）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Legend
+              items={[
+                { tone: "default", label: "既定（primary）" },
+                { tone: "success", label: "成功" },
+                { tone: "warning", label: "注意" },
+                { tone: "destructive", label: "危険" },
+                { tone: "info", label: "情報" },
+                { tone: "muted", label: "控えめ" },
+                { tone: "neutral", label: "中立" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Named legend</CardTitle>
+            <CardDescription>
+              aria-label を渡すと、その凡例が「何のキーか」を読み上げます。項目は list /
+              listitem として並びます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Legend items={[...STATUS_KEYS]} aria-label="コンプライアンス状況の凡例" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Wrapping</CardTitle>
+            <CardDescription>
+              狭い幅では折り返します（横スクロールしません）。凡例が視界の外に出ると、色の意味
+              そのものが失われるためです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex width={240}>
+              <Legend
+                items={[
+                  { tone: "destructive", label: "期限超過" },
+                  { tone: "warning", label: "期限間近" },
+                  { tone: "success", label: "対応済" },
+                  { tone: "info", label: "確認中" },
+                  { tone: "muted", label: "対象外" },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-display/progress.tsx

@@ -33,6 +33,38 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Breakdown（segments）</CardTitle>
+            <CardDescription>
+              1 つの合計を状態ごとに分割します。割合ではなく実数を渡すと、各スライスの比率は
+              コンポーネントが計算します。メーターより背の高いトラックになるのは、0.5rem の pill
+              上に 3 色を並べると比率が読めなくなるためです。role=&quot;img&quot;
+              として、全スライスを 1 つの名前で読み上げます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Progress
+                segments={[
+                  { value: 2, tone: "destructive", label: "期限超過" },
+                  { value: 3, tone: "warning", label: "期限間近" },
+                  { value: 12, tone: "success", label: "対応済" },
+                ]}
+                label="株式会社山田製作所"
+              />
+              <Progress
+                segments={[
+                  { value: 0, tone: "destructive", label: "期限超過" },
+                  { value: 1, tone: "warning", label: "期限間近" },
+                  { value: 6, tone: "success", label: "対応済" },
+                ]}
+                label="みどり農産株式会社（0 件のスライスは幅 0）"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Over capacity</CardTitle>

package/docs/data-display/scroll-area.tsx

@@ -11,12 +11,12 @@ import {
   ScrollBar,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
  * ScrollArea — custom scrollbar container. ALWAYS set an explicit height/max-height
  * (vertical) or width (horizontal) on the wrapper or the scrollbar never appears.
- * `type` controls when the bar is visible; `ScrollBar orientation="horizontal"`
+ * `type` controls when the bar is visible; `ScrollArea orientation="horizontal"`
  * adds a horizontal bar. Composed only from real @godxjp/ui components.
  */
 const entries = Array.from(
@@ -244,31 +244,37 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>
-              横スクロール（ScrollBar orientation=&quot;horizontal&quot;）
-            </CardTitle>
-            <CardDescription>
-              横方向のバーは明示的に ScrollBar
-              を子要素として配置します。中身は幅を指定して溢れさせます。
-            </CardDescription>
+            <CardTitle level={2}>ScrollArea</CardTitle>
+            <CardDescription>orientation="horizontal"</CardDescription>
           </CardHeader>
           <CardContent>
-            <Card variant="outline" className="w-full">
-              <CardContent flush>
-                <ScrollArea>
-                  <CardContent>
-                    <Flex gap="lg" className="w-max">
-                      {columns.map((c) => (
-                        <div key={c} className="text-sm whitespace-nowrap tabular-nums">
-                          {c}
-                        </div>
-                      ))}
-                    </Flex>
-                  </CardContent>
-                  <ScrollBar orientation="horizontal" />
-                </ScrollArea>
-              </CardContent>
-            </Card>
+            <ScrollArea orientation="horizontal" type="always">
+              <ResponsiveGrid flow="columns">
+                {columns.map((column) => (
+                  <Card key={column}>
+                    <CardContent solo>
+                      <Text tabular>{column}</Text>
+                    </CardContent>
+                  </Card>
+                ))}
+              </ResponsiveGrid>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>個別の ScrollBar を追加する</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea type="always">
+              <ResponsiveGrid flow="columns">
+                {columns.map((column) => (
+                  <Text key={column}>{column}</Text>
+                ))}
+              </ResponsiveGrid>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
           </CardContent>
         </Card>
 

package/docs/data-display/table.tsx

@@ -46,31 +46,31 @@ export default function Demo() {
               <TableHeader>
                 <TableRow>
                   <TableHead>勘定科目</TableHead>
-                  <TableHead className="text-end">借方</TableHead>
-                  <TableHead className="text-end">貸方</TableHead>
+                  <TableHead align="end">借方</TableHead>
+                  <TableHead align="end">貸方</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 <TableRow>
                   <TableCell>売掛金</TableCell>
-                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
-                  <TableCell className="text-end">—</TableCell>
+                  <TableCell numeric>¥482,000</TableCell>
+                  <TableCell align="end">—</TableCell>
                 </TableRow>
                 {/* Built-in selected-row state — data-[state=selected]:bg-primary/[0.06]. */}
                 <TableRow data-state="selected">
                   <TableCell>売上高</TableCell>
-                  <TableCell className="text-end">—</TableCell>
-                  <TableCell className="text-end tabular-nums">¥438,182</TableCell>
+                  <TableCell align="end">—</TableCell>
+                  <TableCell numeric>¥438,182</TableCell>
                 </TableRow>
                 <TableRow>
                   <TableCell>仮受消費税</TableCell>
-                  <TableCell className="text-end">—</TableCell>
-                  <TableCell className="text-end tabular-nums">¥43,818</TableCell>
+                  <TableCell align="end">—</TableCell>
+                  <TableCell numeric>¥43,818</TableCell>
                 </TableRow>
                 <TableRow className="font-medium">
                   <TableCell>合計</TableCell>
-                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
-                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
+                  <TableCell numeric>¥482,000</TableCell>
+                  <TableCell numeric>¥482,000</TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -90,41 +90,41 @@ export default function Demo() {
               <TableHeader>
                 <TableRow>
                   <TableHead>勘定科目</TableHead>
-                  <TableHead className="text-end">1月</TableHead>
-                  <TableHead className="text-end">2月</TableHead>
-                  <TableHead className="text-end">3月</TableHead>
-                  <TableHead className="text-end">4月</TableHead>
-                  <TableHead className="text-end">5月</TableHead>
-                  <TableHead className="text-end">6月</TableHead>
-                  <TableHead className="text-end">7月</TableHead>
-                  <TableHead className="text-end">8月</TableHead>
-                  <TableHead className="text-end">9月</TableHead>
+                  <TableHead align="end">1月</TableHead>
+                  <TableHead align="end">2月</TableHead>
+                  <TableHead align="end">3月</TableHead>
+                  <TableHead align="end">4月</TableHead>
+                  <TableHead align="end">5月</TableHead>
+                  <TableHead align="end">6月</TableHead>
+                  <TableHead align="end">7月</TableHead>
+                  <TableHead align="end">8月</TableHead>
+                  <TableHead align="end">9月</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 <TableRow>
                   <TableCell>売上高</TableCell>
-                  <TableCell className="text-end tabular-nums">¥412,000</TableCell>
-                  <TableCell className="text-end tabular-nums">¥438,182</TableCell>
-                  <TableCell className="text-end tabular-nums">¥455,900</TableCell>
-                  <TableCell className="text-end tabular-nums">¥471,300</TableCell>
-                  <TableCell className="text-end tabular-nums">¥482,000</TableCell>
-                  <TableCell className="text-end tabular-nums">¥499,540</TableCell>
-                  <TableCell className="text-end tabular-nums">¥510,200</TableCell>
-                  <TableCell className="text-end tabular-nums">¥528,770</TableCell>
-                  <TableCell className="text-end tabular-nums">¥541,090</TableCell>
+                  <TableCell numeric>¥412,000</TableCell>
+                  <TableCell numeric>¥438,182</TableCell>
+                  <TableCell numeric>¥455,900</TableCell>
+                  <TableCell numeric>¥471,300</TableCell>
+                  <TableCell numeric>¥482,000</TableCell>
+                  <TableCell numeric>¥499,540</TableCell>
+                  <TableCell numeric>¥510,200</TableCell>
+                  <TableCell numeric>¥528,770</TableCell>
+                  <TableCell numeric>¥541,090</TableCell>
                 </TableRow>
                 <TableRow>
                   <TableCell>売上原価</TableCell>
-                  <TableCell className="text-end tabular-nums">¥206,000</TableCell>
-                  <TableCell className="text-end tabular-nums">¥219,091</TableCell>
-                  <TableCell className="text-end tabular-nums">¥227,950</TableCell>
-                  <TableCell className="text-end tabular-nums">¥235,650</TableCell>
-                  <TableCell className="text-end tabular-nums">¥241,000</TableCell>
-                  <TableCell className="text-end tabular-nums">¥249,770</TableCell>
-                  <TableCell className="text-end tabular-nums">¥255,100</TableCell>
-                  <TableCell className="text-end tabular-nums">¥264,385</TableCell>
-                  <TableCell className="text-end tabular-nums">¥270,545</TableCell>
+                  <TableCell numeric>¥206,000</TableCell>
+                  <TableCell numeric>¥219,091</TableCell>
+                  <TableCell numeric>¥227,950</TableCell>
+                  <TableCell numeric>¥235,650</TableCell>
+                  <TableCell numeric>¥241,000</TableCell>
+                  <TableCell numeric>¥249,770</TableCell>
+                  <TableCell numeric>¥255,100</TableCell>
+                  <TableCell numeric>¥264,385</TableCell>
+                  <TableCell numeric>¥270,545</TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -150,23 +150,23 @@ export default function Demo() {
                 <TableRow>
                   <TableHead>倉庫</TableHead>
                   <TableHead>伝票番号</TableHead>
-                  <TableHead className="text-end">個数</TableHead>
+                  <TableHead align="end">個数</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 <TableRow>
                   <TableCell rowSpan={2}>東京第一</TableCell>
                   <TableCell>SH-2026-0412</TableCell>
-                  <TableCell className="text-end tabular-nums">18</TableCell>
+                  <TableCell numeric>18</TableCell>
                 </TableRow>
                 <TableRow>
                   <TableCell>SH-2026-0413</TableCell>
-                  <TableCell className="text-end tabular-nums">6</TableCell>
+                  <TableCell numeric>6</TableCell>
                 </TableRow>
                 <TableRow>
                   <TableCell>大阪南</TableCell>
                   <TableCell>SH-2026-0414</TableCell>
-                  <TableCell className="text-end tabular-nums">24</TableCell>
+                  <TableCell numeric>24</TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -187,14 +187,14 @@ export default function Demo() {
                 <TableRow>
                   <TableHead>倉庫</TableHead>
                   <TableHead>伝票番号</TableHead>
-                  <TableHead className="text-end">個数</TableHead>
+                  <TableHead align="end">個数</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 <TableRow>
                   <TableCell>東京第一</TableCell>
                   <TableCell>SH-2026-0412</TableCell>
-                  <TableCell className="text-end tabular-nums">18</TableCell>
+                  <TableCell numeric>18</TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -217,14 +217,73 @@ export default function Demo() {
                 <TableRow>
                   <TableHead>倉庫</TableHead>
                   <TableHead>伝票番号</TableHead>
-                  <TableHead className="text-end">個数</TableHead>
+                  <TableHead align="end">個数</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 <TableRow>
                   <TableCell>東京第一</TableCell>
                   <TableCell>SH-2026-0412</TableCell>
-                  <TableCell className="text-end tabular-nums">18</TableCell>
+                  <TableCell numeric>18</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        {/* ── The COLUMN AXES (gh#410) ──────────────────────────────────────
+            align · numeric · wrap · width. Every one of these was a className before, and the
+            alignment utility the catalog recommended was a physical direction this package lints
+            against. `wrap` is the one that is not cosmetic: a cell is `white-space: nowrap` by
+            default (right for a data grid) and that inherits into everything it holds, so a
+            free-text column can never break without it. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>問い合わせ一覧 · column axes</CardTitle>
+            <CardDescription>
+              `width` fixes the id and status columns; the free-text subject takes `wrap` so a long
+              Japanese title breaks inside its cell instead of stretching the table into a scroll;
+              the count column takes `numeric`, which is tabular figures and end alignment as one
+              concept, and the status column takes `align=&quot;center&quot;`.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead width="7rem">受付番号</TableHead>
+                  <TableHead wrap>件名</TableHead>
+                  <TableHead width="6rem" align="center">
+                    状態
+                  </TableHead>
+                  <TableHead width="5rem" numeric>
+                    返信
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>INQ-2026-0188</TableCell>
+                  <TableCell wrap>
+                    請求書の宛名を法人名から屋号に変更したいのですが、過去分もまとめて再発行できますか
+                  </TableCell>
+                  <TableCell align="center">対応中</TableCell>
+                  <TableCell numeric>3</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>INQ-2026-0189</TableCell>
+                  <TableCell wrap>
+                    ログイン時の二要素認証コードが届かない端末があるため、SMS
+                    から認証アプリへ切り替える手順を知りたい
+                  </TableCell>
+                  <TableCell align="center">未対応</TableCell>
+                  <TableCell numeric>0</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>INQ-2026-0190</TableCell>
+                  <TableCell wrap>API のレート制限について</TableCell>
+                  <TableCell align="center">完了</TableCell>
+                  <TableCell numeric>12</TableCell>
                 </TableRow>
               </TableBody>
             </Table>

package/docs/data-display/timeline.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "@godxjp/ui/i18n";
 import {
   Card,
   CardContent,
@@ -5,6 +6,7 @@ import {
   CardHeader,
   CardTitle,
   Timeline,
+  RangeTimeline,
   type TimelineItem,
 } from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -52,6 +54,11 @@ const approvalItems: TimelineItem[] = [
 ];
 
 export default function Demo() {
+  const { t, locale } = useTranslation();
+  const dayLabel = (day: number) =>
+    new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }).format(
+      Date.UTC(2026, 8, day),
+    );
   return (
     <PageContainer title="Timeline" subtitle="現在のステップを強調する縦型のイベント一覧">
       <Flex direction="col" gap="lg">
@@ -106,6 +113,40 @@ export default function Demo() {
             <Timeline variant="status" items={approvalItems} />
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>RangeTimeline</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RangeTimeline
+              label={t("rangeTimeline.schedule")}
+              bands={[
+                {
+                  label: new Intl.DateTimeFormat(locale, {
+                    year: "numeric",
+                    month: "long",
+                    timeZone: "UTC",
+                  }).format(Date.UTC(2026, 8, 1)),
+                  units: 7,
+                },
+              ]}
+              columns={Array.from({ length: 7 }, (_, index) => ({
+                label: dayLabel(index + 1),
+                units: 1,
+              }))}
+              rows={[
+                {
+                  id: "example",
+                  label: "期日確認",
+                  start: 1,
+                  end: 4,
+                  startLabel: dayLabel(2),
+                  endLabel: dayLabel(5),
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );