@clubmed/trident-ui 1.0.0-beta.14 → 1.0.0-beta.15

package/fonts/Utilities/tui-utilities.css

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

package/hooks/useKeyboardControls.d.ts

@@ -1,4 +1,4 @@
-import type { KeyboardEvent } from 'react';
+import { type KeyboardEvent } from 'react';
 interface Options {
     up?: VoidFunction;
     down?: VoidFunction;

package/hooks/useKeyboardControls.js

@@ -1,30 +1,34 @@
 "use client";
-import { CODE as o, KEY as t } from "./keyboard.constants.js";
-const D = (e) => e.key === t.ENTER || e.key === t.SPACE || e.key === t.SPACEBAR || e.code === o.ENTER || e.code === o.SPACE, u = () => {
-}, n = ({
-  up: e = u,
-  down: c = u,
-  left: f = u,
-  right: d = u,
-  start: i = u,
-  end: E = u,
-  activate: R = u
-}) => (r) => {
-  if (D(r))
-    return R();
-  if (r.code === o.HOME)
-    return r.preventDefault(), i();
-  if (r.code === o.END)
-    return r.preventDefault(), E();
-  if (r.code === o.ARROW_UP)
-    return r.preventDefault(), e();
-  if (r.code === o.ARROW_DOWN)
-    return r.preventDefault(), c();
-  if (r.code === o.ARROW_RIGHT)
-    return r.preventDefault(), d();
-  if (r.code === o.ARROW_LEFT)
-    return r.preventDefault(), f();
-};
+import { useCallback as d } from "react";
+import { CODE as u, KEY as c } from "./keyboard.constants.js";
+const t = (o) => o.key === c.ENTER || o.key === c.SPACE || o.key === c.SPACEBAR || o.code === u.ENTER || o.code === u.SPACE, e = () => {
+}, p = ({
+  up: o = e,
+  down: f = e,
+  left: E = e,
+  right: R = e,
+  start: i = e,
+  end: l = e,
+  activate: D = e
+}) => d(
+  (r) => {
+    if (t(r))
+      return D();
+    if (r.code === u.HOME)
+      return r.preventDefault(), i();
+    if (r.code === u.END)
+      return r.preventDefault(), l();
+    if (r.code === u.ARROW_UP)
+      return r.preventDefault(), o();
+    if (r.code === u.ARROW_DOWN)
+      return r.preventDefault(), f();
+    if (r.code === u.ARROW_RIGHT)
+      return r.preventDefault(), R();
+    if (r.code === u.ARROW_LEFT)
+      return r.preventDefault(), E();
+  },
+  [D, f, l, E, R, i, o]
+);
 export {
-  n as useKeyboardControls
+  p as useKeyboardControls
 };

package/molecules/Forms/Checkboxes/Checkbox.d.ts

@@ -1,14 +1,5 @@
-import { InputHTMLAttributes } from 'react';
-import '../controls.css';
-export interface CheckboxProps<Value = string> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    /**
-     * The data-testid to apply to the button.
-     * This is used for testing purposes.
-     * */
-    dataTestId?: string;
-    /**
-     * The width of the checkbox.
-     * */
+import { FormControlProps } from '../FormControl';
+export interface CheckboxProps<Value = string> extends FormControlProps<Value> {
     size?: number;
     onChange?: (name: string, value: Value | null) => void;
 }

package/molecules/Forms/Checkboxes/Checkbox.js

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

package/molecules/Tabs/TabsHeading.js

@@ -1,101 +1,100 @@
 "use client";
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import { c } from "../../index-Cu0xwYjD.js";
-import { useRef as d, useEffect as L } from "react";
-import { b as R } from "../../react-spring_web.modern-BPtZcx1z.js";
-import { useActiveTab as k, useRegisterTabControl as E } from "./hooks/tabControl.js";
-import { getTheme as K } from "./theme.js";
-import { useSafeBoop as D } from "../../hooks/useSafeBoop.js";
-import { useKeyboardControls as j } from "../../hooks/useKeyboardControls.js";
-const m = "-z-1 rounded-pill absolute inset-0 duration-300", P = ({
-  className: u,
-  label: n,
-  children: f,
-  value: o,
-  onSelect: r,
-  as: b = "h2",
-  theme: y = "yellow"
+import { jsx as u, jsxs as B } from "react/jsx-runtime";
+import { c as d } from "../../index-Cu0xwYjD.js";
+import { useRef as m, useEffect as H, useCallback as r } from "react";
+import { b as I } from "../../react-spring_web.modern-BPtZcx1z.js";
+import { useActiveTab as _, useRegisterTabControl as z } from "./hooks/tabControl.js";
+import { getTheme as G } from "./theme.js";
+import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";
+import { useKeyboardControls as O } from "../../hooks/useKeyboardControls.js";
+const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
+  className: b,
+  label: a,
+  children: y,
+  value: e,
+  onSelect: i,
+  as: g = "h2",
+  theme: h = "yellow"
 }) => {
-  const p = d(!1), s = d(null), g = k(), e = E({ value: o, ref: s }), t = g === o, h = { "--tab-index": o }, { textColor: x, textColorActive: C, bgColor: T } = K(y), [w, l] = D({ scale: 1.02 });
-  L(() => {
-    if (!p.current) {
-      p.current = !0;
-      return;
-    }
-    t && (r == null || r({ value: o, label: n })), s.current && t && s.current.focus();
-  }, [t, n, o, r]);
-  const v = j({
-    activate: () => {
-      t && l();
-    },
-    start: () => {
-      e({ type: "start" });
-    },
-    end: () => {
-      e({ type: "end" });
-    },
-    up: () => {
-      e({ type: "previous" });
-    },
-    down: () => {
-      e({ type: "next" });
-    },
-    left: () => {
-      const i = document.documentElement.dir === "rtl";
-      e({ type: i ? "next" : "previous" });
-    },
-    right: () => {
-      const i = document.documentElement.dir === "rtl";
-      e({ type: i ? "previous" : "next" });
-    }
-  }), A = () => {
-    e({ type: "update", payload: o }), t && l();
-  };
-  return /* @__PURE__ */ a(
-    R.div,
+  const p = m(null), o = _(), t = z({ value: e, ref: p }), l = m(o), n = m(o === e);
+  n.current = o === e;
+  const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = G(h), [A, c] = M({ scale: 1.02 });
+  H(() => {
+    var s;
+    l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
+  }, [a, e, i, o]);
+  const v = r(() => {
+    n.current && c();
+  }, [c]), N = r(() => {
+    t({ type: "start" });
+  }, [t]), k = r(() => {
+    t({ type: "end" });
+  }, [t]), L = r(() => {
+    t({ type: "previous" });
+  }, [t]), R = r(() => {
+    t({ type: "next" });
+  }, [t]), E = r(() => {
+    const s = document.documentElement.dir === "rtl";
+    t({ type: s ? "next" : "previous" });
+  }, [t]), K = r(() => {
+    const s = document.documentElement.dir === "rtl";
+    t({ type: s ? "previous" : "next" });
+  }, [t]), D = O({
+    activate: v,
+    start: N,
+    end: k,
+    up: L,
+    down: R,
+    left: E,
+    right: K
+  }), j = r(() => {
+    t({ type: "update", payload: e }), n.current && c();
+  }, [c, t, e]);
+  return /* @__PURE__ */ u(
+    I.div,
     {
       "data-name": "TabsHeading",
-      ref: s,
+      ref: p,
       role: "tab",
-      "aria-selected": t,
-      tabIndex: t ? 0 : -1,
-      style: w,
-      className: c(
+      "aria-selected": n.current,
+      tabIndex: n.current ? 0 : -1,
+      style: A,
+      className: d(
         "text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
-        u,
+        b,
         {
-          [x]: !t,
-          [C]: t
+          [C]: !n.current,
+          [T]: n.current
         }
       ),
-      onKeyDown: v,
-      onClick: A,
-      children: /* @__PURE__ */ N(b, { className: "relative inline-block px-20 py-12", children: [
-        /* @__PURE__ */ a(
+      onKeyDown: D,
+      onClick: j,
+      children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
+        /* @__PURE__ */ u(
           "span",
           {
-            className: c(
+            className: d(
               "group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
-              m
+              f
             )
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ u(
           "span",
           {
-            className: c(
+            className: d(
               "tab-focus-pill ease transition-transform/colors",
-              m,
-              T
+              f,
+              w
             ),
-            style: h
+            style: x
           }
         ),
-        f ?? n
+        y ?? a
       ] })
     }
   );
 };
 export {
-  P as TabsHeading
+  W as TabsHeading
 };

package/molecules/Tabs/context/TabControl.js

@@ -1,38 +1,38 @@
 "use client";
 import { jsx as l } from "react/jsx-runtime";
 import { createContext as c, useReducer as v, useMemo as u, useCallback as x } from "react";
-const C = (e) => {
-  const t = Math.max(Math.min(e.min, e.max), 0), r = Math.max(Math.min(e.max, 1 / 0), t);
+const C = (t) => {
+  const e = Math.max(Math.min(t.min, t.max), 0), r = Math.max(Math.min(t.max, 1 / 0), e);
   return {
-    min: t,
+    min: e,
     max: r,
-    clamp: (n) => Math.max(Math.min(n, r), t)
+    clamp: (n) => Math.max(Math.min(n, r), e)
   };
-}, g = (e) => {
-  const { clamp: t } = C(e);
-  return t(e.value);
-}, P = (e) => {
-  const { min: t, max: r, clamp: n } = C(e);
+}, g = (t) => {
+  const { clamp: e } = C(t);
+  return e(t.value);
+}, P = (t) => {
+  const { min: e, max: r, clamp: n } = C(t);
   return (a, o) => {
     switch (o.type) {
       case "update":
         return n(o.payload);
       case "next":
-        return a + 1 <= r ? a + 1 : t;
+        return a + 1 <= r ? a + 1 : e;
       case "previous":
-        return a - 1 >= t ? a - 1 : r;
+        return a - 1 >= e ? a - 1 : r;
       case "start":
-        return t;
+        return e;
       case "end":
         return r;
     }
   };
-}, R = (e, t) => {
-  switch (t.type) {
+}, R = (t, e) => {
+  switch (e.type) {
     case "register":
-      return new Map(e.set(t.payload.value, t.payload.ref));
+      return new Map(t.set(e.payload.value, e.payload.ref));
     case "unregister":
-      return e.delete(t.payload.value) ? new Map(e) : e;
+      return t.delete(e.payload.value), new Map(t);
   }
 }, h = c({ value: 0 });
 h.displayName = "ActiveTabContext";
@@ -53,14 +53,14 @@ const b = c({
 });
 b.displayName = "TabControlContext";
 const A = ({
-  min: e = 0,
-  max: t,
-  selected: r = e,
+  min: t = 0,
+  max: e,
+  selected: r = t,
   children: n
 }) => {
   const [a, o] = v(
-    P({ min: e, max: t }),
-    { value: r, min: e, max: t },
+    P({ min: t, max: e }),
+    { value: r, min: t, max: e },
     g
   ), [i, d] = v(R, /* @__PURE__ */ new Map()), M = u(() => ({ value: a }), [a]), f = u(() => ({ refs: i }), [i]), p = x(
     (s, w) => {

package/package.json

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