@godxjp/ui 20.0.0 → 20.2.0

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

package/docs/data-entry/switch.tsx

@@ -61,6 +61,47 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Ant Design axes · loading, checkedChildren</CardTitle>
+            <CardDescription>
+              loading は通信中の状態です。disabled ではなく aria-busy / aria-disabled
+              を使います。disabled はタブ順から外れるため、保存中にキーボードの
+              フォーカスが次の項目へ飛んでしまうからです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Field
+                id="sw-loading"
+                label="公開設定 (保存中)"
+                description="通信が終わるまで操作を受け付けません"
+              >
+                <Switch id="sw-loading" loading defaultChecked />
+              </Field>
+              <Field
+                id="sw-words-off"
+                label="ラベル付き (オフ)"
+                description="トラックの中に状態の語を表示します"
+              >
+                <Switch id="sw-words-off" checkedChildren="有効" unCheckedChildren="無効" />
+              </Field>
+              <Field
+                id="sw-words-on"
+                label="ラベル付き (オン)"
+                description="語が入ってもつまみは端まで届きます"
+              >
+                <Switch
+                  id="sw-words-on"
+                  checkedChildren="有効"
+                  unCheckedChildren="無効"
+                  defaultChecked
+                />
+              </Field>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/textarea.tsx

@@ -192,6 +192,44 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              Ant Design axes · status, variant, size, count, autoSize
+            </CardTitle>
+            <CardDescription>
+              variant carries five accepted spellings for three states: outlined / filled /
+              borderless are Ant Design&apos;s, and this library&apos;s older default / ghost
+              resolve onto the first and the last. autoSize is autoGrow plus its row bounds in one
+              prop.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Textarea aria-label="エラー状態" status="error" defaultValue="不正な値" />
+              <Textarea aria-label="警告状態" status="warning" defaultValue="確認してください" />
+              <Textarea aria-label="枠線あり" variant="outlined" defaultValue="outlined" />
+              <Textarea aria-label="塗りつぶし" variant="filled" defaultValue="filled" />
+              <Textarea aria-label="枠線なし" variant="borderless" defaultValue="borderless" />
+              <Textarea aria-label="既定 (旧称)" variant="default" defaultValue="default" />
+              <Textarea aria-label="ゴースト (旧称)" variant="ghost" defaultValue="ghost" />
+              <Textarea aria-label="小さいサイズ" size="sm" placeholder="sm" />
+              <Textarea aria-label="標準サイズ" size="md" placeholder="md" />
+              <Textarea aria-label="大きいサイズ" size="lg" placeholder="lg" />
+              <Textarea
+                aria-label="文字数カウンタ"
+                count={{ max: 140 }}
+                defaultValue="東京都の請求書について"
+              />
+              <Textarea
+                aria-label="自動リサイズ"
+                autoSize={{ minRows: 2, maxRows: 6 }}
+                placeholder="2行から6行まで伸びます"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>In FormField</CardTitle>

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, TimePicker } from "@godxjp/ui/data-entry";
+import { FormField, TimePicker, TimeRangePicker } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -93,6 +93,90 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>秒単位の締切</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="precision-time" label="締切時刻">
+              <TimePicker
+                id="precision-time"
+                name="precision"
+                defaultValue="17:50:15"
+                format="HH:mm:ss"
+                hourStep={2}
+                minuteStep={10}
+                secondStep={15}
+                changeOnScroll
+                needConfirm
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>12時間表示</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="twelve-time" label="開始時刻">
+              <TimePicker
+                id="twelve-time"
+                name="twelve"
+                defaultValue="13:30"
+                format="h:mm A"
+                use12Hours
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>入力状態</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="readonly-time" label="選択のみ">
+                <TimePicker
+                  id="readonly-time"
+                  inputReadOnly
+                  defaultValue="09:00"
+                  allowClear={false}
+                  size="sm"
+                  variant="filled"
+                />
+              </FormField>
+              <FormField id="invalid-time" label="入力を保持">
+                <TimePicker id="invalid-time" preserveInvalidOnBlur status="error" size="lg" />
+              </FormField>
+              <FormField id="quiet-time" label="任意時刻">
+                <TimePicker
+                  id="quiet-time"
+                  variant="borderless"
+                  status="warning"
+                  placement="top-start"
+                  showNow={false}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勤務時間帯</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="shift-range" label="勤務時間">
+              <TimeRangePicker
+                id="shift-range"
+                name="shift"
+                defaultValue={["09:00", "18:00"]}
+                allowEmpty={[false, true]}
+                minuteStep={15}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

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

