@godxjp/ui 30.8.0 → 31.0.2

package/docs/data-entry/slider.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Slider } from "@godxjp/ui/data-entry";
+import { Form, FormField, Slider } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 import { Text } from "@godxjp/ui/general";
 
@@ -148,23 +148,25 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg">
-              <FormField id="bands" label={`区切り: ${bands.join(" / ")}`}>
-                <Slider
-                  range={{ editable: true, minCount: 1, maxCount: 4, draggableTrack: false }}
-                  value={bands}
-                  onChange={setBands}
-                  step={5}
-                />
-              </FormField>
-              <FormField id="scale" label="評価スケール (included={false})">
-                <Slider
-                  defaultValue={50}
-                  included={false}
-                  marks={{ 0: "低", 50: "中", 100: "高" }}
-                />
-              </FormField>
-            </ResponsiveGrid>
+            <Form>
+              <ResponsiveGrid columns={{ base: 1, md: 2 }} gap="lg">
+                <FormField id="bands" label={`区切り: ${bands.join(" / ")}`}>
+                  <Slider
+                    range={{ editable: true, minCount: 1, maxCount: 4, draggableTrack: false }}
+                    value={bands}
+                    onChange={setBands}
+                    step={5}
+                  />
+                </FormField>
+                <FormField id="scale" label="評価スケール (included={false})">
+                  <Slider
+                    defaultValue={50}
+                    included={false}
+                    marks={{ 0: "低", 50: "中", 100: "高" }}
+                  />
+                </FormField>
+              </ResponsiveGrid>
+            </Form>
           </CardContent>
         </Card>
 
@@ -177,29 +179,31 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg">
-              <FormField id="volume-vertical" label={`音量 (縦): ${volume}`}>
-                <Slider
-                  vertical
-                  value={volume}
-                  onChange={setVolume}
-                  marks={{ 0: "0", 50: "50", 100: "100" }}
-                  tooltip
-                />
-              </FormField>
-              <FormField id="countdown" label="残り日数 (reverse)">
-                <Slider
-                  reverse
-                  defaultValue={30}
-                  max={60}
-                  step={5}
-                  marks={{ 0: "0日", 30: "30日", 60: "60日" }}
-                />
-              </FormField>
-              <FormField id="locked-rate" label="確定済み税率 (変更不可)">
-                <Slider value={10} disabled min={0} max={20} step={1} />
-              </FormField>
-            </ResponsiveGrid>
+            <Form>
+              <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="lg">
+                <FormField id="volume-vertical" label={`音量 (縦): ${volume}`}>
+                  <Slider
+                    vertical
+                    value={volume}
+                    onChange={setVolume}
+                    marks={{ 0: "0", 50: "50", 100: "100" }}
+                    tooltip
+                  />
+                </FormField>
+                <FormField id="countdown" label="残り日数 (reverse)">
+                  <Slider
+                    reverse
+                    defaultValue={30}
+                    max={60}
+                    step={5}
+                    marks={{ 0: "0日", 30: "30日", 60: "60日" }}
+                  />
+                </FormField>
+                <FormField id="locked-rate" label="確定済み税率 (変更不可)">
+                  <Slider value={10} disabled min={0} max={20} step={1} />
+                </FormField>
+              </ResponsiveGrid>
+            </Form>
           </CardContent>
         </Card>
       </Flex>

package/docs/data-entry/textarea.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, Textarea } from "@godxjp/ui/data-entry";
+import { Form, FormField, Textarea } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
@@ -145,50 +145,52 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField
-                id="autogrow-ceiling"
-                label="上限あり (minRows=1 / maxRows=3)"
-                helper="4行目からは箱が伸びずに内部スクロールへ切り替わります。"
-              >
-                <Textarea
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField
                   id="autogrow-ceiling"
