@godxjp/ui 30.8.0 → 31.0.2

package/docs/foundation/theme-editor.tsx

@@ -13,6 +13,7 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import {
+  Form,
   Checkbox,
   ColorPicker,
   Field,
@@ -172,26 +173,28 @@ function PreviewPane({
               </AlertDescription>
             </Alert>
 
-            <ResponsiveGrid columns={{ base: 1, md: 2 }}>
-              <FormField
-                id={`${idPrefix}-org`}
-                label={t("themeEditor.preview.field.org")}
-                helper={t("themeEditor.preview.field.orgHelper")}
-              >
-                <Input id={`${idPrefix}-org`} defaultValue="Acme 株式会社" />
-              </FormField>
-              <FormField id={`${idPrefix}-plan`} label={t("themeEditor.preview.field.plan")}>
-                <Select
-                  id={`${idPrefix}-plan`}
-                  defaultValue="pro"
-                  options={[
-                    { value: "starter", label: t("themeEditor.preview.plan.starter") },
-                    { value: "pro", label: t("themeEditor.preview.plan.pro") },
-                    { value: "scale", label: t("themeEditor.preview.plan.scale") },
-                  ]}
-                />
-              </FormField>
-            </ResponsiveGrid>
+            <Form>
+              <ResponsiveGrid columns={{ base: 1, md: 2 }}>
+                <FormField
+                  id={`${idPrefix}-org`}
+                  label={t("themeEditor.preview.field.org")}
+                  helper={t("themeEditor.preview.field.orgHelper")}
+                >
+                  <Input id={`${idPrefix}-org`} defaultValue="Acme 株式会社" />
+                </FormField>
+                <FormField id={`${idPrefix}-plan`} label={t("themeEditor.preview.field.plan")}>
+                  <Select
+                    id={`${idPrefix}-plan`}
+                    defaultValue="pro"
+                    options={[
+                      { value: "starter", label: t("themeEditor.preview.plan.starter") },
+                      { value: "pro", label: t("themeEditor.preview.plan.pro") },
+                      { value: "scale", label: t("themeEditor.preview.plan.scale") },
+                    ]}
+                  />
+                </FormField>
+              </ResponsiveGrid>
+            </Form>
 
             <Flex gap="lg" wrap>
               <Field id={`${idPrefix}-tax`} label={t("themeEditor.preview.field.tax")}>
@@ -417,53 +420,55 @@ export default function Demo() {
               <CardDescription>{t("themeEditor.seed.description")}</CardDescription>
             </CardHeader>
             <CardContent>
-              <Flex direction="col" gap="md">
-                <FormField
-                  id="theme-editor-seed"
-                  label={t("themeEditor.seed.label")}
-                  helper={t("themeEditor.seed.helper")}
-                >
-                  <ColorPicker id="theme-editor-seed" value={seed} onValueChange={setSeed} />
-                </FormField>
+              <Form>
+                <Flex direction="col" gap="md">
+                  <FormField
+                    id="theme-editor-seed"
+                    label={t("themeEditor.seed.label")}
+                    helper={t("themeEditor.seed.helper")}
+                  >
+                    <ColorPicker id="theme-editor-seed" value={seed} onValueChange={setSeed} />
+                  </FormField>
 
-                <FormField
-                  id="theme-editor-preset"
-                  label={t("themeEditor.seed.presetLabel")}
-                  helper={t("themeEditor.seed.presetHelper")}
-                >
-                  <Select
+                  <FormField
                     id="theme-editor-preset"
-                    value={SEED_PRESETS.find((p) => p.hex === seed)?.id ?? ""}
-                    placeholder={t("themeEditor.seed.presetPlaceholder")}
-                    onValueChange={(next: string) => {
-                      const preset = SEED_PRESETS.find((p) => p.id === next);
-                      if (!preset) return;
-                      setSeed(preset.hex);
-                      setDarkL(null);
-                    }}
-                    options={SEED_PRESETS.map((preset) => ({
-                      value: preset.id,
-                      label: t(`themeEditor.seed.preset.${preset.id}`),
-                      sublabel: preset.hex,
-                    }))}
-                  />
-                </FormField>
-
-                {/* The live region. It is VISIBLE as well as announced: the same sentence a screen
+                    label={t("themeEditor.seed.presetLabel")}
+                    helper={t("themeEditor.seed.presetHelper")}
+                  >
+                    <Select
+                      id="theme-editor-preset"
+                      value={SEED_PRESETS.find((p) => p.hex === seed)?.id ?? ""}
+                      placeholder={t("themeEditor.seed.presetPlaceholder")}
+                      onValueChange={(next: string) => {
+                        const preset = SEED_PRESETS.find((p) => p.id === next);
+                        if (!preset) return;
+                        setSeed(preset.hex);
+                        setDarkL(null);
+                      }}
+                      options={SEED_PRESETS.map((preset) => ({
+                        value: preset.id,
+                        label: t(`themeEditor.seed.preset.${preset.id}`),
+                        sublabel: preset.hex,
+                      }))}
+                    />
+                  </FormField>
+
+                  {/* The live region. It is VISIBLE as well as announced: the same sentence a screen
                     reader hears is the one the summary line needs anyway, so there is no hidden
                     copy to drift out of sync with what is on screen. */}
-                <Text as="div" size="xs" tone="muted" role="status" aria-live="polite">
-                  {brand && brand.dark
-                    ? t("themeEditor.seed.announce", {
-                        hex: toHex(brand.light.seed),
-                        light: toHex(brand.light.seed),
-                        dark: toHex(brand.dark.seed),
-                        pass: passing,
-                        count: report.length,
-                      })
-                    : t("themeEditor.seed.announceNoDark", { hex: seed })}
-                </Text>
-              </Flex>
+                  <Text as="div" size="xs" tone="muted" role="status" aria-live="polite">
+                    {brand && brand.dark
+                      ? t("themeEditor.seed.announce", {
+                          hex: toHex(brand.light.seed),
+                          light: toHex(brand.light.seed),
+                          dark: toHex(brand.dark.seed),
+                          pass: passing,
+                          count: report.length,
+                        })
+                      : t("themeEditor.seed.announceNoDark", { hex: seed })}
+                  </Text>
+                </Flex>
+              </Form>
             </CardContent>
           </Card>
 
@@ -503,72 +508,76 @@ export default function Demo() {
               <CardDescription>{t("themeEditor.overrides.description")}</CardDescription>
             </CardHeader>
             <CardContent>
-              <Flex direction="col" gap="md">
-                <Alert tone="warning">
-                  <AlertTitle>{t("themeEditor.overrides.costTitle")}</AlertTitle>
-                  <AlertDescription>{t("themeEditor.overrides.costDescription")}</AlertDescription>
-                </Alert>
+              <Form>
+                <Flex direction="col" gap="md">
+                  <Alert tone="warning">
+                    <AlertTitle>{t("themeEditor.overrides.costTitle")}</AlertTitle>
+                    <AlertDescription>
+                      {t("themeEditor.overrides.costDescription")}
+                    </AlertDescription>
+                  </Alert>
 
-                <FormField
-                  id="theme-editor-label"
-                  label={t("themeEditor.overrides.labelTitle")}
-                  helper={t("themeEditor.overrides.labelHelper")}
-                >
-                  <Segmented
+                  <FormField
                     id="theme-editor-label"
-                    aria-label={t("themeEditor.overrides.labelTitle")}
-                    value={labelMode}
-                    onValueChange={(next) => setLabelMode(next as LabelMode)}
-                    options={[
-                      { value: "auto", label: t("themeEditor.overrides.labelAuto") },
-                      { value: "light", label: t("themeEditor.overrides.labelLight") },
-                      { value: "dark", label: t("themeEditor.overrides.labelDark") },
-                    ]}
-                  />
-                </FormField>
-
-                <FormField
-                  id="theme-editor-dark-l"
-                  label={t("themeEditor.overrides.darkTitle")}
-                  helper={
-                    searchedL === null
-                      ? t("themeEditor.overrides.darkNoParity")
-                      : t("themeEditor.overrides.darkHelper", {
-                          parity: percentFormat.format(searchedL),
-                        })
-                  }
-                >
-                  <Slider
+                    label={t("themeEditor.overrides.labelTitle")}
+                    helper={t("themeEditor.overrides.labelHelper")}
+                  >
+                    <Segmented
+                      id="theme-editor-label"
+                      aria-label={t("themeEditor.overrides.labelTitle")}
+                      value={labelMode}
+                      onValueChange={(next) => setLabelMode(next as LabelMode)}
+                      options={[
+                        { value: "auto", label: t("themeEditor.overrides.labelAuto") },
+                        { value: "light", label: t("themeEditor.overrides.labelLight") },
+                        { value: "dark", label: t("themeEditor.overrides.labelDark") },
+                      ]}
+                    />
+                  </FormField>
+
+                  <FormField
                     id="theme-editor-dark-l"
-                    aria-label={t("themeEditor.overrides.darkTitle")}
-                    min={0}
-                    max={100}
-                    step={0.1}
-                    value={darkL ?? searchedL ?? 0}
-                    onChange={(next: number) => setDarkL(next)}
-                    tooltip={{ formatter: (value) => percentFormat.format(value) }}
-                    marks={searchedL === null ? undefined : { [searchedL]: "" }}
-                  />
-                </FormField>
-
-                <Flex gap="sm" wrap align="center">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={!darkOverridden}
-                    onClick={() => setDarkL(null)}
+                    label={t("themeEditor.overrides.darkTitle")}
+                    helper={
+                      searchedL === null
+                        ? t("themeEditor.overrides.darkNoParity")
+                        : t("themeEditor.overrides.darkHelper", {
+                            parity: percentFormat.format(searchedL),
+                          })
+                    }
                   >
-                    {t("themeEditor.overrides.darkReset")}
-                  </Button>
-                  <Badge tone={darkOverridden ? "warning" : "neutral"} variant="outline">
-                    {t(
-                      darkOverridden
-                        ? "themeEditor.overrides.darkAuthored"
-                        : "themeEditor.overrides.darkParity",
-                    )}
-                  </Badge>
+                    <Slider
+                      id="theme-editor-dark-l"
+                      aria-label={t("themeEditor.overrides.darkTitle")}
+                      min={0}
+                      max={100}
+                      step={0.1}
+                      value={darkL ?? searchedL ?? 0}
+                      onChange={(next: number) => setDarkL(next)}
+                      tooltip={{ formatter: (value) => percentFormat.format(value) }}
+                      marks={searchedL === null ? undefined : { [searchedL]: "" }}
+                    />
+                  </FormField>
+
+                  <Flex gap="sm" wrap align="center">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={!darkOverridden}
+                      onClick={() => setDarkL(null)}
+                    >
+                      {t("themeEditor.overrides.darkReset")}
+                    </Button>
+                    <Badge tone={darkOverridden ? "warning" : "neutral"} variant="outline">
+                      {t(
+                        darkOverridden
+                          ? "themeEditor.overrides.darkAuthored"
+                          : "themeEditor.overrides.darkParity",
+                      )}
+                    </Badge>
+                  </Flex>
                 </Flex>
-              </Flex>
+              </Form>
             </CardContent>
           </Card>
 

package/docs/general/button/examples/form-actions.tsx

@@ -1,4 +1,4 @@
-import { FormField, Input } from "@godxjp/ui/data-entry";
+import { Form, FormField, Input } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
 import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
 import {
@@ -65,20 +65,22 @@ export default function Demo() {
           </Flex>
         }
       >
-        <Flex direction="col" gap="md">
-          <FormField id="name" label="取引先名">
-            <Input id="name" defaultValue="株式会社ベトヤ" />
-          </FormField>
-          <FormField id="code" label="取引先コード">
-            <Input id="code" defaultValue="BTY-0012" />
-          </FormField>
-          <FormField id="contact" label="担当者">
-            <Input id="contact" defaultValue="グエン・ヴァン・A" />
-          </FormField>
-          <FormField id="email" label="メール">
-            <Input id="email" type="email" defaultValue="ke-toan@betoya.test" />
-          </FormField>
-        </Flex>
+        <Form>
+          <Flex direction="col" gap="md">
+            <FormField id="name" label="取引先名">
+              <Input id="name" defaultValue="株式会社ベトヤ" />
+            </FormField>
+            <FormField id="code" label="取引先コード">
+              <Input id="code" defaultValue="BTY-0012" />
+            </FormField>
+            <FormField id="contact" label="担当者">
+              <Input id="contact" defaultValue="グエン・ヴァン・A" />
+            </FormField>
+            <FormField id="email" label="メール">
+              <Input id="email" type="email" defaultValue="ke-toan@betoya.test" />
+            </FormField>
+          </Flex>
+        </Form>
       </PageContainer>
     </AppShell>
   );

package/docs/layout/auth-recovery/examples/password-recovery.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { Alert, AlertDescription, AlertTitle } from "@godxjp/ui/feedback";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Input, PasswordInput, PasswordStrength } from "@godxjp/ui/data-entry";
+import { Form, FormField, Input, PasswordInput, PasswordStrength } from "@godxjp/ui/data-entry";
 import { Button, Logo, Text } from "@godxjp/ui/general";
 import { AuthFooter, AuthShell, AuthStack, Flex } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
@@ -128,34 +128,36 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <AuthStack>
-              <FormField id="recovery-new-password" label="新しいパスワード" required>
-                <PasswordInput
-                  autoComplete="new-password"
-                  value={password}
-                  onChange={(event) => setPassword(event.target.value)}
-                />
-              </FormField>
-              <PasswordStrength value={password} />
-              <FormField
-                id="recovery-confirm-password"
-                label="新しいパスワード（確認）"
-                error="パスワードが一致しません。"
-                required
-              >
-                <PasswordInput
-                  autoComplete="new-password"
-                  value={confirmation}
-                  onChange={(event) => setConfirmation(event.target.value)}
-                />
-              </FormField>
-              <Button fullWidth>パスワードを更新</Button>
-              <Flex justify="between" gap="sm" wrap>
-                <Button variant="ghost" size="sm">
-                  サインインに戻る
-                </Button>
-              </Flex>
-            </AuthStack>
+            <Form>
+              <AuthStack>
+                <FormField id="recovery-new-password" label="新しいパスワード" required>
+                  <PasswordInput
+                    autoComplete="new-password"
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                  />
+                </FormField>
+                <PasswordStrength value={password} />
+                <FormField
+                  id="recovery-confirm-password"
+                  label="新しいパスワード（確認）"
+                  error="パスワードが一致しません。"
+                  required
+                >
+                  <PasswordInput
+                    autoComplete="new-password"
+                    value={confirmation}
+                    onChange={(event) => setConfirmation(event.target.value)}
+                  />
+                </FormField>
+                <Button fullWidth>パスワードを更新</Button>
+                <Flex justify="between" gap="sm" wrap>
+                  <Button variant="ghost" size="sm">
+                    サインインに戻る
+                  </Button>
+                </Flex>
+              </AuthStack>
+            </Form>
           </CardContent>
         </Card>
 

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

@@ -14,6 +14,7 @@ import {
   ListRow,
 } from "@godxjp/ui/data-display";
 import {
+  Form,
   Checkbox,
   Field,
   FormField,
@@ -137,91 +138,93 @@ export default function Demo() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <AuthStack>
-                <FormField id="reg-name" label="お名前" required>
-                  <Input id="reg-name" autoComplete="name" placeholder="山田 太郎" />
-                </FormField>
+              <Form>
+                <AuthStack>
+                  <FormField id="reg-name" label="お名前" required>
+                    <Input id="reg-name" autoComplete="name" placeholder="山田 太郎" />
+                  </FormField>
 
-                <FormField
-                  id="reg-email"
-                  label="メールアドレス"
-                  required
-                  helper="確認リンクの送信先になります。"
-                >
-                  <Input
+                  <FormField
                     id="reg-email"
-                    type="email"
-                    autoComplete="email"
-                    placeholder="you@example.com"
-                  />
-                </FormField>
+                    label="メールアドレス"
+                    required
+                    helper="確認リンクの送信先になります。"
+                  >
+                    <Input
+                      id="reg-email"
+                      type="email"
+                      autoComplete="email"
+                      placeholder="you@example.com"
+                    />
+                  </FormField>
 
-                <FormField id="reg-password" label="パスワード" required>
-                  <PasswordInput
-                    id="reg-password"
-                    autoComplete="new-password"
-                    value={password}
-                    onChange={(event) => setPassword(event.target.value)}
-                  />
-                </FormField>
+                  <FormField id="reg-password" label="パスワード" required>
+                    <PasswordInput
+                      id="reg-password"
+                      autoComplete="new-password"
+                      value={password}
+                      onChange={(event) => setPassword(event.target.value)}
+                    />
+                  </FormField>
 
-                {/* The strength meter is a real primitive — never a hand-rolled coloured bar. */}
-                <PasswordStrength value={password} />
+                  {/* The strength meter is a real primitive — never a hand-rolled coloured bar. */}
+                  <PasswordStrength value={password} />
 
-                <FormField
-                  id="reg-confirm"
-                  label="パスワード（確認）"
-                  required
-                  // The error is announced through the field's own aria-errormessage wiring, so
-                  // the mismatch is not communicated by colour alone.
-                  error={mismatch ? "パスワードが一致しません。" : undefined}
-                >
-                  <PasswordInput
+                  <FormField
                     id="reg-confirm"
-                    autoComplete="new-password"
-                    value={confirm}
-                    onChange={(event) => setConfirm(event.target.value)}
-                  />
-                </FormField>
+                    label="パスワード（確認）"
+                    required
+                    // The error is announced through the field's own aria-errormessage wiring, so
+                    // the mismatch is not communicated by colour alone.
+                    error={mismatch ? "パスワードが一致しません。" : undefined}
+                  >
+                    <PasswordInput
+                      id="reg-confirm"
+                      autoComplete="new-password"
+                      value={confirm}
+                      onChange={(event) => setConfirm(event.target.value)}
+                    />
+                  </FormField>
 
-                <Field id="reg-consent" label="利用規約とプライバシーポリシーに同意します">
-                  <Checkbox
-                    id="reg-consent"
-                    checked={consent}
-                    onCheckedChange={(next) => setConsent(next === true)}
-                  />
-                </Field>
+                  <Field id="reg-consent" label="利用規約とプライバシーポリシーに同意します">
+                    <Checkbox
+                      id="reg-consent"
+                      checked={consent}
+                      onCheckedChange={(next) => setConsent(next === true)}
+                    />
+                  </Field>
 
-                <Button
-                  loading={submitting}
-                  disabled={!consent || mismatch}
-                  onClick={() => {
-                    setSubmitting(true);
-                    setSubmitting(false);
-                    setStage("pending-email");
-                  }}
-                >
-                  アカウントを作成
-                </Button>
+                  <Button
+                    loading={submitting}
+                    disabled={!consent || mismatch}
+                    onClick={() => {
+                      setSubmitting(true);
+                      setSubmitting(false);
+                      setStage("pending-email");
+                    }}
+                  >
+                    アカウントを作成
+                  </Button>
 
-                {/* ── SOCIAL / PROVIDER ACTIONS — the documented "SocialLinks" composition.
+                  {/* ── SOCIAL / PROVIDER ACTIONS — the documented "SocialLinks" composition.
                        A divider + real outline Buttons. No new component: the package must not
                        invent which providers a product offers, in what order, or what consent
                        they imply. `disabled` / `loading` are the Button's own props. ── */}
-                <AuthDivider label="または" />
+                  <AuthDivider label="または" />
 
-                <Flex direction="col" gap="sm">
-                  {PROVIDERS.map((provider) => {
-                    const Icon = provider.icon;
-                    return (
-                      <Button key={provider.id} variant="outline" disabled={submitting}>
-                        <Icon aria-hidden="true" />
-                        {provider.label}
-                      </Button>
-                    );
-                  })}
-                </Flex>
-              </AuthStack>
+                  <Flex direction="col" gap="sm">
+                    {PROVIDERS.map((provider) => {
+                      const Icon = provider.icon;
+                      return (
+                        <Button key={provider.id} variant="outline" disabled={submitting}>
+                          <Icon aria-hidden="true" />
+                          {provider.label}
+                        </Button>
+                      );
+                    })}
+                  </Flex>
+                </AuthStack>
+              </Form>
             </CardContent>
           </Card>
         ) : (