@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-entry/label.tsx

@@ -1,102 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, 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>
-            <Form>
-              <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>
-            </Form>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/markdown-editor.tsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import { MarkdownEditor } from "@godxjp/editor";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, FormField } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-import shot from "../assets/shot-landscape.svg";
-
-const initial = `## 議事録 2026-10-02
-
-- 決済モジュールの再発行は **税率変更後** のケースを追加する
-- 次回レビュー：_10/9_
-
-画像はこの欄に貼り付けるか、ドラッグするか、クリップのボタンから添付します。`;
-
-/** Stands in for the host's storage: a real app uploads the file and returns its URL. */
-async function demoUpload(file: File) {
-  await new Promise((resolve) => setTimeout(resolve, 800));
-  return { url: shot, name: file.name };
-}
-
-/**
- * @godxjp/editor — the Markdown editor (gh#1109). A page form: the editor inside a FormField,
- * the preview through @godxjp/markdown, files through the host's `upload`.
- */
-export default function Demo() {
-  const { t } = useTranslation();
-  const [body, setBody] = React.useState(initial);
-  return (
-    <PageContainer title="MarkdownEditor" subtitle={t("markdownEditorDocs.subtitle")}>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>{t("markdownEditorDocs.edit.title")}</CardTitle>
-          <CardDescription>{t("markdownEditorDocs.edit.description")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form onSubmit={(event) => event.preventDefault()}>
-            <Flex direction="col" gap="md">
-              <FormField id="page-body" label={t("markdownEditorDocs.edit.label")}>
-                <MarkdownEditor
-                  value={body}
-                  onValueChange={setBody}
-                  upload={demoUpload}
-                  defaultMode="split"
-                />
-              </FormField>
-              <Flex justify="end">
-                <Button type="submit">{t("markdownEditorDocs.edit.save")}</Button>
-              </Flex>
-            </Flex>
-          </Form>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>{t("markdownEditorDocs.readOnly.title")}</CardTitle>
-          <CardDescription>{t("markdownEditorDocs.readOnly.description")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <FormField id="page-body-readonly" label={t("markdownEditorDocs.readOnly.label")}>
-            <MarkdownEditor defaultValue={initial} readOnly />
-          </FormField>
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

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

@@ -1,279 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, 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>
-            <Form>
-              <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>
-            </Form>
-          </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>
-            <Form>
-              <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>
-            </Form>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>
-            <CardDescription>
-              制御高さティア (--control-height) に連動。行内の他コントロールと整列。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <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>
-            </Form>
-          </CardContent>
-        </Card>
-
-        {/* prefix / suffix — all THREE combinations, because the two-affix case is the only one
-            that used to be exercised and the suffix-only one is where the bug lived. */}
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>prefix · suffix · 単位つきの数値</CardTitle>
-            <CardDescription>
-              通貨記号や単位はフィールドの内側に重ねる装飾。読み上げからは外れる (aria-hidden)
-              ので、意味は必ずラベル側に置く。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md" id="number-input-affixes">
-                <FormField id="ni-prefix" label="金額（前置き）">
-                  <NumberInput id="ni-prefix" prefix="¥" defaultValue={1980} aria-label="金額" />
-                </FormField>
-                <FormField id="ni-suffix" label="日数（後置き）">
-                  <NumberInput id="ni-suffix" suffix="日" defaultValue={7} aria-label="日数" />
-                </FormField>
-                <FormField id="ni-both" label="率（前後）">
-                  <NumberInput
-                    id="ni-both"
-                    prefix="+"
-                    suffix="%"
-                    defaultValue={12}
-                    aria-label="率"
-                  />
-                </FormField>
-              </Flex>
-            </Form>
-          </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

@@ -1,102 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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("");
-  /* Seeded so the PASSED state is on screen without typing: the checklist's success icon is
-   * otherwise only reachable by interaction, which means no sweep can measure it (gh#612). */
-  const [resetPassword, setResetPassword] = useState("Passw0rdSeed");
-
-  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>
-  );
-}