@geckou/ui-react 0.2.0 → 0.4.0

package/dist/components/InputBox.js

@@ -1,72 +1,68 @@
 "use client";
-import { jsx as C } from "react/jsx-runtime";
-import { useRef as a, useState as L, useCallback as E, useEffect as v } from "react";
-import { INPUT_BOX_DEFAULT_STYLES as k } from "@geckou/ui-core";
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as u, useState as C, useCallback as L, useEffect as v } from "react";
+import { INPUT_BOX_DEFAULT_STYLES as E } from "@geckou/ui-core";
 function $({
   cssStyle: m,
-  isErrored: u,
-  isDisabled: n,
+  isErrored: l,
+  isDisabled: s,
   className: _,
-  children: w
+  children: S
 }) {
-  var b, p, h;
-  const l = a(null), [S, t] = L("default"), c = a(u);
-  c.current = u;
-  const r = E(() => {
-    var s;
-    const e = (s = l.current) == null ? void 0 : s.querySelector("input, textarea, select");
-    if (!e)
+  var p, x, h;
+  const c = u(null), [g, t] = C("default"), i = u(l);
+  i.current = l;
+  const r = L(() => {
+    var a;
+    const e = Array.from(
+      ((a = c.current) == null ? void 0 : a.querySelectorAll("input, textarea, select")) ?? []
+    );
+    if (e.length === 0)
       return t("default");
-    if (e.matches(":disabled"))
+    if (e.every((n) => n.matches(":disabled")))
       return t("disabled");
-    if (e.matches(":focus"))
+    if (e.some((n) => n.matches(":focus")))
       return t("focus");
-    if (e.tagName.toLowerCase() === "select") {
-      const x = e;
-      return t(
-        x.required && !x.value ? "error" : "valid"
-      );
-    }
-    if (c.current || e.matches(":invalid"))
+    if (i.current || e.some((n) => n.matches(":invalid")))
       return t("error");
-    if (e.matches(":valid") && e.matches(":not(:placeholder-shown)") && e.matches(":not(:invalid)"))
+    if (e.every((n) => n.value !== ""))
       return t("valid");
     t("default");
   }, []);
   v(() => {
-    const e = l.current;
+    const e = c.current;
     if (!e)
       return;
-    const s = new MutationObserver(r);
-    return s.observe(e, { childList: !0, subtree: !0 }), e.addEventListener("focusin", r, !0), e.addEventListener("blur", r, !0), () => {
-      s.disconnect(), e.removeEventListener("focusin", r, !0), e.removeEventListener("blur", r, !0);
+    const a = new MutationObserver(r);
+    return a.observe(e, { childList: !0, subtree: !0 }), e.addEventListener("focusin", r, !0), e.addEventListener("blur", r, !0), () => {
+      a.disconnect(), e.removeEventListener("focusin", r, !0), e.removeEventListener("blur", r, !0);
     };
   }, [r]);
-  const i = a(!0), d = a(n);
+  const d = u(!0), f = u(s);
   v(() => {
-    const e = d.current !== n;
-    if (d.current = n, i.current) {
-      i.current = !1, n && t("disabled");
+    const e = f.current !== s;
+    if (f.current = s, d.current) {
+      d.current = !1, s && t("disabled");
       return;
     }
     if (e)
-      return t(n ? "disabled" : "default");
+      return t(s ? "disabled" : "default");
     r();
-  }, [n, u, r]);
-  const f = { ...k, ...m }, o = f[S] ?? f.default, g = {
+  }, [s, l, r]);
+  const b = { ...E, ...m }, o = b[g] ?? b.default, w = {
     "--text-color": o.textColor,
     "--placeholder-color": o.placeholderColor,
     "--background-color": o.backgroundColor,
-    "--radius-size": ((b = o.border) == null ? void 0 : b.radius) || ".25rem",
-    "--input-box-shadow": `0 0 0 ${((p = o.border) == null ? void 0 : p.size) || "1px"} ${(h = o.border) == null ? void 0 : h.color} inset, ${o.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"}`
+    "--radius-size": ((p = o.border) == null ? void 0 : p.radius) || ".25rem",
+    "--input-box-shadow": `0 0 0 ${((x = o.border) == null ? void 0 : x.size) || "1px"} ${(h = o.border) == null ? void 0 : h.color} inset, ${o.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"}`
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: c,
       className: `relative inline-flex max-w-full rounded-(--radius-size) bg-(--background-color) text-(--text-color) shadow-(--input-box-shadow) has-[:disabled]:pointer-events-none has-[:disabled]:before:pointer-events-auto has-[:disabled]:before:absolute has-[:disabled]:before:inset-0 has-[:disabled]:before:cursor-not-allowed has-[:disabled]:before:content-[''] [&_*::placeholder]:font-normal [&_*::placeholder]:text-(--placeholder-color) [&_*:focus]:outline-none [&_:is(input,textarea,select)]:w-full [&_:is(input,textarea,select)]:appearance-none [&_:is(input,textarea,select)]:border-none [&_:is(input,textarea,select)]:bg-transparent [&_:is(input,textarea,select)]:p-4 [&_:is(input,textarea,select)]:outline-none ${_ || ""}`,
-      style: g,
-      children: w
+      style: w,
+      children: S
     }
   );
 }

package/dist/components/LabeledCheckbox.js

@@ -1,46 +1,49 @@
 "use client";
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { CheckBox as h } from "./CheckBox.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { CheckBox as b } from "./CheckBox.js";
 import { COLOR as r } from "@geckou/ui-core";
-function f({
-  name: c,
-  label: l,
-  checked: d,
-  onChange: u,
-  isDisabled: e,
-  cssStyle: o,
-  isDisableAnimation: x
+function L({
+  name: l,
+  label: d,
+  checked: i,
+  onChange: m,
+  isDisabled: o,
+  cssStyle: e,
+  isDisableAnimation: u
 }) {
-  const t = d ?? !1, i = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, a = {
-    textColor: e ? r.darkGray : r.black,
-    backgroundColor: e ? r.darkGray : r.blue,
-    ...i ?? {}
+  const a = i ?? !1, n = h(), x = o ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, c = {
+    textColor: o ? r.darkGray : r.black,
+    backgroundColor: o ? r.darkGray : r.blue,
+    ...x ?? {}
   }, k = {
-    "--text-color": a.textColor,
-    "--checked-color": a.backgroundColor
+    "--text-color": c.textColor,
+    "--checked-color": c.backgroundColor
   };
-  return /* @__PURE__ */ m("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto", children: [
-    /* @__PURE__ */ n("span", { className: "pointer-events-none", children: /* @__PURE__ */ n(
-      h,
+  return /* @__PURE__ */ p("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto", children: [
+    /* @__PURE__ */ t("span", { className: "pointer-events-none", children: /* @__PURE__ */ t(
+      b,
       {
-        name: c,
-        checked: t,
-        onChange: u,
-        isDisabled: e,
-        cssStyle: o,
-        isDisableAnimation: x
+        name: l,
+        checked: a,
+        onChange: m,
+        isDisabled: o,
+        cssStyle: e,
+        isDisableAnimation: u,
+        ariaLabelledBy: n
       }
     ) }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "span",
       {
+        id: n,
         style: k,
-        className: t ? "text-(--text-color)" : "text-(--checked-color)",
-        children: l
+        className: a ? "text-(--text-color)" : "text-(--checked-color)",
+        children: d
       }
     )
   ] });
 }
 export {
-  f as LabeledCheckbox
+  L as LabeledCheckbox
 };

package/dist/components/ModalBox.js

@@ -1,75 +1,90 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useId as p, useRef as f, useEffect as d } from "react";
-const v = {
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import { useId as b, useRef as m, useEffect as n } from "react";
+import { createScrollLock as g } from "@geckou/ui-core";
+const w = {
   small: "max-w-[var(--mobile-lower-width,430px)]",
   medium: "max-w-[var(--desktop-lower-width,1025px)]",
   large: "max-w-[var(--contents-max-width,1440px)]"
 };
-function x() {
-  return /* @__PURE__ */ e(
+function h() {
+  return /* @__PURE__ */ t(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 -960 960 960",
       fill: "currentColor",
-      children: /* @__PURE__ */ e("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+      children: /* @__PURE__ */ t("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
     }
   );
 }
-function w({
+function N({
   isShown: r,
-  size: s = "medium",
-  onClose: t,
+  size: c = "medium",
+  onClose: a,
   header: l,
-  footer: o,
-  children: u,
-  ariaLabel: n
+  footer: d,
+  children: p,
+  ariaLabel: f
 }) {
-  const i = p(), m = f(null);
-  return d(() => (r ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [r]), d(() => {
-    var a;
-    r && ((a = m.current) == null || a.focus());
-  }, [r]), /* @__PURE__ */ e(
+  const u = b(), s = m(null), v = m(g());
+  n(() => {
+    const e = v.current;
+    return e.toggle(r), () => e.release();
+  }, [r]);
+  const i = m(null);
+  return n(() => {
+    var e, o;
+    if (r) {
+      i.current = document.activeElement, (e = s.current) == null || e.focus();
+      return;
+    }
+    (o = i.current) == null || o.focus(), i.current = null;
+  }, [r]), n(() => {
+    if (!r)
+      return;
+    const e = (o) => {
+      o.key === "Escape" && a();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [r, a]), /* @__PURE__ */ t(
     "div",
     {
       className: `fixed top-0 left-0 z-50 flex h-dvh w-dvw cursor-pointer items-center justify-center overflow-hidden bg-[#33333380] p-[var(--sp-larger,3rem)] backdrop-blur-sm transition-opacity duration-100 max-md:px-[var(--sp-large,1.5rem)] ${r ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
       "aria-hidden": !r,
       inert: !r,
-      onClick: (a) => {
-        a.target === a.currentTarget && t();
+      onClick: (e) => {
+        e.target === e.currentTarget && a();
       },
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ x(
         "div",
         {
-          ref: m,
+          ref: s,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": l ? i : void 0,
-          "aria-label": l ? void 0 : n ?? "ダイアログ",
+          "aria-labelledby": l ? u : void 0,
+          "aria-label": l ? void 0 : f ?? "ダイアログ",
           tabIndex: -1,
-          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${v[s]}`,
+          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${w[c]}`,
           children: [
-            l && /* @__PURE__ */ e(
+            l && /* @__PURE__ */ t(
               "header",
               {
-                id: i,
+                id: u,
                 className: "border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]",
                 children: l
               }
             ),
-            /* @__PURE__ */ e("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: u }),
-            o && /* @__PURE__ */ e("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: o }),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: p }),
+            d && /* @__PURE__ */ t("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: d }),
+            /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 "aria-label": "閉じる",
                 className: "absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full",
-                onClick: t,
-                children: /* @__PURE__ */ e(x, {})
+                onClick: a,
+                children: /* @__PURE__ */ t(h, {})
               }
             )
           ]
@@ -79,5 +94,5 @@ function w({
   );
 }
 export {
-  w as ModalBox
+  N as ModalBox
 };

package/dist/components/RadioButtons.js

@@ -1,64 +1,70 @@
 "use client";
-import { jsxs as n, jsx as c } from "react/jsx-runtime";
-import { useId as h } from "react";
-import { COLOR as r } from "@geckou/ui-core";
-function R({
-  value: s,
-  onChange: t,
-  options: b,
-  name: f,
-  isDisabled: o,
-  isRequired: p,
+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: _,
+  isDisabled: a,
+  isRequired: n,
   cssStyle: e,
-  isDisableAnimation: m
+  isDisableAnimation: v
 }) {
-  var d, i;
-  const _ = s ?? "", x = h(), v = f ?? x, k = o ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
-    textColor: o ? r.darkGray : r.black,
-    backgroundColor: o ? r.lightGray : r.white,
+  var i, d;
+  const r = p ?? "", [g, x] = N(!1), c = G(r);
+  R(() => {
+    c.current !== r && (c.current = r, x(!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 = {
+    textColor: a ? o.darkGray : o.black,
+    backgroundColor: a ? o.lightGray : o.white,
     border: {
-      color: o ? r.darkGray : r.blue,
+      color: a ? o.darkGray : o.blue,
       size: "1px"
     },
-    ...k ?? {}
-  }, g = {
+    ...C ?? {}
+  }, E = {
     "--text-color": l.textColor,
-    "--border-color": (d = l.border) == null ? void 0 : d.color,
-    "--border-size": (i = l.border) == null ? void 0 : i.size,
+    "--border-color": (i = l.border) == null ? void 0 : i.color,
+    "--border-size": (d = l.border) == null ? void 0 : d.size,
     "--background-color": l.backgroundColor,
-    "--duration": m ? "0s" : ".3s"
+    "--duration": v ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center gap-4", children: [
-    /* @__PURE__ */ c("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
-    b.map((a) => {
-      const u = a.value === _;
-      return /* @__PURE__ */ n(
+  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: g,
-          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) ${u ? "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]"}`,
+          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__ */ c(
+            /* @__PURE__ */ u(
               "input",
               {
                 type: "radio",
-                name: v,
-                value: a.value,
-                disabled: o,
-                required: p,
-                checked: u,
-                onChange: () => t == null ? void 0 : t(a.value),
+                name: w,
+                value: t.value,
+                disabled: a,
+                required: n,
+                checked: b,
+                onChange: () => s == null ? void 0 : s(t.value),
                 className: "sr-only"
               }
             ),
-            /* @__PURE__ */ c("span", { children: a.label })
+            /* @__PURE__ */ u("span", { children: t.label })
           ]
         },
-        a.value
+        t.value
       );
-    })
+    }),
+    /* @__PURE__ */ u(j, { errorMessages: h })
   ] });
 }
 export {
-  R as RadioButtons
+  A as RadioButtons
 };

package/dist/components/TabUI.d.ts

@@ -10,7 +10,6 @@ type Props = {
         background: string;
         text: string;
     };
-    type?: 'tab' | 'button' | 'border';
     initialIndex?: number;
     tabSlots?: Record<string, ReactNode>;
     panelSlots?: Record<string, ReactNode>;

package/dist/components/TabUI.js

@@ -1,70 +1,71 @@
 "use client";
-import { jsxs as I, jsx as k } from "react/jsx-runtime";
-import { useState as $, useRef as v, useId as w } from "react";
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { useState as v, useRef as $, useId as w } from "react";
 import { COLOR as T } from "@geckou/ui-core";
 function C({
-  tabs: r,
-  color: t,
+  tabs: t,
+  color: r,
   initialIndex: p = 0,
   tabSlots: d,
   panelSlots: y
 }) {
-  const [c, o] = $(
+  const [i, k] = v(
     () => {
       var e, n;
-      return ((e = r[p]) == null ? void 0 : e.key) ?? ((n = r[0]) == null ? void 0 : n.key) ?? "";
+      return ((e = t[p]) == null ? void 0 : e.key) ?? ((n = t[0]) == null ? void 0 : n.key) ?? "";
     }
-  ), s = v([]), a = w(), u = (e) => `${a}-tab-${e}`, f = (e) => `${a}-panel-${e}`, m = (e) => o(e), l = (e) => {
+  ), s = $([]), u = w(), o = (e) => `${u}-tab-${e}`, f = (e) => `${u}-panel-${e}`, l = (e) => k(e), x = (e) => {
     var n;
-    o(r[e].key), (n = s.current[e]) == null || n.focus();
+    k(t[e].key), (n = s.current[e]) == null || n.focus();
   }, h = (e) => {
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
       return;
-    const n = r.findIndex((g) => g.key === c);
+    const n = t.findIndex((g) => g.key === i);
     if (n === -1)
       return;
     e.preventDefault();
-    const i = r.length - 1;
-    e.key === "ArrowLeft" ? l(n > 0 ? n - 1 : i) : l(n < i ? n + 1 : 0);
-  }, x = {
-    "--active-color": (t == null ? void 0 : t.active) || T.blue,
-    "--background-color": (t == null ? void 0 : t.background) || "transparent"
+    const c = t.length - 1;
+    e.key === "ArrowLeft" ? x(n > 0 ? n - 1 : c) : x(n < c ? n + 1 : 0);
+  }, m = {
+    "--active-color": (r == null ? void 0 : r.active) || T.blue,
+    "--background-color": (r == null ? void 0 : r.background) || "transparent",
+    "--text-color": (r == null ? void 0 : r.text) || "inherit"
   };
   return /* @__PURE__ */ I("div", { children: [
-    /* @__PURE__ */ k(
+    /* @__PURE__ */ a(
       "div",
       {
-        style: x,
+        style: m,
         className: "flex bg-(--background-color)",
         role: "tablist",
         onKeyDown: h,
-        children: r.map((e, n) => /* @__PURE__ */ k(
+        children: t.map((e, n) => /* @__PURE__ */ a(
           "button",
           {
-            id: u(e.key),
-            ref: (i) => {
-              s.current[n] = i;
+            id: o(e.key),
+            ref: (c) => {
+              s.current[n] = c;
             },
             type: "button",
             role: "tab",
             "aria-controls": f(e.key),
-            "aria-selected": c === e.key,
-            tabIndex: c === e.key ? 0 : -1,
-            className: `border-none bg-transparent px-4 py-2 text-base ${c === e.key ? "cursor-auto" : "cursor-pointer"}`,
-            onClick: () => m(e.key),
+            "aria-selected": i === e.key,
+            tabIndex: i === e.key ? 0 : -1,
+            className: `border-none bg-transparent px-4 py-2 text-base ${i === e.key ? "cursor-auto text-(--active-color)" : "cursor-pointer text-(--text-color)"}`,
+            onClick: () => l(e.key),
             children: (d == null ? void 0 : d[e.key]) ?? e.label
           },
           e.key
         ))
       }
     ),
-    r.map((e) => /* @__PURE__ */ k(
+    t.map((e) => /* @__PURE__ */ a(
       "div",
       {
         id: f(e.key),
         role: "tabpanel",
-        "aria-labelledby": u(e.key),
-        hidden: c !== e.key,
+        "aria-labelledby": o(e.key),
+        hidden: i !== e.key,
         children: y == null ? void 0 : y[`${e.key}Contents`]
       },
       `${e.key}_panel`

package/dist/components/ToggleButton.d.ts

@@ -10,6 +10,9 @@ type Props = {
     onChange?: (newValue: boolean) => void;
     isDisabled?: boolean;
     cssStyle?: StyleForEachStatus<ToggleStyle>;
+    /** アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function ToggleButton({ name, label, checked, onChange, isDisabled, cssStyle, }: Props): import("react").JSX.Element;
+export declare function ToggleButton({ name, label, checked, onChange, isDisabled, cssStyle, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/ToggleButton.js

@@ -1,16 +1,18 @@
 "use client";
-import { jsxs as x, jsx as f } from "react/jsx-runtime";
+import { jsxs as v, jsx as f } from "react/jsx-runtime";
 import { COLOR as e } from "@geckou/ui-core";
-function m({
+function k({
   name: l,
   label: n = { on: "ON", off: "OFF" },
-  checked: b,
+  checked: h,
   onChange: d,
   isDisabled: o,
-  cssStyle: r
+  cssStyle: r,
+  ariaLabel: p,
+  ariaLabelledBy: c
 }) {
-  var c, u, s;
-  const a = b ?? !1, p = Math.max(n.on.length, n.off.length), t = o ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, i = {
+  var u, s, b;
+  const a = h ?? !1, g = Math.max(n.on.length, n.off.length), t = o ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, i = {
     on: {
       textColor: o ? e.lightGray : e.white,
       backgroundColor: o ? e.gray : e.blue,
@@ -33,28 +35,30 @@ function m({
       boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
       ...t == null ? void 0 : t.off
     }
-  }[a ? "on" : "off"], h = {
+  }[a ? "on" : "off"], x = {
     "--text-color": i.textColor,
-    "--border-color": (c = i.border) == null ? void 0 : c.color,
-    "--border-size": (u = i.border) == null ? void 0 : u.size,
-    "--radius-size": (s = i.border) == null ? void 0 : s.radius,
+    "--border-color": (u = i.border) == null ? void 0 : u.color,
+    "--border-size": (s = i.border) == null ? void 0 : s.size,
+    "--radius-size": (b = i.border) == null ? void 0 : b.radius,
     "--background-color": i.backgroundColor,
     "--box-shadow": i.boxShadow,
-    "--inline-size": `${p * 2}ch`,
+    "--inline-size": `${g * 2}ch`,
     "--handle-size": "1.5rem",
     "--padding-size": "calc(var(--border-size) + 2px)",
     "--duration": ".15s"
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ v(
     "button",
     {
       type: "button",
-      style: h,
+      style: x,
       disabled: o,
-      "aria-pressed": a,
-      "aria-label": l,
-      onClick: (g) => {
-        g.stopPropagation(), o || d == null || d(!a);
+      role: "switch",
+      "aria-checked": a,
+      "aria-labelledby": c,
+      "aria-label": c ? void 0 : p ?? l,
+      onClick: (z) => {
+        z.stopPropagation(), o || d == null || d(!a);
       },
       className: "relative inline-block w-[calc(var(--inline-size)+var(--handle-size)+(var(--padding-size)*2))] cursor-pointer rounded-(--radius-size) border-none bg-(--background-color) p-(--padding-size) shadow-[0_0_0_var(--border-size)_var(--border-color)_inset,var(--box-shadow)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color)",
       children: [
@@ -88,5 +92,5 @@ function m({
   );
 }
 export {
-  m as ToggleButton
+  k as ToggleButton
 };