@godxjp/ui 31.31.7 → 32.0.0

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

@@ -1,258 +0,0 @@
-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>
-            {/* この行の id は FIELD ではなく CONTROL 側にある。FormField はその id をそのまま
-                使い、ラベルのクリックもその id を見る（gh#477：以前は FormField 自身の id を
-                見ていたので、両者が食い違った瞬間にラベルがどこも指さなくなった）。 */}
-            <FormField label="認証コード" required>
-              <InputOTP id="email-otp" 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 */}
-        <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>
-        <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>
-  );
-}