@clubmed/trident-ui 1.0.0-beta.6 → 1.0.0-beta.7

package/molecules/Forms/Password/Password.js

@@ -1,55 +1,58 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { c as m } from "../../../index-Cu0xwYjD.js";
-import { useId as j, useState as M, useEffect as P } from "react";
-import { useValue as S } from "../../../hooks/useValue.js";
-import { FormControl as T } from "../FormControl.js";
+import { useId as M, useState as P, useEffect as S } from "react";
+import { useValue as T } from "../../../hooks/useValue.js";
+import { FormControl as D } from "../FormControl.js";
 import { Icon as n } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
-import { ValidationMessage as D } from "./ValidationMessage.js";
-function J(u) {
-  const f = j(), {
-    id: r = f,
+import { ValidationMessage as F } from "./ValidationMessage.js";
+function K(f) {
+  const b = M(), {
+    id: r = b,
     name: o = r,
-    label: b,
-    value: x,
+    label: x,
+    value: g,
     disabled: d = !1,
+    required: c = !1,
     validationStatus: e = "default",
-    errorMessage: g,
-    validationMessages: c = [],
+    errorMessage: h,
+    validationMessages: p = [],
     withoutFieldValidation: s = !1,
-    className: h,
-    onChange: v,
-    dataTestId: w = "Password",
-    ...y
-  } = u, { value: N, setValue: C } = S({
+    className: v,
+    onChange: w,
+    dataTestId: y = "Password",
+    ...N
+  } = f, { value: C, setValue: V } = T({
     name: o,
-    initialValue: x,
-    onChange: v
-  }), [t, p] = M("password");
-  P(() => p(t), [t]);
-  const V = () => p(t === "password" ? "text" : "password");
+    initialValue: g,
+    onChange: w
+  }), [t, u] = P("password");
+  S(() => u(t), [t]);
+  const k = () => u(t === "password" ? "text" : "password");
   return /* @__PURE__ */ i(
-    T,
+    D,
     {
       id: r,
-      label: b,
+      label: x,
       dataName: "Password",
-      dataTestId: w,
+      dataTestId: y,
       disabled: d,
+      required: c,
       validationStatus: s ? "default" : e,
-      errorMessage: g,
+      errorMessage: h,
       children: [
         /* @__PURE__ */ i("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
-              ...y,
+              ...N,
               id: r,
               name: o,
               type: t,
-              value: N,
+              value: C,
               disabled: d,
-              onChange: (l) => C(l.target.value),
+              required: c,
+              onChange: (l) => V(l.target.value),
               className: m(
                 "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black",
                 {
@@ -58,7 +61,7 @@ function J(u) {
                   "border-red": !s && e === "error",
                   "border-green": !s && e === "success"
                 },
-                h
+                v
               ),
               "aria-label": o
             }
@@ -77,7 +80,7 @@ function J(u) {
                   {
                     type: "button",
                     className: "pointer-events-auto size-24 inline-flex",
-                    onClick: V,
+                    onClick: k,
                     children: /* @__PURE__ */ a(n, { name: t === "password" ? "Invisible" : "Visible", width: "24px", type: "svg" })
                   }
                 )
@@ -85,11 +88,11 @@ function J(u) {
             }
           )
         ] }),
-        c.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: c.map(({ label: l, status: k }, I) => /* @__PURE__ */ a(D, { label: l, status: k }, I)) })
+        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: I }, j) => /* @__PURE__ */ a(F, { label: l, status: I }, j)) })
       ]
     }
   );
 }
 export {
-  J as Password
+  K as Password
 };

package/molecules/Forms/Select.js

@@ -1,43 +1,45 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { c as l } from "../../index-Cu0xwYjD.js";
-import { useValue as C } from "../../hooks/useValue.js";
-import { useInternalStatus as D } from "../../hooks/useInternalStatus.js";
-import { FormControl as I } from "./FormControl.js";
+import { useValue as D } from "../../hooks/useValue.js";
+import { useInternalStatus as I } from "../../hooks/useInternalStatus.js";
+import { FormControl as S } from "./FormControl.js";
 import { Icon as n } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useId as S } from "react";
