@clubmed/trident-ui 1.0.0-beta.3 → 1.0.0-beta.5

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,111 @@
-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 y } from "react/jsx-runtime";
+import { c as E } from "../../index-Cu0xwYjD.js";
+import { useId as V, useRef as _ } 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 { FormControl as $ } from "./FormControl.js";
-function I(e) {
+import { useValue as z } from "../../hooks/useValue.js";
+import { useInternalStatus as G } from "../../hooks/useInternalStatus.js";
+import { FormControl as Z } from "./FormControl.js";
+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 $(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 = $(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" ? "-" : "", x = d === "extended" ? ":" : "";
+  if (c !== "time") {
+    var r = l(o.getDate(), 2), w = l(o.getMonth() + 1, 2), D = l(o.getFullYear(), 4);
+    s = "".concat(D).concat(g).concat(w).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 v = Math.abs(p), b = l(Math.floor(v / 60), 2), S = l(v % 60, 2), h = p < 0 ? "+" : "-";
+      f = "".concat(h).concat(b, ":").concat(S);
     } 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 n = l(o.getHours(), 2), N = l(o.getMinutes(), 2), k = l(o.getSeconds(), 2), j = s === "" ? "" : "T", C = [n, N, k].join(x);
+    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" }) : "", U = (t) => {
+  const e = V(), {
+    id: i = e,
+    name: a = i,
+    label: o,
+    description: d,
+    openDatepicker: c,
+    validationStatus: s = "default",
+    icon: f = "CalendarDefault",
+    iconType: g,
+    errorMessage: x,
+    disabled: r = !1,
+    dataTestId: w = "DateField",
+    value: D,
+    min: p,
+    max: v,
+    onChange: b,
+    ...S
+  } = t, h = _(null), n = G({
     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: N, value: k } = z({
+    name: a,
+    formatter: M,
+    initialValue: D,
+    onChange: (u, P) => b == null ? void 0 : b(u, new Date(P))
+  }), j = M(p), C = M(v), O = (u) => {
+    N(u.target.value);
+  }, R = () => {
+    var u;
+    (u = h.current) == null || u.showPicker();
   };
-  return /* @__PURE__ */ p(
-    $,
+  return /* @__PURE__ */ m(
+    Z,
     {
-      id: e,
-      label: i,
-      description: a,
+      id: i,
+      label: o,
+      description: d,
       dataName: "DateField",
-      dataTestId: h,
+      dataTestId: w,
       disabled: r,
-      validationStatus: c,
-      errorMessage: d,
-      children: /* @__PURE__ */ b("div", { className: "relative", children: [
-        /* @__PURE__ */ p(
+      validationStatus: s,
+      errorMessage: x,
+      children: /* @__PURE__ */ y("div", { className: "relative", children: [
+        /* @__PURE__ */ m(
           "input",
           {
-            ...v,
+            ...S,
             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 +116,19 @@ 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
+            ref: h,
+            value: k,
+            min: j,
+            max: C,
+            onChange: O
           }
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ y(
           "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 +137,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__ */ y("button", { className: "pointer-events-auto leading-none", onClick: R, 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__ */ y("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 +153,5 @@ const F = (e) => e ? G(e, { representation: "date" }) : "", K = ({
   );
 };
 export {
-  K as DateField
+  U 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/NumberField.d.ts

@@ -1,10 +1,10 @@
-import { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent } from 'react';
 import { FormControlProps } from './FormControl.js';
 interface NumberFieldProps extends FormControlProps<number> {
     min?: number;
     max?: number;
 }
-export declare function useNumberField({ id, name, value: initialValue, onChange, min, max, disabled, dataTestId, ...props }: NumberFieldProps): {
+export declare function useNumberField(props: NumberFieldProps): {
     id: string;
     min: number;
     max: number;
@@ -314,5 +314,5 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     layout?: "horizontal" | "vertical" | undefined;
     description?: string | undefined;
 };
-export declare const NumberField: FunctionComponent<NumberFieldProps>;
+export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};