@clubmed/trident-ui 1.0.0-alpha.51 → 1.0.0-beta.10

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,72 +1,72 @@
-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 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 "../../../atoms/Icons/contexts/IconsContext.js";
-import { useValue as v } from "../../../hooks/useValue.js";
+import { useValue as y } 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({
+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(k, s) {
-      r == null || r(k, s ? t !== void 0 ? t : s : null);
+    onChange(v, r) {
+      s == null || s(v, r ? a !== void 0 ? a : r : null);
     }
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "label",
     {
-      className: b(p, "cursor-pointer relative flex items-center gap-8", {
+      className: g(p, "cursor-pointer relative flex gap-8", {
         "text-grey": e
       }),
       children: [
-        /* @__PURE__ */ i("span", { className: "relative", children: [
-          /* @__PURE__ */ a(
+        /* @__PURE__ */ n("span", { className: "relative", children: [
+          /* @__PURE__ */ i(
             "input",
             {
-              ...f,
+              ...b,
               name: l,
-              "data-testid": n,
+              "data-testid": h,
               type: "checkbox",
-              tabIndex: h,
+              tabIndex: x,
               onChange: () => {
-                !e && d(!o);
+                !e && k(!o);
               },
               checked: o,
               "data-name": "Checkbox",
               disabled: e,
-              value: t
+              value: a
             }
           ),
-          /* @__PURE__ */ a("span", { style: { height: c, width: c }, children: /* @__PURE__ */ a(
-            y,
+          /* @__PURE__ */ i("span", { style: { height: t, width: t }, children: /* @__PURE__ */ i(
+            I,
             {
               name: "CheckDefault",
               type: "svg",
-              width: `${c}px`,
+              width: `${t}px`,
               color: "black",
               className: "absolute"
             }
           ) })
         ] }),
-        x
+        f
       ]
     }
   );
 }
 export {
-  I as Checkbox
+  $ 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 v, Children as N, 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({
+function q(m) {
+  const i = v(), {
+    id: r = i,
+    name: t = r,
+    children: u,
+    value: c,
+    defaultValue: p,
+    onChange: d,
+    disabled: f,
+    readOnly: b,
+    tabIndex: V = 0,
+    ...s
+  } = m, { value: a, setValue: o } = k({
     name: t,
-    initialValue: u,
+    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: N.map(u, (e, l) => {
+    if (g(e)) {
+      const n = e.props.value;
+      return h(e, {
         ...e.props,
         name: t,
-        id: `${s}-${n}`,
-        disabled: i,
-        readOnly: f,
-        tabIndex: b + n + 1,
+        id: `${r}-${l}`,
+        disabled: f,
+        readOnly: b,
+        tabIndex: V + l + 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));
+        checked: a.includes(n),
+        onChange($, x) {
+          o(x === null ? a.filter((C) => C !== n) : a.concat(n));
         }
       });
     }

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;

package/molecules/Forms/Filter.js

@@ -1,56 +1,56 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { c } from "../../index-Cu0xwYjD.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { c as r } from "../../index-Cu0xwYjD.js";
+import { useId as D } from "react";
 import "../../controls-l0sNRNKZ.js";
-import { Icon as m } from "../../atoms/Icons/Icon.js";
+import { Icon as c } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { useValue as D } from "../../hooks/useValue.js";
-let N = 0;
-function I({
-  id: n = "filter-" + N++,
-  name: a = n,
-  className: p,
-  dataTestId: u,
-  disabled: r,
-  checked: f = !1,
-  value: e,
-  tabIndex: d = 0,
-  onChange: l,
-  hasDropdown: x,
-  children: b,
-  ...h
-}) {
-  const { value: i, setValue: k } = D({
-    name: a,
+import { useValue as N } from "../../hooks/useValue.js";
+function T(m) {
+  const d = D(), {
+    id: p = d,
+    name: l = p,
+    className: u,
+    dataTestId: h,
+    disabled: o,
+    checked: f = !1,
+    value: a,
+    tabIndex: b = 0,
+    onChange: t,
+    hasDropdown: x,
+    children: k,
+    ...w
+  } = m, { value: n, setValue: I } = N({
+    name: l,
     initialValue: f,
-    onChange(w, o) {
-      l == null || l(w, o ? e !== void 0 ? e : o : null);
+    onChange(v, s) {
+      t == null || t(v, s ? a !== void 0 ? a : s : null);
     }
   });
-  return /* @__PURE__ */ s("label", { className: c(p, "relative"), children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ i("label", { className: r(u, "relative"), children: [
+    /* @__PURE__ */ e(
       "input",
       {
-        ...h,
-        name: a,
-        "data-testid": u,
+        ...w,
+        name: l,
+        "data-testid": h,
         type: "checkbox",
-        tabIndex: d,
+        tabIndex: b,
         onChange: () => {
-          !r && k(!i);
+          !o && I(!n);
         },
-        checked: i,
+        checked: n,
         "data-name": "Filter",
-        disabled: r,
-        value: e
+        disabled: o,
+        value: a
       }
     ),
-    /* @__PURE__ */ s("span", { children: [
-      /* @__PURE__ */ t("span", { className: c("text-b3 font-semibold"), children: b }),
-      /* @__PURE__ */ t(m, { width: null, name: "CheckDefault", color: "black" }),
-      x && /* @__PURE__ */ t(m, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+    /* @__PURE__ */ i("span", { children: [
+      /* @__PURE__ */ e("span", { className: r("text-b3 font-semibold"), children: k }),
+      /* @__PURE__ */ e(c, { width: null, name: "CheckDefault", color: "black" }),
+      x && /* @__PURE__ */ e(c, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
     ] })
   ] });
 }
 export {
-  I as Filter
+  T as Filter
 };

package/molecules/Forms/FormControl.d.ts

@@ -1,12 +1,13 @@
-import { HTMLAttributes, InputHTMLAttributes, PropsWithChildren } from 'react';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { ValidationStatus } from '../../hooks/useInternalStatus';
 import { FormLabelProps } from './FormLabel';
 export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>> = {
     value?: Value;
+    label?: ReactNode;
     validationStatus?: ValidationStatus;
     onChange?: (name: string, value: Value) => void;
     dataTestId?: string;
     dataName?: string;
     errorMessage?: string;
 } & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;
-export declare const FormControl: <Value = string>({ id, label, description, disabled, className, validationStatus, children, errorMessage, dataTestId, dataName, layout, }: PropsWithChildren<FormControlProps<Value, InputHTMLAttributes<HTMLInputElement>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, layout, }: FormControlProps<Value, InputHTMLAttributes<HTMLInputElement>>) => import("react/jsx-runtime").JSX.Element;