@godxjp/ui 21.0.0 → 23.0.0

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

@@ -4,11 +4,14 @@ 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 { Flex, PageContainer } from "@godxjp/ui/layout";
+import type { DateRange } from "react-day-picker";
 
 /**
- * DatePicker — WAI-ARIA date combobox with a real typeable ISO-8601 input.
- * Always give it a `name` for form submission. Use `fromDate`/`toDate` to
- * constrain the selectable range. Never hand-roll a date input + calendar.
+ * DatePicker — ONE date control. `picker` sets the granularity (day · week · month · quarter ·
+ * year), `range` turns it into a two-endpoint field, `multiple` into a set. Always give it a
+ * `name` for form submission; it emits ISO-8601 at the picker's own precision. Use
+ * `minDate`/`maxDate` to constrain what is selectable. Never hand-roll a date input + calendar,
+ * and never compose two DatePickers side-by-side to fake a range — that is `range`.
  * Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
@@ -17,6 +20,11 @@ export default function Demo() {
   const [closingDate, setClosingDate] = useState<Date | undefined>(undefined);
   const [meetingDate, setMeetingDate] = useState<Date | undefined>(new Date(2026, 5, 25));
   const [settlementDate, setSettlementDate] = useState<Date | undefined>(undefined);
+  const [period, setPeriod] = useState<DateRange | undefined>({
+    from: new Date(2026, 3, 1),
+    to: new Date(2027, 2, 31),
+  });
+  const [term, setTerm] = useState<DateRange | undefined>(undefined);
 
   return (
     <PageContainer
@@ -33,8 +41,7 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens the calendar before scanning. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"
@@ -271,6 +278,138 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間 (range)</CardTitle>
+            <CardDescription>
+              range を付けると値は DateRange になり、開始/終了の 2 入力を 1
+              つのコントロールにまとめる。 name=&#34;period&#34; は period_from / period_to として
+              ISO 送信される。 開始 &gt; 終了で入力しても order (既定 true) が昇順に正規化する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="period" label="会計期間" required>
+              <DatePicker
+                range
+                id="period"
+                name="period"
+                value={period}
+                onValueChange={setPeriod}
+                minDate={new Date(2020, 0, 1)}
+                maxDate={new Date(2030, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>月次の期間 (range × picker)</CardTitle>
+            <CardDescription>
+              range と picker は直交する。picker=&#34;month&#34; の期間は月グリッドで選び、
+              term_from / term_to を ISO yyyy-MM で送信する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="term" label="対象期間">
+              <DatePicker
+                range
+                picker="month"
+                id="term"
+                name="term"
+                value={term}
+                onValueChange={setTerm}
+                minDate={new Date(2024, 0, 1)}
+                maxDate={new Date(2027, 11, 31)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>期間プリセットと確定</CardTitle>
+            <CardDescription>
+              presets · needConfirm · allowEmpty は range でも同じ綴りで効く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="preset-range" label="集計期間">
+              <DatePicker
+                range
+                id="preset-range"
+                name="report"
+                format="yyyy/MM/dd"
+                needConfirm
+                allowEmpty={[false, true]}
+                showWeek
+                minDate={new Date(2026, 0, 1)}
+                maxDate={new Date(2026, 11, 31)}
+                presets={[
+                  {
+                    label: "9月",
+                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>パネルの初期表示 (defaultPickerValue)</CardTitle>
+            <CardDescription>
+              値とは独立に「パネルがどの期間を開くか」を指定する。会計年度の開始月で開く、
+              編集中の行の月で開く、といった要求はこれでしか表現できない。antd と同じく
+              開くたびに再適用される。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="fiscal-open" label="会計年度開始月">
+              <DatePicker
+                id="fiscal-open"
+                name="fiscal_open"
+                picker="month"
+                defaultPickerValue={new Date(2027, 3, 1)}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>片側だけ固定した期間</CardTitle>
+            <CardDescription>
+              range のとき disabled は [from, to] のタプルを取り、片方だけロックできる。
+              「開始日は契約で確定、終了日だけ交渉中」がこれで表現できる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="contract-period" label="契約期間">
+              <DatePicker
+                range
+                id="contract-period"
+                name="contract_period"
+                defaultValue={{ from: new Date(2026, 3, 1), to: new Date(2027, 2, 31) }}
+                disabled={[true, false]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>disabled な期間</CardTitle>
+            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="locked-period" label="確定期間">
+              <DatePicker
+                range
+                id="locked-period"
+                name="locked_period"
+                value={{ from: new Date(2025, 3, 1), to: new Date(2026, 2, 31) }}
+                disabled
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-entry/form/examples/invoice-form.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import {
   Cascader,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormField,
@@ -294,7 +293,8 @@ export default function Demo() {
                     />
                   </FormField>
                   <FormField id="iv-period" label="対象期間">
-                    <DateRangePicker
+                    <DatePicker
+                      range
                       id="iv-period"
                       name="period"
                       value={v.period}

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

@@ -5,11 +5,9 @@ import {
   CheckboxGroup,
   ColorPicker,
   DatePicker,
-  DateRangePicker,
   Form,
   FormField,
   Input,
-  MonthPicker,
   RadioGroup,
   SearchInput,
   Select,
@@ -129,14 +127,14 @@ export default function Demo() {
               <FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
                 <DatePicker id="ac-date" name="date" />
               </FormField>
-              <FormField id="ac-month" label="対象月" helper="yyyy/MM">
-                <MonthPicker id="ac-month" name="month" />
+              <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="開始日と終了日">
-                <DateRangePicker id="ac-period" name="period" />
+                <DatePicker range id="ac-period" name="period" />
               </FormField>
               <FormField id="ac-color" label="タグ色" helper="16進カラー">
                 <ColorPicker id="ac-color" onValueChange={() => {}} />

package/docs/data-entry/form.tsx

@@ -5,7 +5,6 @@ import {
   Checkbox,
   CheckboxGroup,
   DatePicker,
-  DateRangePicker,
   Field,
   Form,
   FormErrors,
@@ -425,7 +424,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>日時系 · DatePicker / DateRangePicker / TimePicker</CardTitle>
+            <CardTitle level={2}>日時系 · DatePicker / DatePicker range / TimePicker</CardTitle>
             <CardDescription>
               単一日付・期間・時刻。ISO-8601 / IANA タイムゾーンに準拠し locale
               連動でフォーマットする。
@@ -483,12 +482,13 @@ export default function Demo() {
                 />
               </FormField>
               <FormField id="f-period" label="会計期間" colSpan={2}>
-                <DateRangePicker
+                <DatePicker
+                  range
                   id="f-period"
                   name="period"
                   value={period}
                   onValueChange={setPeriod}
-                  // 土日は選べない。fromDate/toDate では表せない規則。
+                  // 土日は選べない。minDate/maxDate では表せない規則。
                   disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
                 />
               </FormField>

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

@@ -38,8 +38,11 @@ export default function Demo() {
             <CardDescription>6スロット 1グループ · ペースト・矢印キー操作に対応。</CardDescription>
           </CardHeader>
           <CardContent>
-            <FormField id="email-otp" label="認証コード" required>
-              <InputOTP maxLength={6} value={emailCode} onChange={setEmailCode}>
+            {/* この行の id は FIELD ではなく CONTROL 側にある。FormField はその id をそのまま
+                使い、ラベルのクリックもその id を見る（gh#477：以前は FormField 自身の id を
+                見ていたので、両者が食い違った瞬間にラベルがどこも指さなくなった）。 */}
+            <FormField label="認証コード" required>
+              <InputOTP id="email-otp" maxLength={6} value={emailCode} onChange={setEmailCode}>
                 <InputOTPGroup>
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />

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

