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

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,15 +1,6 @@
-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;
 }
-export declare function Checkbox<Value = string>({ id, name, className, dataTestId, disabled, checked: initialChecked, value, size, tabIndex, children, onChange, ...rest }: CheckboxProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox<Value = string>(props: CheckboxProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Checkboxes/Checkbox.js

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

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

@@ -2,4 +2,4 @@ import { HTMLAttributes } from 'react';
 import { FormControlProps } from '../FormControl.js';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 }
-export declare function Checkboxes<Value = string>({ id, name, children, value: initialValue, defaultValue, onChange, disabled, readOnly, tabIndex, ...rest }: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Checkboxes<Value = string>(props: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Checkboxes/Checkboxes.js

@@ -1,43 +1,42 @@
-import { jsx as d } from "react/jsx-runtime";
-import { Children as k, isValidElement as v, cloneElement as C } from "react";
-import { useValue as N } from "../../../hooks/useValue.js";
+import { jsx as I } from "react/jsx-runtime";
+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";
-let $ = 0;
-function q({
-  id: s = "checkboxes-" + $++,
-  name: t = s,
-  children: m,
-  value: u,
-  defaultValue: c,
-  onChange: p,
-  disabled: i,
-  readOnly: f,
-  tabIndex: b = 0,
-  ...a
-}) {
-  const { value: o, setValue: l } = N({
-    name: t,
-    initialValue: u,
+function q(m) {
+  const i = N(), {
+    id: r = i,
+    name: n = r,
+    children: u,
+    value: c,
+    defaultValue: p,
+    onChange: d,
+    disabled: f,
+    readOnly: V,
+    tabIndex: b = 0,
+    ...s
+  } = m, { value: a, setValue: o } = k({
+    name: n,
+    initialValue: c,
     formatter(e) {
       return e !== void 0 ? [].concat(e) : e;
     },
-    defaultValue: c || [],
-    onChange: p
+    defaultValue: p || [],
+    onChange: d
   });
-  return /* @__PURE__ */ d("div", { ...a, className: a.className, role: "listbox", children: k.map(m, (e, n) => {
-    if (v(e)) {
-      const r = e.props.value;
-      return C(e, {
+  return /* @__PURE__ */ I("div", { ...s, className: s.className, role: "listbox", children: v.map(u, (e, l) => {
+    if (g(e)) {
+      const t = e.props.value;
+      return h(e, {
         ...e.props,
-        name: t,
-        id: `${s}-${n}`,
-        disabled: i,
-        readOnly: f,
-        tabIndex: b + n + 1,
-        className: E("mb-12 last:mb-0", e.props),
-        checked: o.includes(r),
-        onChange(g, x) {
-          l(x === null ? o.filter((V) => V !== r) : o.concat(r));
+        name: n,
+        id: `${r}-${l}`,
+        disabled: f,
+        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 !== t) : a.concat(t));
         }
       });
     }

package/molecules/Forms/DateField.d.ts

@@ -1,31 +1,15 @@
-import { FunctionComponent } from 'react';
 import { IconicNames, IconicTypes } from '../../atoms/Icons';
 import { FormControlProps } from './FormControl.js';
 interface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {
-    /**
-     * Description text
-     */
     description?: string;
     /**
      * Open datepicker text
      */
     openDatepicker?: string;
-    /**
-     * Id of the input
-     */
     id?: string;
-    /**
-     * Icon name
-     */
     icon?: IconicNames;
     iconType?: IconicTypes;
-    /**
-     * Error message
-     */
     errorMessage?: string;
-    /**
-     * Data test id
-     */
     dataTestId?: string;
     /**
      * Minimum Date allowed
@@ -36,5 +20,5 @@ interface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'mi
      */
     max?: Date | undefined;
 }
-export declare const DateField: FunctionComponent<DateFieldProps>;
+export declare const DateField: (props: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};