@clubmed/trident-ui 1.0.0-beta.17 → 1.0.0-beta.19

package/fonts/Utilities/tui-utilities.css

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

package/molecules/Buttons/ButtonAnchor.d.ts

@@ -1,7 +1,8 @@
-import type { AnchorHTMLAttributes, FunctionComponent } from 'react';
+import type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';
 import './button.css';
 import { type CommonButtonProps } from './Button';
 interface ButtonAnchorProps extends CommonButtonProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+    component?: FunctionComponent<PropsWithChildren<any>> | string;
 }
 export declare const ButtonAnchor: FunctionComponent<ButtonAnchorProps>;
 export {};

package/molecules/Buttons/ButtonAnchor.js

@@ -1,37 +1,38 @@
 import { jsx as s } from "react/jsx-runtime";
-import { c as x } from "../../index-Cu0xwYjD.js";
+import { c as C } from "../../index-Cu0xwYjD.js";
 import "../../button-l0sNRNKZ.js";
 import { variants as y, rootClassName as B } from "./Button.helpers.js";
 import { themes as w } from "./Button.themes.js";
 import { ButtonContent as A } from "./ButtonContent.js";
-const k = ({
-  theme: r = "yellow",
+const z = ({
+  theme: m = "yellow",
+  component: r = "a",
   backgroundOverride: e,
   variant: t = "text",
-  className: m,
+  className: n,
   label: o,
-  children: n,
-  title: a,
-  icon: c,
+  children: a,
+  title: c,
+  icon: p,
   dataTestId: i,
   href: l,
-  groupName: p = "",
-  ...f
+  groupName: f = "",
+  ...h
 }) => {
-  const h = t === "text", u = y[t], d = w(r, e, p);
+  const u = t === "text", d = y[t], x = w(m, e, f);
   return /* @__PURE__ */ s(
-    "a",
+    r,
     {
       "data-name": "ButtonAnchor",
       "data-testid": i,
-      className: x(B, d, u, t, m),
-      title: a || o,
+      className: C(B, x, d, t, n),
+      title: c || o,
       href: l,
-      ...f,
-      children: /* @__PURE__ */ s(A, { showLabel: h, label: o, icon: c, children: n })
+      ...h,
+      children: /* @__PURE__ */ s(A, { showLabel: u, label: o, icon: p, children: a })
     }
   );
 };
 export {
-  k as ButtonAnchor
+  z as ButtonAnchor
 };

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,97 +1,102 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c as p } from "../../../index-Cu0xwYjD.js";
-import { useId as w } from "react";
+import { c } from "../../../index-Cu0xwYjD.js";
+import { useId as D } from "react";
 import { Icon as u } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
 import { useValue as S } from "../../../hooks/useValue.js";
 import "../../../controls-l0sNRNKZ.js";
 import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
-function A(h) {
-  const x = w(), {
-    id: n = x,
-    name: o = n,
-    className: f,
-    dataTestId: b,
-    disabled: s = !1,
-    checked: k = !1,
-    value: r,
-    size: l = 24,
-    tabIndex: g = 0,
-    validationStatus: v = "default",
-    errorMessage: c,
-    children: N,
-    onChange: i,
+function B(x) {
+  const f = D(), {
+    id: s = f,
+    name: n = s,
+    className: b,
+    dataTestId: k,
+    disabled: r = !1,
+    checked: v = !1,
+    value: l,
+    size: i = 24,
+    tabIndex: N = 0,
+    validationStatus: g = "default",
+    errorMessage: d,
+    children: y,
+    onChange: o,
     ...I
-  } = h, { value: d, setValue: y } = S({
-    name: o,
-    initialValue: k,
-    onChange(C, m) {
-      i == null || i(C, m ? r !== void 0 ? r : m : null);
+  } = x, { value: m, setValue: C } = S({
+    name: n,
+    initialValue: v,
+    onChange(w, h) {
+      o == null || o(w, h ? l !== void 0 ? l : h : null);
     }
   }), e = V({
-    isDisabled: s,
-    validationStatus: v
-  });
-  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-y-4", children: [
-    /* @__PURE__ */ t(
-      "label",
-      {
-        className: p(
-          f,
-          "cursor-pointer relative flex gap-8 text-b3 items-center",
+    isDisabled: r,
+    validationStatus: g
+  }), p = e === "error" && d;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: c(b, "flex flex-col space-y-2", {
+        "mb-24": !p
+      }),
+      "data-testid": `checkbox-container-${s}`,
+      children: [
+        /* @__PURE__ */ t(
+          "label",
           {
-            "text-grey": e === "disabled",
-            "text-black": e !== "default"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ t("span", { className: "relative", children: [
-            /* @__PURE__ */ a(
-              "input",
-              {
-                ...I,
-                name: o,
-                "data-testid": b,
-                type: "checkbox",
-                tabIndex: g,
-                onChange: () => {
-                  !s && y(!d);
-                },
-                checked: d,
-                "data-name": "Checkbox",
-                disabled: s,
-                value: r
-              }
-            ),
-            /* @__PURE__ */ a(
-              "span",
-              {
-                style: { height: l, width: l },
-                className: p({ "!border-red": e === "error" }),
-                "data-testid": `check-container-${n}`,
-                children: /* @__PURE__ */ a(
-                  u,
+            className: c("cursor-pointer relative flex text-b3 items-center", {
+              "text-grey": e === "disabled",
+              "text-black": e !== "default"
+            }),
+            children: [
+              /* @__PURE__ */ t("span", { className: "relative self-start me-8", children: [
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ...I,
+                    name: n,
+                    "data-testid": k,
+                    type: "checkbox",
+                    tabIndex: N,
+                    onChange: () => {
+                      !r && C(!m);
+                    },
+                    checked: m,
+                    "data-name": "Checkbox",
+                    disabled: r,
+                    value: l
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "span",
                   {
-                    name: "CheckDefault",
-                    type: "svg",
-                    width: `${l}px`,
-                    color: "black",
-                    className: "absolute"
+                    style: { height: i, width: i },
+                    className: c({ "!border-red": e === "error" }),
+                    "data-testid": `check-container-${s}`,
+                    children: /* @__PURE__ */ a(
+                      u,
+                      {
+                        name: "CheckDefault",
+                        type: "svg",
+                        width: `${i}px`,
+                        color: "black",
+                        className: "absolute"
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ] }),
-          N
-        ]
-      }
-    ),
-    e === "error" && c && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start gap-x-4 ps-20", role: "alert", children: [
-      /* @__PURE__ */ a(u, { name: "Error", width: "20px" }),
-      c
-    ] })
-  ] });
+              ] }),
+              y
+            ]
+          }
+        ),
+        p && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
+          /* @__PURE__ */ a(u, { name: "Error", width: "20px" }),
+          d
+        ] })
+      ]
+    }
+  );
 }
 export {
-  A as Checkbox
+  B as Checkbox
 };

