@geckou/ui-react 0.3.0 → 0.5.0

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 h, Fragment as m, jsx as f } from "react/jsx-runtime";
 import { COLOR as e } from "@geckou/ui-core";
-function m({
+function y({
   name: l,
   label: n = { on: "ON", off: "OFF" },
-  checked: b,
+  checked: p,
   onChange: d,
   isDisabled: o,
-  cssStyle: r
+  cssStyle: a,
+  ariaLabel: g,
+  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 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,
@@ -33,60 +35,55 @@ function m({
       boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
       ...t == null ? void 0 : t.off
     }
-  }[a ? "on" : "off"], h = {
+  }[r ? "on" : "off"], z = {
     "--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": `${x * 2}ch`,
     "--handle-size": "1.5rem",
     "--padding-size": "calc(var(--border-size) + 2px)",
     "--duration": ".15s"
   };
-  return /* @__PURE__ */ x(
-    "button",
-    {
-      type: "button",
-      style: h,
-      disabled: o,
-      "aria-pressed": a,
-      "aria-label": l,
-      onClick: (g) => {
-        g.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 {
-  m as ToggleButton
+  y as ToggleButton
 };

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@geckou/ui-react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A set of reusable React UI components (forms) by Geckou",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -38,16 +40,16 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@geckou/ui-core": "^0.2.0"
+    "@geckou/ui-core": "^0.4.0"
   },
   "scripts": {
     "build": "vite build && node scripts/copy-assets.mjs",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
     "prepublishOnly": "yarn build",
     "test": "vitest run",
     "test:watch": "vitest",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit && tsc -p tsconfig.test.json"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",