@clubmed/trident-ui 1.0.0-alpha.39 → 1.0.0-alpha.41

package/molecules/Forms/FormControl.js

@@ -1,37 +1,37 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { useInternalStatus as f } from "../../hooks/useInternalStatus.js";
 import { FormLabel as u } from "./FormLabel.js";
 import { Icon as h } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
 import { c as b } from "../../index-Cu0xwYjD.js";
-const w = ({
+const v = ({
   id: t,
   label: r,
-  description: o,
+  description: s,
   disabled: m,
   className: n,
   validationStatus: i = "default",
-  children: p,
+  children: l,
   errorMessage: a,
-  dataTestId: c,
-  dataName: l,
-  layout: d
+  dataTestId: p,
+  dataName: c,
+  layout: x
 }) => {
-  const x = f({
+  const d = f({
     isDisabled: !!m,
     validationStatus: i
   });
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: b(n, "space-y-4"),
-      "data-name": l,
-      "data-testid": c,
+      className: b("flex flex-col gap-4", n),
+      "data-name": c,
+      "data-testid": p,
       children: [
-        r && t && /* @__PURE__ */ e(u, { description: o, id: t, layout: d, children: r }),
-        p,
-        x === "error" && a && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
-          /* @__PURE__ */ e(h, { name: "Error", width: "20px" }),
+        r && t && /* @__PURE__ */ o(u, { description: s, id: t, layout: x, children: r }),
+        l,
+        d === "error" && a && /* @__PURE__ */ e("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
+          /* @__PURE__ */ o(h, { name: "Error", width: "20px" }),
           a
         ] })
       ]
@@ -39,5 +39,5 @@ const w = ({
   );
 };
 export {
-  w as FormControl
+  v as FormControl
 };

package/molecules/Forms/Password/Password.d.ts

@@ -0,0 +1,14 @@
+import { FormControlProps } from '../FormControl';
+import { ValidationStatus } from '../../../hooks/useInternalStatus';
+import { ValidationMessage } from './ValidationMessage';
+export interface PasswordProps<Value> extends FormControlProps<Value> {
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    status?: ValidationStatus;
+    validationMessages?: ValidationMessage[];
+    onChange?: (name: string, value: Value) => void;
+    dataTestId?: string;
+}
+export declare function Password<Value = string>(props: PasswordProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Password/Password.js

@@ -0,0 +1,72 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { c as y } from "../../../index-Cu0xwYjD.js";
+import { useState as N, useEffect as C } from "react";
+import { useValue as k } from "../../../hooks/useValue.js";
+import { FormControl as V } from "../FormControl.js";
+import { Icon as E } from "../../../atoms/Icons/Icon.js";
+import "../../../atoms/Icons/contexts/IconsContext.js";
+import { ValidationMessage as P } from "./ValidationMessage.js";
+let T = 0;
+function $(d) {
+  const {
+    id: s = `password-${++T}`,
+    name: t = s,
+    label: p,
+    value: m,
+    disabled: l = !1,
+    validationMessages: r = [],
+    className: c,
+    onChange: u,
+    dataTestId: b = "Password",
+    ...f
+  } = d, { value: g, setValue: x } = k({
+    name: t,
+    initialValue: m,
+    onChange: u
+  }), [e, i] = N("password");
+  C(() => i(e), [e]);
+  const w = () => i(e === "password" ? "text" : "password");
+  return /* @__PURE__ */ n(
+    V,
+    {
+      id: s,
+      label: p,
+      dataName: "Password",
+      dataTestId: b,
+      disabled: l,
+      children: [
+        /* @__PURE__ */ n("div", { className: "relative", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ...f,
+              id: s,
+              name: t,
+              type: e,
+              value: g,
+              disabled: l,
+              onChange: (o) => x(o.target.value),
+              className: y(
+                "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black pe-[52px] border-lightGrey focus:border-black active:border-black",
+                c
+              ),
+              "aria-label": t
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              className: "pointer-events-auto ms-auto absolute right-20 top-12 size-24",
+              onClick: w,
+              children: /* @__PURE__ */ a(E, { name: e === "password" ? "EyeClosed" : "EyeOpened", width: "24px", type: "svg" })
+            }
+          )
+        ] }),
+        r && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: r.map(({ label: o, status: h }, v) => /* @__PURE__ */ a(P, { label: o, status: h }, v)) })
+      ]
+    }
+  );
+}
+export {
+  $ as Password
+};

package/molecules/Forms/Password/ValidationMessage.d.ts

@@ -0,0 +1,6 @@
+import { ValidationStatus } from '../../../hooks/useInternalStatus';
+export interface ValidationMessage {
+    label: string;
+    status: ValidationStatus;
+}
+export declare function ValidationMessage({ label, status }: ValidationMessage): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Password/ValidationMessage.js