-                  autoGrow
-                  minRows={1}
-                  maxRows={3}
-                  defaultValue={"1行目\n2行目\n3行目\n4行目\n5行目\n6行目"}
-                />
-              </FormField>
-
-              <FormField
-                id="autogrow-floor"
-                label="下限あり (minRows=3)"
-                helper="空でも3行分の高さを保ちます。"
-              >
-                <Textarea
+                  label="上限あり (minRows=1 / maxRows=3)"
+                  helper="4行目からは箱が伸びずに内部スクロールへ切り替わります。"
+                >
+                  <Textarea
+                    id="autogrow-ceiling"
+                    autoGrow
+                    minRows={1}
+                    maxRows={3}
+                    defaultValue={"1行目\n2行目\n3行目\n4行目\n5行目\n6行目"}
+                  />
+                </FormField>
+
+                <FormField
                   id="autogrow-floor"
-                  autoGrow
-                  minRows={3}
-                  placeholder="社内メモ..."
-                  allowClear
-                />
-              </FormField>
-
-              <FormField
-                id="autogrow-unbounded"
-                label="上限なし (maxRows=0)"
-                helper="ページ側にスクロールを持つ画面でのみ使ってください。"
-              >
-                <Textarea
+                  label="下限あり (minRows=3)"
+                  helper="空でも3行分の高さを保ちます。"
+                >
+                  <Textarea
+                    id="autogrow-floor"
+                    autoGrow
+                    minRows={3}
+                    placeholder="社内メモ..."
+                    allowClear
+                  />
+                </FormField>
+
+                <FormField
                   id="autogrow-unbounded"
-                  autoGrow
-                  maxRows={0}
-                  defaultValue={
-                    "長文の下書きを最後まで見せたい画面向け。\n箱は内容に合わせて伸び続けます。"
-                  }
-                />
-              </FormField>
-            </Flex>
+                  label="上限なし (maxRows=0)"
+                  helper="ページ側にスクロールを持つ画面でのみ使ってください。"
+                >
+                  <Textarea
+                    id="autogrow-unbounded"
+                    autoGrow
+                    maxRows={0}
+                    defaultValue={
+                      "長文の下書きを最後まで見せたい画面向け。\n箱は内容に合わせて伸び続けます。"
+                    }
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
 

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { FormField, TimePicker, TimeRangePicker } from "@godxjp/ui/data-entry";
+import { Form, FormField, TimePicker, TimeRangePicker } from "@godxjp/ui/data-entry";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
@@ -51,28 +51,30 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" gap="md" wrap>
-              <FormField id="shift-start" label="出勤時刻">
-                <TimePicker
-                  id="shift-start"
-                  name="shift_start"
-                  value={shiftStart}
-                  onValueChange={setShiftStart}
-                  minuteStep={15}
-                  className="w-36"
-                />
-              </FormField>
-              <FormField id="shift-end" label="退勤時刻">
-                <TimePicker
-                  id="shift-end"
-                  name="shift_end"
-                  value={shiftEnd}
-                  onValueChange={setShiftEnd}
-                  minuteStep={15}
-                  className="w-36"
-                />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="row" gap="md" wrap>
+                <FormField id="shift-start" label="出勤時刻">
+                  <TimePicker
+                    id="shift-start"
+                    name="shift_start"
+                    value={shiftStart}
+                    onValueChange={setShiftStart}
+                    minuteStep={15}
+                    className="w-36"
+                  />
+                </FormField>
+                <FormField id="shift-end" label="退勤時刻">
+                  <TimePicker
+                    id="shift-end"
+                    name="shift_end"
+                    value={shiftEnd}
+                    onValueChange={setShiftEnd}
+                    minuteStep={15}
+                    className="w-36"
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
 
