@geckou/ui-react 0.3.0 → 0.4.0

package/README.md

@@ -98,6 +98,18 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 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 f, Fragment as _, jsx as d } from "react/jsx-runtime";
+import { CheckIcon as z } from "./icons/CheckIcon.js";
 import { COLOR as t } from "@geckou/ui-core";
-function j({
+function g({
   name: l,
-  checked: f,
+  checked: p,
   onChange: r,
   isDisabled: e,
   cssStyle: o,
-  isDisableAnimation: p,
-  check: k
+  isDisableAnimation: k,
+  check: h,
+  ariaLabel: x,
+  ariaLabelledBy: u
 }) {
-  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, s, b;
+  const i = p ?? !1, m = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, c = {
     textColor: e ? t.darkGray : t.blue,
     backgroundColor: e ? t.lightGray : t.white,
     border: {
@@ -20,31 +22,33 @@ function j({
       size: "1px",
       radius: ".25rem"
     },
-    ...h
-  }, m = {
-    "--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,
-    "--background-color": d.backgroundColor,
-    "--duration": p ? "0s" : ".3s"
+    ...m
+  }, v = {
+    "--text-color": c.textColor,
+    "--border-color": (n = c.border) == null ? void 0 : n.color,
+    "--border-size": (s = c.border) == null ? void 0 : s.size,
+    "--radius-size": (b = c.border) == null ? void 0 : b.radius,
+    "--background-color": c.backgroundColor,
+    "--duration": k ? "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__ */ f(_, { children: [
+    /* @__PURE__ */ d("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
+    /* @__PURE__ */ f(
       "button",
       {
         type: "button",
-        style: m,
-        "aria-label": l,
-        "aria-pressed": i,
+        style: v,
+        role: "checkbox",
+        "aria-checked": i,
+        "aria-labelledby": u,
+        "aria-label": u ? void 0 : x ?? l,
         disabled: e,
         onClick: (a) => {
           a.stopPropagation(), e || r == null || r(!i);
         },
         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(
+          /* @__PURE__ */ d(
             "input",
             {
               type: "checkbox",
@@ -57,11 +61,11 @@ function j({
               className: "hidden"
             }
           ),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ d(
             "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, {})
+              children: h ?? /* @__PURE__ */ d(z, {})
             }
           )
         ]
@@ -70,5 +74,5 @@ function j({
   ] });
 }
 export {
-  j as CheckBox
+  g as CheckBox
 };

package/dist/components/DatePicker.js

@@ -1,66 +1,66 @@
 "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 _({
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import { formatDateValue as g, splitDate as k, COLOR as G, MESSAGES as R, composeDateValue as q, validateDateObject as C } from "@geckou/ui-core";
+import { useState as o, useRef as F, useEffect as H } from "react";
+import { InputBox as J } from "./InputBox.js";
+import { ErrorMessage as K } from "./ErrorMessage.js";
+import { CalendarIcon as Q } from "./icons/CalendarIcon.js";
+import { useRegisterValidation as T } from "../hooks/useFormValidation.js";
+function ae({
   name: l,
   value: a,
   onChange: s,
-  cssStyle: N,
+  cssStyle: E,
   isDisabled: i,
-  isRequired: o,
-  formValidationStore: O,
-  minDate: E = "",
-  maxDate: S = "",
-  size: M = "medium",
+  isRequired: n,
+  formValidationStore: S,
+  minDate: I = "",
+  maxDate: M = "",
+  size: D = "medium",
   type: r = "date"
 }) {
-  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 [j, d] = o(
+    () => a ? g(a, r) : ""
+  ), [c, p] = o(
+    () => a ? k(g(a, r)) : { year: "", month: "", day: "" }
+  ), [u, V] = o(""), [L, f] = o(!0), $ = F(a);
+  H(() => {
+    if ($.current === a)
       return;
-    w.current = a;
-    const e = a ? b(a, r) : "";
-    n(e), d(h(e));
+    $.current = a;
+    const e = a ? g(a, r) : "";
+    d(e), p(k(e)), f(!0);
   }, [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);
+  const w = (e) => !e && n ? { isValid: !1, message: R.required } : { isValid: !0, message: "" }, z = (e) => C(e, { type: r, isRequired: n }), P = (e) => {
+    d(e), p(k(e));
+    const { message: x } = w(e);
+    V(x), f(!0), s == null || s(e);
+  }, v = (e, x) => {
+    const h = { ...c, [e]: x };
+    p(h);
+    const { isValid: y, message: B } = z(h);
+    if (V(B), f(y), y) {
+      const O = q(h, r);
+      d(O), s == null || s(O);
     }
   };
-  K(
-    O,
+  T(
+    S,
     l,
-    y(k).isValid
+    w(j).isValid && L
   );
-  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 m = D === "small", b = `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)]!"}`, A = { "--icon-color": G.blue };
+  return /* @__PURE__ */ N(
+    J,
     {
-      cssStyle: N,
+      cssStyle: E,
       isDisabled: i,
-      isErrored: !!p,
+      isErrored: !!u,
       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)]"}`,
       children: [
-        /* @__PURE__ */ V("div", { className: "relative flex-none", style: L, children: [
+        /* @__PURE__ */ N("div", { className: "relative flex-none", style: A, children: [
           /* @__PURE__ */ t(
-            J,
+            Q,
             {
               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)]"}`
             }
@@ -70,12 +70,12 @@ function _({
             {
               type: r,
               name: l,
-              value: k,
-              max: S,
-              min: E,
-              required: o,
+              value: j,
+              max: M,
+              min: I,
+              required: n,
               disabled: i,
-              onChange: (e) => I(e.target.value),
+              onChange: (e) => P(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)]!"}`
             }
           )
@@ -89,8 +89,8 @@ function _({
             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) => v("year", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${b}`
           }
         ),
         "/",
@@ -103,8 +103,8 @@ function _({
             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) => v("month", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${b}`
           }
         ),
         r === "date" && /* @__PURE__ */ t("span", { children: "/" }),
@@ -117,15 +117,15 @@ function _({
             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) => v("day", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${b}`
           }
         ),
-        /* @__PURE__ */ t(H, { errorMessages: p ? [p] : void 0 })
+        /* @__PURE__ */ t(K, { errorMessages: u ? [u] : void 0 })
       ]
     }
   );
 }
 export {
-  _ as DatePicker
+  ae 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,9 @@ type Props = {
     formValidationStore?: FormValidationStore | null;
     /** 'month' なら日の選択を出さない（Vue 版と揃える） */
     type?: 'date' | 'month';
+    /** 選べる年の下限・上限。既定は「今年 -100 〜 今年 -14」（生年月日向け） */
+    minYear?: number;
+    maxYear?: number;
 };
-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, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/DateSelector.js

@@ -1,45 +1,47 @@
 "use client";
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
 import { useState as C, useEffect as F } from "react";
-import { splitDate as T, COLOR as I, daysInMonth as $ } from "@geckou/ui-core";
-import { InputBox as z } from "./InputBox.js";
+import { splitDate as z, COLOR as I, daysInMonth as H } from "@geckou/ui-core";
+import { InputBox as K } from "./InputBox.js";
 import { KeyboardArrowDownIcon as f } from "./icons/KeyboardArrowDownIcon.js";
-import { useRegisterValidation as H } from "../hooks/useFormValidation.js";
+import { useRegisterValidation as L } from "../hooks/useFormValidation.js";
 const b = { year: "", month: "", day: "" };
-function J({
-  name: n,
-  value: m,
-  onChange: s,
+function R({
+  name: o,
+  value: i,
+  onChange: n,
   isRequired: c,
-  formValidationStore: Y,
-  type: i = "date"
+  formValidationStore: $,
+  type: m = "date",
+  minYear: A,
+  maxYear: M
 }) {
-  const [r, d] = C(b), g = !!(r.year && r.month && (i === "month" || r.day)), A = !r.year && !r.month && !r.day;
-  H(
-    Y,
-    n,
-    c ? g : g || A
+  const [r, d] = C(b), g = !!(r.year && r.month && (m === "month" || r.day)), O = !r.year && !r.month && !r.day;
+  L(
+    $,
+    o,
+    c ? g : g || O
   ), F(() => {
-    d(m ? T(m) : b);
-  }, [m]);
-  const N = /* @__PURE__ */ new Date(), S = N.getFullYear() - 100, O = N.getFullYear() - 14, k = Array.from(
-    { length: O - S + 1 },
+    d(i ? z(i) : b);
+  }, [i]);
+  const N = (/* @__PURE__ */ new Date()).getFullYear(), S = A ?? N - 100, k = M ?? N - 14, E = Array.from(
+    { length: Math.max(k - S + 1, 0) },
     (e, a) => (S + a).toString()
-  ).map((e) => ({ label: e, value: e })), E = Array.from({ length: 12 }, (e, a) => {
+  ).map((e) => ({ label: e, value: e })), T = Array.from({ length: 12 }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
-  }), w = (e, a) => $(Number(e) || 2e3, Number(a)), M = w(r.year, r.month), _ = Array.from({ length: M }, (e, a) => {
+  }), w = (e, a) => H(Number(e) || 2e3, Number(a)), Y = w(r.year, r.month), _ = Array.from({ length: Y }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
   }), D = (e) => {
     d(e);
-    const a = i === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
+    const a = m === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
     if (!e.year && !e.month && !e.day)
-      s == null || s("");
+      n == null || n("");
     else {
       if (a.some((t) => !t))
         return;
-      s == null || s(a.join("-"));
+      n == null || n(a.join("-"));
     }
   }, u = (e, a) => {
     const t = { ...r, [e]: a };
@@ -51,68 +53,71 @@ function J({
   }, p = (e) => {
     const t = e.currentTarget.firstElementChild;
     t && t.click();
-  }, v = "relative w-max [&:has(select:focus)>svg]:rotate-180", y = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", x = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", h = { "--icon-color": I.blue }, j = { "--caution-color": I.red };
-  return /* @__PURE__ */ l(z, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
-    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
-      /* @__PURE__ */ l(
+  }, y = "relative w-max [&:has(select:focus)>svg]:rotate-180", v = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", x = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", h = { "--icon-color": I.blue }, j = { "--caution-color": I.red };
+  return /* @__PURE__ */ s(K, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
+    /* @__PURE__ */ s("div", { className: y, style: h, onClick: p, children: [
+      /* @__PURE__ */ s(
         "select",
         {
           value: r.year,
-          name: `${n}-year`,
+          name: `${o}-year`,
+          "aria-label": `${o}の年`,
           required: c,
           onChange: (e) => u("year", e.target.value),
           className: "w-[calc(5ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]!",
           children: [
-            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "年" }),
-            k.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "年" }),
+            E.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ o(f, { className: y })
+      /* @__PURE__ */ l(f, { className: v })
     ] }),
-    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
-      /* @__PURE__ */ l(
+    /* @__PURE__ */ s("div", { className: y, style: h, onClick: p, children: [
+      /* @__PURE__ */ s(
         "select",
         {
           value: r.month,
-          name: `${n}-month`,
+          name: `${o}-month`,
+          "aria-label": `${o}の月`,
           required: c,
           onChange: (e) => u("month", e.target.value),
           className: x,
           children: [
-            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "月" }),
-            E.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "月" }),
+            T.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ o(f, { className: y })
+      /* @__PURE__ */ l(f, { className: v })
     ] }),
-    i === "date" && /* @__PURE__ */ l(
+    m === "date" && /* @__PURE__ */ s(
       "div",
       {
-        className: v,
+        className: y,
         style: h,
         onClick: p,
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ s(
             "select",
             {
               value: r.day,
-              name: `${n}-day`,
+              name: `${o}-day`,
+              "aria-label": `${o}の日`,
               required: c,
               onChange: (e) => u("day", e.target.value),
               className: x,
               children: [
-                /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "日" }),
-                _.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+                /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "日" }),
+                _.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
               ]
             }
           ),
-          /* @__PURE__ */ o(f, { className: y })
+          /* @__PURE__ */ l(f, { className: v })
         ]
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
@@ -125,5 +130,5 @@ function J({
   ] });
 }
 export {
-  J as DateSelector
+  R as DateSelector
 };

package/dist/components/ErrorMessage.js

@@ -1,21 +1,22 @@
 import { jsx as n } from "react/jsx-runtime";
 import { COLOR as t } from "@geckou/ui-core";
-function a({ errorMessages: r, cssStyle: o }) {
-  if (!r || !r.length)
+function f({ errorMessages: o, cssStyle: r }) {
+  if (!o || !o.length)
     return null;
   const b = {
-    "--error-text-color": (o == null ? void 0 : o.textColor) || t.white,
-    "--error-background-color": (o == null ? void 0 : o.backgroundColor) || t.red
+    "--error-text-color": (r == null ? void 0 : r.textColor) || t.white,
+    "--error-background-color": (r == null ? void 0 : r.backgroundColor) || t.red
   };
   return /* @__PURE__ */ n(
     "div",
     {
+      role: "alert",
       className: "absolute top-[calc(100%+0.25rem)] flex w-max flex-col gap-2 rounded-sm bg-(--error-background-color) px-3 py-2 text-sm leading-none text-(--error-text-color) shadow-[0_0_0.5rem_0.25rem_#33333322] before:absolute before:bottom-[calc(100%-1px)] before:left-[0.85rem] before:block before:h-[0.53rem] before:w-[0.85rem] before:bg-(--error-background-color) before:content-[''] before:[clip-path:polygon(50%_0%,100%_100%,0%_100%)]",
       style: b,
-      children: r.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
+      children: o.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
     }
   );
 }
 export {
-  a as ErrorMessage
+  f as ErrorMessage
 };