@godxjp/ui 30.8.0 → 31.0.2

package/dist/styles/vendor-day-picker.css

@@ -0,0 +1,2 @@
+
+@import "react-day-picker/style.css" layer(vendor);

package/dist/styles/vendor-sonner.css

@@ -0,0 +1,2 @@
+
+@import "sonner/dist/styles.css" layer(vendor);

package/docs/CONSUMER-RULES.md

@@ -6,7 +6,7 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
 4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`. A LIST of those rows is `<Flex as="ul" marker="none" direction="col" gap="none">` with `<ListRow as="li">` children — `marker="none"` keeps the `<ul>`, the `<li>` semantics and the gap token while dropping the bullet and the indent. Never a raw `<ul>`/`<ol>` (it carries no gap token), never `<div role="list">` + `<div role="listitem">`, and never a wrapper around each row: the divider is `:not(:last-child)` among siblings, so a row alone in its own wrapper is always the last one and EVERY divider disappears silently. A bulleted prose list is the same `<Flex as="ul">` without `marker`.
-5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below.
+5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below. **Fields live in a `<Form layout="horizontal" labelWidth controlWidth>`** — never a group of `FormField`s without one, never a hand-rolled `<Flex>` row of fields (a row that belongs together is `<SpaceCompact>` or `<Form columns>`); size each control for its content with `controlWidth` (GOV.UK text-input width: a port ~7rem, a short enum ~10rem); three or more fields is a page, not a Dialog. The audit rules are `formfield-needs-form`, `dialog-form-too-big` and `select-width-hint`. **A case the kit cannot express is an issue, not a hand-roll:** open it on godx-jp/godxjp-ui, use the nearest valid composition, and mark it `// TODO(godxjp-ui#<n>)` (gh#998).
 6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`. A STANDALONE glyph is `<Icon as={Lock} size="sm" tone="muted" />` from `@godxjp/ui/general`: a bare lucide icon carries its own `width="24" height="24"` and only four places re-size it for you (`Button`, a `DropdownMenuItem`, a `TopbarItem`, a `ListRow` leading slot), so everywhere else — in a `Text`, a table cell, an `<a>` — it draws at 24px beside 14px type. `size-4` and `w-[16px]` are closed to you by rules 3 and 8, and `size={16}` hard-codes a number the theme owns; `Icon` puts the glyph on the `--icon-size-*` scale (`2xs…4xl`) instead, and is `aria-hidden` unless you give it a `label` (then it is `role="img"` with that name). The audit rule is `lucide-icon-needs-size`.
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.

package/docs/data-display/permission-matrix.tsx

@@ -17,7 +17,7 @@ import {
   CardTitle,
   PermissionMatrix,
 } 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 { Flex, PageContainer } from "@godxjp/ui/layout";
 import { grantKey } from "@godxjp/ui/lib/permission-grid";
 
@@ -114,35 +114,37 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Flex direction="col" gap="md">
-              <Flex direction="row" wrap align="end" gap="md">
-                {/* Bare Select has NO accessible name (axe button-name) — the compare
+              <Form>
+                <Flex direction="row" wrap align="end" gap="md">
+                  {/* Bare Select has NO accessible name (axe button-name) — the compare
                     pickers are labelled through FormField, exactly as the showcase does. */}
-                <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-doc-diff-only"
-                    size="sm"
-                    checked={diffOnly}
-                    onCheckedChange={setDiffOnly}
-                  />
-                  <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
+                  <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-doc-diff-only"
+                      size="sm"
+                      checked={diffOnly}
+                      onCheckedChange={setDiffOnly}
+                    />
+                    <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
+                  </Flex>
                 </Flex>
-              </Flex>
+              </Form>
               <Card variant="outline" className="overflow-hidden">
                 <CardContent flush>
                   <div>

package/docs/data-entry/cascader.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Cascader, FormField } from "@godxjp/ui/data-entry";
+import { Form, Cascader, FormField } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import type { TreeOptionProp } from "@godxjp/ui/props";
 
@@ -351,25 +351,27 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="disabled-empty" label="無効（未選択）">
-                <Cascader
-                  id="disabled-empty"
-                  options={EXPENSE_CATEGORIES}
-                  disabled
-                  placeholder="カテゴリを選択..."
-                />
-              </FormField>
-              <FormField id="disabled-selected" label="無効（選択済み）">
-                <Cascader
-                  id="disabled-selected"
-                  options={EXPENSE_CATEGORIES}
-                  disabled
-                  defaultValue={["operating", "admin", "salary"]}
-                  placeholder="カテゴリを選択..."
-                />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField id="disabled-empty" label="無効（未選択）">
+                  <Cascader
+                    id="disabled-empty"
+                    options={EXPENSE_CATEGORIES}
+                    disabled
+                    placeholder="カテゴリを選択..."
+                  />
+                </FormField>
+                <FormField id="disabled-selected" label="無効（選択済み）">
+                  <Cascader
+                    id="disabled-selected"
+                    options={EXPENSE_CATEGORIES}
+                    disabled
+                    defaultValue={["operating", "admin", "salary"]}
+                    placeholder="カテゴリを選択..."
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
       </Flex>

package/docs/data-entry/date-picker.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ja } from "date-fns/locale";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { DatePicker, FormField } from "@godxjp/ui/data-entry";
+import { Form, DatePicker, FormField } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import type { DateRange } from "react-day-picker";
 
@@ -65,23 +65,25 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex gap="lg" wrap>
-              <FormField id="ruled-date" label="罫線あり (既定)">
-                <DatePicker
-                  id="ruled-date"
-                  name="ruled_date"
-                  defaultValue={new Date(2026, 0, 15)}
-                />
-              </FormField>
-              <FormField id="unruled-date" label="罫線なし (bordered={false})">
-                <DatePicker
-                  id="unruled-date"
-                  name="unruled_date"
-                  defaultValue={new Date(2026, 0, 15)}
-                  bordered={false}
-                />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex gap="lg" wrap>
+                <FormField id="ruled-date" label="罫線あり (既定)">
+                  <DatePicker
+                    id="ruled-date"
+                    name="ruled_date"
+                    defaultValue={new Date(2026, 0, 15)}
+                  />
+                </FormField>
+                <FormField id="unruled-date" label="罫線なし (bordered={false})">
+                  <DatePicker
+                    id="unruled-date"
+                    name="unruled_date"
+                    defaultValue={new Date(2026, 0, 15)}
+                    bordered={false}
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
 
@@ -231,31 +233,33 @@ export default function Demo() {
             <CardTitle level={2}>表示形式と元号</CardTitle>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="formatted-date" label="契約日">
-                <DatePicker
-                  id="formatted-date"
-                  name="contract"
-                  defaultValue={new Date(2026, 8, 9)}
-                  format="yyyy年MM月dd日"
-                />
-              </FormField>
-              <FormField id="era-date" label="和暦">
-                <DatePicker
-                  id="era-date"
-                  name="era"
-                  defaultValue={new Date(2026, 8, 9)}
-                  format={{
-                    calendar: "japanese",
-                    era: "long",
-                    year: "numeric",
-                    month: "long",
-                    day: "numeric",
-                  }}
-                  inputReadOnly
-                />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField id="formatted-date" label="契約日">
+                  <DatePicker
+                    id="formatted-date"
+                    name="contract"
+                    defaultValue={new Date(2026, 8, 9)}
+                    format="yyyy年MM月dd日"
+                  />
+                </FormField>
+                <FormField id="era-date" label="和暦">
+                  <DatePicker
+                    id="era-date"
+                    name="era"
+                    defaultValue={new Date(2026, 8, 9)}
+                    format={{
+                      calendar: "japanese",
+                      era: "long",
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    }}
+                    inputReadOnly
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
         <Card>

package/docs/data-entry/form-field/examples/a11y-contract.tsx

@@ -96,53 +96,55 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="ac-account" label="勘定科目" required helper="仕訳で使用する科目">
-                <Select
-                  id="ac-account"
-                  name="account"
-                  showSearch
-                  options={[
-                    { value: "sales", label: "売上高" },
-                    { value: "rent", label: "地代家賃" },
-                    { value: "misc", label: "雑費" },
-                  ]}
-                  onValueChange={() => {}}
-                />
-              </FormField>
-              <FormField id="ac-currency" label="通貨" helper="ISO 4217">
-                <Select
-                  id="ac-currency"
-                  name="currency"
-                  options={CURRENCIES}
-                  onValueChange={() => {}}
-                />
-              </FormField>
-              <FormField id="ac-region" label="地域" helper="都道府県まで選択">
-                <Cascader id="ac-region" options={REGIONS} onValueChange={() => {}} />
-              </FormField>
-              <FormField id="ac-category" label="カテゴリ" helper="ツリーから選択">
-                <TreeSelect id="ac-category" treeData={CATEGORIES} onValueChange={() => {}} />
-              </FormField>
-              <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
-                <DatePicker id="ac-date" name="date" />
-              </FormField>
-              <FormField id="ac-month" label="対象月" helper="yyyy-MM">
-                <DatePicker picker="month" id="ac-month" name="month" />
-              </FormField>
-              <FormField id="ac-time" label="締め時刻" helper="24時間表記">
-                <TimePicker id="ac-time" name="time" />
-              </FormField>
-              <FormField id="ac-period" label="対象期間" helper="開始日と終了日">
-                <DatePicker range id="ac-period" name="period" />
-              </FormField>
-              <FormField id="ac-color" label="タグ色" helper="16進カラー">
-                <ColorPicker id="ac-color" onValueChange={() => {}} />
-              </FormField>
-              <FormField id="ac-search" label="取引先検索" helper="名称の一部で検索">
-                <SearchInput id="ac-search" />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField id="ac-account" label="勘定科目" required helper="仕訳で使用する科目">
+                  <Select
+                    id="ac-account"
+                    name="account"
+                    showSearch
+                    options={[
+                      { value: "sales", label: "売上高" },
+                      { value: "rent", label: "地代家賃" },
+                      { value: "misc", label: "雑費" },
+                    ]}
+                    onValueChange={() => {}}
+                  />
+                </FormField>
+                <FormField id="ac-currency" label="通貨" helper="ISO 4217">
+                  <Select
+                    id="ac-currency"
+                    name="currency"
+                    options={CURRENCIES}
+                    onValueChange={() => {}}
+                  />
+                </FormField>
+                <FormField id="ac-region" label="地域" helper="都道府県まで選択">
+                  <Cascader id="ac-region" options={REGIONS} onValueChange={() => {}} />
+                </FormField>
+                <FormField id="ac-category" label="カテゴリ" helper="ツリーから選択">
+                  <TreeSelect id="ac-category" treeData={CATEGORIES} onValueChange={() => {}} />
+                </FormField>
+                <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
+                  <DatePicker id="ac-date" name="date" />
+                </FormField>
+                <FormField id="ac-month" label="対象月" helper="yyyy-MM">
+                  <DatePicker picker="month" id="ac-month" name="month" />
+                </FormField>
+                <FormField id="ac-time" label="締め時刻" helper="24時間表記">
+                  <TimePicker id="ac-time" name="time" />
+                </FormField>
+                <FormField id="ac-period" label="対象期間" helper="開始日と終了日">
+                  <DatePicker range id="ac-period" name="period" />
+                </FormField>
+                <FormField id="ac-color" label="タグ色" helper="16進カラー">
+                  <ColorPicker id="ac-color" onValueChange={() => {}} />
+                </FormField>
+                <FormField id="ac-search" label="取引先検索" helper="名称の一部で検索">
+                  <SearchInput id="ac-search" />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
 
@@ -155,36 +157,38 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField
-                id="ac-method"
-                label="支払方法"
-                required
-                error="支払方法を選択してください"
-              >
-                <RadioGroup
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField
                   id="ac-method"
-                  options={[
-                    { value: "bank", label: "銀行振込" },
-                    { value: "card", label: "クレジットカード" },
-                    { value: "cash", label: "現金" },
-                  ]}
-                  onValueChange={() => {}}
-                />
-              </FormField>
-              <FormField id="ac-tags" label="タグ" helper="複数選択できます">
-                <CheckboxGroup
-                  id="ac-tags"
-                  orientation="horizontal"
-                  options={[
-                    { value: "urgent", label: "至急" },
-                    { value: "review", label: "要確認" },
-                    { value: "archived", label: "アーカイブ" },
-                  ]}
-                  onValueChange={() => {}}
-                />
-              </FormField>
-            </Flex>
+                  label="支払方法"
+                  required
+                  error="支払方法を選択してください"
+                >
+                  <RadioGroup
+                    id="ac-method"
+                    options={[
+                      { value: "bank", label: "銀行振込" },
+                      { value: "card", label: "クレジットカード" },
+                      { value: "cash", label: "現金" },
+                    ]}
+                    onValueChange={() => {}}
+                  />
+                </FormField>
+                <FormField id="ac-tags" label="タグ" helper="複数選択できます">
+                  <CheckboxGroup
+                    id="ac-tags"
+                    orientation="horizontal"
+                    options={[
+                      { value: "urgent", label: "至急" },
+                      { value: "review", label: "要確認" },
+                      { value: "archived", label: "アーカイブ" },
+                    ]}
+                    onValueChange={() => {}}
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
 

package/docs/data-entry/form-field/examples/create-form.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
+import { Form, Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
 import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
 import {
@@ -69,36 +69,38 @@ export default function Demo() {
           </Flex>
         }
       >
-        <Flex direction="col" gap="md" className="max-w-2xl">
-          <FormField id="cf-name" label="取引先名" required helper="最大50文字">
-            <Input id="cf-name" placeholder="株式会社ベトヤ" />
-          </FormField>
-          <FormField id="cf-code" label="取引先コード" required helper="一意のコードを入力">
-            <Input id="cf-code" placeholder="BTY-0012" />
-          </FormField>
-          <FormField id="cf-type" label="区分">
-            <Select
-              id="cf-type"
-              name="type"
-              value={type}
-              onValueChange={setType}
-              options={[
-                { value: "corp", label: "法人" },
-                { value: "indiv", label: "個人事業主" },
-              ]}
-            />
-          </FormField>
-          <FormField id="cf-memo" label="メモ" helper="任意">
-            <Textarea id="cf-memo" placeholder="例: 4月分から取引開始" />
-          </FormField>
-          <Field
-            id="cf-active"
-            label="取引を有効にする"
-            description="無効にすると新規取引を登録できません"
-          >
-            <Switch id="cf-active" defaultChecked />
-          </Field>
-        </Flex>
+        <Form>
+          <Flex direction="col" gap="md" className="max-w-2xl">
+            <FormField id="cf-name" label="取引先名" required helper="最大50文字">
+              <Input id="cf-name" placeholder="株式会社ベトヤ" />
+            </FormField>
+            <FormField id="cf-code" label="取引先コード" required helper="一意のコードを入力">
+              <Input id="cf-code" placeholder="BTY-0012" />
+            </FormField>
+            <FormField id="cf-type" label="区分">
+              <Select
+                id="cf-type"
+                name="type"
+                value={type}
+                onValueChange={setType}
+                options={[
+                  { value: "corp", label: "法人" },
+                  { value: "indiv", label: "個人事業主" },
+                ]}
+              />
+            </FormField>
+            <FormField id="cf-memo" label="メモ" helper="任意">
+              <Textarea id="cf-memo" placeholder="例: 4月分から取引開始" />
+            </FormField>
+            <Field
+              id="cf-active"
+              label="取引を有効にする"
+              description="無効にすると新規取引を登録できません"
+            >
+              <Switch id="cf-active" defaultChecked />
+            </Field>
+          </Flex>
+        </Form>
       </PageContainer>
     </AppShell>
   );