@godxjp/ui 19.1.0 → 19.3.1

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

@@ -0,0 +1,240 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, NumberInput } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Heading, Text } from "@godxjp/ui/general";
+
+/**
+ * NumberInput — WAI-ARIA spinbutton for localized numeric entry. Composes the real `Input`
+ * primitive (role="spinbutton", inputMode="decimal") with stacked increment/decrement `Button`s.
+ * Type freely, ArrowUp/ArrowDown (Shift = ×10) step, value commits clamped to min/max + rounded to
+ * precision on blur/Enter. Steppers disable at the bounds. Composed only from real @godxjp/ui.
+ */
+export default function Demo() {
+  const [quantity, setQuantity] = useState<number | null>(1);
+  const [rating, setRating] = useState<number | null>(3);
+  const [price, setPrice] = useState<number | null>(1980);
+  const [discount, setDiscount] = useState<number | null>(10);
+
+  return (
+    <PageContainer title="NumberInput" subtitle="数値入力 · スピンボタン (Input + ステッパー)">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>基本 (controlled)</CardTitle>
+            <CardDescription>
+              value + onValueChange で number | null を制御。空欄は null。ArrowUp/Down
+              またはステッパーで step ずつ増減。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="ni-quantity" label="数量">
+              <NumberInput
+                id="ni-quantity"
+                name="quantity"
+                value={quantity}
+                onValueChange={setQuantity}
+                aria-label="数量"
+              />
+            </FormField>
+            <Text size="sm" tone="muted">
+              現在値: {quantity ?? "（空）"}
+            </Text>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>min / max · 範囲クランプ</CardTitle>
+            <CardDescription>
+              min=1, max=5。境界でステッパーが無効化され、コミット時に範囲内へクランプされる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="ni-rating" label="評価 (1–5)">
+              <NumberInput
+                id="ni-rating"
+                name="rating"
+                value={rating}
+                onValueChange={setRating}
+                min={1}
+                max={5}
+                aria-label="評価"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>step · 刻み幅</CardTitle>
+            <CardDescription>
+              step=100 で 100 単位の増減。Shift + Arrow で ×10 (1000 刻み)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="ni-step" label="目標金額 (100 刻み)">
+              <NumberInput
+                id="ni-step"
+                name="target"
+                defaultValue={5000}
+                step={100}
+                min={0}
+                aria-label="目標金額"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>precision · 小数桁</CardTitle>
+            <CardDescription>
+              precision=2, step=0.25。コミット時に小数 2 桁へ丸め、Intl.NumberFormat で整形。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="ni-precision" label="重量 (kg)">
+              <NumberInput
+                id="ni-precision"
+                name="weight"
+                defaultValue={2.5}
+                step={0.25}
+                precision={2}
+                min={0}
+                aria-label="重量"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>prefix / suffix — ¥ と %</CardTitle>
+            <CardDescription>
+              通貨記号や単位を装飾的な affix として表示 (aria-hidden)。値は生の数値のまま。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" wrap>
+              <FormField id="ni-price" label="価格">
+                <NumberInput
+                  id="ni-price"
+                  name="price"
+                  value={price}
+                  onValueChange={setPrice}
+                  prefix="¥"
+                  step={10}
+                  min={0}
+                  aria-label="価格"
+                />
+              </FormField>
+              <FormField id="ni-discount" label="割引率">
+                <NumberInput
+                  id="ni-discount"
+                  name="discount"
+                  value={discount}
+                  onValueChange={setDiscount}
+                  suffix="%"
+                  min={0}
+                  max={100}
+                  aria-label="割引率"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>uncontrolled (defaultValue)</CardTitle>
+            <CardDescription>
+              React 管理不要なネイティブフォーム。送信時に name 経由で値が渡される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="ni-uncontrolled" label="在庫数 (非制御)">
+              <NumberInput
+                id="ni-uncontrolled"
+                name="stock"
+                defaultValue={42}
+                min={0}
+                placeholder="0"
+                aria-label="在庫数"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled / readOnly</CardTitle>
+            <CardDescription>
+              disabled は操作不可、readOnly は値を表示・選択できるが編集・ステップ不可。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" wrap>
+              <FormField id="ni-disabled" label="確定数量 (disabled)">
+                <NumberInput
+                  id="ni-disabled"
+                  name="locked_qty"
+                  value={3}
+                  disabled
+                  aria-label="確定数量"
+                />
+              </FormField>
+              <FormField id="ni-readonly" label="参照値 (readOnly)">
+                <NumberInput
+                  id="ni-readonly"
+                  name="ref_value"
+                  value={128}
+                  readOnly
+                  aria-label="参照値"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>
+            <CardDescription>
+              制御高さティア (--control-height) に連動。行内の他コントロールと整列。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="ni-xs" label="xs">
+                <NumberInput id="ni-xs" size="xs" defaultValue={1} aria-label="xs サイズ" />
+              </FormField>
+              <FormField id="ni-sm" label="sm">
+                <NumberInput id="ni-sm" size="sm" defaultValue={2} aria-label="sm サイズ" />
+              </FormField>
+              <FormField id="ni-md" label="md (既定)">
+                <NumberInput id="ni-md" size="md" defaultValue={3} aria-label="md サイズ" />
+              </FormField>
+              <FormField id="ni-lg" label="lg">
+                <NumberInput id="ni-lg" size="lg" defaultValue={4} aria-label="lg サイズ" />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <Heading level={2}>キーボード操作</Heading>
+          </CardHeader>
+          <CardContent>
+            <Text size="sm" tone="muted">
+              ↑ / ↓ で step 増減・Shift + ↑ / ↓ で ×10・Enter で確定 (クランプ + 丸め)・Tab
+              でフォーカス移動。ステッパーは tabIndex=-1 でキーボードのタブ順を汚さない。
+            </Text>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, PasswordInput } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * PasswordInput — password field with a built-in show/hide eye toggle.
+ * Always use this instead of <Input type="password">; never add your own
+ * eye button. Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+
+  return (
+    <PageContainer title="PasswordInput" subtitle="パスワード入力 · 表示/非表示トグル付き">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>States</CardTitle>
+            <CardDescription>Placeholder, filled, and disabled.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <PasswordInput aria-label="プレースホルダー状態" placeholder="パスワードを入力" />
+              <PasswordInput aria-label="入力済み状態" defaultValue="S3cr3t!pass" />
+              <PasswordInput aria-label="無効状態" disabled defaultValue="無効 (disabled)" />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Inherited Input affordances</CardTitle>
+            <CardDescription>
+              PasswordInput retains leading/trailing nodes and the explicit clear callback while
+              preserving its visibility control.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <PasswordInput
+                aria-label="クリア可能なパスワード"
+                defaultValue="secret"
+                allowClear
+                onClear={() => {}}
+                leadingIcon={<span aria-hidden="true">L</span>}
+              />
+              <PasswordInput
+                aria-label="末尾情報付きパスワード"
+                allowClear={false}
+                trailingIcon={<span aria-hidden="true">T</span>}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ログインフォーム</CardTitle>
+            <CardDescription>
+              current-password autoComplete でパスワードマネージャーと連携。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="current-password" label="現在のパスワード" required>
+              <PasswordInput
+                id="current-password"
+                name="current_password"
+                autoComplete="current-password"
+                value={current}
+                onChange={(e) => setCurrent(e.target.value)}
+                placeholder="現在のパスワード"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>パスワード変更フォーム</CardTitle>
+            <CardDescription>new-password autoComplete で新しいパスワードを設定。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="new-password" label="新しいパスワード" required>
+              <PasswordInput
+                id="new-password"
+                name="new_password"
+                autoComplete="new-password"
+                value={next}
+                onChange={(e) => setNext(e.target.value)}
+                placeholder="新しいパスワード"
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <PasswordInput size="sm" placeholder="Compact tier (sm)" aria-label="Password (sm)" />
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/password-strength.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, PasswordInput, PasswordStrength } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * PasswordStrength — 0-4 score bar + rule checklist paired with PasswordInput.
+ * Always render immediately below the PasswordInput it evaluates.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [signupPassword, setSignupPassword] = useState("");
+  const [resetPassword, setResetPassword] = useState("");
+
+  return (
+    <PageContainer
+      title="PasswordStrength"
+      subtitle="パスワード強度メーター · スコアバー＋ルールチェックリスト"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>新規登録フォーム</CardTitle>
+            <CardDescription>
+              PasswordInput の直下に配置し、入力と同時にスコアを表示する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="signup-password" label="パスワード" required>
+                <PasswordInput
+                  id="signup-password"
+                  name="password"
+                  autoComplete="new-password"
+                  value={signupPassword}
+                  onChange={(e) => setSignupPassword(e.target.value)}
+                  placeholder="8文字以上のパスワード"
+                />
+              </FormField>
+              <PasswordStrength value={signupPassword} showChecklist />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>カスタムルール + ラベル</CardTitle>
+            <CardDescription>
+              rules で評価項目を絞り込み、labels でスコア表示を日本語化。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="reset-password" label="新しいパスワード" required>
+                <PasswordInput
+                  id="reset-password"
+                  name="new_password"
+                  autoComplete="new-password"
+                  value={resetPassword}
+                  onChange={(e) => setResetPassword(e.target.value)}
+                  placeholder="新しいパスワード"
+                />
+              </FormField>
+              <PasswordStrength
+                value={resetPassword}
+                rules={["length", "upper", "lower", "number"]}
+                labels={{ weak: "弱い", fair: "普通", strong: "強い" }}
+                showChecklist
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>チェックリスト非表示</CardTitle>
+            <CardDescription>
+              showChecklist={"{false}"} でスコアバーのみ表示するコンパクト版。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <PasswordInput
+                aria-label="パスワード（無効状態）"
+                autoComplete="new-password"
+                defaultValue="MyP@ss1"
+                disabled
+              />
+              <PasswordStrength value="MyP@ss1" showChecklist={false} />
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/radio-group.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Field, RadioGroup, RadioItem } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * RadioGroup — 2–4 mutually-exclusive choices, all visible at once (use Select
+ * when the list is long or must collapse). Data-driven via an options array.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [controlled, setControlled] = useState("email");
+  return (
+    <PageContainer
+      title="RadioGroup"
+      subtitle="Mutually-exclusive choices, all visible · options array"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Vertical</CardTitle>
+            <CardDescription>The default stacked layout.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              defaultValue="taxed"
+              options={[
+                { value: "taxed", label: "税抜" },
+                { value: "included", label: "税込" },
+                { value: "exempt", label: "非課税" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled · named · disabled</CardTitle>
+            <CardDescription>
+              Controlled callback and native form name with disabled options.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              className="contract-radio-group"
+              name="notification_channel"
+              value={controlled}
+              onValueChange={setControlled}
+              options={[
+                { value: "email", label: "メール" },
+                { value: "sms", label: "SMS" },
+                { value: "push", label: "プッシュ", disabled: true },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Disabled group · custom children</CardTitle>
+            <CardDescription>
+              The children composition remains labelled and non-interactive.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup disabled defaultValue="locked">
+              <Field id="radio-locked" label="確定済み">
+                <RadioItem id="radio-locked" value="locked" />
+              </Field>
+            </RadioGroup>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Horizontal</CardTitle>
+            <CardDescription>orientation=“horizontal” for compact rows.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RadioGroup
+              defaultValue="round"
+              orientation="horizontal"
+              options={[
+                { value: "round", label: "四捨五入" },
+                { value: "floor", label: "切り捨て" },
+                { value: "ceil", label: "切り上げ" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/rating.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Rating } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Rating — star-rating input (radiogroup internally). Controlled via
+ * value/onValueChange. Use readOnly for displaying an average score.
+ * Pass name for native form submission. Composed only from real @godxjp/ui
+ * components.
+ */
+export default function Demo() {
+  const [vendorScore, setVendorScore] = useState(0);
+  const [qualityScore, setQualityScore] = useState(4);
+
+  return (
+    <PageContainer
+      title="Rating"
+      subtitle="Star-rating input (radiogroup) — collecting reviews or displaying averages"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled input</CardTitle>
+            <CardDescription>
+              Controlled via value/onValueChange. Keyboard accessible (radiogroup). Pass name= for
+              native form submission.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="vendor-rating" label="取引先評価">
+                <Rating name="vendor_rating" value={vendorScore} onValueChange={setVendorScore} />
+              </FormField>
+              <FormField id="quality-rating" label="品質スコア">
+                <Rating
+                  name="quality_score"
+                  value={qualityScore}
+                  onValueChange={setQualityScore}
+                  max={5}
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Read-only display</CardTitle>
+            <CardDescription>
+              readOnly=true turns it into a display widget with no interaction. Use for showing
+              average scores.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField id="avg-payment" label="支払い信頼性 (平均)">
+                <Rating value={4} readOnly />
+              </FormField>
+              <FormField id="avg-response" label="対応速度 (平均)">
+                <Rating value={3} readOnly />
+              </FormField>
+              <FormField id="avg-accuracy" label="請求正確性 (平均)">
+                <Rating value={5} readOnly />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Custom max stars</CardTitle>
+            <CardDescription>
+              max= controls the number of stars rendered. Default is 5.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="priority-rating" label="優先度 (10段階)">
+              <Rating name="priority" defaultValue={7} max={10} />
+            </FormField>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}