@godxjp/ui 20.0.0 → 20.2.0

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>
   );

package/docs/data-entry/date-picker.tsx

@@ -186,6 +186,91 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>表示形式と元号</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="formatted-date" label="契約日">
+                <DatePicker
+                  id="formatted-date"
+                  name="contract"
+                  defaultValue={new Date(2026, 8, 9)}
+                  format="yyyy年MM月dd日"
+                />
+              </FormField>
+              <FormField id="era-date" label="和暦">
+                <DatePicker
+                  id="era-date"
+                  name="era"
+                  defaultValue={new Date(2026, 8, 9)}
+                  format={{
+                    calendar: "japanese",
+                    era: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  }}
+                  inputReadOnly
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>日時の予約</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="appointment-date" label="予約日時">
+              <DatePicker
+                id="appointment-date"
+                name="appointment"
+                defaultValue={new Date(2026, 8, 9, 17, 30)}
+                showTime
+                needConfirm
+                presets={[{ label: "翌営業日", value: () => new Date(2026, 8, 10, 9, 0) }]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>集計単位</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {(["week", "month", "quarter", "year"] as const).map((picker) => (
+                <FormField key={picker} id={`period-${picker}`} label={picker}>
+                  <DatePicker
+                    id={`period-${picker}`}
+                    picker={picker}
+                    defaultValue={new Date(2026, 8, 9)}
+                    showWeek
+                  />
+                </FormField>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>複数日を確定</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="multiple-dates" label="出勤日">
+              <DatePicker
+                id="multiple-dates"
+                name="attendance"
+                multiple
+                needConfirm
+                defaultValue={[new Date(2026, 8, 9), new Date(2026, 8, 11)]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/date-range-picker.tsx

@@ -143,6 +143,32 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間プリセットと確定</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="preset-range" label="集計期間">
+              <DateRangePicker
+                id="preset-range"
+                name="report"
+                format="yyyy/MM/dd"
+                needConfirm
+                allowEmpty={[false, true]}
+                showWeek
+                minDate={new Date(2026, 0, 1)}
+                maxDate={new Date(2026, 11, 31)}
+                presets={[
+                  {
+                    label: "9月",
+                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/form-dynamic-fields.tsx

@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { z } from "zod";
+import { Alert, AlertDescription } from "@godxjp/ui/feedback";
+import { Input, Select } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import {
+  FormFieldArray,
+  FormFieldControl,
+  FormRoot,
+  useFormDisabled,
+  useFormWatch,
+  useZodForm,
+} from "@godxjp/ui/form";
+
+const schema = z.object({
+  plan: z.enum(["standard", "enterprise"]),
+  contacts: z
+    .array(
+      z.object({
+        name: z.string().min(1, "担当者名を入力してください"),
+        email: z.string().email("有効なメールアドレスを入力してください"),
+      }),
+    )
+    .min(1, "担当者を 1 名以上登録してください"),
+});
+
+type Values = z.infer<typeof schema>;
+
+const emptyContact = { name: "", email: "" };
+
+/** Counter driven by useFormWatch — re-renders on `contacts` only, not on every keystroke elsewhere. */
+function ContactCount() {
+  const contacts = useFormWatch<Values>("contacts");
+  return (
+    <CardDescription>
+      {`登録済み ${Array.isArray(contacts) ? contacts.length : 0} 名 · 行の追加・削除・並べ替えは送信値の順序にそのまま反映されます。`}
+    </CardDescription>
+  );
+}
+
+/** Action buttons are not fields, so they read the form-level disabled state themselves. */
+function Actions({ onReset }: { onReset: () => void }) {
+  const disabled = useFormDisabled();
+  return (
+    <Flex gap="sm" wrap>
+      <Button type="submit" disabled={disabled}>
+        保存
+      </Button>
+      <Button type="reset" variant="outline" disabled={disabled} onClick={onReset}>
+        リセット
+      </Button>
+    </Flex>
+  );
+}
+
+export default function Demo() {
+  const [status, setStatus] = useState<"idle" | "saved" | "failed">("idle");
+  const [locked, setLocked] = useState(false);
+  const form = useZodForm(schema, {
+    defaultValues: {
+      plan: "standard",
+      contacts: [{ name: "田中 花子", email: "tanaka@example.jp" }],
+    },
+  });
+
+  return (
+    <PageContainer
+      title="FormFieldArray"
+      subtitle="動的な繰り返しフィールド · watch / disabled / reset / 送信失敗"
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>請求先の担当者</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <FormRoot
+            form={form}
+            layout="horizontal"
+            disabled={locked}
+            onSubmit={() => setStatus("saved")}
+            onSubmitFailed={() => setStatus("failed")}
+            onReset={() => setStatus("idle")}
+          >
+            <ContactCount />
+            {status === "failed" && (
+              <Alert tone="destructive">
+                <AlertDescription>
+                  入力内容を確認してください。最初のエラー項目へ移動しました。
+                </AlertDescription>
+              </Alert>
+            )}
+            {status === "saved" && (
+              <Alert tone="success">
+                <AlertDescription>保存しました。</AlertDescription>
+              </Alert>
+            )}
+
+            <FormFieldControl<Values> name="plan" label="プラン">
+              {(field) => (
+                <Select
+                  {...field}
+                  value={typeof field.value === "string" ? field.value : "standard"}
+                  onValueChange={field.onValueChange}
+                  options={[
+                    { value: "standard", label: "スタンダード" },
+                    { value: "enterprise", label: "エンタープライズ" },
+                  ]}
+                />
+              )}
+            </FormFieldControl>
+
+            <FormFieldArray<Values, "contacts"> name="contacts">
+              {({ fields, append, remove, move, error, disabled }) => (
+                <>
+                  {error && (
+                    <Alert tone="destructive">
+                      <AlertDescription>{error}</AlertDescription>
+                    </Alert>
+                  )}
+                  {fields.map((row, position) => (
+                    <Card key={row.key} variant="outline">
+                      <CardContent>
+                        <Flex direction="col" gap="md">
+                          <FormFieldControl<Values>
+                            name={`${row.name}.name`}
+                            label={`担当者 ${position + 1} · 氏名`}
+                            required
+                          >
+                            {(field) => (
+                              <Input
+                                {...field}
+                                value={typeof field.value === "string" ? field.value : ""}
+                              />
+                            )}
+                          </FormFieldControl>
+                          <FormFieldControl<Values>
+                            name={`${row.name}.email`}
+                            label={`担当者 ${position + 1} · メール`}
+                            required
+                          >
+                            {(field) => (
+                              <Input
+                                {...field}
+                                type="email"
+                                value={typeof field.value === "string" ? field.value : ""}
+                              />
+                            )}
+                          </FormFieldControl>
+                          <Flex gap="sm" wrap>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              disabled={disabled || position === 0}
+                              onClick={() => move(row.index, row.index - 1)}
+                            >
+                              {`担当者 ${position + 1} を上へ`}
+                            </Button>
+                            <Button
+                              type="button"
+                              variant="destructive"
+                              size="sm"
+                              disabled={disabled || fields.length === 1}
+                              onClick={() => remove(row.index)}
+                            >
+                              {`担当者 ${position + 1} を削除`}
+                            </Button>
+                          </Flex>
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  ))}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={disabled}
+                    onClick={() => append(emptyContact)}
+                  >
+                    担当者を追加
+                  </Button>
+                </>
+              )}
+            </FormFieldArray>
+
+            <Actions onReset={() => setStatus("idle")} />
+          </FormRoot>
+        </CardContent>
+      </Card>
+
+      <Flex gap="sm" wrap>
+        <Button type="button" variant="ghost" onClick={() => setLocked((value) => !value)}>
+          {locked ? "フォームのロックを解除" : "フォーム全体をロック (disabled)"}
+        </Button>
+      </Flex>
+    </PageContainer>
+  );
+}