@@ -0,0 +1,28 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { c as s } from "../../../index-Cu0xwYjD.js";
+import { Icon as t } from "../../../atoms/Icons/Icon.js";
+import "../../../atoms/Icons/contexts/IconsContext.js";
+const a = {
+  default: {
+    iconName: "Edit",
+    iconColor: "middleGrey"
+  },
+  error: {
+    iconName: "Error",
+    iconColor: "red"
+  },
+  success: {
+    iconName: "CheckDefault",
+    iconColor: "green"
+  }
+};
+function x({ label: r, status: c }) {
+  const { iconName: i, iconColor: o } = a[c];
+  return /* @__PURE__ */ n("div", { className: "flex gap-[6px] px-20 items-center", children: [
+    /* @__PURE__ */ e(t, { name: i, width: "30px", color: o }),
+    /* @__PURE__ */ e("span", { className: s("text-b4", `text-${o}`), children: r })
+  ] });
+}
+export {
+  x as ValidationMessage
+};

package/package.json

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

package/molecules/Forms/Checkbox.js

@@ -1,71 +0,0 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { c as b } from "../../index-Cu0xwYjD.js";
-import { Icon as y } from "../../atoms/Icons/Icon.js";
-import "../../atoms/Icons/contexts/IconsContext.js";
-import { useValue as N } from "../../hooks/useValue.js";
-import "../../controls-l0sNRNKZ.js";
-let V = 0;
-function I({
-  id: m = "checkbox-" + V++,
-  name: r = m,
-  className: h,
-  dataTestId: n,
-  disabled: t,
-  checked: p = !1,
-  value: a,
-  size: e = 24,
-  tabIndex: u = 0,
-  children: x,
-  onChange: c,
-  ...f
-}) {
-  const { value: o, setValue: d } = N({
-    name: r,
-    initialValue: p,
-    onChange(k, i) {
-      c == null || c(k, i ? a !== void 0 ? a : i : null);
-    }
-  });
-  return /* @__PURE__ */ s(
-    "label",
-    {
-      className: b(h, "relative flex items-center gap-8", {
-        "text-grey": t
-      }),
-      children: [
-        /* @__PURE__ */ s("span", { className: "relative", children: [
-          /* @__PURE__ */ l(
-            "input",
-            {
-              ...f,
-              name: r,
-              "data-testid": n,
-              type: "checkbox",
-              tabIndex: u,
-              onChange: () => {
-                !t && d(!o);
-              },
-              checked: o,
-              "data-name": "Checkbox",
-              disabled: t,
-              value: a
-            }
-          ),
-          /* @__PURE__ */ l("span", { style: { height: e, width: e }, children: /* @__PURE__ */ l(
-            y,
-            {
-              style: { height: e, width: e },
-              name: "CheckDefault",
-              color: "black",
-              className: "absolute"
-            }
-          ) })
-        ] }),
-        x
-      ]
-    }
-  );
-}
-export {
-  I as Checkbox
-};

package/molecules/Forms/Checkboxes.js

@@ -1,49 +0,0 @@
-import { jsx as k } from "react/jsx-runtime";
-import { Children as v, isValidElement as C, cloneElement as N } from "react";
-import { useValue as E } from "../../hooks/useValue.js";
-import { c as m } from "../../index-Cu0xwYjD.js";
-let $ = 0;
-function q({
-  id: s = "checkboxes-" + $++,
-  name: t = s,
-  children: u,
-  value: c,
-  defaultValue: p,
-  onChange: i,
-  disabled: f,
-  readOnly: b,
-  tabIndex: x = 0,
-  ...a
-}) {
-  const { value: o, setValue: l } = E({
-    name: t,
-    initialValue: c,
-    formatter(e) {
-      return e !== void 0 ? [].concat(e) : e;
-    },
-    defaultValue: p || [],
-    onChange: i
-  });
-  return /* @__PURE__ */ k("div", { ...a, className: m(a.className, ""), role: "listbox", children: v.map(u, (e, n) => {
-    if (C(e)) {
-      const r = e.props.value;
-      return N(e, {
-        ...e.props,
-        name: t,
-        id: `${s}-${n}`,
-        disabled: f,
-        readOnly: b,
-        tabIndex: x + n + 1,
-        className: m("mb-12 last:mb-0", e.props),
-        checked: o.includes(r),
-        onChange(g, V) {
-          l(V === null ? o.filter((d) => d !== r) : o.concat(r));
-        }
-      });
-    }
-    return e;
-  }) });
-}
-export {
-  q as Checkboxes
-};