@@ -0,0 +1,55 @@
+import { TimeRangePicker, FormField } from "@godxjp/ui/data-entry";
+import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+export default function Demo() {
+  return (
+    <PageContainer title="TimeRangePicker" subtitle="勤務時間と受付時間の範囲選択">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>勤務時間</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="work-period" label="勤務時間">
+              <TimeRangePicker
+                id="work-period"
+                name="work"
+                defaultValue={["09:00", "18:00"]}
+                minuteStep={15}
+                allowEmpty={[false, false]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>終了時刻は任意</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="optional-end" label="受付時間">
+              <TimeRangePicker
+                id="optional-end"
+                name="reception"
+                defaultValue={["09:00", ""]}
+                allowEmpty={[false, true]}
+                format="HH:mm:ss"
+                showSeconds
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>日をまたぐ勤務</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <FormField id="overnight" label="夜勤">
+              <TimeRangePicker id="overnight" defaultValue={["22:00", "06:00"]} order={false} />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/transfer.tsx

@@ -91,6 +91,23 @@ export default function Demo() {
             />
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>検索・ページ分割・初期値</CardTitle>
+            <CardDescription>
+              表示中の有効な行だけを一括選択。移動後も別ページの選択を保持します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Transfer
+              dataSource={ALL_ACCOUNTS}
+              defaultValue={[]}
+              showSearch
+              pagination={{ pageSize: 3 }}
+              name="accounts[]"
+            />
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/upload.tsx

@@ -1,7 +1,13 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Upload, type UploadFileItem } from "@godxjp/ui/data-entry";
+import {
+  Form,
+  Upload,
+  type UploadFileItem,
+  type UploadRequestContext,
+} from "@godxjp/ui/data-entry";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -11,12 +17,19 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  * Composed only from real @godxjp/ui components.
  */
 
-/** No-op uploader: resolves immediately with a fake mediaId for preview purposes. */
-async function noopUpload(_file: File, _item: UploadFileItem) {
-  return { mediaId: "preview-media-id" };
+/** Simulated transport: progress, abort, and retry remain observable in the preview. */
+async function demoUpload(file: File, _item: UploadFileItem, context: UploadRequestContext) {
+  for (let percent = 0; percent <= 100; percent += 20) {
+    await new Promise((resolve) => setTimeout(resolve, 180));
+    context.signal.throwIfAborted();
+    context.onProgress(percent);
+  }
+  if (file.name.startsWith("fail")) throw new Error("アップロードに失敗しました。再試行できます。");
+  return { mediaId: crypto.randomUUID() };
 }
 
 export default function Demo() {
+  const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
   const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
   const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
   const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
@@ -40,6 +53,37 @@ export default function Demo() {
       subtitle="ファイルアップロード · 6バリアント（dropzone / button / picture-card / picture / avatar / avatar-crop）"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Multipart form</CardTitle>
+            <CardDescription>
+              選択・ドロップ・貼り付けしたファイルをフォームでまとめて送信します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form
+              onReset={() => setSubmittedFiles([])}
+              onSubmit={(event) => {
+                event.preventDefault();
+                const data = new FormData(event.currentTarget);
+                setSubmittedFiles(
+                  data
+                    .getAll("attachments[]")
+                    .filter((value): value is File => value instanceof File)
+                    .map((value) => value.name),
+                );
+              }}
+            >
+              <Upload name="attachments[]" pastable maxCount={3} />
+              <Button type="submit">添付ファイルを確認</Button>
+              <Button type="reset" variant="outline">
+                リセット
+              </Button>
+              <Text>{submittedFiles.join("、")}</Text>
+            </Form>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Dropzone</CardTitle>
@@ -53,9 +97,10 @@ export default function Demo() {
               value={dropzoneItems}
               onValueChange={setDropzoneItems}
               accept=".pdf,.xlsx,.csv"
+              pastable
               maxCount={5}
               maxSizeBytes={20 * 1024 * 1024}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -64,8 +109,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Error and recovery</CardTitle>
             <CardDescription>
-              失敗理由は対象ファイルの行に表示する。Upload は自動 retry prop を持たないため、
-              不正なファイルを削除して修正済みファイルを再選択する。
+              失敗したファイルは再試行できます。処理中のファイルはキャンセルできます。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -98,7 +142,7 @@ export default function Demo() {
               value={buttonItems}
               onValueChange={setButtonItems}
               accept=".csv"
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             >
               CSVをインポート
             </Upload>
@@ -119,7 +163,7 @@ export default function Demo() {
               onValueChange={setPictureCardItems}
               accept="image/*"
               maxCount={6}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -138,7 +182,7 @@ export default function Demo() {
               onValueChange={setPictureItem}
               accept="image/*"
               maxCount={1}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -154,7 +198,7 @@ export default function Demo() {
               value={avatarItem}
               onValueChange={setAvatarItem}
               accept="image/*"
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>
@@ -174,7 +218,7 @@ export default function Demo() {
               onValueChange={setAvatarCropItem}
               accept="image/*"
               maxSizeBytes={5 * 1024 * 1024}
-              onUpload={noopUpload}
+              onUpload={demoUpload}
             />
           </CardContent>
         </Card>