package/molecules/Forms/Checkboxes/Checkboxes.js

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

package/molecules/Forms/FormControl.js

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

package/molecules/Link.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, FunctionComponent } from 'react';
+import { AnchorHTMLAttributes, FunctionComponent, type PropsWithChildren } from 'react';
 import { IconicNames, IconicTypes } from '../atoms/Icons';
 interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends AnchorHTMLAttributes<T> {
     /**
@@ -22,6 +22,10 @@ interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends Anc
      * Is the link inert (not itself clickable but part of a clickable element)
      */
     inert?: boolean;
+    /**
+     * Allow giving a custom component
+     */
+    component?: FunctionComponent<PropsWithChildren<any>> | string;
 }
 export declare const Link: FunctionComponent<LinkProps>;
 export {};

package/molecules/Link.js

@@ -1,28 +1,29 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { c as a } from "../index-Cu0xwYjD.js";
-import { Icon as g } from "../atoms/Icons/Icon.js";
+import { Icon as u } from "../atoms/Icons/Icon.js";
 import "../atoms/Icons/contexts/IconsContext.js";
-const b = ({
+const C = ({
   label: n,
   icon: s,
-  iconType: c,
+  component: c = "a",
+  iconType: m,
   underlined: e = !0,
-  className: m,
-  inert: l,
-  ...p
+  className: l,
+  inert: p,
+  ...d
 }) => {
-  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, d = n.substring(0, 1), h = n.substring(1, i + 1), x = n.substring(i);
+  const r = n.lastIndexOf(" "), i = r === -1 ? n.length : r, h = n.substring(0, 1), x = n.substring(1, i + 1), g = n.substring(i);
   return /* @__PURE__ */ t(
-    l ? "span" : "a",
+    p ? "span" : c,
     {
       className: a(
         "text-b3 decoration-none link-container cursor-pointer text-inherit",
-        m
+        l
       ),
       "data-name": "Link",
-      ...p,
+      ...d,
       children: [
-        /* @__PURE__ */ o("span", { className: a({ "link-underline": e }), children: d }),
+        /* @__PURE__ */ o("span", { className: a({ "link-underline": e }), children: h }),
         /* @__PURE__ */ t(
           "span",
           {
@@ -31,14 +32,14 @@ const b = ({
               "link-underline": e
             }),
             children: [
-              h,
+              x,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
-                x,
+                g,
                 s && /* @__PURE__ */ o(
-                  g,
+                  u,
                   {
                     name: s,
-                    iconType: c,
+                    iconType: m,
                     width: "24px",
                     style: { marginInlineStart: "8px" }
                   }
@@ -52,5 +53,5 @@ const b = ({
   );
 };
 export {
-  b as Link
+  C as Link
 };

package/package.json

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