@@ -135,30 +137,32 @@ export default function Demo() {
             <CardTitle level={2}>入力状態</CardTitle>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="md">
-              <FormField id="readonly-time" label="選択のみ">
-                <TimePicker
-                  id="readonly-time"
-                  inputReadOnly
-                  defaultValue="09:00"
-                  allowClear={false}
-                  size="sm"
-                  variant="filled"
-                />
-              </FormField>
-              <FormField id="invalid-time" label="入力を保持">
-                <TimePicker id="invalid-time" preserveInvalidOnBlur status="error" size="lg" />
-              </FormField>
-              <FormField id="quiet-time" label="任意時刻">
-                <TimePicker
-                  id="quiet-time"
-                  variant="borderless"
-                  status="warning"
-                  placement="top-start"
-                  showNow={false}
-                />
-              </FormField>
-            </Flex>
+            <Form>
+              <Flex direction="col" gap="md">
+                <FormField id="readonly-time" label="選択のみ">
+                  <TimePicker
+                    id="readonly-time"
+                    inputReadOnly
+                    defaultValue="09:00"
+                    allowClear={false}
+                    size="sm"
+                    variant="filled"
+                  />
+                </FormField>
+                <FormField id="invalid-time" label="入力を保持">
+                  <TimePicker id="invalid-time" preserveInvalidOnBlur status="error" size="lg" />
+                </FormField>
+                <FormField id="quiet-time" label="任意時刻">
+                  <TimePicker
+                    id="quiet-time"
+                    variant="borderless"
+                    status="warning"
+                    placement="top-start"
+                    showNow={false}
+                  />
+                </FormField>
+              </Flex>
+            </Form>
           </CardContent>
         </Card>
         <Card>

package/docs/feedback/sheet.tsx

@@ -20,6 +20,7 @@ import {
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import {
+  Form,
   FormField,
   Input,
   Select,
@@ -139,69 +140,71 @@ export default function Demo() {
                   extra={<Badge tone="info">3 条件</Badge>}
                 />
                 <SheetBody>
-                  <Flex direction="col" gap="md">
-                    <FormField id="filter-account" label="勘定科目">
-                      <Select aria-label="勘定科目" value={account} onValueChange={setAccount}>
-                        <SelectTrigger id="filter-account">
-                          <SelectValue placeholder="すべての勘定科目" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="all">すべての勘定科目</SelectItem>
-                          <SelectItem value="cash">現金</SelectItem>
-                          <SelectItem value="sales">売上高</SelectItem>
-                          <SelectItem value="expense">旅費交通費</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormField>
-                    <FormField id="filter-status" label="ステータス">
-                      <Select aria-label="ステータス" value={status} onValueChange={setStatus}>
-                        <SelectTrigger id="filter-status">
-                          <SelectValue placeholder="すべてのステータス" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="all">すべてのステータス</SelectItem>
-                          <SelectItem value="draft">下書き</SelectItem>
-                          <SelectItem value="approved">承認済み</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormField>
-                    <FormField id="filter-source" label="ソース">
-                      <Select aria-label="ソース" value={source} onValueChange={setSource}>
-                        <SelectTrigger id="filter-source">
-                          <SelectValue placeholder="すべてのソース" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="all">すべてのソース</SelectItem>
-                          <SelectItem value="manual">手入力</SelectItem>
-                          <SelectItem value="import">インポート</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </FormField>
-                    <FormField id="filter-amount-min" label="金額">
-                      <Flex direction="row" gap="sm" align="center">
-                        <Input
-                          id="filter-amount-min"
-                          className="min-w-0 flex-1"
-                          inputMode="numeric"
-                          placeholder="最小"
-                          value={minAmount}
-                          onChange={(e) => setMinAmount(e.target.value)}
-                        />
-                        <Text tone="muted" aria-hidden="true">
-                          –
-                        </Text>
-                        <Input
-                          id="filter-amount-max"
-                          aria-label="最大金額"
-                          className="min-w-0 flex-1"
-                          inputMode="numeric"
-                          placeholder="最大"
-                          value={maxAmount}
-                          onChange={(e) => setMaxAmount(e.target.value)}
-                        />
-                      </Flex>
-                    </FormField>
-                  </Flex>
+                  <Form>
+                    <Flex direction="col" gap="md">
+                      <FormField id="filter-account" label="勘定科目">
+                        <Select aria-label="勘定科目" value={account} onValueChange={setAccount}>
+                          <SelectTrigger id="filter-account">
+                            <SelectValue placeholder="すべての勘定科目" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="all">すべての勘定科目</SelectItem>
+                            <SelectItem value="cash">現金</SelectItem>
+                            <SelectItem value="sales">売上高</SelectItem>
+                            <SelectItem value="expense">旅費交通費</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormField>
+                      <FormField id="filter-status" label="ステータス">
+                        <Select aria-label="ステータス" value={status} onValueChange={setStatus}>
+                          <SelectTrigger id="filter-status">
+                            <SelectValue placeholder="すべてのステータス" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="all">すべてのステータス</SelectItem>
+                            <SelectItem value="draft">下書き</SelectItem>
+                            <SelectItem value="approved">承認済み</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormField>
+                      <FormField id="filter-source" label="ソース">
+                        <Select aria-label="ソース" value={source} onValueChange={setSource}>
+                          <SelectTrigger id="filter-source">
+                            <SelectValue placeholder="すべてのソース" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="all">すべてのソース</SelectItem>
+                            <SelectItem value="manual">手入力</SelectItem>
+                            <SelectItem value="import">インポート</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </FormField>
+                      <FormField id="filter-amount-min" label="金額">
+                        <Flex direction="row" gap="sm" align="center">
+                          <Input
+                            id="filter-amount-min"
+                            className="min-w-0 flex-1"
+                            inputMode="numeric"
+                            placeholder="最小"
+                            value={minAmount}
+                            onChange={(e) => setMinAmount(e.target.value)}
+                          />
+                          <Text tone="muted" aria-hidden="true">
+                            –
+                          </Text>
+                          <Input
+                            id="filter-amount-max"
+                            aria-label="最大金額"
+                            className="min-w-0 flex-1"
+                            inputMode="numeric"
+                            placeholder="最大"
+                            value={maxAmount}
+                            onChange={(e) => setMaxAmount(e.target.value)}
+                          />
+                        </Flex>
+                      </FormField>
+                    </Flex>
+                  </Form>
                 </SheetBody>
                 <SheetFooter>
                   <Button
@@ -245,22 +248,24 @@ export default function Demo() {
                   <SheetDescription>取引先の基本情報を編集します。</SheetDescription>
                 </SheetHeader>
                 <SheetBody>
-                  <Flex direction="col" gap="md">
-                    <FormField id="edit-company" label="会社名" required>
-                      <Input
-                        id="edit-company"
-                        value={companyName}
-                        onChange={(e) => setCompanyName(e.target.value)}
-                      />
-                    </FormField>
-                    <FormField id="edit-registration" label="登録番号" helper="T + 13桁">
-                      <Input
-                        id="edit-registration"
-                        value={registration}
-                        onChange={(e) => setRegistration(e.target.value)}
-                      />
-                    </FormField>
-                  </Flex>
+                  <Form>
+                    <Flex direction="col" gap="md">
+                      <FormField id="edit-company" label="会社名" required>
+                        <Input
+                          id="edit-company"
+                          value={companyName}
+                          onChange={(e) => setCompanyName(e.target.value)}
+                        />
+                      </FormField>
+                      <FormField id="edit-registration" label="登録番号" helper="T + 13桁">
+                        <Input
+                          id="edit-registration"
+                          value={registration}
+                          onChange={(e) => setRegistration(e.target.value)}
+                        />
+                      </FormField>
+                    </Flex>
+                  </Form>
                 </SheetBody>
                 <SheetFooter>
                   <Button variant="outline" onClick={() => setEditOpen(false)}>