@clubmed/trident-ui 1.0.0-alpha.40 → 1.0.0-alpha.42

package/fonts/Utilities/tui-utilities.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712914190180'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712914190180#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712914190180") format("woff2"),
-  url("tui-utilities.woff?t=1712914190180") format("woff"),
-  url('tui-utilities.ttf?t=1712914190180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712914190180#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1713859578433'); /* IE9*/
+  src: url('tui-utilities.eot?t=1713859578433#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1713859578433") format("woff2"),
+  url("tui-utilities.woff?t=1713859578433") format("woff"),
+  url('tui-utilities.ttf?t=1713859578433') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1713859578433#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712914190180'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712914190180#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712914190180") format("woff2"),
-  url("tui-utilities.woff?t=1712914190180") format("woff"),
-  url('tui-utilities.ttf?t=1712914190180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712914190180#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1713859578433'); /* IE9*/
+  src: url('tui-utilities.eot?t=1713859578433#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1713859578433") format("woff2"),
+  url("tui-utilities.woff?t=1713859578433") format("woff"),
+  url('tui-utilities.ttf?t=1713859578433') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1713859578433#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712914190180'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712914190180#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712914190180") format("woff2"),
-  url("tui-utilities.woff?t=1712914190180") format("woff"),
-  url('tui-utilities.ttf?t=1712914190180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712914190180#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1713859578433'); /* IE9*/
+  src: url('tui-utilities.eot?t=1713859578433#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1713859578433") format("woff2"),
+  url("tui-utilities.woff?t=1713859578433") format("woff"),
+  url('tui-utilities.ttf?t=1713859578433') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1713859578433#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712914190180'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712914190180#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712914190180") format("woff2"),
-  url("tui-utilities.woff?t=1712914190180") format("woff"),
-  url('tui-utilities.ttf?t=1712914190180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712914190180#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1713859578433'); /* IE9*/
+  src: url('tui-utilities.eot?t=1713859578433#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1713859578433") format("woff2"),
+  url("tui-utilities.woff?t=1713859578433") format("woff"),
+  url('tui-utilities.ttf?t=1713859578433') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1713859578433#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1712914190180'); /* IE9*/
-  src: url('tui-utilities.eot?t=1712914190180#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1712914190180") format("woff2"),
-  url("tui-utilities.woff?t=1712914190180") format("woff"),
-  url('tui-utilities.ttf?t=1712914190180') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1712914190180#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1713859578433'); /* IE9*/
+  src: url('tui-utilities.eot?t=1713859578433#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1713859578433") format("woff2"),
+  url("tui-utilities.woff?t=1713859578433") format("woff"),
+  url('tui-utilities.ttf?t=1713859578433') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1713859578433#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/molecules/Forms/{Checkbox.d.ts → Checkbox/Checkbox.d.ts}

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import './controls.css';
+import '../controls.css';
 export interface CheckboxProps<Value = string> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     /**
      * The data-testid to apply to the button.

package/molecules/Forms/Checkbox/Checkbox.js

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

package/molecules/Forms/{Checkboxes.d.ts → Checkboxes/Checkboxes.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { FormControlProps } from './FormControl.js';
+import { FormControlProps } from '../FormControl.js';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 }
 export declare function Checkboxes<Value = string>({ id, name, children, value: initialValue, defaultValue, onChange, disabled, readOnly, tabIndex, ...rest }: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Checkboxes/Checkboxes.js

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

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

@@ -2,13 +2,7 @@ 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

@@ -7,11 +7,11 @@ 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) {
+function $(p) {
   const {
-    id: s = `password-${++T}`,
-    name: t = s,
-    label: p,
+    id: t = `password-${++T}`,
+    name: s = t,
+    label: d,
     value: m,
     disabled: l = !1,
     validationMessages: r = [],
@@ -19,18 +19,18 @@ function $(d) {
     onChange: u,
     dataTestId: b = "Password",
     ...f
-  } = d, { value: g, setValue: x } = k({
-    name: t,
+  } = p, { value: g, setValue: x } = k({
+    name: s,
     initialValue: m,
     onChange: u
   }), [e, i] = N("password");
   C(() => i(e), [e]);
-  const w = () => i(e === "password" ? "text" : "password");
+  const h = () => i(e === "password" ? "text" : "password");
   return /* @__PURE__ */ n(
     V,
     {
-      id: s,
-      label: p,
+      id: t,
+      label: d,
       dataName: "Password",
       dataTestId: b,
       disabled: l,
@@ -40,8 +40,8 @@ function $(d) {
             "input",
             {
               ...f,
-              id: s,
-              name: t,
+              id: t,
+              name: s,
               type: e,
               value: g,
               disabled: l,
@@ -50,19 +50,20 @@ function $(d) {
                 "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
+              "aria-label": s
             }
           ),
           /* @__PURE__ */ a(
             "button",
             {
+              type: "button",
               className: "pointer-events-auto ms-auto absolute right-20 top-12 size-24",
-              onClick: w,
+              onClick: h,
               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)) })
+        !!r.length && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: r.map(({ label: o, status: w }, v) => /* @__PURE__ */ a(P, { label: o, status: w }, v)) })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-alpha.40",
+  "version": "1.0.0-alpha.42",
   "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
-};