@geckou/ui-react 0.3.0 → 0.5.0

package/README.md

@@ -84,6 +84,16 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 | `DateRangePicker` | `{ start: string; end: string }` | `DatePicker` と同じ（開始日と終了日の min / max が自動連動）。各入力の name は `<name>Start` / `<name>End` |
 | `DateSelector` | `string`（`YYYY-MM-DD` / `type="month"` なら `YYYY-MM`） | `name` / `isRequired` / `type` / `formValidationStore` |
 
+`DatePicker` / `DateSelector` の年月日欄の読み上げ名は、既定では `name` から作られます
+（`name="startedOn"` なら「startedOnの年」）。`CheckBox` と同じ `ariaLabel` / `ariaLabelledBy`
+を渡すと、そちらを土台に「の年」「の月」「の日」を繋げます。可視ラベルがあるなら
+`ariaLabelledBy` でその要素を指してください（WCAG 2.5.3 Label in Name）。
+
+```tsx
+<DatePicker name="startedOn" ariaLabel="開始日" /> {/* 「開始日の年」 */}
+<DatePicker name="startedOn" ariaLabelledBy={labelId} /> {/* 可視ラベル + 「の年」 */}
+```
+
 ## 収録コンポーネント
 
 フォーム系 25 種（`TextBox` / `TextArea` / `SelectBox` / `SearchableSelectBox` / `CheckBox` 系 /
