@geckou/ui-react 0.6.0 → 0.8.0

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
 };

package/dist/components/ErrorMessage.d.ts

@@ -1,9 +1,11 @@
 type Props = {
+    /** aria-describedby から参照させたいときに渡す */
+    id?: string;
     errorMessages?: string[];
     cssStyle?: {
         textColor?: string;
         backgroundColor?: string;
     };
 };
-export declare function ErrorMessage({ errorMessages, cssStyle }: Props): import("react").JSX.Element | null;
+export declare function ErrorMessage({ id, errorMessages, cssStyle }: Props): import("react").JSX.Element | null;
 export {};

package/dist/components/ErrorMessage.js

@@ -1,22 +1,23 @@
-import { jsx as n } from "react/jsx-runtime";
-import { COLOR as t } from "@geckou/ui-core";
-function f({ errorMessages: o, cssStyle: r }) {
+import { jsx as e } from "react/jsx-runtime";
+import { COLOR as n } from "@geckou/ui-core";
+function c({ id: t, errorMessages: o, cssStyle: r }) {
   if (!o || !o.length)
     return null;
   const b = {
-    "--error-text-color": (r == null ? void 0 : r.textColor) || t.white,
-    "--error-background-color": (r == null ? void 0 : r.backgroundColor) || t.red
+    "--error-text-color": (r == null ? void 0 : r.textColor) || n.white,
+    "--error-background-color": (r == null ? void 0 : r.backgroundColor) || n.red
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(
     "div",
     {
+      id: t,
       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: o.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
+      children: o.map((l, a) => /* @__PURE__ */ e("span", { children: l }, a))
     }
   );
 }
 export {
-  f as ErrorMessage
+  c as ErrorMessage
 };

package/dist/components/LabeledCheckbox.d.ts

@@ -2,11 +2,13 @@ import { CheckBoxStyleForEachStatus } from '../types';
 type Props = {
     name: string;
     label: string;
+    /** ネイティブ送信時の値（→ CheckBox の value） */
+    value?: string | number;
     checked?: boolean;
     onChange?: (newValue: boolean) => void;
     isDisabled?: boolean;
     cssStyle?: CheckBoxStyleForEachStatus;
     isDisableAnimation?: boolean;
 };
-export declare function LabeledCheckbox({ name, label, checked, onChange, isDisabled, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
+export declare function LabeledCheckbox({ name, label, value, checked, onChange, isDisabled, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/LabeledCheckbox.js

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

package/dist/components/LoadingSpinner.js

@@ -1,25 +1,37 @@
 import { jsx as c, jsxs as r } from "react/jsx-runtime";
 function i() {
-  return /* @__PURE__ */ c("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r("g", { children: [
-    /* @__PURE__ */ c("circle", { cx: "12", cy: "2.5", r: "1.5", opacity: ".14" }),
-    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "3.77", r: "1.5", opacity: ".29" }),
-    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "7.25", r: "1.5", opacity: ".43" }),
-    /* @__PURE__ */ c("circle", { cx: "21.50", cy: "12.00", r: "1.5", opacity: ".57" }),
-    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "16.75", r: "1.5", opacity: ".71" }),
-    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "20.23", r: "1.5", opacity: ".86" }),
-    /* @__PURE__ */ c("circle", { cx: "12", cy: "21.5", r: "1.5" }),
+  return (
+    // 装飾。読み上げ対象にしない（状態は呼び出し側の aria-busy で伝える）
     /* @__PURE__ */ c(
-      "animateTransform",
+      "svg",
       {
-        attributeName: "transform",
-        type: "rotate",
-        calcMode: "discrete",
-        dur: "0.75s",
-        values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
-        repeatCount: "indefinite"
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: /* @__PURE__ */ r("g", { children: [
+          /* @__PURE__ */ c("circle", { cx: "12", cy: "2.5", r: "1.5", opacity: ".14" }),
+          /* @__PURE__ */ c("circle", { cx: "16.75", cy: "3.77", r: "1.5", opacity: ".29" }),
+          /* @__PURE__ */ c("circle", { cx: "20.23", cy: "7.25", r: "1.5", opacity: ".43" }),
+          /* @__PURE__ */ c("circle", { cx: "21.50", cy: "12.00", r: "1.5", opacity: ".57" }),
+          /* @__PURE__ */ c("circle", { cx: "20.23", cy: "16.75", r: "1.5", opacity: ".71" }),
+          /* @__PURE__ */ c("circle", { cx: "16.75", cy: "20.23", r: "1.5", opacity: ".86" }),
+          /* @__PURE__ */ c("circle", { cx: "12", cy: "21.5", r: "1.5" }),
+          /* @__PURE__ */ c(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "rotate",
+              calcMode: "discrete",
+              dur: "0.75s",
+              values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
+              repeatCount: "indefinite"
+            }
+          )
+        ] })
       }
     )
