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

package/molecules/Forms/Select.js

@@ -0,0 +1,102 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { c as l } from "../../index-Cu0xwYjD.js";
+import { useValue as D } from "../../hooks/useValue.js";
+import { useInternalStatus as I } from "../../hooks/useInternalStatus.js";
+import { FormControl as S } from "./FormControl.js";
+import { Icon as n } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
+import { useId as j } from "react";
+const B = (p) => {
+  const u = j(), {
+    id: t = u,
+    name: a = t,
+    label: m,
+    value: b,
+    description: f,
+    validationStatus: o = "default",
+    iconType: i,
+    errorMessage: x,
+    disabled: s = !1,
+    required: d = !1,
+    className: g,
+    dataTestId: h = t,
+    onChange: v,
+    children: y,
+    ...w
+  } = p, { value: N, setValue: k } = D({ name: a, initialValue: b, onChange: v }), e = I({
+    isDisabled: s,
+    validationStatus: o
+  });
+  return /* @__PURE__ */ r(
+    S,
+    {
+      id: t,
+      label: m,
+      description: f,
+      dataName: "TextField",
+      dataTestId: h,
+      disabled: s,
+      required: d,
+      validationStatus: o,
+      errorMessage: x,
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          className: l("relative rounded-pill z-0", {
+            "bg-white": e !== "disabled",
+            "bg-pearl": e === "disabled"
+          }),
+          children: [
+            /* @__PURE__ */ r(
+              "select",
+              {
+                ...w,
+                id: t,
+                name: a,
+                disabled: s,
+                required: d,
+                value: N,
+                onChange: (C) => k(C.target.value),
+                className: l(
+                  "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent",
+                  {
+                    "border-lightGrey focus:border-black active:border-black pe-[52px]": e === "default",
+                    "pe-[84px]": e === "error" || e === "success",
+                    "text-black": e !== "disabled",
+                    "text-grey": e === "disabled",
+                    "border-red": e === "error",
+                    "border-green": e === "success"
+                  },
+                  g
+                ),
+                "aria-label": a,
+                children: y
+              }
+            ),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: l(
+                  "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1",
+                  {
+                    "text-grey": e === "disabled",
+                    "text-red": e === "error",
+                    "text-green": e === "success"
+                  }
+                ),
+                children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
+                  e === "error" && /* @__PURE__ */ r(n, { name: "CrossDefault", width: "24px", type: i }),
+                  e === "success" && /* @__PURE__ */ r(n, { name: "CheckDefault", width: "24px", type: i }),
+                  /* @__PURE__ */ r("button", { className: "pointer-events-auto inline-flex", children: /* @__PURE__ */ r(n, { name: "ArrowDefaultDown", type: "svg", width: "24px", color: "black" }) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  B as Select
+};

package/molecules/Forms/Switch.d.ts

@@ -2,4 +2,4 @@ import { FormControlProps } from './FormControl.js';
 export interface SwitchProps extends FormControlProps<boolean> {
     width?: number;
 }
-export declare function Switch({ id, name, className, checked: initialChecked, disabled, width, onChange, tabIndex, children, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Switch.js

@@ -1,30 +1,30 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { c as m } from "../../index-Cu0xwYjD.js";
-import { useValue as x } from "../../hooks/useValue.js";
+import { c as x } from "../../index-Cu0xwYjD.js";
+import { useValue as f } from "../../hooks/useValue.js";
 import "../../controls-l0sNRNKZ.js";
-let f = 0;
-function d({
-  id: a = `switch-${++f}`,
-  name: r = a,
-  className: s,
-  checked: o,
-  disabled: c,
-  width: t = 56,
-  onChange: n,
-  tabIndex: h = 0,
-  children: p
-}) {
-  const { value: i, setValue: u } = x({
-    initialValue: o,
-    name: r,
-    onChange: n
+import { useId as w } from "react";
+function k(r) {
+  const s = w(), {
+    id: n = s,
+    name: a = n,
+    className: o,
+    checked: h,
+    disabled: t,
+    width: i = 56,
+    onChange: d,
+    tabIndex: m = 0,
+    children: p
+  } = r, { value: c, setValue: u } = f({
+    initialValue: h,
+    name: a,
+    onChange: d
   });
   return /* @__PURE__ */ l(
     "label",
     {
-      className: m(s, "relative flex items-center gap-[10px]", {
-        "text-grey": c,
-        "cursor-pointer": !c
+      className: x(o, "relative flex items-center gap-[10px]", {
+        "text-grey": t,
+        "cursor-pointer": !t
       }),
       "data-testid": "SwitchContainer",
       children: [
@@ -33,19 +33,19 @@ function d({
             "input",
             {
               type: "checkbox",
-              name: r,
-              tabIndex: h,
-              checked: i,
-              disabled: c,
+              name: a,
+              tabIndex: m,
+              checked: c,
+              disabled: t,
               role: "switch",
               className: "absolute w-full h-full opacity-0 cursor-pointer",
               onChange: () => {
-                !c && u(!i);
+                !t && u(!c);
               },
               "data-name": "Switch"
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: t * 4 / 7, width: t }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: t * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
+          /* @__PURE__ */ e("span", { style: { height: i * 4 / 7, width: i }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 12, fill: "hsl(var(--color-white))" }),
             /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 4, fill: "hsl(var(--color-grey))" })
           ] }) }) })
@@ -56,5 +56,5 @@ function d({
   );
 }
 export {
-  d as Switch
+  k as Switch
 };

package/molecules/Forms/TextField.d.ts

@@ -1,11 +1,7 @@
 import { FormControlProps } from './FormControl.js';
 import { IconicNames, IconicTypes } from '../../atoms/Icons';
 export interface TextFieldProps<Value> extends FormControlProps<Value> {
-    /**
-     * Description text
-     */
     description?: string;
-    hasDropdown?: boolean;
     icon?: IconicNames;
     iconType?: IconicTypes;
     errorMessage?: string;

package/molecules/Forms/TextField.js

@@ -1,60 +1,61 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as p } from "../../index-Cu0xwYjD.js";
-import { useValue as k } from "../../hooks/useValue.js";
-import { useInternalStatus as C } from "../../hooks/useInternalStatus.js";
-import { FormControl as T } from "./FormControl.js";
-import { Icon as r } from "../../atoms/Icons/Icon.js";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { c as m } from "../../index-Cu0xwYjD.js";
+import { useValue as T } from "../../hooks/useValue.js";
+import { useInternalStatus as k } from "../../hooks/useInternalStatus.js";
+import { FormControl as F } from "./FormControl.js";
+import { Icon as i } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-let F = 0;
-const $ = (u) => {
-  const {
-    id: a = `text-field-${++F}`,
-    name: s = a,
-    label: m,
-    value: x,
-    description: b,
-    validationStatus: c = "default",
-    hasDropdown: l = !1,
-    icon: o,
-    iconType: i,
-    errorMessage: f,
-    disabled: n = !1,
+import { useId as j } from "react";
+const B = (p) => {
+  const u = j(), {
+    id: r = u,
+    name: a = r,
+    label: x,
+    value: b,
+    description: f,
+    validationStatus: n = "default",
+    icon: s,
+    iconType: d,
+    errorMessage: g,
+    disabled: l = !1,
+    required: c = !1,
     className: h,
-    dataTestId: g = "TextField",
-    onChange: v,
+    dataTestId: v = "TextField",
+    onChange: y,
     ...w
-  } = u, { value: y, setValue: N } = k({ name: s, initialValue: x, onChange: v }), e = C({
-    isDisabled: n,
-    validationStatus: c
+  } = p, { value: N, setValue: C } = T({ name: a, initialValue: b, onChange: y }), e = k({
+    isDisabled: l,
+    validationStatus: n
   });
   return /* @__PURE__ */ t(
-    T,
+    F,
     {
-      id: a,
-      label: m,
-      description: b,
+      id: r,
+      label: x,
+      description: f,
       dataName: "TextField",
-      dataTestId: g,
-      disabled: n,
-      validationStatus: c,
-      errorMessage: f,
-      children: /* @__PURE__ */ d("div", { className: "relative", children: [
+      dataTestId: v,
+      disabled: l,
+      required: c,
+      validationStatus: n,
+      errorMessage: g,
+      children: /* @__PURE__ */ o("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "input",
           {
             ...w,
-            id: a,
-            name: s,
-            disabled: n,
-            value: y,
-            onChange: (D) => N(D.target.value),
-            className: p(
+            id: r,
+            name: a,
+            disabled: l,
+            required: c,
+            value: N,
+            onChange: (I) => C(I.target.value),
+            className: m(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
-                "ps-[52px]": o,
-                "pe-[52px]": l || e === "error" || e === "success",
-                "pe-[84px]": l && (e === "error" || e === "success"),
+                "ps-[52px]": s,
+                "pe-[52px]": e === "error" || e === "success",
                 "bg-white text-black": e !== "disabled",
                 "bg-pearl text-grey": e === "disabled",
                 "border-red": e === "error",
@@ -62,13 +63,13 @@ const $ = (u) => {
               },
               h
             ),
-            "aria-label": s
+            "aria-label": a
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: p(
+            className: m(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -77,11 +78,10 @@ const $ = (u) => {
               }
             ),
             children: [
-              o && /* @__PURE__ */ t(r, { name: o, width: "24px" }),
-              /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: i }),
-                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: i }),
-                l && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: i }) })
+              s && /* @__PURE__ */ t(i, { name: s, width: "24px" }),
+              /* @__PURE__ */ o("span", { className: "ms-auto flex gap-x-8", children: [
+                e === "error" && /* @__PURE__ */ t(i, { name: "CrossDefault", width: "24px", type: d }),
+                e === "success" && /* @__PURE__ */ t(i, { name: "CheckDefault", width: "24px", type: d })
               ] })
             ]
           }
@@ -91,5 +91,5 @@ const $ = (u) => {
   );
 };
 export {
-  $ as TextField
+  B as TextField
 };

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 {};

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
 };