@@ -98,6 +108,29 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 0.5.0 の変更
+
+- `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける
+  （未指定なら従来どおり `name` から読み上げ名を作る）
+- `CheckBox` / `ToggleButton` が `<button>` の中に `<input>` を置かなくなった。
+  状態は `<button>` の `data-checked` / `disabled` で表し、送信用の入力は
+  チェック時だけ `<input type="hidden">` として `<button>` の外に描かれる。
+  DOM を辿っているテストやスタイルがあれば追従が要る
+- `ModalBox` が開いている間、Tab / Shift+Tab をダイアログ内で循環させる（フォーカストラップ）
+- `SearchableSelectBox` が WAI-ARIA の Combobox パターンに沿い、↑↓ / Enter / Escape で操作できる
+
+## 0.4.0 の変更
+
+- `RadioButtons` が必須エラー（「必須項目です」）を描画する。Vue 版と同じく、
+  値が空へ変化したときに出る
+- `CheckBox` / `ToggleButton` のロールが `aria-pressed` から
+  `role="checkbox" + aria-checked` / `role="switch" + aria-checked` に変わった。
+  アクセシブル名は `ariaLabel` / `ariaLabelledBy` で渡せる（未指定なら従来どおり `name`）
+- `DateSelector` に `minYear` / `maxYear` を追加（既定は従来どおり「今年 -100 〜 今年 -14」）
+- `DateRangePicker` が範囲（開始 > 終了）を検証し、`<name>Range` という名前で
+  `FormValidationStore` に登録する。`invalidNames` を見ている場合は増える
+- `TabUI` の `color.text` を配線した
+
 ## License
 
 [MIT](../../LICENSE)

package/dist/components/CheckBox.d.ts

@@ -8,6 +8,12 @@ type Props = {
     cssStyle?: CheckBoxStyleForEachStatus;
     isDisableAnimation?: boolean;
     check?: ReactNode;
+    /**
+     * アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を名前として使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function CheckBox({ name, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, }: Props): import("react").JSX.Element;
+export declare function CheckBox({ name, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/CheckBox.js

@@ -1,18 +1,20 @@
 "use client";
-import { jsxs as b, Fragment as x, jsx as c } from "react/jsx-runtime";
-import { CheckIcon as v } from "./icons/CheckIcon.js";
+import { jsxs as v, Fragment as C, jsx as i } from "react/jsx-runtime";
+import { CheckIcon as _ } from "./icons/CheckIcon.js";
 import { COLOR as t } from "@geckou/ui-core";
 function j({
   name: l,
-  checked: f,
-  onChange: r,
+  checked: s,
+  onChange: c,
   isDisabled: e,
-  cssStyle: o,
-  isDisableAnimation: p,
-  check: k
+  cssStyle: r,
+  isDisableAnimation: f,
+  check: k,
+  ariaLabel: p,
+  ariaLabelledBy: a
 }) {
-  var u, s, n;
-  const i = f ?? !1, h = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, d = {
+  var n, u, b;
+  const o = s ?? !1, h = e ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, d = {
     textColor: e ? t.darkGray : t.blue,
     backgroundColor: e ? t.lightGray : t.white,
     border: {
@@ -21,52 +23,41 @@ function j({
       radius: ".25rem"
     },
     ...h
-  }, m = {
+  }, x = {
     "--text-color": d.textColor,
-    "--border-color": (u = d.border) == null ? void 0 : u.color,
-    "--border-size": (s = d.border) == null ? void 0 : s.size,
-    "--radius-size": (n = d.border) == null ? void 0 : n.radius,
+    "--border-color": (n = d.border) == null ? void 0 : n.color,
+    "--border-size": (u = d.border) == null ? void 0 : u.size,
+    "--radius-size": (b = d.border) == null ? void 0 : b.radius,
     "--background-color": d.backgroundColor,
-    "--duration": p ? "0s" : ".3s"
+    "--duration": f ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ b(x, { children: [
-    /* @__PURE__ */ c("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
-    /* @__PURE__ */ b(
+  return /* @__PURE__ */ v(C, { children: [
+    /* @__PURE__ */ i("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
+    /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        style: m,
-        "aria-label": l,
-        "aria-pressed": i,
+        style: x,
+        role: "checkbox",
+        "aria-checked": o,
+        "data-checked": o,
+        "aria-labelledby": a,
+        "aria-label": a ? void 0 : p ?? l,
         disabled: e,
-        onClick: (a) => {
-          a.stopPropagation(), e || r == null || r(!i);
+        onClick: (m) => {
+          m.stopPropagation(), e || c == null || c(!o);
         },
-        className: `relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] ${i ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
-        children: [
-          /* @__PURE__ */ c(
-            "input",
-            {
-              type: "checkbox",
-              name: l,
-              checked: i,
-              disabled: e,
-              onChange: (a) => {
-                e || r == null || r(a.target.checked);
-              },
-              className: "hidden"
-            }
-          ),
-          /* @__PURE__ */ c(
-            "div",
-            {
-              className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${i ? "text-(--background-color)" : "text-(--border-color)"}`,
-              children: k ?? /* @__PURE__ */ c(v, {})
-            }
-          )
-        ]
+        className: `relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-[''] ${o ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${o ? "text-(--background-color)" : "text-(--border-color)"}`,
+            children: k ?? /* @__PURE__ */ i(_, {})
+          }
+        )
       }
-    )
+    ),
+    o && /* @__PURE__ */ i("input", { type: "hidden", name: l, value: "on", disabled: e })
   ] });
 }
 export {

package/dist/components/DatePicker.d.ts

@@ -13,6 +13,13 @@ type Props = {
     maxDate?: string;
     size?: 'small' | 'medium';
     type?: 'date' | 'month';
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function DatePicker({ name, value, onChange, cssStyle, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, }: Props): import("react").JSX.Element;
+export declare function DatePicker({ name, value, onChange, cssStyle, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/DatePicker.js

@@ -1,131 +1,138 @@
 "use client";
-import { jsxs as V, jsx as t } from "react/jsx-runtime";
-import { formatDateValue as b, splitDate as h, COLOR as A, MESSAGES as B, composeDateValue as G, validateDateObject as R } from "@geckou/ui-core";
-import { useState as g, useRef as q, useEffect as C } from "react";
-import { InputBox as F } from "./InputBox.js";
-import { ErrorMessage as H } from "./ErrorMessage.js";
-import { CalendarIcon as J } from "./icons/CalendarIcon.js";
-import { useRegisterValidation as K } from "../hooks/useFormValidation.js";
-function _({
-  name: l,
+import { jsxs as j, jsx as r } from "react/jsx-runtime";
+import { formatDateValue as V, splitDate as w, COLOR as H, MESSAGES as J, composeDateValue as K, validateDateObject as Q } from "@geckou/ui-core";
+import { useState as m, useRef as T, useEffect as U, useId as W } from "react";
+import { InputBox as X } from "./InputBox.js";
+import { ErrorMessage as Y } from "./ErrorMessage.js";
+import { CalendarIcon as Z } from "./icons/CalendarIcon.js";
+import { useRegisterValidation as _ } from "../hooks/useFormValidation.js";
+function le({
+  name: o,
   value: a,
   onChange: s,
-  cssStyle: N,
+  cssStyle: M,
   isDisabled: i,
-  isRequired: o,
-  formValidationStore: O,
-  minDate: E = "",
-  maxDate: S = "",
-  size: M = "medium",
-  type: r = "date"
+  isRequired: d,
+  formValidationStore: D,
+  minDate: L = "",
+  maxDate: z = "",
+  size: P = "medium",
+  type: t = "date",
+  ariaLabel: A,
+  ariaLabelledBy: p
 }) {
-  const [k, n] = g(
-    () => a ? b(a, r) : ""
-  ), [c, d] = g(
-    () => a ? h(b(a, r)) : { year: "", month: "", day: "" }
-  ), [p, $] = g(""), w = q(a);
-  C(() => {
-    if (w.current === a)
+  const [y, u] = m(
+    () => a ? V(a, t) : ""
+  ), [l, f] = m(
+    () => a ? w(V(a, t)) : { year: "", month: "", day: "" }
+  ), [v, O] = m(""), [G, h] = m(!0), N = T(a);
+  U(() => {
+    if (N.current === a)
       return;
-    w.current = a;
-    const e = a ? b(a, r) : "";
-    n(e), d(h(e));
-  }, [a, r]);
-  const y = (e) => !e && o ? { isValid: !1, message: B.required } : { isValid: !0, message: "" }, D = (e) => R(e, { type: r, isRequired: o }), I = (e) => {
-    n(e), d(h(e));
-    const { message: v } = y(e);
-    $(v), s == null || s(e);
-  }, u = (e, v) => {
-    const x = { ...c, [e]: v };
-    d(x);
-    const { isValid: z, message: P } = D(x);
-    if ($(P), z) {
-      const j = G(x, r);
-      n(j), s == null || s(j);
+    N.current = a;
+    const e = a ? V(a, t) : "";
+    u(e), f(w(e)), h(!0);
+  }, [a, t]);
+  const I = (e) => !e && d ? { isValid: !1, message: J.required } : { isValid: !0, message: "" }, R = (e) => Q(e, { type: t, isRequired: d }), q = (e) => {
+    u(e), f(w(e));
+    const { message: $ } = I(e);
+    O($), h(!0), s == null || s(e);
+  }, b = (e, $) => {
+    const k = { ...l, [e]: $ };
+    f(k);
+    const { isValid: E, message: F } = R(k);
+    if (O(F), h(E), E) {
+      const S = K(k, t);
+      u(S), s == null || s(S);
     }
   };
-  K(
-    O,
-    l,
-    y(k).isValid
+  _(
+    D,
+    o,
+    I(y).isValid && G
   );
-  const m = M === "small", f = `flex-none! ${m ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, L = { "--icon-color": A.blue };
-  return /* @__PURE__ */ V(
-    F,
+  const c = W(), x = (e) => p ? { "aria-labelledby": `${p} ${c}-${e}` } : { "aria-label": `${A ?? o}の${e}` }, n = P === "small", g = `flex-none! ${n ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, C = { "--icon-color": H.blue };
+  return /* @__PURE__ */ j(
+    X,
     {
-      cssStyle: N,
+      cssStyle: M,
       isDisabled: i,
-      isErrored: !!p,
-      className: `flex w-full items-center leading-none ${m ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
+      isErrored: !!v,
+      className: `flex w-full items-center leading-none ${n ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
       children: [
-        /* @__PURE__ */ V("div", { className: "relative flex-none", style: L, children: [
-          /* @__PURE__ */ t(
-            J,
+        /* @__PURE__ */ j("div", { className: "relative flex-none", style: C, children: [
+          /* @__PURE__ */ r(
+            Z,
             {
-              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${m ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
+              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${n ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "input",
             {
-              type: r,
-              name: l,
-              value: k,
-              max: S,
-              min: E,
-              required: o,
+              type: t,
+              name: o,
+              value: y,
+              max: z,
+              min: L,
+              required: d,
               disabled: i,
-              onChange: (e) => I(e.target.value),
-              className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${m ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
+              onChange: (e) => q(e.target.value),
+              className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${n ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
             }
           )
         ] }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
-            value: c.year,
+            value: l.year,
             placeholder: "年",
-            "aria-label": `${l}の年`,
+            ...x("年"),
             maxLength: 4,
             type: "text",
             disabled: i,
-            onChange: (e) => u("year", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${f}`
+            onChange: (e) => b("year", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${g}`
           }
         ),
         "/",
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
-            value: c.month,
+            value: l.month,
             placeholder: "月",
-            "aria-label": `${l}の月`,
+            ...x("月"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => u("month", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${f}`
+            onChange: (e) => b("month", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
           }
         ),
-        r === "date" && /* @__PURE__ */ t("span", { children: "/" }),
-        r === "date" && /* @__PURE__ */ t(
+        t === "date" && /* @__PURE__ */ r("span", { children: "/" }),
+        t === "date" && /* @__PURE__ */ r(
           "input",
           {
-            value: c.day,
+            value: l.day,
             placeholder: "日",
-            "aria-label": `${l}の日`,
+            ...x("日"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => u("day", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${f}`
+            onChange: (e) => b("day", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
           }
         ),
-        /* @__PURE__ */ t(H, { errorMessages: p ? [p] : void 0 })
+        p && /* @__PURE__ */ j("span", { className: "sr-only", children: [
+          /* @__PURE__ */ r("span", { id: `${c}-年`, children: "の年" }),
+          /* @__PURE__ */ r("span", { id: `${c}-月`, children: "の月" }),
+          /* @__PURE__ */ r("span", { id: `${c}-日`, children: "の日" })
+        ] }),
+        /* @__PURE__ */ r(Y, { errorMessages: v ? [v] : void 0 })
       ]
     }
   );
 }
 export {
-  _ as DatePicker
+  le as DatePicker
 };

package/dist/components/DateRangePicker.js

@@ -1,65 +1,75 @@
 "use client";
-import { jsxs as g, jsx as d } from "react/jsx-runtime";
-import { DatePicker as b } from "./DatePicker.js";
-import { COLOR as f } from "@geckou/ui-core";
-const h = { start: "", end: "" };
-function N({
-  name: c,
-  value: r = h,
-  onChange: t,
-  isDisabled: n,
-  isRequired: a,
-  formValidationStore: o,
-  minDate: s = "",
-  maxDate: l = "",
-  size: m = "medium",
-  type: i = "date"
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { COLOR as g, MESSAGES as R } from "@geckou/ui-core";
+import { DatePicker as x } from "./DatePicker.js";
+import { ErrorMessage as k } from "./ErrorMessage.js";
+import { useRegisterValidation as u } from "../hooks/useFormValidation.js";
+const M = { start: "", end: "" };
+function $({
+  name: d,
+  value: r = M,
+  onChange: e,
+  isDisabled: a,
+  isRequired: c,
+  formValidationStore: s,
+  minDate: o = "",
+  maxDate: i = "",
+  size: l = "medium",
+  type: m = "date"
 }) {
-  const x = (e) => t == null ? void 0 : t({ start: e, end: r.end }), u = (e) => t == null ? void 0 : t({ start: r.start, end: e }), v = {
-    "--range-background-color": f.white,
-    "--range-border-color": f.gray
+  const f = !(r.start && r.end && r.start > r.end);
+  u(s, `${d}Range`, f);
+  const E = (n) => e == null ? void 0 : e({ start: n, end: r.end }), p = (n) => e == null ? void 0 : e({ start: r.start, end: n }), h = {
+    "--range-background-color": g.white,
+    "--range-border-color": g.gray
   };
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      style: v,
-      className: "flex bg-(--range-background-color) [&>*]:flex-auto [&>*]:rounded-none! [&>*:first-child]:rounded-s-[calc(var(--bv,0.375rem)/2)]! [&>*:last-child]:rounded-e-[calc(var(--bv,0.375rem)/2)]! [&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-(--range-border-color)",
-      children: [
-        /* @__PURE__ */ d(
-          b,
+  return (
+    // 角丸・区切り線は :first-child / :last-child で割り当てるため、
+    // ErrorMessage を同じ階層に置くとエラー表示時だけ枠の見た目が変わる。
+    // 入力群を内側にまとめ、ErrorMessage は外側（relative）に置く
+    /* @__PURE__ */ b("div", { style: h, className: "relative", children: [
+      /* @__PURE__ */ b("div", { className: "flex bg-(--range-background-color) [&>*]:flex-auto [&>*]:rounded-none! [&>*:first-child]:rounded-s-[calc(var(--bv,0.375rem)/2)]! [&>*:last-child]:rounded-e-[calc(var(--bv,0.375rem)/2)]! [&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-(--range-border-color)", children: [
+        /* @__PURE__ */ t(
+          x,
           {
-            name: `${c}Start`,
+            name: `${d}Start`,
             value: r.start,
-            isDisabled: n,
-            isRequired: a,
-            formValidationStore: o,
-            minDate: s,
-            maxDate: r.end || l,
-            size: m,
-            type: i,
-            onChange: x
+            isDisabled: a,
+            isRequired: c,
+            formValidationStore: s,
+            minDate: o,
+            maxDate: r.end || i,
+            size: l,
+            type: m,
+            onChange: E
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex flex-none! items-center px-[var(--bv,0.375rem)]", children: "〜" }),
-        /* @__PURE__ */ d(
-          b,
+        /* @__PURE__ */ t("div", { className: "flex flex-none! items-center px-[var(--bv,0.375rem)]", children: "〜" }),
+        /* @__PURE__ */ t(
+          x,
           {
-            name: `${c}End`,
+            name: `${d}End`,
             value: r.end,
-            isDisabled: n,
-            isRequired: a,
-            formValidationStore: o,
-            minDate: r.start || s,
-            maxDate: l,
-            size: m,
-            type: i,
-            onChange: u
+            isDisabled: a,
+            isRequired: c,
+            formValidationStore: s,
+            minDate: r.start || o,
+            maxDate: i,
+            size: l,
+            type: m,
+            onChange: p
           }
         )
-      ]
-    }
+      ] }),
+      /* @__PURE__ */ t(
+        k,
+        {
+          errorMessages: f ? void 0 : [R.startAfterEnd]
+        }
+      )
+    ] })
   );
 }
 export {
-  N as DateRangePicker
+  $ as DateRangePicker
 };

package/dist/components/DateSelector.d.ts

@@ -8,6 +8,16 @@ type Props = {
     formValidationStore?: FormValidationStore | null;
     /** 'month' なら日の選択を出さない（Vue 版と揃える） */
     type?: 'date' | 'month';
+    /** 選べる年の下限・上限。既定は「今年 -100 〜 今年 -14」（生年月日向け） */
+    minYear?: number;
+    maxYear?: number;
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function DateSelector({ name, value, onChange, isRequired, formValidationStore, type, }: Props): import("react").JSX.Element;
+export declare function DateSelector({ name, value, onChange, isRequired, formValidationStore, type, minYear, maxYear, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};