@geckou/ui-react 0.5.1 → 0.7.0

package/README.md

@@ -108,6 +108,43 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 0.7.0 の変更
+
+- `CheckBox` / `LabeledCheckbox` に `value` を追加。`CheckBoxes` は各選択肢の
+  `value` を送信用の hidden へ渡すようになった。これまでは全て `value="on"` で、
+  ネイティブ送信（Server Actions / `<form action>`）でどれが選ばれたか区別できなかった
+- `DatePicker` の年月日欄は**入力中にエラー文言を出さない**。判定は入力のたびに
+  更新し、文言は欄を離れた時点（blur）で出す。あわせて 1 桁の月・日は blur で
+  2 桁へ正規化する（「1」→「01」）
+- `DatePicker` の年月日欄が不正なとき、送信値と `onChange` が空文字になる
+  （これまでは valid のときだけ更新していたため、画面と送信値が食い違っていた）
+- `SelectBox` が `isDisabled` かつ値が `0` / `'NA'` のときにプレースホルダを
+  出す分岐を削除した。0 は正当な選択値として扱う
+- `SelectBox` がエラー時に `InputBox` へ `isErrored` を渡し、`aria-invalid` を付ける
+- `SearchableSelectBox` は `isDisabled` の選択肢を候補に出さず、確定後の入力欄には
+  `value` ではなく**ラベル**を表示する（通知は従来どおり `value`）。
+  `ariaLabelledBy` を追加（`TextBox` にも追加）
+- `TextArea` の `autoAdjustHeight` が `box-sizing` を見て高さを補正する
+  （border-box のリセット CSS を当てた環境で 2rem 足りなかった）
+- `DateRangePicker` は範囲の比較前に日付を正規化する
+- `ErrorMessage` は同じ文言を複数受け取っても重複キーの警告を出さない
+- `SlideDownUi` のトリガーが `<button>` の中に `<div>` を置かなくなった
+
+## 0.6.0 の変更
+
+- `ModalBox` を重ねたとき、Escape で閉じるのは**最前面の 1 枚だけ**になった
+  （従来は内側と外側の `onClose` が両方呼ばれていた）。あわせて自分が Escape を
+  処理したら `preventDefault()` する。外側で Escape を見ているアプリ側のハンドラが
+  一緒に反応しなくなるので、`defaultPrevented` を見ずに閉じている処理があれば追従が要る
+- `SearchableSelectBox` が候補 0 件のときは Escape を握らない（`preventDefault()` しない）。
+  `ModalBox` の中で「何にもマッチしない語を入れた状態だと Escape を 2 回押す必要がある」
+  のが直る
+- `DatePicker` のカレンダー起動用入力にアクセシブル名（「◯◯のカレンダー」）が付き、
+  キーボードで到達したときアイコン側に可視フォーカスが出る
+- `PopupBox` が `role="status"`（ライブリージョン）になり、支援技術に通知が伝わる
+- `DateRange` 型を公開の入口から export するようにした
+  （`import type { DateRange } from '@geckou/ui-react'`）
+
 ## 0.5.0 の変更
 
 - `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける

package/dist/components/CheckBox.d.ts

@@ -2,6 +2,12 @@ import { ReactNode } from 'react';
 import { CheckBoxStyleForEachStatus } from '../types';
 type Props = {
     name: string;
+    /**
+     * ネイティブ送信時の値。既定は 'on'（<input type="checkbox"> と同じ）。
+     * 同じ name を共有する複数のチェックボックスでは、これを指定しないと
+     * FormData からどれが選ばれたか区別できない
+     */
+    value?: string | number;
     checked?: boolean;
     onChange?: (newValue: boolean) => void;
     isDisabled?: boolean;
@@ -15,5 +21,5 @@ type Props = {
     ariaLabel?: string;
     ariaLabelledBy?: string;
 };
-export declare function CheckBox({ name, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
+export declare function CheckBox({ name, value, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/CheckBox.js

@@ -1,20 +1,21 @@
 "use client";
-import { jsxs as v, Fragment as C, jsx as i } from "react/jsx-runtime";
-import { CheckIcon as _ } from "./icons/CheckIcon.js";
+import { jsxs as C, Fragment as _, jsx as i } from "react/jsx-runtime";
+import { CheckIcon as g } from "./icons/CheckIcon.js";
 import { COLOR as t } from "@geckou/ui-core";
-function j({
+function y({
   name: l,
-  checked: s,
+  value: s,
+  checked: f,
   onChange: c,
   isDisabled: e,
   cssStyle: r,
-  isDisableAnimation: f,
-  check: k,
-  ariaLabel: p,
+  isDisableAnimation: k,
+  check: p,
+  ariaLabel: h,
   ariaLabelledBy: a
 }) {
   var n, u, b;
-  const o = s ?? !1, h = e ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, d = {
+  const o = f ?? !1, x = 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: {
@@ -22,44 +23,52 @@ function j({
       size: "1px",
       radius: ".25rem"
     },
-    ...h
-  }, x = {
+    ...x
+  }, m = {
     "--text-color": d.textColor,
     "--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": f ? "0s" : ".3s"
+    "--duration": k ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ v(C, { children: [
+  return /* @__PURE__ */ 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: x,
+        style: m,
         role: "checkbox",
         "aria-checked": o,
         "data-checked": o,
         "aria-labelledby": a,
-        "aria-label": a ? void 0 : p ?? l,
+        "aria-label": a ? void 0 : h ?? l,
         disabled: e,
-        onClick: (m) => {
-          m.stopPropagation(), e || c == null || c(!o);
+        onClick: (v) => {
+          v.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) 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(_, {})
+            children: p ?? /* @__PURE__ */ i(g, {})
           }
         )
       }
     ),
-    o && /* @__PURE__ */ i("input", { type: "hidden", name: l, value: "on", disabled: e })
+    o && /* @__PURE__ */ i(
+      "input",
+      {
+        type: "hidden",
+        name: l,
+        value: s ?? "on",
+        disabled: e
+      }
+    )
   ] });
 }
 export {
-  j as CheckBox
+  y as CheckBox
 };

package/dist/components/CheckBoxes.js

@@ -1,55 +1,56 @@
 "use client";
 import { jsxs as M, jsx as g } from "react/jsx-runtime";
-import { COLOR as i, MESSAGES as V } from "@geckou/ui-core";
-import { useState as p, useRef as w, useEffect as R } from "react";
+import { COLOR as a, MESSAGES as V } from "@geckou/ui-core";
+import { useState as b, useRef as w, useEffect as R } from "react";
 import { LabeledCheckbox as j } from "./LabeledCheckbox.js";
 import { ErrorMessage as L } from "./ErrorMessage.js";
 function F({
-  name: b,
-  options: a,
-  value: r,
+  name: k,
+  options: u,
+  value: e,
   onChange: s,
-  isDisabled: k,
+  isDisabled: p,
   isRequired: C,
   cssStyle: o
 }) {
-  const [u, d] = p(r ?? []), [f, h] = p(""), m = (e) => h(
-    C && e.length === 0 ? V.required : ""
+  const [i, d] = b(e ?? []), [f, h] = b(""), m = (r) => h(
+    C && r.length === 0 ? V.required : ""
   ), n = w(!0);
   R(() => {
     if (n.current) {
-      n.current = !1, r != null && r.length && m(r);
+      n.current = !1, e != null && e.length && m(e);
       return;
     }
-    r && d(r);
-  }, [r]);
-  const E = (e, c) => {
-    const l = a.map((t) => t.value).filter(
-      (t) => t === e ? c : u.includes(t)
+    e && d(e);
+  }, [e]);
+  const E = (r, l) => {
+    const c = u.map((t) => t.value).filter(
+      (t) => t === r ? l : i.includes(t)
     );
-    d(l), m(l), s == null || s(l);
+    d(c), m(c), s == null || s(c);
   }, x = {
     ...(o == null ? void 0 : o.error) ?? {},
-    textColor: i.white,
-    backgroundColor: i.red,
+    textColor: a.white,
+    backgroundColor: a.red,
     border: {
-      color: i.red,
+      color: a.red,
       size: "1px",
       radius: ".25rem"
     }
   };
   return /* @__PURE__ */ M("div", { className: "relative flex flex-wrap gap-x-6 gap-y-4", children: [
-    a.map((e) => /* @__PURE__ */ g(
+    u.map((r) => /* @__PURE__ */ g(
       j,
       {
-        name: b,
-        label: e.label,
-        checked: u.includes(e.value),
-        onChange: (c) => E(e.value, c),
-        isDisabled: k,
+        name: k,
+        value: r.value,
+        label: r.label,
+        checked: i.includes(r.value),
+        onChange: (l) => E(r.value, l),
+        isDisabled: p,
         cssStyle: o
       },
-      e.value
+      r.value
     )),
     /* @__PURE__ */ g(
       L,

package/dist/components/DatePicker.js

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

package/dist/components/DateRangePicker.js

@@ -1,75 +1,75 @@
 "use client";
-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 $({
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { formatDateValue as E, COLOR as x, MESSAGES as p } from "@geckou/ui-core";
+import { DatePicker as v } from "./DatePicker.js";
+import { ErrorMessage as M } from "./ErrorMessage.js";
+import { useRegisterValidation as N } from "../hooks/useFormValidation.js";
+const S = { start: "", end: "" };
+function G({
   name: d,
-  value: r = M,
+  value: r = S,
   onChange: e,
-  isDisabled: a,
-  isRequired: c,
-  formValidationStore: s,
-  minDate: o = "",
-  maxDate: i = "",
-  size: l = "medium",
-  type: m = "date"
+  isDisabled: l,
+  isRequired: i,
+  formValidationStore: n,
+  minDate: m = "",
+  maxDate: f = "",
+  size: b = "medium",
+  type: t = "date"
 }) {
-  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
+  const s = E(r.start, t), o = E(r.end, t), g = !(s && o && s > o);
+  N(n, `${d}Range`, g);
+  const h = (c) => e == null ? void 0 : e({ start: c, end: r.end }), R = (c) => e == null ? void 0 : e({ start: r.start, end: c }), k = {
+    "--range-background-color": x.white,
+    "--range-border-color": x.gray
   };
   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,
+    /* @__PURE__ */ u("div", { style: k, className: "relative", children: [
+      /* @__PURE__ */ u("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__ */ a(
+          v,
           {
             name: `${d}Start`,
             value: r.start,
-            isDisabled: a,
-            isRequired: c,
-            formValidationStore: s,
-            minDate: o,
-            maxDate: r.end || i,
-            size: l,
-            type: m,
-            onChange: E
+            isDisabled: l,
+            isRequired: i,
+            formValidationStore: n,
+            minDate: m,
+            maxDate: o || f,
+            size: b,
+            type: t,
+            onChange: h
           }
         ),
-        /* @__PURE__ */ t("div", { className: "flex flex-none! items-center px-[var(--bv,0.375rem)]", children: "〜" }),
-        /* @__PURE__ */ t(
-          x,
+        /* @__PURE__ */ a("div", { className: "flex flex-none! items-center px-[var(--bv,0.375rem)]", children: "〜" }),
+        /* @__PURE__ */ a(
+          v,
           {
             name: `${d}End`,
             value: r.end,
-            isDisabled: a,
-            isRequired: c,
-            formValidationStore: s,
-            minDate: r.start || o,
-            maxDate: i,
-            size: l,
-            type: m,
-            onChange: p
+            isDisabled: l,
+            isRequired: i,
+            formValidationStore: n,
+            minDate: s || m,
+            maxDate: f,
+            size: b,
+            type: t,
+            onChange: R
           }
         )
       ] }),
-      /* @__PURE__ */ t(
-        k,
+      /* @__PURE__ */ a(
+        M,
         {
-          errorMessages: f ? void 0 : [R.startAfterEnd]
+          errorMessages: g ? void 0 : [p.startAfterEnd]
         }
       )
     ] })
   );
 }
 export {
-  $ as DateRangePicker
+  G as DateRangePicker
 };