@godxjp/ui 19.1.0 → 19.3.1

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

@@ -0,0 +1,231 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  FormField,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * InputOTP — compound one-time-code input: InputOTP > InputOTPGroup > InputOTPSlot.
+ * ONE field with paste, arrow-key, and caret handling built in.
+ * Never use N separate Input fields for OTP. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [emailCode, setEmailCode] = useState("");
+  const [smsCode, setSmsCode] = useState("");
+  const [inviteCode, setInviteCode] = useState("");
+  const [centeredCode, setCenteredCode] = useState("");
+
+  // Auto-submit pattern — onComplete fires when every slot is filled.
+  const [completeCode, setCompleteCode] = useState("123456");
+  const [verified, setVerified] = useState("123456");
+
+  // Error path — a wrong code seeded at rest so the invalid styling is visible
+  // without typing. FormField wires aria-invalid + aria-errormessage onto the field.
+  const [wrongCode, setWrongCode] = useState("000000");
+
+  return (
+    <PageContainer title="InputOTP" subtitle="ワンタイムコード入力 · 2FA・SMS認証・招待コード">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>メール認証コード（6桁）</CardTitle>
+            <CardDescription>6スロット 1グループ · ペースト・矢印キー操作に対応。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="email-otp" label="認証コード" required>
+              <InputOTP maxLength={6} value={emailCode} onChange={setEmailCode}>
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>SMS認証コード（3+3）</CardTitle>
+            <CardDescription>
+              InputOTPSeparator で 2 グループに分割して視認性を高める。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="sms-otp" label="SMSコード" required>
+              <InputOTP maxLength={6} value={smsCode} onChange={setSmsCode}>
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                </InputOTPGroup>
+                <InputOTPSeparator />
+                <InputOTPGroup>
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>招待コード（4桁PIN）</CardTitle>
+            <CardDescription>4スロット · 数字のみ許可する pattern を指定。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="invite-pin" label="招待PIN" helper="メールに記載された4桁の数字">
+              <InputOTP
+                maxLength={4}
+                pattern="^[0-9]+$"
+                value={inviteCode}
+                onChange={setInviteCode}
+              >
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>自動送信（onComplete）</CardTitle>
+            <CardDescription>
+              全スロットが埋まると onComplete が発火し、ボタンを押さずに検証を実行する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="autosubmit-otp"
+              label="認証コード"
+              helper={
+                verified
+                  ? `${verified} を検証済み · 自動送信されました。`
+                  : "6桁を入力すると自動で送信されます。"
+              }
+              required
+            >
+              <InputOTP
+                maxLength={6}
+                value={completeCode}
+                onChange={setCompleteCode}
+                onComplete={(code) => setVerified(code)}
+              >
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        {/* align — the centred challenge, without a consumer wrapper div (gh#12) */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>中央寄せ（align=&quot;center&quot;）</CardTitle>
+            <CardDescription>
+              認証画面のコード入力は中央寄せが定型。コンテナ要素は input-otp
+              が所有していて消費側から触れないため、以前は必ず flex の div
+              でラップする必要があった。align はそのラッパーを不要にする （テーマ全体なら
+              --otp-container-align を 1 か所）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="centered-otp" label="認証コード" required>
+              <InputOTP
+                maxLength={6}
+                align="center"
+                value={centeredCode}
+                onChange={setCenteredCode}
+              >
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                </InputOTPGroup>
+                <InputOTPSeparator />
+                <InputOTPGroup>
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>エラー（コードが一致しない）</CardTitle>
+            <CardDescription>
+              FormField の error で aria-invalid を付与 · スロットの枠が destructive 色に変わる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="error-otp"
+              label="認証コード"
+              error="コードが正しくありません。もう一度入力してください。"
+              required
+            >
+              <InputOTP maxLength={6} value={wrongCode} onChange={setWrongCode}>
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>無効（再送クールダウン中）</CardTitle>
+            <CardDescription>
+              disabled · コード再送のクールダウンや検証中は入力をロックする。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="disabled-otp" label="認証コード" helper="60秒後に再入力できます。">
+              <InputOTP disabled maxLength={6} value="42" onChange={() => {}}>
+                <InputOTPGroup>
+                  <InputOTPSlot index={0} />
+                  <InputOTPSlot index={1} />
+                  <InputOTPSlot index={2} />
+                  <InputOTPSlot index={3} />
+                  <InputOTPSlot index={4} />
+                  <InputOTPSlot index={5} />
+                </InputOTPGroup>
+              </InputOTP>
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/input.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Input } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Input — styled wrapper around the native input. Always pair with FormField for
+ * a labelled, a11y-wired field. Never a raw <input>. Composed only from real
+ * @godxjp/ui components.
+ */
+export default function Demo() {
+  const [contractValue, setContractValue] = useState("制御値");
+  return (
+    <PageContainer
+      title="Input"
+      subtitle="Text field · pair with FormField for label / helper / error"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>States</CardTitle>
+            <CardDescription>
+              Placeholder, filled, disabled, readOnly, and invalid (aria-invalid). Focus an empty
+              field to see the focus-visible ring.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="プレースホルダー状態" placeholder="プレースホルダー" />
+              <Input aria-label="入力済み状態" defaultValue="入力済みの値" />
+              <Input aria-label="無効状態" disabled defaultValue="無効 (disabled)" />
+              <Input
+                aria-label="読み取り専用状態"
+                readOnly
+                defaultValue="読み取り専用 (readOnly)"
+              />
+              <Input
+                aria-label="不正な値の状態"
+                aria-invalid
+                defaultValue="不正な値 (aria-invalid)"
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Owned affordances · controlled and uncontrolled</CardTitle>
+            <CardDescription>
+              Leading/trailing content and allowClear/onClear are rendered with both value modes.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input
+                aria-label="制御されたクリア可能入力"
+                value={contractValue}
+                onChange={(event) => setContractValue(event.target.value)}
+                allowClear
+                onClear={() => setContractValue("")}
+                leadingIcon={<span aria-hidden="true">¥</span>}
+              />
+              <Input
+                aria-label="非制御の装飾付き入力"
+                defaultValue="INV-2026-001"
+                allowClear={false}
+                trailingIcon={<span aria-hidden="true">#</span>}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Types</CardTitle>
+            <CardDescription>
+              The native type attribute drives the input mode and built-in UI; type="file" uses the
+              file: styling baked into the component.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Input aria-label="パスワード型" type="password" defaultValue="secret-value" />
+              <Input aria-label="数値型" type="number" defaultValue={42} />
+              <Input aria-label="日付型" type="date" defaultValue="2026-06-04" />
+              <Input type="file" aria-label="ファイルを選択" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>In FormField · label / helper / required / error</CardTitle>
+            <CardDescription>
+              FormField wires the label and aria-describedby for you.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="partner" label="取引先名" required helper="最大50文字">
+                <Input id="partner" placeholder="株式会社..." />
+              </FormField>
+              <FormField id="email" label="メール" error="メールアドレスの形式が正しくありません">
+                <Input id="email" type="email" defaultValue="invalid@" />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+        <Input id="code" size="sm" placeholder="Compact tier (sm)" aria-label="Code" />
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/label.tsx

@@ -0,0 +1,100 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Checkbox, FormField, Input, Label, Switch, Textarea } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Label — styled Radix Label. Always pass htmlFor matching the control's id.
+ * PREFER FormField for fields that need helper text, error, or a required marker —
+ * it renders Label internally and wires aria-describedby / aria-invalid. Use bare
+ * Label only when FormField's block layout is too heavy (inline settings rows,
+ * table cells, third-party controls). Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Label"
+      subtitle="Bare Radix Label · always htmlFor; prefer FormField when helper / error / required is needed"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Label + Checkbox (inline)</CardTitle>
+            <CardDescription>
+              A compact pair where Field’s two-line layout is unnecessary, e.g. a “remember me” row.
+              When the peer control is disabled, the Label dims (peer-disabled:opacity-70 +
+              cursor-not-allowed).
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Flex direction="row" gap="sm" align="center">
+                <Checkbox id="remember-me" defaultChecked />
+                <Label htmlFor="remember-me">ログイン状態を保持する</Label>
+              </Flex>
+              <Flex direction="row" gap="sm" align="center">
+                <Checkbox id="remember-device" disabled />
+                <Label htmlFor="remember-device">この端末を信頼する（無効）</Label>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Label + Switch (settings row)</CardTitle>
+            <CardDescription>
+              Labelling a standalone Switch in an inline row that FormField’s full-width block would
+              break.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" align="center" justify="between">
+                <Label htmlFor="auto-save">自動保存</Label>
+                <Switch id="auto-save" defaultChecked />
+              </Flex>
+              <Flex direction="row" gap="sm" align="center" justify="between">
+                <Label htmlFor="due-reminder">支払い期日リマインダー</Label>
+                <Switch id="due-reminder" />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Label + Textarea (minimal)</CardTitle>
+            <CardDescription>
+              A free-text field where helper / error slots are not needed.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="memo" label="備考">
+              <Textarea id="memo" placeholder="仕訳に関するメモを入力..." rows={3} />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>FormField vs bare Label · prefer FormField</CardTitle>
+            <CardDescription>
+              FormField renders Label internally, wires aria-describedby / aria-invalid, and adds
+              the helper / error / required slots. Use it for real form fields.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="invoice-no" label="請求書番号" required helper="例: INV-2024-001">
+                <Input id="invoice-no" placeholder="INV-2024-001" />
+              </FormField>
+              <FormField id="note" label="摘要" error="摘要は必須です">
+                <Input id="note" defaultValue="" />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,101 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, MonthPicker } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/** MonthPicker — typeable yyyy/MM field with a localized month-grid affordance. */
+export default function Demo() {
+  const [month, setMonth] = useState<Date | undefined>(new Date(2026, 6, 1));
+
+  return (
+    <PageContainer title="MonthPicker" subtitle="年月入力 · yyyy/MM + 月グリッド">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled · form submission</CardTitle>
+            <CardDescription>
+              value + onValueChange で制御し、name は yyyy/MM の表示値を送信する。直接入力と
+              月グリッド選択のどちらも利用できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="billing-month" label="請求年月" required helper="yyyy/MM 形式">
+              <MonthPicker
+                id="billing-month"
+                name="billing_month"
+                value={month}
+                onValueChange={setMonth}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Uncontrolled · bounded years</CardTitle>
+            <CardDescription>
+              defaultValue で内部状態を初期化し、fromYear / toYear で年移動を制限する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="fiscal-month" label="会計年月">
+              <MonthPicker
+                id="fiscal-month"
+                name="fiscal_month"
+                defaultValue={new Date(2025, 3, 1)}
+                fromYear={2024}
+                toYear={2027}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Clear affordance variants</CardTitle>
+            <CardDescription>
+              値がある既定状態ではクリア操作を表示する。必須フィールドでは allowClear=false
+              にして不用意な空値を防ぐ。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="clearable-month" label="クリア可能">
+                <MonthPicker id="clearable-month" defaultValue={new Date(2026, 0, 1)} />
+              </FormField>
+              <FormField id="fixed-month" label="クリア不可" required>
+                <MonthPicker
+                  id="fixed-month"
+                  defaultValue={new Date(2026, 0, 1)}
+                  allowClear={false}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled · empty and populated</CardTitle>
+            <CardDescription>権限不足または確定済みデータの操作不可状態。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="disabled-month-empty" label="無効（未選択）">
+                <MonthPicker id="disabled-month-empty" disabled />
+              </FormField>
+              <FormField id="disabled-month-value" label="無効（選択済み）">
+                <MonthPicker
+                  id="disabled-month-value"
+                  defaultValue={new Date(2026, 8, 1)}
+                  disabled
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,115 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, MonthRangePicker } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { DateRange } from "react-day-picker";
+
+/**
+ * MonthRangePicker — 年月 (yyyy/MM) 範囲入力。DateRangePicker と同じ
+ * 「ひとつのコントロール [開始 → 終了 ✕ 📅]」規約で、月グリッドポップオーバーを
+ * 視覚的アフォーダンスとして持つ。逆順 (from > to) は自動で入れ替え正規化される。
+ * MonthPicker を 2 つ並べて範囲を偽装しないこと。
+ */
+export default function Demo() {
+  const [closing, setClosing] = useState<DateRange | undefined>({
+    from: new Date(2026, 0, 1),
+    to: new Date(2026, 5, 1),
+  });
+  const [negotiation, setNegotiation] = useState<DateRange | undefined>(undefined);
+
+  return (
+    <PageContainer
+      title="MonthRangePicker"
+      subtitle="年月範囲入力 · 開始/終了 yyyy/MM 入力 + 月グリッドポップオーバー"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本 (controlled)</CardTitle>
+            <CardDescription>
+              value + onValueChange で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンから
+              月グリッドで 2 ステップ選択 (開始 → 終了)。逆順に選んでも from ≤ to
+              に自動正規化される。name=&#34;closing_ym&#34; を指定すると closing_ym_from /
+              closing_ym_to として yyyy/MM でフォーム送信される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="closing-ym" label="締め年月" required>
+              <MonthRangePicker
+                id="closing-ym"
+                name="closing_ym"
+                value={closing}
+                onValueChange={setClosing}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>検索フィルター (未選択)</CardTitle>
+            <CardDescription>
+              初期値なし。確定済み範囲の上でもう一度選ぶと新しい範囲が開始される (reset-on-complete
+              — 開始月が固まって選び直せない、が起きない)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="negotiation-ym" label="商談発生年月">
+              <MonthRangePicker
+                id="negotiation-ym"
+                name="search_negotiation_ym"
+                value={negotiation}
+                onValueChange={setNegotiation}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>非制御 (defaultValue) + 年クランプ</CardTitle>
+            <CardDescription>
+              defaultValue で初期範囲だけ与え、fromYear / toYear
+              でグリッドの年ナビゲーションを境界年で止める。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="fiscal-ym" label="会計年度範囲 (2024–2027)">
+              <MonthRangePicker
+                id="fiscal-ym"
+                name="fiscal_ym"
+                defaultValue={{
+                  from: new Date(2026, 3, 1),
+                  to: new Date(2027, 2, 1),
+                }}
+                fromYear={2024}
+                toYear={2027}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled 状態</CardTitle>
+            <CardDescription>確定済み範囲や読み取り専用フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-ym" label="確定範囲">
+              <MonthRangePicker
+                id="locked-ym"
+                name="locked_ym"
+                value={{
+                  from: new Date(2025, 3, 1),
+                  to: new Date(2026, 2, 1),
+                }}
+                disabled
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}