@clubmed/trident-ui 1.0.0-beta.9 → 1.0.0-rc.1

package/molecules/Popin.js

@@ -1,47 +1,51 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { c as m, b as d, d as p } from "../react-spring_web.modern-BPtZcx1z.js";
-import { Backdrop as f } from "./Backdrop.js";
-import { Button as h } from "./Buttons/Button.js";
-const g = ({
-  title: o,
-  children: c,
-  closeLabel: n,
-  onClose: a,
-  isVisible: t
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { c as f, b as p, d as x } from "../react-spring_web.modern-BPtZcx1z.js";
+import { Backdrop as h } from "./Backdrop.js";
+import { Button as u } from "./Buttons/Button.js";
+import { c as v } from "../index-Cu0xwYjD.js";
+const b = ({ closeLabel: e, onClose: o }) => /* @__PURE__ */ t(
+  u,
+  {
+    theme: "black",
+    variant: "icon",
+    icon: "CrossDefault",
+    className: "mx-auto",
+    label: e,
+    onClick: o
+  }
+), j = ({
+  title: e,
+  children: o,
+  closeLabel: s,
+  onClose: r,
+  isVisible: a,
+  className: c = "sm:w-360",
+  Footer: n = b
 }) => {
-  const i = m(t, {
+  const i = f(a, {
     from: { scale: 0.3, opacity: 0.3 },
     enter: { scale: 1, opacity: 1 },
     leave: { scale: 0, opacity: 0 },
-    config: t ? { tension: 120, friction: 20 } : p.gentle
+    config: a ? { tension: 120, friction: 20 } : x.gentle
   });
-  return /* @__PURE__ */ e(f, { isVisible: t, onClose: a, children: i(
-    (s, l) => l && /* @__PURE__ */ e(
-      d.div,
+  return /* @__PURE__ */ t(h, { isVisible: a, onClose: r, children: i(
+    (m, l) => l && /* @__PURE__ */ t(
+      p.div,
       {
-        className: "border-lightGrey rounded-16 sm:w-360 pointer-events-auto mx-20 w-full border bg-white",
-        style: s,
-        children: /* @__PURE__ */ r("div", { className: "space-y-40 p-40 text-center", children: [
-          /* @__PURE__ */ r("div", { className: "space-y-12 text-start", children: [
-            /* @__PURE__ */ e("div", { className: "text-h5 font-serif", children: o }),
-            c
-          ] }),
-          /* @__PURE__ */ e(
-            h,
-            {
-              theme: "black",
-              variant: "icon",
-              icon: "CrossDefault",
-              className: "mx-auto",
-              label: n,
-              onClick: a
-            }
-          )
+        className: v(
+          "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
+          c
+        ),
+        style: m,
+        children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
+          e && /* @__PURE__ */ t("div", { className: "mt-12 text-h5 text-start font-serif", children: e }),
+          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: o }),
+          n && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { closeLabel: s, onClose: r }) })
         ] })
       }
     )
   ) });
 };
 export {
-  g as Popin
+  j as Popin
 };

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

package/styles/globals.css

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