@geckou/ui-react 0.6.0 → 0.8.0

package/dist/components/RadioButtons.js

@@ -1,70 +1,83 @@
 "use client";
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useState as N, useRef as G, useEffect as R, useId as z } from "react";
-import { isEmptyValue as M, MESSAGES as V, COLOR as o } from "@geckou/ui-core";
-import { ErrorMessage as j } from "./ErrorMessage.js";
-function A({
-  value: p,
-  onChange: s,
-  options: m,
-  name: _,
+import { jsxs as _, jsx as d } from "react/jsx-runtime";
+import { useState as M, useRef as R, useEffect as V, useId as g } from "react";
+import { isEmptyValue as j, MESSAGES as q, COLOR as o } from "@geckou/ui-core";
+import { ErrorMessage as I } from "./ErrorMessage.js";
+function $({
+  value: v,
+  onChange: n,
+  options: x,
+  name: h,
   isDisabled: a,
-  isRequired: n,
+  isRequired: u,
   cssStyle: e,
-  isDisableAnimation: v
+  isDisableAnimation: k,
+  ariaLabel: w,
+  ariaLabelledBy: i
 }) {
-  var i, d;
-  const r = p ?? "", [g, x] = N(!1), c = G(r);
-  R(() => {
-    c.current !== r && (c.current = r, x(!0));
+  var f, p;
+  const r = v ?? "", [C, E] = M(!1), s = R(r);
+  V(() => {
+    s.current !== r && (s.current = r, E(!0));
   }, [r]);
-  const h = g && n && M(r) ? [V.required] : void 0, k = z(), w = _ ?? k, C = a ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
+  const c = C && u && j(r) ? [q.required] : void 0, N = g(), G = h ?? N, b = g(), y = a ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
     textColor: a ? o.darkGray : o.black,
     backgroundColor: a ? o.lightGray : o.white,
     border: {
       color: a ? o.darkGray : o.blue,
       size: "1px"
     },
-    ...C ?? {}
-  }, E = {
+    ...y ?? {}
+  }, z = {
     "--text-color": l.textColor,
-    "--border-color": (i = l.border) == null ? void 0 : i.color,
-    "--border-size": (d = l.border) == null ? void 0 : d.size,
+    "--border-color": (f = l.border) == null ? void 0 : f.color,
+    "--border-size": (p = l.border) == null ? void 0 : p.size,
     "--background-color": l.backgroundColor,
-    "--duration": v ? "0s" : ".3s"
+    "--duration": k ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ f("div", { className: "relative flex flex-wrap items-center gap-4", children: [
-    /* @__PURE__ */ u("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
-    m.map((t) => {
-      const b = t.value === r;
-      return /* @__PURE__ */ f(
-        "label",
-        {
-          style: E,
-          className: `relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${b ? "text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]" : "text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]"}`,
-          children: [
-            /* @__PURE__ */ u(
-              "input",
-              {
-                type: "radio",
-                name: w,
-                value: t.value,
-                disabled: a,
-                required: n,
-                checked: b,
-                onChange: () => s == null ? void 0 : s(t.value),
-                className: "sr-only"
-              }
-            ),
-            /* @__PURE__ */ u("span", { children: t.label })
-          ]
-        },
-        t.value
-      );
-    }),
-    /* @__PURE__ */ u(j, { errorMessages: h })
-  ] });
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": i ? void 0 : w,
+      "aria-labelledby": i,
+      "aria-required": u || void 0,
+      "aria-describedby": c ? b : void 0,
+      className: "relative flex flex-wrap items-center gap-4",
+      children: [
+        /* @__PURE__ */ d("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
+        x.map((t) => {
+          const m = t.value === r;
+          return /* @__PURE__ */ _(
+            "label",
+            {
+              style: z,
+              className: `relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${m ? "text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]" : "text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]"}`,
+              children: [
+                /* @__PURE__ */ d(
+                  "input",
+                  {
+                    type: "radio",
+                    name: G,
+                    value: t.value,
+                    disabled: a,
+                    required: u,
+                    checked: m,
+                    onChange: () => n == null ? void 0 : n(t.value),
+                    className: "sr-only"
+                  }
+                ),
+                /* @__PURE__ */ d("span", { children: t.label })
+              ]
+            },
+            t.value
+          );
+        }),
+        /* @__PURE__ */ d(I, { id: b, errorMessages: c })
+      ]
+    }
+  );
 }
 export {
-  A as RadioButtons
+  $ as RadioButtons
 };

package/dist/components/SearchableSelectBox.d.ts

@@ -11,6 +11,7 @@ type Props = {
     cssStyle?: InputBoxStyleForEachStatus;
     /** combobox のアクセシブル名。可視ラベルがあるならそちらを ariaLabelledBy で指すこと */
     ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function SearchableSelectBox({ options, value, onChange, onSelect, name, placeholder, isDisabled, searchTarget, cssStyle, ariaLabel, }: Props): import("react").JSX.Element;
+export declare function SearchableSelectBox({ options, value, onChange, onSelect, name, placeholder, isDisabled, searchTarget, cssStyle, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/SearchableSelectBox.js

@@ -1,77 +1,84 @@
 "use client";
-import { jsxs as N, jsx as m } from "react/jsx-runtime";
-import { useState as w, useRef as k, useId as _, useEffect as y } from "react";
-import { TextBox as $ } from "./TextBox.js";
-function R({
-  options: v,
+import { jsxs as $, jsx as m } from "react/jsx-runtime";
+import { useState as v, useRef as A, useId as j, useEffect as I } from "react";
+import { TextBox as K } from "./TextBox.js";
+function z({
+  options: w,
   value: o,
   onChange: s,
   onSelect: d,
-  name: A,
-  placeholder: I = "入力してください",
-  isDisabled: g,
-  searchTarget: B = "label",
-  cssStyle: L,
-  ariaLabel: O
+  name: g,
+  placeholder: O = "入力してください",
+  isDisabled: B,
+  searchTarget: L = "label",
+  cssStyle: S,
+  ariaLabel: F,
+  ariaLabelledBy: N
 }) {
-  const [u, f] = w(o), [h, a] = w(!1), [i, n] = w(-1), x = k(null), p = _(), b = (e) => `${p}-option-${e}`, E = k(o);
-  y(() => {
-    E.current !== o && (E.current = o, f(o));
-  }, [o]), y(() => {
+  const b = (e) => {
+    var r;
+    return ((r = w.find((t) => String(t.value) === e)) == null ? void 0 : r.label) ?? e;
+  }, [u, f] = v(() => b(o)), [h, a] = v(!1), [i, l] = v(-1), x = A(null), p = j(), D = (e) => `${p}-option-${e}`, E = A(o);
+  I(() => {
+    E.current !== o && (E.current = o, f(b(o)));
+  }, [o]), I(() => {
     const e = (r) => {
       const t = x.current;
       t && !t.contains(r.target) && a(!1);
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
   }, []);
-  const l = u ? v.filter(
-    (e) => String(e[B]).toLowerCase().includes(u.toLowerCase())
-  ) : v, F = (e) => {
+  const y = w.filter((e) => !e.isDisabled), n = u ? y.filter(
+    (e) => String(e[L]).toLowerCase().includes(u.toLowerCase())
+  ) : y, V = (e) => {
     const r = String(e);
-    f(r), a(!!r), n(-1), s == null || s(r);
-  }, D = (e) => {
+    f(r), a(!!r), l(-1), s == null || s(r);
+  }, k = (e) => {
+    if (e.isDisabled)
+      return;
     const r = e.value.toString();
-    f(r), a(!1), n(-1), s == null || s(r), d == null || d(r);
-  }, c = h && l.length > 0, S = (e) => {
+    f(e.label), a(!1), l(-1), s == null || s(r), d == null || d(r);
+  }, c = h && n.length > 0, _ = (e) => {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       if (e.preventDefault(), !h) {
-        a(!0), n(
-          e.key === "ArrowDown" ? 0 : l.length - 1
+        a(!0), l(
+          e.key === "ArrowDown" ? 0 : n.length - 1
         );
         return;
       }
-      if (l.length === 0)
+      if (n.length === 0)
         return;
-      n((r) => {
-        const t = l.length - 1;
+      l((r) => {
+        const t = n.length - 1;
         return e.key === "ArrowDown" ? r >= t ? 0 : r + 1 : r <= 0 ? t : r - 1;
       });
       return;
     }
     if (e.key === "Enter") {
-      const r = c ? l[i] : void 0;
-      r && (e.preventDefault(), D(r));
+      const r = c ? n[i] : void 0;
+      r && (e.preventDefault(), k(r));
       return;
     }
-    e.key === "Escape" && c && (e.preventDefault(), a(!1), n(-1));
+    e.key === "Escape" && c && (e.preventDefault(), a(!1), l(-1));
   };
-  return /* @__PURE__ */ N("div", { ref: x, className: "relative", children: [
+  return /* @__PURE__ */ $("div", { ref: x, className: "relative", children: [
     /* @__PURE__ */ m(
-      $,
+      K,
       {
-        name: A,
+        name: g,
         value: u,
-        onChange: F,
-        isDisabled: g,
-        placeholder: I,
-        cssStyle: L,
+        onChange: V,
+        isDisabled: B,
+        placeholder: O,
+        cssStyle: S,
         role: "combobox",
-        ariaLabel: O,
+        ariaLabel: F,
+        ariaLabelledBy: N,
         ariaAutocomplete: "list",
         ariaExpanded: c,
         ariaControls: p,
-        ariaActivedescendant: c && i >= 0 ? b(i) : void 0,
-        onKeyDown: S
+        ariaActivedescendant: c && i >= 0 ? D(i) : void 0,
+        onKeyDown: _
       }
     ),
     c && /* @__PURE__ */ m(
@@ -80,17 +87,17 @@ function R({
         id: p,
         role: "listbox",
         className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] left-0 z-[2] max-h-[calc(var(--bv,0.375rem)*56)] min-w-full overflow-auto rounded-[var(--radius-small,0.1875rem)] bg-white py-[var(--sp-small,0.375rem)] shadow-[0_0_6px_#33333333]",
-        children: l.map((e, r) => /* @__PURE__ */ m(
+        children: n.map((e, r) => /* @__PURE__ */ m(
           "div",
           {
-            id: b(r),
+            id: D(r),
             role: "option",
             "aria-selected": r === i,
             className: `block w-full cursor-pointer p-[var(--sp-medium,0.75rem)] text-left text-[length:var(--fs-small,0.6875rem)] text-[var(--link-color,#1c4ac9)] hover:bg-[var(--hover-color,#EEF7FB)] hover:transition-all hover:duration-100 ${r === i ? "bg-[var(--hover-color,#EEF7FB)]" : ""}`,
             onPointerDown: (t) => {
-              t.preventDefault(), D(e);
+              t.preventDefault(), k(e);
             },
-            onMouseEnter: () => n(r),
+            onMouseEnter: () => l(r),
             children: e.label
           },
           e.value
@@ -100,5 +107,5 @@ function R({
   ] });
 }
 export {
-  R as SearchableSelectBox
+  z as SearchableSelectBox
 };

package/dist/components/SelectBox.js

@@ -1,69 +1,70 @@
 "use client";
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { MESSAGES as I } from "@geckou/ui-core";
-import { useState as O, useRef as x, useEffect as V, Fragment as q } from "react";
-import { InputBox as w } from "./InputBox.js";
-import { ErrorMessage as D } from "./ErrorMessage.js";
+import { useState as N, useRef as p, useEffect as O, Fragment as V } from "react";
+import { InputBox as q } from "./InputBox.js";
+import { ErrorMessage as w } from "./ErrorMessage.js";
 import { KeyboardArrowDownIcon as F } from "./icons/KeyboardArrowDownIcon.js";
-function p(t) {
-  return typeof t == "object" && t !== null && "label" in t && typeof t.label == "string" && "value" in t;
+function g(l) {
+  return typeof l == "object" && l !== null && "label" in l && typeof l.label == "string" && "value" in l;
 }
 function P({
-  options: t,
-  name: g,
-  value: E,
+  options: l,
+  name: E,
+  value: M,
   onChange: u,
-  cssStyle: a,
-  placeholder: o = "選択してください",
-  canOmitSelect: M,
-  isDisabled: s,
-  isRequired: m,
-  arrow: A
+  cssStyle: t,
+  placeholder: f = "選択してください",
+  canOmitSelect: B,
+  isDisabled: m,
+  isRequired: v,
+  arrow: C
 }) {
-  var b, h;
-  const [B, C] = O([]), l = E ?? "", c = () => {
+  var b, x;
+  const [s, j] = N([]), a = M ?? "", o = () => {
     const e = [];
-    l === "" && m && e.push(I.required), C(e);
-  }, N = x(l), v = x(!1);
-  V(() => {
-    if (!v.current) {
-      if (l === N.current) {
-        l !== "" && c();
+    a === "" && v && e.push(I.required), j(e);
+  }, k = p(a), h = p(!1);
+  O(() => {
+    if (!h.current) {
+      if (a === k.current) {
+        a !== "" && o();
         return;
       }
-      v.current = !0;
+      h.current = !0;
     }
-    c();
-  }, [l]);
-  const j = t.flatMap(
-    (e) => p(e) ? [e] : Object.values(e).flat()
-  ), k = (e) => {
-    const n = j.find(
-      (d) => String(d.value) === e
+    o();
+  }, [a]);
+  const A = l.flatMap(
+    (e) => g(e) ? [e] : Object.values(e).flat()
+  ), D = (e) => {
+    const n = A.find(
+      (c) => String(c.value) === e
     );
     u == null || u(n ? n.value : e);
   };
-  return /* @__PURE__ */ f(
-    w,
+  return /* @__PURE__ */ d(
+    q,
     {
-      cssStyle: a,
+      cssStyle: t,
       className: "inline-flex [&>select]:flex-auto [&>select]:cursor-pointer [&>select]:pe-8",
-      isDisabled: s,
+      isDisabled: m,
+      isErrored: !!s.length,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ d(
           "select",
           {
-            name: g,
-            value: l,
-            disabled: s,
-            required: m,
-            onChange: (e) => k(e.target.value),
-            onBlur: () => c(),
+            name: E,
+            value: a,
+            disabled: m,
+            required: v,
+            "aria-invalid": s.length > 0 || void 0,
+            onChange: (e) => D(e.target.value),
+            onBlur: () => o(),
             children: [
-              M ? /* @__PURE__ */ r("option", { value: "", children: o || "選択しない" }) : /* @__PURE__ */ r("option", { disabled: !0, value: "", children: o || "選択してください" }),
-              ["0", "NA"].includes(l.toString()) && s && /* @__PURE__ */ r("option", { disabled: !0, value: l, children: o || "選択してください" }),
-              t.map(
-                (e) => p(e) ? /* @__PURE__ */ r(
+              B ? /* @__PURE__ */ r("option", { value: "", children: f || "選択しない" }) : /* @__PURE__ */ r("option", { disabled: !0, value: "", children: f || "選択してください" }),
+              l.map(
+                (e) => g(e) ? /* @__PURE__ */ r(
                   "option",
                   {
                     value: e.value,
@@ -71,8 +72,8 @@ function P({
                     children: e.label
                   },
                   e.value
-                ) : /* @__PURE__ */ f(q, { children: [
-                  Object.entries(e).map(([n, d]) => /* @__PURE__ */ r("optgroup", { label: n, children: d.map((i) => /* @__PURE__ */ r(
+                ) : /* @__PURE__ */ d(V, { children: [
+                  Object.entries(e).map(([n, c]) => /* @__PURE__ */ r("optgroup", { label: n, children: c.map((i) => /* @__PURE__ */ r(
                     "option",
                     {
                       value: i.value,
@@ -87,14 +88,14 @@ function P({
             ]
           }
         ),
-        /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current", children: A ?? /* @__PURE__ */ r(F, {}) }),
+        /* @__PURE__ */ r("div", { className: "pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current", children: C ?? /* @__PURE__ */ r(F, {}) }),
         /* @__PURE__ */ r(
-          D,
+          w,
           {
-            errorMessages: B,
+            errorMessages: s,
             cssStyle: {
-              textColor: (b = a == null ? void 0 : a.error) == null ? void 0 : b.backgroundColor,
-              backgroundColor: (h = a == null ? void 0 : a.error) == null ? void 0 : h.textColor
+              textColor: (b = t == null ? void 0 : t.error) == null ? void 0 : b.backgroundColor,
+              backgroundColor: (x = t == null ? void 0 : t.error) == null ? void 0 : x.textColor
             }
           }
         )

package/dist/components/SlideDownUi.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as a, useRef as h, useImperativeHandle as E, useEffect as l } from "react";
+import { useState as a, useRef as p, useImperativeHandle as E, useEffect as l } from "react";
 import { KeyboardArrowDownIcon as I } from "./icons/KeyboardArrowDownIcon.js";
 import { COLOR as N } from "@geckou/ui-core";
 function $({
   isOpened: n = null,
-  isHiddenArrow: p = !1,
+  isHiddenArrow: h = !1,
   isDisabled: b = !1,
   isDisableClickOutside: f = !1,
   duration: c = 0.3,
@@ -13,7 +13,7 @@ function $({
   children: w,
   ref: x
 }) {
-  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, H] = a(0), d = h(null), m = h(null), R = () => r((e) => !e);
+  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, k] = a(0), d = p(null), m = p(null), H = () => r((e) => !e);
   E(x, () => ({
     isOpenedContents: () => t,
     close: () => r(!1)
@@ -31,7 +31,7 @@ function $({
     const e = m.current;
     if (!e)
       return;
-    const s = () => H(e.clientHeight);
+    const s = () => k(e.clientHeight);
     s();
     const o = new ResizeObserver(s);
     return o.observe(e), () => o.disconnect();
@@ -43,8 +43,8 @@ function $({
     const e = setTimeout(() => u(!0), c * 1e3);
     return () => clearTimeout(e);
   }, [t, c]);
-  const k = { "--link-color": N.blue };
-  return /* @__PURE__ */ v("div", { ref: d, style: k, children: [
+  const R = { "--link-color": N.blue };
+  return /* @__PURE__ */ v("div", { ref: d, style: R, children: [
     /* @__PURE__ */ v(
       "button",
       {
@@ -53,11 +53,11 @@ function $({
         "aria-expanded": t,
         className: "relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)",
         onClick: (e) => {
-          e.preventDefault(), R();
+          e.preventDefault(), H();
         },
         children: [
-          /* @__PURE__ */ i("div", { className: "w-full text-left", children: g }),
-          !p && /* @__PURE__ */ i(
+          /* @__PURE__ */ i("span", { className: "block w-full text-left", children: g }),
+          !h && /* @__PURE__ */ i(
             I,
             {
               className: `size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${t ? "rotate-180" : ""}`

package/dist/components/TextArea.js

@@ -1,68 +1,76 @@
 "use client";
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import { isEmptyValue as k, validateInputValue as B } from "@geckou/ui-core";
-import { useState as I, useRef as n, useEffect as A } from "react";
-import { InputBox as H } from "./InputBox.js";
-import { ErrorMessage as N } from "./ErrorMessage.js";
-function z({
-  name: d,
-  value: s,
-  onChange: o,
+import { jsxs as H, jsx as h } from "react/jsx-runtime";
+import { isEmptyValue as M, validateInputValue as T } from "@geckou/ui-core";
+import { useState as j, useRef as m, useEffect as k } from "react";
+import { InputBox as I } from "./InputBox.js";
+import { ErrorMessage as W } from "./ErrorMessage.js";
+function z(n) {
+  const e = getComputedStyle(n), t = (...r) => r.reduce((a, i) => a + (parseFloat(i) || 0), 0);
+  return e.boxSizing === "border-box" ? n.scrollHeight + t(e.borderTopWidth, e.borderBottomWidth) : n.scrollHeight - t(e.paddingTop, e.paddingBottom);
+}
+function q({
+  name: n,
+  value: e,
+  onChange: t,
   cssStyle: r,
-  placeholder: x = "入力してください",
+  placeholder: a = "入力してください",
   isDisabled: i,
-  isRequired: l,
-  rows: g,
-  maxLength: h = 100,
+  isRequired: p,
+  rows: x,
+  maxLength: b = 100,
   autocomplete: v = "off",
   validates: E = [],
   autoAdjustHeight: V
 }) {
-  var m, c;
-  const [u, C] = I([]), t = n(null), e = s ?? "", a = () => {
-    C(B(e, { isRequired: l, validates: E }));
-  }, M = n(e), f = n(!1);
-  return A(() => {
-    if (V && t.current && (t.current.style.height = "auto", t.current.style.height = `calc(${t.current.scrollHeight}px - 2rem)`), !f.current) {
-      if (e === M.current) {
-        k(e) || a();
+  var c, g;
+  const [l, B] = j([]), d = m(null), o = e ?? "", f = () => {
+    B(T(o, { isRequired: p, validates: E }));
+  }, C = m(o), s = m(!1);
+  return k(() => {
+    if (V && d.current) {
+      const u = d.current;
+      u.style.height = "auto", u.style.height = `${z(u)}px`;
+    }
+    if (!s.current) {
+      if (o === C.current) {
+        M(o) || f();
         return;
       }
-      f.current = !0;
+      s.current = !0;
     }
-    a();
-  }, [e]), /* @__PURE__ */ j(
-    H,
+    f();
+  }, [o]), /* @__PURE__ */ H(
+    I,
     {
       cssStyle: r,
       className: "min-h-[4em]",
-      isErrored: !!u.length,
+      isErrored: !!l.length,
       isDisabled: i,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ h(
           "textarea",
           {
-            ref: t,
-            name: d,
-            value: e,
-            required: l,
-            placeholder: x,
+            ref: d,
+            name: n,
+            value: o,
+            required: p,
+            placeholder: a,
             disabled: i,
             autoComplete: v,
-            rows: g,
-            maxLength: h,
-            "aria-invalid": u.length ? "true" : void 0,
-            onChange: (b) => o == null ? void 0 : o(b.target.value),
-            onBlur: () => a()
+            rows: x,
+            maxLength: b,
+            "aria-invalid": l.length ? "true" : void 0,
+            onChange: (u) => t == null ? void 0 : t(u.target.value),
+            onBlur: () => f()
           }
         ),
-        /* @__PURE__ */ p(
-          N,
+        /* @__PURE__ */ h(
+          W,
           {
-            errorMessages: u,
+            errorMessages: l,
             cssStyle: {
-              textColor: (m = r == null ? void 0 : r.error) == null ? void 0 : m.backgroundColor,
-              backgroundColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.textColor
+              textColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.backgroundColor,
+              backgroundColor: (g = r == null ? void 0 : r.error) == null ? void 0 : g.textColor
             }
           }
         )
@@ -71,5 +79,5 @@ function z({
   );
 }
 export {
-  z as TextArea
+  q as TextArea
 };

package/dist/components/TextBox.d.ts

@@ -23,11 +23,13 @@ type Props = {
      */
     role?: string;
     ariaLabel?: string;
+    /** 可視ラベルがあるなら、その要素の id をここで指す（ariaLabel より優先） */
+    ariaLabelledBy?: string;
     ariaExpanded?: boolean;
     ariaControls?: string;
     ariaActivedescendant?: string;
     ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both';
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
 };
-export declare function TextBox({ name, value, onChange, cssStyle, inputType, placeholder, isDisabled, isRequired, maxLength, autocomplete, validates, before, after, id, role, ariaLabel, ariaExpanded, ariaControls, ariaActivedescendant, ariaAutocomplete, onKeyDown, }: Props): import("react").JSX.Element;
+export declare function TextBox({ name, value, onChange, cssStyle, inputType, placeholder, isDisabled, isRequired, maxLength, autocomplete, validates, before, after, id, role, ariaLabel, ariaLabelledBy, ariaExpanded, ariaControls, ariaActivedescendant, ariaAutocomplete, onKeyDown, }: Props): import("react").JSX.Element;
 export {};