@clubmed/trident-ui 1.0.0-beta.4 → 1.0.0-beta.5

package/molecules/Forms/Switch.js

@@ -1,30 +1,30 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { c as m } from "../../index-Cu0xwYjD.js";
-import { useValue as x } from "../../hooks/useValue.js";
+import { c as x } from "../../index-Cu0xwYjD.js";
+import { useValue as f } from "../../hooks/useValue.js";
 import "../../controls-l0sNRNKZ.js";
-let f = 0;
-function d({
-  id: a = `switch-${++f}`,
-  name: r = a,
-  className: s,
-  checked: o,
-  disabled: c,
-  width: t = 56,
-  onChange: n,
-  tabIndex: h = 0,
-  children: p
-}) {
-  const { value: i, setValue: u } = x({
-    initialValue: o,
-    name: r,
-    onChange: n
+import { useId as w } from "react";
+function k(r) {
+  const s = w(), {
+    id: n = s,
+    name: a = n,
+    className: o,
+    checked: h,
+    disabled: t,
+    width: i = 56,
+    onChange: d,
+    tabIndex: m = 0,
+    children: p
+  } = r, { value: c, setValue: u } = f({
+    initialValue: h,
+    name: a,
+    onChange: d
   });
   return /* @__PURE__ */ l(
     "label",
     {
-      className: m(s, "relative flex items-center gap-[10px]", {
-        "text-grey": c,
-        "cursor-pointer": !c
+      className: x(o, "relative flex items-center gap-[10px]", {
+        "text-grey": t,
+        "cursor-pointer": !t
       }),
       "data-testid": "SwitchContainer",
       children: [
@@ -33,19 +33,19 @@ function d({
             "input",
             {
               type: "checkbox",
-              name: r,
-              tabIndex: h,
-              checked: i,
-              disabled: c,
+              name: a,
+              tabIndex: m,
+              checked: c,
+              disabled: t,
               role: "switch",
               className: "absolute w-full h-full opacity-0 cursor-pointer",
               onChange: () => {
-                !c && u(!i);
+                !t && u(!c);
               },
               "data-name": "Switch"
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: t * 4 / 7, width: t }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: t * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
+          /* @__PURE__ */ e("span", { style: { height: i * 4 / 7, width: i }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 12, fill: "hsl(var(--color-white))" }),
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 4, fill: "hsl(var(--color-grey))" })
           ] }) }) })
@@ -56,5 +56,5 @@ function d({
   );
 }
 export {
-  d as Switch
+  k as Switch
 };

package/molecules/Forms/TextField.js

@@ -1,66 +1,66 @@
 import { jsx as t, jsxs as d } from "react/jsx-runtime";
 import { c as p } from "../../index-Cu0xwYjD.js";
-import { useValue as k } from "../../hooks/useValue.js";
-import { useInternalStatus as C } from "../../hooks/useInternalStatus.js";
+import { useValue as C } from "../../hooks/useValue.js";
+import { useInternalStatus as I } from "../../hooks/useInternalStatus.js";
 import { FormControl as T } from "./FormControl.js";
 import { Icon as r } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-let F = 0;
-const $ = (u) => {
-  const {
-    id: a = `text-field-${++F}`,
+import { useId as F } from "react";
+const B = (u) => {
+  const m = F(), {
+    id: a = m,
     name: s = a,
-    label: m,
-    value: x,
-    description: b,
+    label: x,
+    value: b,
+    description: f,
     validationStatus: c = "default",
-    hasDropdown: l = !1,
-    icon: o,
-    iconType: i,
-    errorMessage: f,
-    disabled: n = !1,
-    className: h,
-    dataTestId: g = "TextField",
-    onChange: v,
-    ...w
-  } = u, { value: y, setValue: N } = k({ name: s, initialValue: x, onChange: v }), e = C({
-    isDisabled: n,
+    hasDropdown: o = !1,
+    icon: l,
+    iconType: n,
+    errorMessage: h,
+    disabled: i = !1,
+    className: g,
+    dataTestId: v = "TextField",
+    onChange: w,
+    ...y
+  } = u, { value: N, setValue: D } = C({ name: s, initialValue: b, onChange: w }), e = I({
+    isDisabled: i,
     validationStatus: c
   });
   return /* @__PURE__ */ t(
     T,
     {
       id: a,
-      label: m,
-      description: b,
+      label: x,
+      description: f,
       dataName: "TextField",
-      dataTestId: g,
-      disabled: n,
+      dataTestId: v,
+      disabled: i,
       validationStatus: c,
-      errorMessage: f,
+      errorMessage: h,
       children: /* @__PURE__ */ d("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "input",
           {
-            ...w,
+            ...y,
             id: a,
             name: s,
-            disabled: n,
-            value: y,
-            onChange: (D) => N(D.target.value),
+            disabled: i,
+            value: N,
+            onChange: (k) => D(k.target.value),
             className: p(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
-                "ps-[52px]": o,
-                "pe-[52px]": l || e === "error" || e === "success",
-                "pe-[84px]": l && (e === "error" || e === "success"),
+                "ps-[52px]": l,
+                "pe-[52px]": o || e === "error" || e === "success",
+                "pe-[84px]": o && (e === "error" || e === "success"),
                 "bg-white text-black": e !== "disabled",
                 "bg-pearl text-grey": e === "disabled",
                 "border-red": e === "error",
                 "border-green": e === "success"
               },
-              h
+              g
             ),
             "aria-label": s
           }
@@ -77,11 +77,11 @@ const $ = (u) => {
               }
             ),
             children: [
-              o && /* @__PURE__ */ t(r, { name: o, width: "24px" }),
+              l && /* @__PURE__ */ t(r, { name: l, width: "24px" }),
               /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: i }),
-                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: i }),
-                l && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: i }) })
+                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: n }),
+                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: n }),
+                o && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: n }) })
               ] })
             ]
           }
@@ -91,5 +91,5 @@ const $ = (u) => {
   );
 };
 export {
-  $ as TextField
+  B as TextField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [