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

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/Breadcrumb.d.ts

@@ -1,10 +1,14 @@
-import { FunctionComponent } from 'react';
-interface BreadcrumbProps {
-    items: Array<{
+import { FunctionComponent, PropsWithChildren } from 'react';
+export interface BreadcrumbProps {
+    className?: string;
+    items: {
         label: string;
         href: string;
-    }>;
+    }[];
     theme?: 'dark' | 'light';
+    /**
+     * Allow giving a custom component
+     */
+    component?: FunctionComponent<PropsWithChildren<any>> | string;
 }
 export declare const Breadcrumb: FunctionComponent<BreadcrumbProps>;
-export {};

package/molecules/Breadcrumb.js

@@ -1,8 +1,8 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { c as b } from "../index-Cu0xwYjD.js";
-import { Icon as u } from "../atoms/Icons/Icon.js";
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import { c as w } from "../index-Cu0xwYjD.js";
+import { Icon as B } from "../atoms/Icons/Icon.js";
 import "../atoms/Icons/contexts/IconsContext.js";
-const k = {
+const E = {
   light: {
     thStart: "text-middleGrey",
     thEnd: "text-black font-bold"
@@ -11,21 +11,26 @@ const k = {
     thStart: "text-white",
     thEnd: "text-white font-bold"
   }
-}, S = ({ items: n, theme: l = "light" }) => {
-  const [o, i, , ...r] = n, h = r.length ? r[r.length - 1] : n[n.length - 1], m = { label: "...", href: "" }, s = r.length ? [o, i, m, h] : n, { thStart: d, thEnd: x } = k[l];
-  return /* @__PURE__ */ e("nav", { "data-name": "Breadcrumb", "aria-label": "Breadcrumb", children: /* @__PURE__ */ e("ul", { className: "flex items-center", children: s.map(({ label: a, href: c }, p) => {
-    const t = p === s.length - 1, f = c && !t;
-    return /* @__PURE__ */ g(
+}, L = ({
+  className: o,
+  items: n,
+  theme: l = "light",
+  component: i = "a"
+}) => {
+  const [m, h, , ...r] = n, d = r.length ? r[r.length - 1] : n[n.length - 1], x = { label: "...", href: "" }, s = r.length ? [m, h, x, d] : n, { thStart: p, thEnd: f } = E[l], g = i;
+  return /* @__PURE__ */ e("nav", { "data-name": "Breadcrumb", "aria-label": "Breadcrumb", className: o, children: /* @__PURE__ */ e("ul", { className: "flex items-center", children: s.map(({ label: a, href: c }, b) => {
+    const t = b === s.length - 1, u = c && !t;
+    return /* @__PURE__ */ k(
       "li",
       {
-        className: b("text-b4 flex items-center", {
-          [d]: !t,
-          [x]: t
+        className: w("text-b4 flex items-center", {
+          [p]: !t,
+          [f]: t
         }),
         ...t && { "aria-current": "page" },
         children: [
-          /* @__PURE__ */ e("span", { children: f ? /* @__PURE__ */ e("a", { href: c, children: a }) : a }),
-          !t && /* @__PURE__ */ e(u, { name: "Diamond", width: "14px", className: "mx-4" })
+          /* @__PURE__ */ e("span", { children: u ? /* @__PURE__ */ e(g, { href: c, children: a }) : a }),
+          !t && /* @__PURE__ */ e(B, { name: "Diamond", width: "14px", className: "mx-4" })
         ]
       },
       a
@@ -33,5 +38,5 @@ const k = {
   }) }) });
 };
 export {
-  S as Breadcrumb
+  L as Breadcrumb
 };

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.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,102 @@
-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 } 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 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 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
+  } = x, { value: m, setValue: C } = S({
+    name: n,
+    initialValue: v,
+    onChange(w, h) {
+      o == null || o(w, h ? l !== void 0 ? l : h : null);
     }
-  });
-  return /* @__PURE__ */ n(
-    "label",
+  }), e = V({
+    isDisabled: r,
+    validationStatus: g
+  }), p = e === "error" && d;
+  return /* @__PURE__ */ t(
+    "div",
     {
-      className: g(p, "cursor-pointer relative flex gap-8", {
-        "text-grey": e
+      className: c(b, "flex flex-col space-y-2", {
+        "mb-24": !p
       }),
+      "data-testid": `checkbox-container-${s}`,
       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
+        /* @__PURE__ */ t(
+          "label",
+          {
+            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",
+                  {
+                    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"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              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 {
-  $ as Checkbox
+  B as Checkbox
 };

package/molecules/Forms/Checkboxes/Checkboxes.js

@@ -1,21 +1,21 @@
 import { jsx as I } from "react/jsx-runtime";
-import { useId as v, Children as N, isValidElement as g, cloneElement as h } from "react";
+import { useId as N, Children as v, isValidElement as g, cloneElement as h } from "react";
 import { useValue as k } from "../../../hooks/useValue.js";
 import { c as E } from "../../../index-Cu0xwYjD.js";
 function q(m) {
-  const i = v(), {
+  const i = N(), {
     id: r = i,
-    name: t = r,
+    name: n = r,
     children: u,
     value: c,
     defaultValue: p,
     onChange: d,
     disabled: f,
-    readOnly: b,
-    tabIndex: V = 0,
+    readOnly: V,
+    tabIndex: b = 0,
     ...s
   } = m, { value: a, setValue: o } = k({
-    name: t,
+    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", { ...s, className: s.className, role: "listbox", children: N.map(u, (e, l) => {
+  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: t,
+        name: n,
         id: `${r}-${l}`,
         disabled: f,
-        readOnly: b,
-        tabIndex: V + l + 1,
-        className: E("mb-12 last:mb-0", e.props),
-        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) {
-          o(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 j = ({
+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.at(0), 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 j = ({
               "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 j = ({
   );
 };
 export {
-  j as Link
+  C as Link
 };

package/molecules/Popin.d.ts

@@ -1,9 +1,17 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-interface PopinProps {
-    title: string;
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+export type ClosePopinCallback = () => void;
+interface PopinFooterProps {
     closeLabel: string;
-    onClose: () => void;
+    onClose: ClosePopinCallback;
+}
+export interface PopinProps {
+    title: ReactNode;
+    closeLabel: string;
+    onClose: ClosePopinCallback;
     isVisible: boolean;
+    className?: string;
+    showCloseButton?: boolean;
+    Footer?: FunctionComponent<PopinFooterProps> | false;
 }
 export declare const Popin: FunctionComponent<PropsWithChildren<PopinProps>>;
 export {};