@godxjp/ui 30.8.0 → 31.0.2

package/docs/layout/auth-shell-variants.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Input, PasswordInput, RadioGroup } from "@godxjp/ui/data-entry";
+import { Form, FormField, Input, PasswordInput, RadioGroup } from "@godxjp/ui/data-entry";
 import { Button, Logo, Text } from "@godxjp/ui/general";
 import {
   AuthDivider,
@@ -68,19 +68,21 @@ export default function Demo() {
             <CardDescription>組織アカウントの資格情報を入力してください。</CardDescription>
           </CardHeader>
           <CardContent>
-            <AuthStack>
-              <FormField id="auth-axis-email" label="メールアドレス" layout="vertical" required>
-                <Input id="auth-axis-email" type="email" placeholder="you@example.co.jp" />
-              </FormField>
-              <FormField id="auth-axis-password" label="パスワード" layout="vertical" required>
-                <PasswordInput id="auth-axis-password" />
-              </FormField>
-              <Button fullWidth>サインイン</Button>
-              <AuthDivider label="または" />
-              <Button variant="outline" fullWidth>
-                パスキーでサインイン
-              </Button>
-            </AuthStack>
+            <Form>
+              <AuthStack>
+                <FormField id="auth-axis-email" label="メールアドレス" layout="vertical" required>
+                  <Input id="auth-axis-email" type="email" placeholder="you@example.co.jp" />
+                </FormField>
+                <FormField id="auth-axis-password" label="パスワード" layout="vertical" required>
+                  <PasswordInput id="auth-axis-password" />
+                </FormField>
+                <Button fullWidth>サインイン</Button>
+                <AuthDivider label="または" />
+                <Button variant="outline" fullWidth>
+                  パスキーでサインイン
+                </Button>
+              </AuthStack>
+            </Form>
           </CardContent>
         </Card>
 
@@ -94,43 +96,45 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField
-                id="auth-axis-variant"
-                label="variant · シェルの寸法"
-                layout="vertical"
-                helper="canonical は GoDX ID の正準寸法、default は素の中央寄せシェル。"
-              >
-                <RadioGroup
-                  orientation="horizontal"
-                  value={variant}
-                  onValueChange={(next) => setVariant(next as AuthShellVariant)}
-                  options={[
-                    { value: "default", label: "default（既定）" },
-                    { value: "canonical", label: "canonical（正準）" },
-                  ]}
-                />
-              </FormField>
-              <FormField
-                id="auth-axis-density"
-                label="density · 操作要素の段"
-                layout="vertical"
-                helper="comfortable は 44px のタッチ下限、compact は情報密度を優先した段。"
-              >
-                <RadioGroup
-                  orientation="horizontal"
-                  value={density}
-                  onValueChange={(next) => setDensity(next as AuthShellDensity)}
-                  options={[
-                    { value: "comfortable", label: "comfortable（44px）" },
-                    { value: "compact", label: "compact" },
-                  ]}
-                />
-              </FormField>
-              <Text size="sm" tone="muted">
-                現在の組み合わせ: variant=&quot;{variant}&quot; · density=&quot;{density}&quot;
-              </Text>
-            </Flex>
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField
+                  id="auth-axis-variant"
+                  label="variant · シェルの寸法"
+                  layout="vertical"
+                  helper="canonical は GoDX ID の正準寸法、default は素の中央寄せシェル。"
+                >
+                  <RadioGroup
+                    orientation="horizontal"
+                    value={variant}
+                    onValueChange={(next) => setVariant(next as AuthShellVariant)}
+                    options={[
+                      { value: "default", label: "default（既定）" },
+                      { value: "canonical", label: "canonical（正準）" },
+                    ]}
+                  />
+                </FormField>
+                <FormField
+                  id="auth-axis-density"
+                  label="density · 操作要素の段"
+                  layout="vertical"
+                  helper="comfortable は 44px のタッチ下限、compact は情報密度を優先した段。"
+                >
+                  <RadioGroup
+                    orientation="horizontal"
+                    value={density}
+                    onValueChange={(next) => setDensity(next as AuthShellDensity)}
+                    options={[
+                      { value: "comfortable", label: "comfortable（44px）" },
+                      { value: "compact", label: "compact" },
+                    ]}
+                  />
+                </FormField>
+                <Text size="sm" tone="muted">
+                  現在の組み合わせ: variant=&quot;{variant}&quot; · density=&quot;{density}&quot;
+                </Text>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
       </Flex>

package/docs/layout/space-compact.tsx

@@ -9,6 +9,7 @@ import {
   Descriptions,
 } from "@godxjp/ui/data-display";
 import {
+  Form,
   FormField,
   Input,
   NumberInput,
@@ -183,14 +184,16 @@ export default function SpaceCompactShowcase() {
             <CardDescription>{t("spaceCompactDocs.dont.body")}</CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" gap="md" wrap>
-              <FormField label={t("spaceCompactDocs.dont.dept")}>
-                <Input placeholder="D-1024" aria-label={t("spaceCompactDocs.dont.dept")} />
-              </FormField>
-              <FormField label={t("spaceCompactDocs.dont.ext")}>
-                <Input placeholder="2831" aria-label={t("spaceCompactDocs.dont.ext")} />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="row" gap="md" wrap>
+                <FormField label={t("spaceCompactDocs.dont.dept")}>
+                  <Input placeholder="D-1024" aria-label={t("spaceCompactDocs.dont.dept")} />
+                </FormField>
+                <FormField label={t("spaceCompactDocs.dont.ext")}>
+                  <Input placeholder="2831" aria-label={t("spaceCompactDocs.dont.ext")} />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
       </Flex>

package/docs/{query → react-router}/prefetch-link.tsx

@@ -18,7 +18,7 @@ import {
   TableRow,
 } from "@godxjp/ui/data-display";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { PrefetchLink } from "@godxjp/ui/query";
+import { PrefetchLink } from "@godxjp/ui/react-router";
 
 /**
  * PrefetchLink · a React Router Link that fires queryClient.prefetchQuery on

package/docs/showcase/caimono-price-comparison.tsx

@@ -17,6 +17,7 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import {
+  Form,
   Checkbox,
   FormField,
   NumberInput,
@@ -468,31 +469,33 @@ export default function CaimonoPriceComparison() {
         <Card style={{ "--card-radius": "var(--radius-2xl)" } as React.CSSProperties}>
           <CardContent solo>
             <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="xl">
-              <Flex direction="col" gap="md">
-                <Badge tone="neutral">{t("caimono.synthetic")}</Badge>
-                <Heading level={1}>{t("caimono.product")}</Heading>
-                <Text tone="muted">{t("caimono.productMeta", { count: number(1) })}</Text>
-                <FormField label={t("caimono.variant")}>
-                  <Select
-                    value={variant}
-                    onValueChange={setVariant}
-                    options={["black", "cream"].map((value) => ({
-                      value,
-                      label: t(`caimono.${value}`),
-                    }))}
-                  />
-                </FormField>
-                <FormField label={t("caimono.condition")}>
-                  <Segmented
-                    value={condition}
-                    onValueChange={setCondition}
-                    options={["new", "used"].map((value) => ({
-                      value,
-                      label: t(`caimono.${value}`),
-                    }))}
-                  />
-                </FormField>
-              </Flex>
+              <Form>
+                <Flex direction="col" gap="md">
+                  <Badge tone="neutral">{t("caimono.synthetic")}</Badge>
+                  <Heading level={1}>{t("caimono.product")}</Heading>
+                  <Text tone="muted">{t("caimono.productMeta", { count: number(1) })}</Text>
+                  <FormField label={t("caimono.variant")}>
+                    <Select
+                      value={variant}
+                      onValueChange={setVariant}
+                      options={["black", "cream"].map((value) => ({
+                        value,
+                        label: t(`caimono.${value}`),
+                      }))}
+                    />
+                  </FormField>
+                  <FormField label={t("caimono.condition")}>
+                    <Segmented
+                      value={condition}
+                      onValueChange={setCondition}
+                      options={["new", "used"].map((value) => ({
+                        value,
+                        label: t(`caimono.${value}`),
+                      }))}
+                    />
+                  </FormField>
+                </Flex>
+              </Form>
               <Flex direction="col" gap="md">
                 <Text tone="muted">{t("caimono.lowest")}</Text>
                 <Text size="4xl" weight="bold" tabular>
@@ -544,32 +547,37 @@ export default function CaimonoPriceComparison() {
         <Text tone="muted" size="sm">
           {t("caimono.snapshot", { date: date(snapshot) })}
         </Text>
-        <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md">
-          <FormField label={t("caimono.findShop")}>
-            <SearchInput
-              value={query}
-              onValueChange={setQuery}
-              placeholder={t("caimono.searchPlaceholder")}
-            />
-          </FormField>
-          <FormField label={t("caimono.deliverTo")}>
-            <Select
-              value={destination}
-              onValueChange={(v: string) => setDestination(v === "Osaka" ? "Osaka" : "Tokyo")}
-              options={["Tokyo", "Osaka"].map((value) => ({ value, label: t(`caimono.${value}`) }))}
-            />
-          </FormField>
-          <FormField label={t("caimono.sort")}>
-            <Select
-              value={sort}
-              onValueChange={setSort}
-              options={[
-                { value: "total", label: t("caimono.totalSort") },
-                { value: "delivery", label: t("caimono.deliverySort") },
-              ]}
-            />
-          </FormField>
-        </ResponsiveGrid>
+        <Form>
+          <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md">
+            <FormField label={t("caimono.findShop")}>
+              <SearchInput
+                value={query}
+                onValueChange={setQuery}
+                placeholder={t("caimono.searchPlaceholder")}
+              />
+            </FormField>
+            <FormField label={t("caimono.deliverTo")}>
+              <Select
+                value={destination}
+                onValueChange={(v: string) => setDestination(v === "Osaka" ? "Osaka" : "Tokyo")}
+                options={["Tokyo", "Osaka"].map((value) => ({
+                  value,
+                  label: t(`caimono.${value}`),
+                }))}
+              />
+            </FormField>
+            <FormField label={t("caimono.sort")}>
+              <Select
+                value={sort}
+                onValueChange={setSort}
+                options={[
+                  { value: "total", label: t("caimono.totalSort") },
+                  { value: "delivery", label: t("caimono.deliverySort") },
+                ]}
+              />
+            </FormField>
+          </ResponsiveGrid>
+        </Form>
         <Flex gap="md" wrap align="center">
           <Checkbox checked={free} onCheckedChange={(v) => setFree(v === true)}>
             {t("caimono.free")}

package/docs/showcase/case3-approval-workflow.tsx

@@ -43,7 +43,7 @@ import {
   AvatarFallback,
 } from "@godxjp/ui/data-display";
 import { Alert, AlertDescription, SkeletonTable } from "@godxjp/ui/feedback";
-import { DatePicker, FormField, Input, Select } from "@godxjp/ui/data-entry";
+import { Form, DatePicker, FormField, Input, Select } from "@godxjp/ui/data-entry";
 import { toIsoDate } from "@godxjp/ui/datetime";
 import {
   AppShell,
@@ -353,30 +353,32 @@ export default function Demo() {
           <Card className="self-start">
             <CardContent>
               <Flex direction="col" gap="md">
-                <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-                  <FormField id="f-type" label="区分">
-                    <Select
-                      options={TYPE_OPTIONS}
-                      value={type}
-                      onValueChange={setType}
-                      placeholder="すべて"
-                    />
-                  </FormField>
-                  <FormField id="f-status" label="状態">
-                    <Select
-                      options={STATUS_OPTIONS}
-                      value={status}
-                      onValueChange={setStatus}
-                      placeholder="すべて"
-                    />
-                  </FormField>
-                  <FormField id="f-from" label="期間 (開始)">
-                    <DatePicker value={from} onValueChange={setFrom} placeholder="YYYY-MM-DD" />
-                  </FormField>
-                  <FormField id="f-to" label="期間 (終了)">
-                    <DatePicker value={to} onValueChange={setTo} placeholder="YYYY-MM-DD" />
-                  </FormField>
-                </ResponsiveGrid>
+                <Form>
+                  <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+                    <FormField id="f-type" label="区分">
+                      <Select
+                        options={TYPE_OPTIONS}
+                        value={type}
+                        onValueChange={setType}
+                        placeholder="すべて"
+                      />
+                    </FormField>
+                    <FormField id="f-status" label="状態">
+                      <Select
+                        options={STATUS_OPTIONS}
+                        value={status}
+                        onValueChange={setStatus}
+                        placeholder="すべて"
+                      />
+                    </FormField>
+                    <FormField id="f-from" label="期間 (開始)">
+                      <DatePicker value={from} onValueChange={setFrom} placeholder="YYYY-MM-DD" />
+                    </FormField>
+                    <FormField id="f-to" label="期間 (終了)">
+                      <DatePicker value={to} onValueChange={setTo} placeholder="YYYY-MM-DD" />
+                    </FormField>
+                  </ResponsiveGrid>
+                </Form>
                 {hasActiveFilters && (
                   <Flex direction="row" justify="end">
                     <Button variant="ghost" size="sm" onClick={clearFilters}>

package/docs/showcase/case4-login.tsx

@@ -29,6 +29,7 @@ import { Languages, Monitor, Moon, Sun } from "lucide-react";
 
 import { Button, Heading, Text } from "@godxjp/ui/general";
 import {
+  Form,
   FormField,
   Input,
   PasswordInput,
@@ -243,42 +244,44 @@ export default function LoginShowcase() {
                   e.preventDefault();
                 }}
               >
-                <Flex direction="col" gap="md">
-                  <FormField id="login-email" label="メールアドレス" required>
-                    <Input
-                      type="email"
-                      name="email"
-                      autoComplete="email"
-                      inputMode="email"
-                      placeholder="name@example.com"
-                      defaultValue="m.tanaka@famgia.com"
-                    />
-                  </FormField>
+                <Form>
+                  <Flex direction="col" gap="md">
+                    <FormField id="login-email" label="メールアドレス" required>
+                      <Input
+                        type="email"
+                        name="email"
+                        autoComplete="email"
+                        inputMode="email"
+                        placeholder="name@example.com"
+                        defaultValue="m.tanaka@famgia.com"
+                      />
+                    </FormField>
 
-                  {/* Password — labelAddon hosts the right-aligned "忘れた場合" link. */}
-                  <FormField
-                    id="login-password"
-                    label="パスワード"
-                    required
-                    labelAddon={
-                      <Button type="button" variant="link" size="sm" className="ms-auto text-xs">
-                        お忘れの場合
-                      </Button>
-                    }
-                  >
-                    <PasswordInput
-                      name="password"
-                      autoComplete="current-password"
-                      placeholder="パスワードを入力"
-                      defaultValue="example-pass"
-                    />
-                  </FormField>
+                    {/* Password — labelAddon hosts the right-aligned "忘れた場合" link. */}
+                    <FormField
+                      id="login-password"
+                      label="パスワード"
+                      required
+                      labelAddon={
+                        <Button type="button" variant="link" size="sm" className="ms-auto text-xs">
+                          お忘れの場合
+                        </Button>
+                      }
+                    >
+                      <PasswordInput
+                        name="password"
+                        autoComplete="current-password"
+                        placeholder="パスワードを入力"
+                        defaultValue="example-pass"
+                      />
+                    </FormField>
 
-                  {/* The single --primary action of the view. */}
-                  <Button type="submit" className="w-full justify-center">
-                    ログイン
-                  </Button>
-                </Flex>
+                    {/* The single --primary action of the view. */}
+                    <Button type="submit" className="w-full justify-center">
+                      ログイン
+                    </Button>
+                  </Flex>
+                </Form>
               </form>
 
               <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">

package/docs/showcase/permission-matrix.tsx

@@ -45,7 +45,7 @@ import {
   TableHeader,
   TableRow,
 } from "@godxjp/ui/data-display";
-import { FormField, Label, Select, Switch } from "@godxjp/ui/data-entry";
+import { Form, FormField, Label, Select, Switch } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { cn } from "@godxjp/ui/lib/utils";
@@ -170,50 +170,52 @@ export default function Demo() {
             </Text>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" wrap align="end" gap="md">
-              <FormField label="比較 A">
-                <Select
-                  value={compareA}
-                  onValueChange={setCompareA}
-                  options={roleOptions}
-                  className="w-40"
-                />
-              </FormField>
-              <FormField label="比較 B">
-                <Select
-                  value={compareB}
-                  onValueChange={setCompareB}
-                  options={roleOptions}
-                  className="w-40"
-                />
-              </FormField>
-              <Flex direction="row" align="center" gap="sm">
-                <Switch
-                  id="pm-diff-only"
-                  size="sm"
-                  checked={diffOnly}
-                  onCheckedChange={setDiffOnly}
-                  disabled={sameRole}
-                />
-                <Label htmlFor="pm-diff-only">差分のみ</Label>
-              </Flex>
-              <Flex direction="row" align="center" gap="xs" aria-live="polite">
-                {sameRole ? (
-                  <Text size="xs" tone="muted">
-                    同一ロールを比較中
-                  </Text>
-                ) : (
-                  <>
-                    <Badge tone={diffN > 0 ? "warning" : "success"} variant="outline">
-                      差分 {diffN} 件
-                    </Badge>
+            <Form>
+              <Flex direction="row" wrap align="end" gap="md">
+                <FormField label="比較 A">
+                  <Select
+                    value={compareA}
+                    onValueChange={setCompareA}
+                    options={roleOptions}
+                    className="w-40"
+                  />
+                </FormField>
+                <FormField label="比較 B">
+                  <Select
+                    value={compareB}
+                    onValueChange={setCompareB}
+                    options={roleOptions}
+                    className="w-40"
+                  />
+                </FormField>
+                <Flex direction="row" align="center" gap="sm">
+                  <Switch
+                    id="pm-diff-only"
+                    size="sm"
+                    checked={diffOnly}
+                    onCheckedChange={setDiffOnly}
+                    disabled={sameRole}
+                  />
+                  <Label htmlFor="pm-diff-only">差分のみ</Label>
+                </Flex>
+                <Flex direction="row" align="center" gap="xs" aria-live="polite">
+                  {sameRole ? (
                     <Text size="xs" tone="muted">
-                      {roleName(compareA)} vs {roleName(compareB)}
+                      同一ロールを比較中
                     </Text>
-                  </>
-                )}
+                  ) : (
+                    <>
+                      <Badge tone={diffN > 0 ? "warning" : "success"} variant="outline">
+                        差分 {diffN} 件
+                      </Badge>
+                      <Text size="xs" tone="muted">
+                        {roleName(compareA)} vs {roleName(compareB)}
+                      </Text>
+                    </>
+                  )}
+                </Flex>
               </Flex>
-            </Flex>
+            </Form>
           </CardContent>
         </Card>