-const $ = (c) => {
-  const p = S(), {
-    id: r = `select-${p}`,
-    name: a = r,
-    label: u,
-    value: m,
-    description: b,
+import { useId as j } from "react";
+const B = (p) => {
+  const u = j(), {
+    id: t = u,
+    name: a = t,
+    label: m,
+    value: b,
+    description: f,
     validationStatus: o = "default",
     iconType: i,
     errorMessage: x,
     disabled: s = !1,
-    className: f,
-    dataTestId: g = r,
-    onChange: h,
-    children: v,
-    ...y
-  } = c, { value: w, setValue: N } = C({ name: a, initialValue: m, onChange: h }), e = D({
+    required: d = !1,
+    className: g,
+    dataTestId: h = t,
+    onChange: v,
+    children: y,
+    ...w
+  } = p, { value: N, setValue: k } = D({ name: a, initialValue: b, onChange: v }), e = I({
     isDisabled: s,
     validationStatus: o
   });
-  return /* @__PURE__ */ t(
-    I,
+  return /* @__PURE__ */ r(
+    S,
     {
-      id: r,
-      label: u,
-      description: b,
+      id: t,
+      label: m,
+      description: f,
       dataName: "TextField",
-      dataTestId: g,
+      dataTestId: h,
       disabled: s,
+      required: d,
       validationStatus: o,
       errorMessage: x,
-      children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ c(
         "div",
         {
           className: l("relative rounded-pill z-0", {
@@ -45,15 +47,16 @@ const $ = (c) => {
             "bg-pearl": e === "disabled"
           }),
           children: [
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ r(
               "select",
               {
-                ...y,
-                id: r,
+                ...w,
+                id: t,
                 name: a,
                 disabled: s,
-                value: w,
-                onChange: (k) => N(k.target.value),
+                required: d,
+                value: N,
+                onChange: (C) => k(C.target.value),
                 className: l(
                   "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent",
                   {
@@ -64,13 +67,13 @@ const $ = (c) => {
                     "border-red": e === "error",
                     "border-green": e === "success"
                   },
-                  f
+                  g
                 ),
                 "aria-label": a,
-                children: v
+                children: y
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ r(
               "div",
               {
                 className: l(
@@ -81,10 +84,10 @@ const $ = (c) => {
                     "text-green": e === "success"
                   }
                 ),
-                children: /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
-                  e === "error" && /* @__PURE__ */ t(n, { name: "CrossDefault", width: "24px", type: i }),
-                  e === "success" && /* @__PURE__ */ t(n, { name: "CheckDefault", width: "24px", type: i }),
-                  /* @__PURE__ */ t("button", { className: "pointer-events-auto inline-flex", children: /* @__PURE__ */ t(n, { name: "ArrowDefaultDown", type: "svg", width: "24px", color: "black" }) })
+                children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
+                  e === "error" && /* @__PURE__ */ r(n, { name: "CrossDefault", width: "24px", type: i }),
+                  e === "success" && /* @__PURE__ */ r(n, { name: "CheckDefault", width: "24px", type: i }),
+                  /* @__PURE__ */ r("button", { className: "pointer-events-auto inline-flex", children: /* @__PURE__ */ r(n, { name: "ArrowDefaultDown", type: "svg", width: "24px", color: "black" }) })
                 ] })
               }
             )
@@ -95,5 +98,5 @@ const $ = (c) => {
   );
 };
 export {
-  $ as Select
+  B as Select
 };

package/molecules/Forms/TextField.js

@@ -1,53 +1,56 @@
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { c } from "../../index-Cu0xwYjD.js";
-import { useValue as I } from "../../hooks/useValue.js";
-import { useInternalStatus as T } from "../../hooks/useInternalStatus.js";
-import { FormControl as k } from "./FormControl.js";
+import { c as m } from "../../index-Cu0xwYjD.js";
+import { useValue as T } from "../../hooks/useValue.js";
+import { useInternalStatus as k } from "../../hooks/useInternalStatus.js";
+import { FormControl as F } from "./FormControl.js";
 import { Icon as i } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useId as F } from "react";
-const A = (m) => {
-  const p = F(), {
-    id: r = p,
+import { useId as j } from "react";
+const B = (p) => {
+  const u = j(), {
+    id: r = u,
     name: a = r,
-    label: u,
-    value: x,
-    description: b,
+    label: x,
+    value: b,
+    description: f,
     validationStatus: n = "default",
     icon: s,
     iconType: d,
-    errorMessage: f,
+    errorMessage: g,
     disabled: l = !1,
-    className: g,
-    dataTestId: h = "TextField",
-    onChange: v,
-    ...y
-  } = m, { value: w, setValue: N } = I({ name: a, initialValue: x, onChange: v }), e = T({
+    required: c = !1,
+    className: h,
+    dataTestId: v = "TextField",
+    onChange: y,
+    ...w
+  } = p, { value: N, setValue: C } = T({ name: a, initialValue: b, onChange: y }), e = k({
     isDisabled: l,
     validationStatus: n
   });
   return /* @__PURE__ */ t(
-    k,
+    F,
     {
       id: r,
-      label: u,
-      description: b,
+      label: x,
+      description: f,
       dataName: "TextField",
-      dataTestId: h,
+      dataTestId: v,
       disabled: l,
+      required: c,
       validationStatus: n,
-      errorMessage: f,
+      errorMessage: g,
       children: /* @__PURE__ */ o("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "input",
           {
-            ...y,
+            ...w,
             id: r,
             name: a,
             disabled: l,
-            value: w,
-            onChange: (C) => N(C.target.value),
-            className: c(
+            required: c,
+            value: N,
+            onChange: (I) => C(I.target.value),
+            className: m(
               "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",
@@ -58,7 +61,7 @@ const A = (m) => {
                 "border-red": e === "error",
                 "border-green": e === "success"
               },
-              g
+              h
             ),
             "aria-label": a
           }
@@ -66,7 +69,7 @@ const A = (m) => {
         /* @__PURE__ */ o(
           "div",
           {
-            className: c(
+            className: m(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -88,5 +91,5 @@ const A = (m) => {
   );
 };
 export {
-  A as TextField
+  B as TextField
 };

package/package.json

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