@godxjp/ui 20.0.0 → 20.1.0

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

package/docs/data-entry/form.tsx

@@ -36,9 +36,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godx
 import { Button, Heading, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
-/** No-op uploader: resolves immediately with a fake mediaId for preview purposes. */
+/** Keep the upload lifecycle visible in the form example. */
 async function noopUpload(_file: File, _item: UploadFileItem) {
-  return { mediaId: "preview-media-id" };
+  await new Promise((resolve) => setTimeout(resolve, 800));
+  return { mediaId: crypto.randomUUID() };
 }
 
 /** Expense category tree for the Cascader field. */
@@ -107,6 +108,8 @@ export default function Demo() {
   const [issueDate, setIssueDate] = useState<Date | undefined>(new Date(2026, 0, 15));
   const [period, setPeriod] = useState<DateRange | undefined>();
   const [closeTime, setCloseTime] = useState("17:30");
+  const [startTime, setStartTime] = useState("09:00");
+  const [endTime, setEndTime] = useState("");
   const [score, setScore] = useState(4);
   const [tags, setTags] = useState<string[]>(["優先"]);
   const [otp, setOtp] = useState("");
@@ -119,6 +122,39 @@ export default function Demo() {
       subtitle="全フィールド型 × 全レイアウト × 全状態 · 実画面のフォーム例 (real primitives only)"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Validation feedback</CardTitle>
+            <CardDescription>確認中・成功・注意・エラーを区別します。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form requiredMark="optional">
+              <FormField label="確認済み" hasFeedback validateStatus="success">
+                <Input defaultValue="verified@example.jp" />
+              </FormField>
+              <FormField label="確認中" hasFeedback validateStatus="validating">
+                <Input defaultValue="checking@example.jp" />
+              </FormField>
+              <FormField
+                label="注意"
+                hasFeedback
+                validateStatus="warning"
+                helper="内容を確認してください。"
+              >
+                <Input defaultValue="review@example.jp" />
+              </FormField>
+              <FormField
+                label="エラー"
+                required
+                hasFeedback
+                error="メールアドレスを入力してください。"
+              >
+                <Input />
+              </FormField>
+            </Form>
+          </CardContent>
+        </Card>
+
         {/* ════════════════════ 1. EVERY FIELD TYPE ════════════════════ */}
         <Heading level={2}>1. 全フィールド型 · すべての入力コントロール</Heading>
         <Text tone="muted" size="sm">
@@ -414,12 +450,46 @@ export default function Demo() {
                   minuteStep={15}
                 />
               </FormField>
+              {/* 開始/終了 の対 — 終了は開始より前を選べない。`disabledTime` が列と
+                  入力欄の両方を止めるので、キーボードから規則をすり抜けられない。 */}
+              <FormField id="f-start" label="開始時刻" required>
+                <TimePicker
+                  id="f-start"
+                  name="start_time"
+                  value={startTime}
+                  onValueChange={setStartTime}
+                  minuteStep={15}
+                />
+              </FormField>
+              <FormField id="f-end" label="終了時刻" required>
+                <TimePicker
+                  id="f-end"
+                  name="end_time"
+                  value={endTime}
+                  onValueChange={setEndTime}
+                  minuteStep={15}
+                  disabledTime={() => {
+                    const [startHour, startMinute] = startTime.split(":").map(Number);
+                    return {
+                      disabledHours: () => Array.from({ length: startHour }, (_, hour) => hour),
+                      disabledMinutes: (hour) =>
+                        hour === startHour
+                          ? Array.from({ length: 60 }, (_, minute) => minute).filter(
+                              (minute) => minute <= startMinute,
+                            )
+                          : [],
+                    };
+                  }}
+                />
+              </FormField>
               <FormField id="f-period" label="会計期間" colSpan={2}>
                 <DateRangePicker
                   id="f-period"
                   name="period"
                   value={period}
                   onValueChange={setPeriod}
+                  // 土日は選べない。fromDate/toDate では表せない規則。
+                  disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
                 />
               </FormField>
             </Form>
@@ -647,9 +717,9 @@ export default function Demo() {
             <CardDescription>
               Form に errors（Inertia の form.errors）を渡すと、name
               を持つフィールドは自分のメッセージをバッグから自動解決してキーを消費（claim）する。
-              FormErrors は残り —
+              FormErrors は残り ·
               隠し・派生フィールド（action_mode、page…）に付いた、どのフィールドにも表示先が無いエラー
-              — だけを role=alert のバナーとして表示する。
+              · だけを role=alert のバナーとして表示する。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/data-entry/input-otp.tsx

@@ -225,6 +225,30 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>マスク・入力の正規化</CardTitle>
+            <CardDescription>
+              入力と貼り付けを大文字に変換。マスクは表示だけに適用されます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="masked-code" label="確認コード">
+              <InputOTP
+                maxLength={4}
+                defaultValue=""
+                mask
+                formatter={(value) => value.toUpperCase()}
+              >
+                <InputOTPGroup>
+                  {[0, 1, 2, 3].map((index) => (
+                    <InputOTPSlot key={index} index={index} />
+                  ))}
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/input.tsx

@@ -107,7 +107,52 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
-        <Input id="code" size="sm" placeholder="Compact tier (sm)" aria-label="Code" />
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Ant Design axes · status, variant, size</CardTitle>
+            <CardDescription>
+              status is the validation state a form paints consistently (error also reports
+              aria-invalid; warning does not, because a warning is not a validity failure). variant
+              is how much chrome the field draws. size is the shared control-height ladder.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="エラー状態" status="error" defaultValue="不正な値" />
+              <Input aria-label="警告状態" status="warning" defaultValue="確認してください" />
+              <Input aria-label="枠線あり" variant="outlined" defaultValue="outlined" />
+              <Input aria-label="塗りつぶし" variant="filled" defaultValue="filled" />
+              <Input aria-label="枠線なし" variant="borderless" defaultValue="borderless" />
+              <Input aria-label="小さいサイズ" size="sm" placeholder="Compact tier (sm)" />
+              <Input aria-label="標準サイズ" size="md" placeholder="Default tier (md)" />
+              <Input aria-label="大きいサイズ" size="lg" placeholder="Comfortable tier (lg)" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Affixes · prefix / suffix inside, addons outside</CardTitle>
+            <CardDescription>
+              A prefix or suffix sits inside the field&apos;s own box, in its padding. An addon is a
+              separate surface welded to the outside of the border: a protocol, a currency, a unit.
+              The counter reports an overrun and never edits the value.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="金額" prefix="¥" suffix="円" defaultValue="12000" />
+              <Input
+                aria-label="サイト"
+                addonBefore="https://"
+                addonAfter=".co.jp"
+                defaultValue="example"
+              />
+              <Input aria-label="件名" count={{ max: 20 }} defaultValue="東京都の請求書" />
+              <Input aria-label="超過した件名" count={{ max: 5 }} defaultValue="長すぎる件名です" />
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

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

@@ -51,7 +51,7 @@ export default function Demo() {
             <CardTitle level={2}>検索フィルター (未選択)</CardTitle>
             <CardDescription>
               初期値なし。確定済み範囲の上でもう一度選ぶと新しい範囲が開始される (reset-on-complete
-              — 開始月が固まって選び直せない、が起きない)。
+              · 開始月が固まって選び直せない、が起きない)。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/data-entry/select.tsx

@@ -365,6 +365,33 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>複数選択・上限・検索</CardTitle>
+            <CardDescription>
+              最大 3 件を選択。選択行の再クリック・クリア・キーボード操作に対応。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="reviewers" label="レビュアー">
+              <Select
+                mode="multiple"
+                name="reviewers[]"
+                defaultValue={["tanaka"]}
+                showSearch
+                maxCount={3}
+                maxTagCount={2}
+                allowClear
+                options={[
+                  { value: "tanaka", label: "田中" },
+                  { value: "sato", label: "佐藤" },
+                  { value: "suzuki", label: "鈴木" },
+                  { value: "ito", label: "伊藤" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );