@geckou/ui-react 0.3.0 → 0.5.0

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/SearchableSelectBox.d.ts

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

package/dist/components/SearchableSelectBox.js

@@ -1,61 +1,104 @@
 "use client";
-import { jsxs as N, jsx as n } from "react/jsx-runtime";
-import { useState as p, useRef as v, useEffect as w } from "react";
-import { TextBox as S } from "./TextBox.js";
-function F({
-  options: i,
-  value: t,
+import { jsxs as N, jsx as w } from "react/jsx-runtime";
+import { useState as v, useRef as k, useId as _, useEffect as y } from "react";
+import { TextBox as $ } from "./TextBox.js";
+function R({
+  options: h,
+  value: o,
   onChange: s,
-  onSelect: o,
-  name: x,
-  placeholder: b = "入力してください",
-  isDisabled: h,
-  searchTarget: E = "label",
-  cssStyle: O
+  onSelect: d,
+  name: A,
+  placeholder: I = "入力してください",
+  isDisabled: g,
+  searchTarget: B = "label",
+  cssStyle: L,
+  ariaLabel: O
 }) {
-  const [l, a] = p(t), [k, c] = p(!1), u = v(null), d = v(t);
-  w(() => {
-    d.current !== t && (d.current = t, a(t));
-  }, [t]), w(() => {
+  const [u, f] = v(o), [p, a] = v(!1), [i, n] = v(-1), x = k(null), m = _(), b = (e) => `${m}-option-${e}`, E = k(o);
+  y(() => {
+    E.current !== o && (E.current = o, f(o));
+  }, [o]), y(() => {
     const e = (r) => {
-      const f = u.current;
-      f && !f.contains(r.target) && c(!1);
+      const t = x.current;
+      t && !t.contains(r.target) && a(!1);
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
   }, []);
-  const m = l ? i.filter(
-    (e) => String(e[E]).toLowerCase().includes(l.toLowerCase())
-  ) : i, B = (e) => {
+  const l = u ? h.filter(
+    (e) => String(e[B]).toLowerCase().includes(u.toLowerCase())
+  ) : h, F = (e) => {
     const r = String(e);
-    a(r), c(!!r), s == null || s(r);
-  }, L = (e) => {
+    f(r), a(!!r), n(-1), s == null || s(r);
+  }, D = (e) => {
     const r = e.value.toString();
-    a(r), c(!1), s == null || s(r), o == null || o(r);
+    f(r), a(!1), n(-1), s == null || s(r), d == null || d(r);
+  }, c = p && l.length > 0, S = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (e.preventDefault(), !p) {
+        a(!0), n(
+          e.key === "ArrowDown" ? 0 : l.length - 1
+        );
+        return;
+      }
+      if (l.length === 0)
+        return;
+      n((r) => {
+        const t = l.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));
+      return;
+    }
+    e.key === "Escape" && p && (e.preventDefault(), a(!1), n(-1));
   };
-  return /* @__PURE__ */ N("div", { ref: u, className: "relative", children: [
-    /* @__PURE__ */ n(
-      S,
+  return /* @__PURE__ */ N("div", { ref: x, className: "relative", children: [
+    /* @__PURE__ */ w(
+      $,
       {
-        name: x,
-        value: l,
-        onChange: B,
-        isDisabled: h,
-        placeholder: b,
-        cssStyle: O
+        name: A,
+        value: u,
+        onChange: F,
+        isDisabled: g,
+        placeholder: I,
+        cssStyle: L,
+        role: "combobox",
+        ariaLabel: O,
+        ariaAutocomplete: "list",
+        ariaExpanded: c,
+        ariaControls: m,
+        ariaActivedescendant: c && i >= 0 ? b(i) : void 0,
+        onKeyDown: S
       }
     ),
-    k && m.length > 0 && /* @__PURE__ */ n("div", { 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: m.map((e) => /* @__PURE__ */ n(
-      "button",
+    c && /* @__PURE__ */ w(
+      "div",
       {
-        type: "button",
-        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",
-        onClick: () => L(e),
-        children: e.label
-      },
-      e.value
-    )) })
+        id: m,
+        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__ */ w(
+          "div",
+          {
+            id: b(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);
+            },
+            onMouseEnter: () => n(r),
+            children: e.label
+          },
+          e.value
+        ))
+      }
+    )
   ] });
 }
 export {
-  F as SearchableSelectBox
+  R as SearchableSelectBox
 };

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/TextBox.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { KeyboardEvent, ReactNode } from 'react';
 import { InputBoxStyleForEachStatus, Validates } from '../types';
 type InputValue = string | number;
 type Props = {
@@ -15,6 +15,19 @@ type Props = {
     validates?: Validates;
     before?: ReactNode;
     after?: ReactNode;
+    /** input の id。combobox のように外から参照する必要があるときに渡す */
+    id?: string;
+    /**
+     * input へそのまま渡す ARIA 属性とキー操作。
+     * SearchableSelectBox のような複合ウィジェットから使う（通常は指定しない）
+     */
+    role?: string;
+    ariaLabel?: 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, }: 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, ariaExpanded, ariaControls, ariaActivedescendant, ariaAutocomplete, onKeyDown, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/TextBox.js

@@ -1,83 +1,99 @@
 "use client";
-import { jsxs as W, jsx as c } from "react/jsx-runtime";
-import { isEmptyValue as w, convertFullWidthToHalfWidth as x, validateInputValue as C } from "@geckou/ui-core";
-import { useState as F, useRef as n, useEffect as H } from "react";
-import { InputBox as N } from "./InputBox.js";
-import { ErrorMessage as q } from "./ErrorMessage.js";
-function L({
+import { jsxs as A, jsx as s } from "react/jsx-runtime";
+import { isEmptyValue as G, convertFullWidthToHalfWidth as x, validateInputValue as J } from "@geckou/ui-core";
+import { useState as K, useRef as n, useEffect as L } from "react";
+import { InputBox as O } from "./InputBox.js";
+import { ErrorMessage as P } from "./ErrorMessage.js";
+function Z({
   name: v,
   value: E,
   onChange: t,
   cssStyle: r,
   inputType: V = "text",
-  placeholder: g = "入力してください",
+  placeholder: b = "入力してください",
   isDisabled: l,
   isRequired: f,
-  maxLength: B = 30,
-  autocomplete: M = "off",
-  validates: T = [],
-  before: b,
-  after: j
+  maxLength: g = 30,
+  autocomplete: B = "off",
+  validates: M = [],
+  before: T,
+  after: j,
+  id: k,
+  role: I,
+  ariaLabel: W,
+  ariaExpanded: w,
+  ariaControls: C,
+  ariaActivedescendant: F,
+  ariaAutocomplete: H,
+  onKeyDown: N
 }) {
-  var m, s;
-  const [o, k] = F([]), e = E ?? "", u = () => {
-    k(C(e, { isRequired: f, validates: T }));
-  }, I = n(e), p = n(!1);
-  H(() => {
+  var d, c;
+  const [o, q] = K([]), e = E ?? "", a = () => {
+    q(J(e, { isRequired: f, validates: M }));
+  }, z = n(e), p = n(!1);
+  L(() => {
     if (!p.current) {
-      if (e === I.current) {
-        w(e) || u();
+      if (e === z.current) {
+        G(e) || a();
         return;
       }
       p.current = !0;
     }
-    u();
+    a();
   }, [e]);
   const i = n(!1);
-  return /* @__PURE__ */ W(
-    N,
+  return /* @__PURE__ */ A(
+    O,
     {
       cssStyle: r,
       className: "inline-flex [&>input]:flex-auto",
       isErrored: !!o.length,
       isDisabled: l,
       children: [
-        b,
-        /* @__PURE__ */ c(
+        T,
+        /* @__PURE__ */ s(
           "input",
           {
             type: V,
+            id: k,
             name: v,
+            role: I,
+            "aria-label": W,
+            "aria-expanded": w,
+            "aria-controls": C,
+            "aria-activedescendant": F,
+            "aria-autocomplete": H,
+            onKeyDown: N,
             value: e,
             required: f,
-            placeholder: g,
+            placeholder: b,
             disabled: l,
-            autoComplete: M,
-            maxLength: B,
+            autoComplete: B,
+            maxLength: g,
             "aria-invalid": o.length ? "true" : void 0,
-            onChange: (a) => {
-              const d = a.target.value;
+            onChange: (u) => {
+              const m = u.target.value;
               t == null || t(
-                i.current ? d : x(d)
+                i.current ? m : x(m)
               );
             },
             onCompositionStart: () => {
               i.current = !0;
             },
-            onCompositionEnd: (a) => {
-              i.current = !1, t == null || t(x(a.currentTarget.value));
+            onCompositionEnd: (u) => {
+              i.current = !1, t == null || t(x(u.currentTarget.value));
             },
-            onBlur: () => u()
+            onBlur: () => a()
           }
         ),
         j,
-        /* @__PURE__ */ c(
-          q,
+        /* @__PURE__ */ s(
+          P,
           {
             errorMessages: o,
             cssStyle: {
-              textColor: (m = r == null ? void 0 : r.error) == null ? void 0 : m.backgroundColor,
-              backgroundColor: (s = r == null ? void 0 : r.error) == null ? void 0 : s.textColor
+              textColor: (d = r == null ? void 0 : r.error) == null ? void 0 : d.backgroundColor,
+              backgroundColor: (c = r == null ? void 0 : r.error) == null ? void 0 : c.textColor
             }
           }
         )
@@ -86,5 +102,5 @@ function L({
   );
 }
 export {
-  L as TextBox
+  Z as TextBox
 };

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