@@ -223,6 +223,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* prefix / suffix — all THREE combinations, because the two-affix case is the only one
+            that used to be exercised and the suffix-only one is where the bug lived. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>prefix · suffix · 単位つきの数値</CardTitle>
+            <CardDescription>
+              通貨記号や単位はフィールドの内側に重ねる装飾。読み上げからは外れる (aria-hidden)
+              ので、意味は必ずラベル側に置く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" id="number-input-affixes">
+              <FormField id="ni-prefix" label="金額（前置き）">
+                <NumberInput id="ni-prefix" prefix="¥" defaultValue={1980} aria-label="金額" />
+              </FormField>
+              <FormField id="ni-suffix" label="日数（後置き）">
+                <NumberInput id="ni-suffix" suffix="日" defaultValue={7} aria-label="日数" />
+              </FormField>
+              <FormField id="ni-both" label="率（前後）">
+                <NumberInput
+                  id="ni-both"
+                  prefix="+"
+                  suffix="%"
+                  defaultValue={12}
+                  aria-label="率"
+                />
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <Heading level={2}>キーボード操作</Heading>

package/docs/data-entry/segmented.tsx

@@ -1,8 +1,15 @@
 import { useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { FormField, Segmented } from "@godxjp/ui/data-entry";
-import { Text } from "@godxjp/ui/general";
+import { Text, VisuallyHidden } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { CalendarDays, Columns3, LayoutList, Monitor, Moon, Sun } from "lucide-react";
 
@@ -84,6 +91,140 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card id="four-with-counts">
+          <CardHeader>
+            <CardTitle level={2}>4 択 + 件数（スマホ幅では折り返す）</CardTitle>
+            <CardDescription>
+              一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
+              ます — ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Segmented
+              aria-label="状態"
+              defaultValue="all"
+              options={[
+                { value: "all", label: "すべて", count: 128 },
+                { value: "active", label: "実習中", count: 96 },
+                { value: "pending", label: "申請中", count: 12 },
+                { value: "gone", label: "失踪・帰国", count: 0 },
+              ].map(({ value, label, count }) => ({
+                value,
+                label: (
+                  <>
+                    {label}
+                    <Badge as="span" variant="secondary">
+                      {count}
+                    </Badge>
+                  </>
+                ),
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · vertical · block</CardTitle>
+            <CardDescription>
+              size は 3 段（sm / md / lg）。トラックの高さは --control-height そのもので、
+              MobileShell のようにその変数をスコープする領域では自動的にタッチ段（44px）になります。
+              vertical では 1 行ぶんが 1 コントロールの高さになります — 横 1 行のときだけトラック
+              内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md" align="start">
+              <Segmented
+                aria-label="サイズ sm"
+                size="sm"
+                defaultValue="a"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="サイズ md"
+                defaultValue="b"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="サイズ lg"
+                size="lg"
+                defaultValue="c"
+                options={[
+                  { value: "a", label: "小" },
+                  { value: "b", label: "中" },
+                  { value: "c", label: "大" },
+                ]}
+              />
+              <Segmented
+                aria-label="縦積み"
+                vertical
+                block
+                defaultValue="ok"
+                options={[
+                  { value: "ok", label: "実施" },
+                  { value: "warn", label: "要改善" },
+                  { value: "none", label: "未実施" },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>短い記号を出して、長い名前を読ませる</CardTitle>
+            <CardDescription>
+              `label` は ReactNode なので、見える記号を aria-hidden にして VisuallyHidden に
+              読み上げ名を置けます。専用の prop は要りません。○ と読み上げられても意味が伝わらない
+              ため、色や記号だけに意味を持たせないという WCAG 1.4.1 の要求そのものです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Segmented
+              aria-label="監査結果"
+              defaultValue="ok"
+              options={[
+                {
+                  value: "ok",
+                  label: (
+                    <>
+                      <span aria-hidden="true">○</span>
+                      <VisuallyHidden>実施</VisuallyHidden>
+                    </>
+                  ),
+                },
+                {
+                  value: "warn",
+                  label: (
+                    <>
+                      <span aria-hidden="true">△</span>
+                      <VisuallyHidden>要改善</VisuallyHidden>
+                    </>
+                  ),
+                },
+                {
+                  value: "none",
+                  label: (
+                    <>
+                      <span aria-hidden="true">×</span>
+                      <VisuallyHidden>未実施</VisuallyHidden>
+                    </>
+                  ),
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>フォームの中で</CardTitle>

package/docs/data-entry/select-matrix.tsx

@@ -142,8 +142,7 @@ export default function Demo() {
               references. The internal search textbox has its own visible-purpose accessible name.
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens the searchable panel before scanning. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField
               id="searchable-invalid"
               label="担当拠点"

package/docs/data-entry/select.tsx

@@ -21,7 +21,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@godxjp/ui/data-entry";
+import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { X } from "lucide-react";
 
 /**
  * Select — the single-select control. Prefer the data-driven `options` API
@@ -38,6 +40,12 @@ export default function Demo() {
   const [reviewerAsync, setReviewerAsync] = useState("tanaka");
   const [reviewerCustom, setReviewerCustom] = useState("tanaka");
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
+  const [prefixed, setPrefixed] = useState("JPY");
+  const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
+  const [assignedTo, setAssignedTo] = useState<
+    { value: string; label: React.ReactNode } | undefined
+  >({ value: "52", label: "東京本社" });
 
   const people = [
     { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
@@ -82,9 +90,7 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          {/* data-axe-open: check-frame-axe opens this Select before scanning, so the
-              overlay-open a11y state is measured. See docs/FRAME-A11Y-CI.md. */}
-          <CardContent data-axe-open>
+          <CardContent>
             <FormField id="status" label="状態">
               <Select
                 id="status"
@@ -392,6 +398,105 @@ export default function Demo() {
             </FormField>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              Ant Design 6 · prefix・suffixIcon・placement・listHeight
+            </CardTitle>
+            <CardDescription>
+              グループは options のネスト（{`{ label, options }`}）でも、行の group
+              でも同じ一覧になります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="prefixed" label="通貨">
+              <Select
+                id="prefixed"
+                name="currency_prefixed"
+                value={prefixed}
+                onValueChange={setPrefixed}
+                prefix={<Badge tone="muted">¥</Badge>}
+                placement="bottomEnd"
+                listHeight={220}
+                options={[
+                  {
+                    label: "アジア",
+                    options: [
+                      { value: "JPY", label: "日本円" },
+                      { value: "VND", label: "ベトナムドン" },
+                    ],
+                  },
+                  {
+                    label: "ヨーロッパ",
+                    options: [{ value: "EUR", label: "ユーロ" }],
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>mode=&quot;tags&quot; · tokenSeparators・tagRender</CardTitle>
+            <CardDescription>
+              一覧にない値も入力できます。カンマ区切りの貼り付けは一度にまとめて確定します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="tags" label="ラベル">
+              <Select
+                id="tags"
+                name="labels[]"
+                mode="tags"
+                value={tags}
+                onValueChange={setTags}
+                tokenSeparators={[",", "\n"]}
+                maxTagTextLength={6}
+                options={[
+                  { value: "至急", label: "至急" },
+                  { value: "要確認", label: "要確認" },
+                ]}
+                tagRender={({ label, onClose }) => (
+                  <Badge tone="info">
+                    {label}
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      aria-label={`${String(label)} を外す`}
+                      onClick={onClose}
+                    >
+                      <X aria-hidden="true" />
+                    </Button>
+                  </Badge>
+                )}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>
+            <CardDescription>
+              値が {`{ value, label }`} を持つので、選択肢がまだ届いていなくても ID
+              ではなく名前を表示できます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="assigned" label="担当拠点">
+              <Select
+                id="assigned"
+                name="office_id"
+                labelInValue
+                value={assignedTo}
+                onValueChange={setAssignedTo}
+                notFoundContent="拠点を読み込み中"
+                options={[]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );