@geckou/ui-react 0.5.1 → 0.7.0

package/dist/components/ErrorMessage.js

@@ -1,22 +1,22 @@
-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 m({ 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
+  const t = {
+    "--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",
     {
       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))
+      style: t,
+      children: o.map((b, l) => /* @__PURE__ */ e("span", { children: b }, l))
     }
   );
 }
 export {
-  f as ErrorMessage
+  m 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/ModalBox.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import { useId as b, useRef as n, useEffect as d } from "react";
-import { createScrollLock as g, handleTabKey as w } from "@geckou/ui-core";
-const h = {
+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 = {
   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 y() {
+function E() {
   return /* @__PURE__ */ t(
     "svg",
     {
@@ -18,38 +18,43 @@ function y() {
     }
   );
 }
-function I({
+function _({
   isShown: r,
-  size: s = "medium",
+  size: p = "medium",
   onClose: o,
-  header: i,
-  footer: u,
-  children: p,
-  ariaLabel: f
+  header: n,
+  footer: d,
+  children: f,
+  ariaLabel: v
 }) {
-  const c = b(), m = n(null), v = n(g());
-  d(() => {
-    const e = v.current;
+  const c = g(), m = i(null), x = i(y());
+  u(() => {
+    const e = x.current;
     return e.toggle(r), () => e.release();
   }, [r]);
-  const l = n(null);
-  return d(() => {
+  const s = i(w());
+  u(() => {
+    const e = s.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]), d(() => {
+  }, [r]), u(() => {
     if (!r)
       return;
     const e = (a) => {
-      if (!a.defaultPrevented) {
+      if (s.current.isTopmost() && !a.defaultPrevented) {
         if (a.key === "Escape") {
-          o();
+          a.preventDefault(), o();
           return;
         }
-        w(m.current, a, document.activeElement);
+        h(m.current, a, document.activeElement);
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
@@ -62,27 +67,27 @@ function I({
       onClick: (e) => {
         e.target === e.currentTarget && o();
       },
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ b(
         "div",
         {
           ref: m,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": i ? c : void 0,
-          "aria-label": i ? void 0 : f ?? "ダイアログ",
+          "aria-labelledby": n ? c : void 0,
+          "aria-label": n ? void 0 : v ?? "ダイアログ",
           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] ${h[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] ${k[p]}`,
           children: [
-            i && /* @__PURE__ */ t(
+            n && /* @__PURE__ */ t(
               "header",
               {
                 id: c,
                 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: i
+                children: n
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: p }),
-            u && /* @__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: 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(
               "button",
               {
@@ -90,7 +95,7 @@ function I({
                 "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(y, {})
+                children: /* @__PURE__ */ t(E, {})
               }
             )
           ]
@@ -100,5 +105,5 @@ function I({
   );
 }
 export {
-  I as ModalBox
+  _ as ModalBox
 };

package/dist/components/PopupBox.js

@@ -17,19 +17,20 @@ function y({
   ref: n,
   children: m
 }) {
-  const [u, r] = o(!1), [s, a] = o(!1), e = c(null);
+  const [s, r] = o(!1), [u, a] = o(!1), e = c(null);
   return l(() => (a(!0), () => {
     e.current && clearTimeout(e.current);
   }), []), f(n, () => ({
     showPopup: () => {
       r(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => r(!1), 3e3);
     }
-  })), s ? p(
+  })), u ? p(
     /* @__PURE__ */ i(
       "div",
       {
+        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]} ${u ? "opacity-100" : "opacity-0"}`,
+        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
       }
     ),

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,96 +1,103 @@
 "use client";
-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,
+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] = 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 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 ? h.filter(
-    (e) => String(e[B]).toLowerCase().includes(u.toLowerCase())
-  ) : h, 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 = p && 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(), !p) {
-        a(!0), n(
-          e.key === "ArrowDown" ? 0 : l.length - 1
+      if (e.preventDefault(), !h) {
+        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" && p && (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: [
-    /* @__PURE__ */ w(
-      $,
+  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: m,
-        ariaActivedescendant: c && i >= 0 ? b(i) : void 0,
-        onKeyDown: S
+        ariaControls: p,
+        ariaActivedescendant: c && i >= 0 ? D(i) : void 0,
+        onKeyDown: _
       }
     ),
-    c && /* @__PURE__ */ w(
+    c && /* @__PURE__ */ m(
       "div",
       {
-        id: m,
+        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__ */ w(
+        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" : ""}`