-  ] }) });
+  );
 }
 export {
   i as LoadingSpinner

package/dist/components/ModalBox.js

@@ -1,71 +1,75 @@
 "use client";
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-import { useId as g, useRef as i, useEffect as u } from "react";
-import { createScrollLock as y, createModalLayer as w, handleTabKey as h } from "@geckou/ui-core";
-const k = {
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useId as y, useRef as o, useEffect as i } from "react";
+import { createScrollLock as w, createModalLayer as h, handleTabKey as k } from "@geckou/ui-core";
+const E = {
   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 E() {
-  return /* @__PURE__ */ t(
+function L() {
+  return /* @__PURE__ */ a(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 -960 960 960",
       fill: "currentColor",
-      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" })
+      children: /* @__PURE__ */ a("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 _({
   isShown: r,
-  size: p = "medium",
-  onClose: o,
-  header: n,
+  size: f = "medium",
+  onClose: n,
+  header: u,
   footer: d,
-  children: f,
-  ariaLabel: v
+  children: v,
+  ariaLabel: x
 }) {
-  const c = g(), m = i(null), x = i(y());
-  u(() => {
-    const e = x.current;
+  const s = y(), m = o(null), g = o(w());
+  i(() => {
+    const e = g.current;
     return e.toggle(r), () => e.release();
   }, [r]);
-  const s = i(w());
-  u(() => {
-    const e = s.current;
+  const p = o(h());
+  i(() => {
+    const e = p.current;
     return e.toggle(r, m.current), () => e.release();
   }, [r]);
-  const l = i(null);
-  return u(() => {
-    var e, a;
-    if (r) {
-      l.current ?? (l.current = document.activeElement), (e = m.current) == null || e.focus();
-      return;
-    }
-    (a = l.current) == null || a.focus(), l.current = null;
-  }, [r]), u(() => {
+  const l = o(null), c = o(!1);
+  return i(() => {
+    var e;
+    if (r)
+      return l.current ?? (l.current = document.activeElement), (e = m.current) == null || e.focus(), () => {
+        var t;
+        (t = l.current) == null || t.focus(), l.current = null;
+      };
+  }, [r]), i(() => {
     if (!r)
       return;
-    const e = (a) => {
-      if (s.current.isTopmost() && !a.defaultPrevented) {
-        if (a.key === "Escape") {
-          a.preventDefault(), o();
+    const e = (t) => {
+      if (p.current.isTopmost() && !t.defaultPrevented) {
+        if (t.key === "Escape") {
+          t.preventDefault(), n();
           return;
         }
-        h(m.current, a, document.activeElement);
+        k(m.current, t, document.activeElement);
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [r, o]), /* @__PURE__ */ t(
+  }, [r, n]), /* @__PURE__ */ a(
     "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,
+      onPointerDown: (e) => {
+        c.current = e.target === e.currentTarget;
+      },
       onClick: (e) => {
-        e.target === e.currentTarget && o();
+        const t = c.current;
+        c.current = !1, t && e.target === e.currentTarget && n();
       },
       children: /* @__PURE__ */ b(
         "div",
@@ -73,29 +77,29 @@ function _({
           ref: m,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": n ? c : void 0,
-          "aria-label": n ? void 0 : v ?? "ダイアログ",
+          "aria-labelledby": u ? s : void 0,
+          "aria-label": u ? void 0 : x ?? "ダイアログ",
           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] ${k[p]}`,
+          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] ${E[f]}`,
           children: [
-            n && /* @__PURE__ */ t(
+            u && /* @__PURE__ */ a(
               "header",
               {
-                id: c,
+                id: s,
                 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: n
+                children: u
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: f }),
-            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(
+            /* @__PURE__ */ a("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: v }),
+            d && /* @__PURE__ */ a("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__ */ a(
               "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: o,
-                children: /* @__PURE__ */ t(E, {})
+                onClick: n,
+                children: /* @__PURE__ */ a(L, {})
               }
             )
           ]

package/dist/components/PopupBox.js

@@ -1,28 +1,28 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useState as o, useRef as c, useEffect as l, useImperativeHandle as f } from "react";
+import { useState as n, useRef as c, useEffect as l, useImperativeHandle as f } from "react";
 import { createPortal as p } from "react-dom";
 import { COLOR as d } from "@geckou/ui-core";
 const x = {
   left: "left-[max(calc((100vw-64rem)/2),1rem)]",
   right: "right-[max(calc((100vw-64rem)/2),1rem)]",
   center: "inset-0 m-auto"
-}, S = {
+}, h = {
   top: "top-14",
   bottom: "bottom-4",
   center: "inset-0 m-auto"
 };
 function y({
   position: t = { x: "right", y: "top" },
-  ref: n,
-  children: m
+  ref: m,
+  children: s
 }) {
-  const [s, r] = o(!1), [u, a] = o(!1), e = c(null);
+  const [r, o] = n(!1), [u, a] = n(!1), e = c(null);
   return l(() => (a(!0), () => {
     e.current && clearTimeout(e.current);
-  }), []), f(n, () => ({
+  }), []), f(m, () => ({
     showPopup: () => {
-      r(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => r(!1), 3e3);
+      o(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => o(!1), 3e3);
     }
   })), u ? p(
     /* @__PURE__ */ i(
@@ -30,8 +30,8 @@ function y({
       {
         role: "status",
         style: { borderColor: d.blue },
-        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${S[t.y]} ${s ? "opacity-100" : "opacity-0"}`,
-        children: m
+        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${h[t.y]} ${r ? "opacity-100" : "opacity-0"}`,
+        children: r && s
       }
     ),
     document.body

package/dist/components/RadioButtons.d.ts

@@ -8,6 +8,12 @@ type Props = {
     isRequired?: boolean;
     cssStyle?: RadioButtonStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * ラジオグループ自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function RadioButtons({ value, onChange, options, name, isDisabled, isRequired, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
+export declare function RadioButtons({ value, onChange, options, name, isDisabled, isRequired, cssStyle, isDisableAnimation, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};