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

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

package/molecules/Forms/DateField.js

@@ -1,112 +1,113 @@
-import { jsx as p, jsxs as b } from "react/jsx-runtime";
-import { c as M } from "../../index-Cu0xwYjD.js";
-import { useRef as R } from "react";
-import { Icon as E } from "../../atoms/Icons/Icon.js";
+import { jsx as m, jsxs as x } from "react/jsx-runtime";
+import { c as E } from "../../index-Cu0xwYjD.js";
+import { useId as _, useRef as z } from "react";
+import { Icon as I } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useValue as P } from "../../hooks/useValue.js";
-import { useInternalStatus as _ } from "../../hooks/useInternalStatus.js";
+import { useValue as G } from "../../hooks/useValue.js";
+import { useInternalStatus as Z } from "../../hooks/useInternalStatus.js";
 import { FormControl as $ } from "./FormControl.js";
-function I(e) {
+function T(t) {
   "@babel/helpers - typeof";
-  return I = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
-    return typeof t;
-  } : function(t) {
-    return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
-  }, I(e);
+  return T = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+    return typeof e;
+  } : function(e) {
+    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+  }, T(t);
 }
-function T(e, t) {
-  if (t.length < e)
-    throw new TypeError(e + " argument" + (e > 1 ? "s" : "") + " required, but only " + t.length + " present");
+function F(t, e) {
+  if (e.length < t)
+    throw new TypeError(t + " argument" + (t > 1 ? "s" : "") + " required, but only " + e.length + " present");
 }
-function z(e) {
-  T(1, arguments);
-  var t = Object.prototype.toString.call(e);
-  return e instanceof Date || I(e) === "object" && t === "[object Date]" ? new Date(e.getTime()) : typeof e == "number" || t === "[object Number]" ? new Date(e) : ((typeof e == "string" || t === "[object String]") && typeof console < "u" && (console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"), console.warn(new Error().stack)), /* @__PURE__ */ new Date(NaN));
+function q(t) {
+  F(1, arguments);
+  var e = Object.prototype.toString.call(t);
+  return t instanceof Date || T(t) === "object" && e === "[object Date]" ? new Date(t.getTime()) : typeof t == "number" || e === "[object Number]" ? new Date(t) : ((typeof t == "string" || e === "[object String]") && typeof console < "u" && (console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"), console.warn(new Error().stack)), /* @__PURE__ */ new Date(NaN));
 }
-function s(e, t) {
-  for (var i = e < 0 ? "-" : "", a = Math.abs(e).toString(); a.length < t; )
+function l(t, e) {
+  for (var i = t < 0 ? "-" : "", a = Math.abs(t).toString(); a.length < e; )
     a = "0" + a;
   return i + a;
 }
-function G(e, t) {
+function A(t, e) {
   var i, a;
-  T(1, arguments);
-  var o = z(e);
+  F(1, arguments);
+  var o = q(t);
   if (isNaN(o.getTime()))
     throw new RangeError("Invalid time value");
-  var c = String((i = t == null ? void 0 : t.format) !== null && i !== void 0 ? i : "extended"), l = String((a = t == null ? void 0 : t.representation) !== null && a !== void 0 ? a : "complete");
-  if (c !== "extended" && c !== "basic")
+  var d = String((i = e == null ? void 0 : e.format) !== null && i !== void 0 ? i : "extended"), c = String((a = e == null ? void 0 : e.representation) !== null && a !== void 0 ? a : "complete");
+  if (d !== "extended" && d !== "basic")
     throw new RangeError("format must be 'extended' or 'basic'");
-  if (l !== "date" && l !== "time" && l !== "complete")
+  if (c !== "date" && c !== "time" && c !== "complete")
     throw new RangeError("representation must be 'date', 'time', or 'complete'");
-  var u = "", d = "", r = c === "extended" ? "-" : "", h = c === "extended" ? ":" : "";
-  if (l !== "time") {
-    var y = s(o.getDate(), 2), x = s(o.getMonth() + 1, 2), w = s(o.getFullYear(), 4);
-    u = "".concat(w).concat(r).concat(x).concat(r).concat(y);
+  var s = "", f = "", g = d === "extended" ? "-" : "", w = d === "extended" ? ":" : "";
+  if (c !== "time") {
+    var r = l(o.getDate(), 2), v = l(o.getMonth() + 1, 2), D = l(o.getFullYear(), 4);
+    s = "".concat(D).concat(g).concat(v).concat(g).concat(r);
   }
-  if (l !== "date") {
-    var m = o.getTimezoneOffset();
-    if (m !== 0) {
-      var v = Math.abs(m), g = s(Math.floor(v / 60), 2), n = s(v % 60, 2), D = m < 0 ? "+" : "-";
-      d = "".concat(D).concat(g, ":").concat(n);
+  if (c !== "date") {
+    var p = o.getTimezoneOffset();
+    if (p !== 0) {
+      var h = Math.abs(p), S = l(Math.floor(h / 60), 2), b = l(h % 60, 2), N = p < 0 ? "+" : "-";
+      f = "".concat(N).concat(S, ":").concat(b);
     } else
-      d = "Z";
-    var S = s(o.getHours(), 2), N = s(o.getMinutes(), 2), j = s(o.getSeconds(), 2), k = u === "" ? "" : "T", C = [S, N, j].join(h);
-    u = "".concat(u).concat(k).concat(C).concat(d);
+      f = "Z";
+    var y = l(o.getHours(), 2), n = l(o.getMinutes(), 2), k = l(o.getSeconds(), 2), j = s === "" ? "" : "T", C = [y, n, k].join(w);
+    s = "".concat(s).concat(j).concat(C).concat(f);
   }
-  return u;
+  return s;
 }
-let V = 0;
-const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
-  id: e = `field-date-${++V}`,
-  name: t = e,
-  label: i,
-  description: a,
-  openDatepicker: o,
-  validationStatus: c = "default",
-  icon: l = "CalendarDefault",
-  iconType: u,
-  errorMessage: d,
-  disabled: r = !1,
-  dataTestId: h = "DateField",
-  value: y,
-  min: x,
-  max: w,
-  onChange: m,
-  ...v
-}) => {
-  const g = R(null), n = _({
+const M = (t) => t ? A(t, { representation: "date" }) : "", W = (t) => {
+  const e = _(), {
+    id: i = e,
+    name: a = i,
+    label: o,
+    description: d,
+    openDatepicker: c,
+    validationStatus: s = "default",
+    icon: f = "CalendarDefault",
+    iconType: g,
+    errorMessage: w,
+    disabled: r = !1,
+    required: v = !1,
+    dataTestId: D = "DateField",
+    value: p,
+    min: h,
+    max: S,
+    onChange: b,
+    ...N
+  } = t, y = z(null), n = Z({
     isDisabled: r,
-    validationStatus: c
-  }), { setValue: D, value: S } = P({
-    name: t,
-    formatter: F,
-    initialValue: y,
-    onChange: (f, O) => m == null ? void 0 : m(f, new Date(O))
-  }), N = F(x), j = F(w), k = (f) => {
-    D(f.target.value);
-  }, C = () => {
-    var f;
-    (f = g.current) == null || f.showPicker();
+    validationStatus: s
+  }), { setValue: k, value: j } = G({
+    name: a,
+    formatter: M,
+    initialValue: p,
+    onChange: (u, V) => b == null ? void 0 : b(u, new Date(V))
+  }), C = M(h), O = M(S), R = (u) => {
+    k(u.target.value);
+  }, P = () => {
+    var u;
+    (u = y.current) == null || u.showPicker();
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     $,
     {
-      id: e,
-      label: i,
-      description: a,
+      id: i,
+      label: o,
+      description: d,
       dataName: "DateField",
-      dataTestId: h,
+      dataTestId: D,
       disabled: r,
-      validationStatus: c,
-      errorMessage: d,
-      children: /* @__PURE__ */ b("div", { className: "relative", children: [
-        /* @__PURE__ */ p(
+      required: v,
+      validationStatus: s,
+      errorMessage: w,
+      children: /* @__PURE__ */ x("div", { className: "relative", children: [
+        /* @__PURE__ */ m(
           "input",
           {
-            ...v,
+            ...N,
             type: "date",
-            className: M(
+            className: E(
               "text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": n === "default",
@@ -117,19 +118,20 @@ const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
                 "border-green": !r && n === "success"
               }
             ),
-            id: e,
+            id: i,
             disabled: r,
-            ref: g,
-            value: S,
-            min: N,
-            max: j,
-            onChange: k
+            required: v,
+            ref: y,
+            value: j,
+            min: C,
+            max: O,
+            onChange: R
           }
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ x(
           "div",
           {
-            className: M(
+            className: E(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": r,
@@ -138,13 +140,13 @@ const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
               }
             ),
             children: [
-              /* @__PURE__ */ b("button", { className: "pointer-events-auto leading-none", onClick: C, children: [
-                /* @__PURE__ */ p(E, { name: l, iconType: u, width: "24px" }),
-                /* @__PURE__ */ p("span", { className: "sr-only", children: o })
+              /* @__PURE__ */ x("button", { className: "pointer-events-auto leading-none", onClick: P, children: [
+                /* @__PURE__ */ m(I, { name: f, iconType: g, width: "24px" }),
+                /* @__PURE__ */ m("span", { className: "sr-only", children: c })
               ] }),
-              /* @__PURE__ */ b("span", { className: "ms-auto flex gap-x-8", children: [
-                n === "error" && /* @__PURE__ */ p(E, { name: "CrossDefault", width: "24px" }),
-                n === "success" && /* @__PURE__ */ p(E, { name: "CheckDefault", width: "24px" })
+              /* @__PURE__ */ x("span", { className: "ms-auto flex gap-x-8", children: [
+                n === "error" && /* @__PURE__ */ m(I, { name: "CrossDefault", width: "24px" }),
+                n === "success" && /* @__PURE__ */ m(I, { name: "CheckDefault", width: "24px" })
               ] })
             ]
           }
@@ -154,5 +156,5 @@ const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
   );
 };
 export {
-  K as DateField
+  W as DateField
 };

package/molecules/Forms/Filter.d.ts

@@ -12,4 +12,4 @@ export interface FilterProps<Value = string> extends Omit<InputHTMLAttributes<HT
     hasDropdown?: boolean;
     onChange?: (name: string, value: Value | null) => void;
 }
-export declare function Filter<Value = string>({ id, name, className, dataTestId, disabled, checked: initialChecked, value, tabIndex, onChange, hasDropdown, children, ...rest }: FilterProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Filter<Value = string>(props: FilterProps<Value>): import("react/jsx-runtime").JSX.Element;