@geckou/ui-react 0.4.0 → 0.5.0

package/dist/components/LabeledCheckbox.js

@@ -1,34 +1,34 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
 import { useId as h } from "react";
-import { CheckBox as b } from "./CheckBox.js";
+import { CheckBox as p } from "./CheckBox.js";
 import { COLOR as r } from "@geckou/ui-core";
 function L({
   name: l,
   label: d,
   checked: i,
   onChange: m,
-  isDisabled: o,
-  cssStyle: e,
+  isDisabled: e,
+  cssStyle: o,
   isDisableAnimation: u
 }) {
-  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,
+  const a = i ?? !1, n = h(), x = 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 = {
     "--text-color": c.textColor,
     "--checked-color": c.backgroundColor
   };
-  return /* @__PURE__ */ p("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto", children: [
+  return /* @__PURE__ */ b("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(
-      b,
+      p,
       {
         name: l,
         checked: a,
         onChange: m,
-        isDisabled: o,
-        cssStyle: e,
+        isDisabled: e,
+        cssStyle: o,
         isDisableAnimation: u,
         ariaLabelledBy: n
       }

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 m, useEffect as n } from "react";
-import { createScrollLock as g } from "@geckou/ui-core";
-const w = {
+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 = {
   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 h() {
+function y() {
   return /* @__PURE__ */ t(
     "svg",
     {
@@ -18,73 +18,77 @@ function h() {
     }
   );
 }
-function N({
+function I({
   isShown: r,
-  size: c = "medium",
-  onClose: a,
-  header: l,
-  footer: d,
+  size: s = "medium",
+  onClose: o,
+  header: m,
+  footer: u,
   children: p,
   ariaLabel: f
 }) {
-  const u = b(), s = m(null), v = m(g());
-  n(() => {
+  const c = b(), i = n(null), v = n(g());
+  d(() => {
     const e = v.current;
     return e.toggle(r), () => e.release();
   }, [r]);
-  const i = m(null);
-  return n(() => {
-    var e, o;
+  const a = n(null);
+  return d(() => {
+    var e, l;
     if (r) {
-      i.current = document.activeElement, (e = s.current) == null || e.focus();
+      a.current ?? (a.current = document.activeElement), (e = i.current) == null || e.focus();
       return;
     }
-    (o = i.current) == null || o.focus(), i.current = null;
-  }, [r]), n(() => {
+    (l = a.current) == null || l.focus(), a.current = null;
+  }, [r]), d(() => {
     if (!r)
       return;
-    const e = (o) => {
-      o.key === "Escape" && a();
+    const e = (l) => {
+      if (l.key === "Escape") {
+        o();
+        return;
+      }
+      w(i.current, l, document.activeElement);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [r, a]), /* @__PURE__ */ t(
+  }, [r, o]), /* @__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: (e) => {
-        e.target === e.currentTarget && a();
+        e.target === e.currentTarget && o();
       },
       children: /* @__PURE__ */ x(
         "div",
         {
-          ref: s,
+          ref: i,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": l ? u : void 0,
-          "aria-label": l ? void 0 : f ?? "ダイアログ",
+          "aria-labelledby": m ? c : void 0,
+          "aria-label": m ? 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] ${w[c]}`,
+          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]}`,
           children: [
-            l && /* @__PURE__ */ t(
+            m && /* @__PURE__ */ t(
               "header",
               {
-                id: u,
+                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: l
+                children: m
               }
             ),
             /* @__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 }),
+            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(
               "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: a,
-                children: /* @__PURE__ */ t(h, {})
+                onClick: o,
+                children: /* @__PURE__ */ t(y, {})
               }
             )
           ]
@@ -94,5 +98,5 @@ function N({
   );
 }
 export {
-  N as ModalBox
+  I as ModalBox
 };

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/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.js

@@ -1,18 +1,18 @@
 "use client";
-import { jsxs as v, jsx as f } from "react/jsx-runtime";
+import { jsxs as h, Fragment as m, jsx as f } from "react/jsx-runtime";
 import { COLOR as e } from "@geckou/ui-core";
-function k({
+function y({
   name: l,
   label: n = { on: "ON", off: "OFF" },
-  checked: h,
+  checked: p,
   onChange: d,
   isDisabled: o,
-  cssStyle: r,
-  ariaLabel: p,
+  cssStyle: a,
+  ariaLabel: g,
   ariaLabelledBy: c
 }) {
   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 = {
+  const r = p ?? !1, x = Math.max(n.on.length, n.off.length), t = o ? a == null ? void 0 : a.disabled : a == null ? void 0 : a.default, i = {
     on: {
       textColor: o ? e.lightGray : e.white,
       backgroundColor: o ? e.gray : e.blue,
@@ -35,62 +35,55 @@ function k({
       boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
       ...t == null ? void 0 : t.off
     }
-  }[a ? "on" : "off"], x = {
+  }[r ? "on" : "off"], z = {
     "--text-color": i.textColor,
     "--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": `${g * 2}ch`,
+    "--inline-size": `${x * 2}ch`,
     "--handle-size": "1.5rem",
     "--padding-size": "calc(var(--border-size) + 2px)",
     "--duration": ".15s"
   };
-  return /* @__PURE__ */ v(
-    "button",
-    {
-      type: "button",
-      style: x,
-      disabled: o,
-      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: [
-        /* @__PURE__ */ f(
-          "input",
-          {
-            type: "checkbox",
-            name: l,
-            checked: a,
-            disabled: o,
-            readOnly: !0,
-            className: "hidden"
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            "data-on": n.on,
-            "data-off": n.off,
-            className: `absolute top-0 left-0 h-full w-full text-(--text-color) uppercase before:absolute before:right-0 before:m-auto before:inline-flex before:h-full before:w-[calc(100%-var(--handle-size)-var(--padding-size))] before:items-center before:justify-center before:leading-none before:transition-opacity before:duration-(--duration) before:ease-out before:content-[attr(data-off)] after:absolute after:left-0 after:m-auto after:inline-flex after:h-full after:w-[calc(100%-var(--handle-size)-var(--padding-size))] after:items-center after:justify-center after:leading-none after:transition-opacity after:duration-(--duration) after:ease-out after:content-[attr(data-on)] ${a ? "before:opacity-0 after:opacity-100" : "before:opacity-100 after:opacity-0"}`
-          }
-        ),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: `relative m-0 aspect-square w-(--handle-size) rounded-[calc(var(--radius-size)-(var(--padding-size)/2))] bg-(--text-color) shadow-(--box-shadow) transition-[left] duration-(--duration) ease-out ${a ? "left-[calc(100%-var(--handle-size))]" : "left-0"}`
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ h(m, { children: [
+    /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        style: z,
+        disabled: o,
+        role: "switch",
+        "aria-checked": r,
+        "data-checked": r,
+        "aria-labelledby": c,
+        "aria-label": c ? void 0 : g ?? l,
+        onClick: (v) => {
+          v.stopPropagation(), o || d == null || d(!r);
+        },
+        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: [
+          /* @__PURE__ */ f(
+            "div",
+            {
+              "data-on": n.on,
+              "data-off": n.off,
+              className: `absolute top-0 left-0 h-full w-full text-(--text-color) uppercase before:absolute before:right-0 before:m-auto before:inline-flex before:h-full before:w-[calc(100%-var(--handle-size)-var(--padding-size))] before:items-center before:justify-center before:leading-none before:transition-opacity before:duration-(--duration) before:ease-out before:content-[attr(data-off)] after:absolute after:left-0 after:m-auto after:inline-flex after:h-full after:w-[calc(100%-var(--handle-size)-var(--padding-size))] after:items-center after:justify-center after:leading-none after:transition-opacity after:duration-(--duration) after:ease-out after:content-[attr(data-on)] ${r ? "before:opacity-0 after:opacity-100" : "before:opacity-100 after:opacity-0"}`
+            }
+          ),
+          /* @__PURE__ */ f(
+            "div",
+            {
+              className: `relative m-0 aspect-square w-(--handle-size) rounded-[calc(var(--radius-size)-(var(--padding-size)/2))] bg-(--text-color) shadow-(--box-shadow) transition-[left] duration-(--duration) ease-out ${r ? "left-[calc(100%-var(--handle-size))]" : "left-0"}`
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ f("input", { type: "hidden", name: l, value: "on", disabled: o })
+  ] });
 }
 export {
-  k as ToggleButton
+  y as ToggleButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A set of reusable React UI components (forms) by Geckou",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@geckou/ui-core": "^0.3.0"
+    "@geckou/ui-core": "^0.4.0"
   },
   "scripts": {
     "build": "vite build && node scripts/copy-assets.mjs",