@clubmed/trident-ui 1.0.0-beta.2 → 1.0.0-beta.20

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.2",
+  "version": "1.0.0-beta.20",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/globals.css

@@ -84,6 +84,14 @@
     appearance: none;
   }
 
+  input[type='password']::-ms-reveal {
+    display: none;
+  }
+
+  select:invalid {
+    @apply text-middleGrey;
+  }
+
   .date-field {
     @apply appearance-none;
   }

package/EyeClosed-vWGtzMgE.js

@@ -1,5 +0,0 @@
-import * as C from "react";
-const l = (e) => /* @__PURE__ */ C.createElement("svg", { id: "EyeClosed", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30", fill: "none", ...e }, /* @__PURE__ */ C.createElement("path", { id: "Union", fillRule: "evenodd", clipRule: "evenodd", d: "M25.7073 5.70711C26.0978 5.31658 26.0978 4.68342 25.7073 4.29289C25.3168 3.90237 24.6836 3.90237 24.2931 4.29289L20.1014 8.48451C18.5533 7.60604 16.8243 7 15.0002 7C9.89545 7 5.53518 11.7462 3.80105 13.9271C3.29548 14.563 3.29548 15.437 3.80105 16.0729C4.67618 17.1735 6.22012 18.9274 8.19103 20.3949L4.29307 24.2929C3.90254 24.6834 3.90254 25.3166 4.29307 25.7071C4.68359 26.0976 5.31676 26.0976 5.70728 25.7071L25.7073 5.70711ZM9.62217 18.9638L10.5555 18.0305C9.58904 16.9654 9.00017 15.5515 9.00017 14C9.00017 12.8421 9.32816 11.7608 9.89629 10.844C9.70813 10.9729 9.52159 11.107 9.33689 11.2455C7.67617 12.4915 6.33158 13.9795 5.50449 15C6.33158 16.0205 7.67617 17.5085 9.33689 18.7545C9.43151 18.8255 9.52662 18.8953 9.62217 18.9638ZM11.7399 22.3816L13.3348 20.7867C13.8877 20.9251 14.4442 21 15.0002 21C16.9399 21 18.8863 20.0878 20.6635 18.7545C22.3242 17.5085 23.6688 16.0205 24.4959 15C23.8815 14.2419 22.9816 13.2259 21.8787 12.2428L23.295 10.8265C24.5585 11.9644 25.5583 13.121 26.1993 13.9271C26.7049 14.563 26.7049 15.437 26.1993 16.0729C24.4652 18.2538 20.1049 23 15.0002 23C13.8701 23 12.7766 22.7674 11.7399 22.3816ZM21.0002 14C21.0002 13.7209 20.9811 13.4462 20.9442 13.1773L14.1774 19.9441C14.4464 19.9809 14.7211 20 15.0002 20C18.3139 20 21.0002 17.3137 21.0002 14Z", fill: "currentColor" }));
-export {
-  l as default
-};

package/EyeOpened-CsQwqVMl.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const l = (C) => /* @__PURE__ */ e.createElement("svg", { id: "EyeOpened", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30", fill: "none", ...C }, /* @__PURE__ */ e.createElement("path", { id: "Union", fillRule: "evenodd", clipRule: "evenodd", d: "M20.6633 11.2455C22.324 12.4915 23.6686 13.9795 24.4957 15C23.6686 16.0205 22.324 17.5085 20.6633 18.7545C18.8861 20.0878 16.9398 21 15 21C13.0602 21 11.1139 20.0878 9.33672 18.7545C7.676 17.5085 6.33141 16.0205 5.50431 15C6.33141 13.9795 7.676 12.4915 9.33672 11.2455C9.52142 11.107 9.70795 10.9729 9.89611 10.844C9.32798 11.7608 9 12.8421 9 14C9 17.3137 11.6863 20 15 20C18.3137 20 21 17.3137 21 14C21 12.8421 20.672 11.7608 20.1039 10.844C20.292 10.9729 20.4786 11.107 20.6633 11.2455ZM26.1991 13.9271C26.7047 14.563 26.7047 15.437 26.1991 16.0729C24.465 18.2538 20.1047 23 15 23C9.89527 23 5.53501 18.2538 3.80088 16.0729C3.29531 15.437 3.29531 14.563 3.80088 13.9271C5.53501 11.7462 9.89527 7 15 7C20.1047 7 24.465 11.7462 26.1991 13.9271Z", fill: "currentColor" }));
-export {
-  l as default
-};

package/assets/icons/Utilities/EyeClosed.svg

@@ -1,12 +0,0 @@
-<svg id="EyeClosed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none">
-  <path
-    id="Union"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M25.7073 5.70711C26.0978 5.31658 26.0978 4.68342 25.7073 4.29289C25.3168 3.90237 24.6836 3.90237 24.2931 4.29289L20.1014 8.48451C18.5533 7.60604 16.8243 7 15.0002 7C9.89545 7 5.53518 11.7462 3.80105 13.9271C3.29548 14.563 3.29548 15.437 3.80105 16.0729C4.67618 17.1735 6.22012 18.9274 8.19103 20.3949L4.29307 24.2929C3.90254 24.6834 3.90254 25.3166 4.29307 25.7071C4.68359 26.0976 5.31676 26.0976 5.70728 25.7071L25.7073 5.70711ZM9.62217 18.9638L10.5555 18.0305C9.58904 16.9654 9.00017 15.5515 9.00017 14C9.00017 12.8421 9.32816 11.7608 9.89629 10.844C9.70813 10.9729 9.52159 11.107 9.33689 11.2455C7.67617 12.4915 6.33158 13.9795 5.50449 15C6.33158 16.0205 7.67617 17.5085 9.33689 18.7545C9.43151 18.8255 9.52662 18.8953 9.62217 18.9638ZM11.7399 22.3816L13.3348 20.7867C13.8877 20.9251 14.4442 21 15.0002 21C16.9399 21 18.8863 20.0878 20.6635 18.7545C22.3242 17.5085 23.6688 16.0205 24.4959 15C23.8815 14.2419 22.9816 13.2259 21.8787 12.2428L23.295 10.8265C24.5585 11.9644 25.5583 13.121 26.1993 13.9271C26.7049 14.563 26.7049 15.437 26.1993 16.0729C24.4652 18.2538 20.1049 23 15.0002 23C13.8701 23 12.7766 22.7674 11.7399 22.3816ZM21.0002 14C21.0002 13.7209 20.9811 13.4462 20.9442 13.1773L14.1774 19.9441C14.4464 19.9809 14.7211 20 15.0002 20C18.3139 20 21.0002 17.3137 21.0002 14Z"
-    fill="currentColor"
-  />
-</svg>
-
-
-

package/assets/icons/Utilities/EyeOpened.svg

@@ -1,11 +0,0 @@
-<svg id="EyeOpened" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none">
-  <path
-    id="Union"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M20.6633 11.2455C22.324 12.4915 23.6686 13.9795 24.4957 15C23.6686 16.0205 22.324 17.5085 20.6633 18.7545C18.8861 20.0878 16.9398 21 15 21C13.0602 21 11.1139 20.0878 9.33672 18.7545C7.676 17.5085 6.33141 16.0205 5.50431 15C6.33141 13.9795 7.676 12.4915 9.33672 11.2455C9.52142 11.107 9.70795 10.9729 9.89611 10.844C9.32798 11.7608 9 12.8421 9 14C9 17.3137 11.6863 20 15 20C18.3137 20 21 17.3137 21 14C21 12.8421 20.672 11.7608 20.1039 10.844C20.292 10.9729 20.4786 11.107 20.6633 11.2455ZM26.1991 13.9271C26.7047 14.563 26.7047 15.437 26.1991 16.0729C24.465 18.2538 20.1047 23 15 23C9.89527 23 5.53501 18.2538 3.80088 16.0729C3.29531 15.437 3.29531 14.563 3.80088 13.9271C5.53501 11.7462 9.89527 7 15 7C20.1047 7 24.465 11.7462 26.1991 13.9271Z"
-    fill="currentColor"
-  />
-</svg>
-
-