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

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;

package/molecules/Forms/FormControl.js

@@ -1,37 +1,44 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { useInternalStatus as f } from "../../hooks/useInternalStatus.js";
-import { FormLabel as u } from "./FormLabel.js";
-import { Icon as h } from "../../atoms/Icons/Icon.js";
+import { useInternalStatus as u } from "../../hooks/useInternalStatus.js";
+import { FormLabel as h } from "./FormLabel.js";
+import { Icon as b } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
-import { c as b } from "../../index-Cu0xwYjD.js";
+import { c as S } from "../../index-Cu0xwYjD.js";
 const v = ({
   id: t,
   label: r,
-  description: s,
-  disabled: m,
-  className: n,
-  validationStatus: i = "default",
-  children: l,
+  description: m,
+  disabled: n,
+  required: i,
+  className: l,
+  validationStatus: p = "default",
+  children: c,
   errorMessage: a,
-  dataTestId: p,
-  dataName: c,
-  layout: x
+  dataTestId: d,
+  dataName: x,
+  layout: f
 }) => {
-  const d = f({
-    isDisabled: !!m,
-    validationStatus: i
-  });
+  const s = u({
+    isDisabled: !!n,
+    validationStatus: p
+  }) === "error" && a;
   return /* @__PURE__ */ e(
     "div",
     {
-      className: b("flex flex-col gap-4", n),
-      "data-name": c,
-      "data-testid": p,
+      className: S(
+        "flex flex-col gap-4",
+        {
+          "mb-24": !s
+        },
+        l
+      ),
+      "data-name": x,
+      "data-testid": d,
       children: [
-        r && t && /* @__PURE__ */ o(u, { description: s, id: t, layout: x, children: r }),
-        l,
-        d === "error" && a && /* @__PURE__ */ e("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
-          /* @__PURE__ */ o(h, { name: "Error", width: "20px" }),
+        r && t && /* @__PURE__ */ o(h, { description: m, id: t, layout: f, required: i, children: r }),
+        c,
+        s && /* @__PURE__ */ e("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
+          /* @__PURE__ */ o(b, { name: "Error", width: "20px" }),
           a
         ] })
       ]

package/molecules/Forms/FormLabel.d.ts

@@ -1,20 +1,7 @@
-import { FunctionComponent, LabelHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export interface FormLabelProps extends PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>> {
-    /**
-     * Label text or use Children
-     */
-    label?: string | ReactNode | undefined;
-    /**
-     * Description text
-     */
+import { LabelHTMLAttributes } from 'react';
+export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     description?: string;
-    /**
-     * Layout of the label
-     */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * Additional class names
-     */
-    className?: string;
+    required?: boolean;
 }
-export declare const FormLabel: FunctionComponent<FormLabelProps>;
+export declare const FormLabel: ({ id, description, layout, required, className, children, ...rest }: FormLabelProps) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormLabel.js

@@ -1,29 +1,34 @@
-import { jsxs as n, jsx as m } from "react/jsx-runtime";
-import { c as x } from "../../index-Cu0xwYjD.js";
-const c = {
-  horizontal: "flex flex-wrap items-center gap-x-12 px-20",
-  vertical: "flex flex-col items-start"
-}, f = ({
-  children: t,
-  label: l,
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-Cu0xwYjD.js";
+const b = ({
+  id: l,
   description: e,
-  id: a,
-  layout: o = "horizontal",
-  className: r,
-  ...s
-}) => /* @__PURE__ */ n(
+  layout: t = "horizontal",
+  required: r,
+  className: s,
+  children: m,
+  ...n
+}) => /* @__PURE__ */ o(
   "label",
   {
-    ...s,
-    htmlFor: a,
-    className: x("text-b3 font-semibold text-black", c[o], r),
+    ...n,
+    htmlFor: l,
+    className: c(
+      "text-b3 font-semibold text-black flex",
+      {
+        "flex-wrap items-center ps-20": t === "horizontal",
+        "flex-col items-start": t === "vertical"
+      },
+      s
+    ),
     "data-name": "InputLabel",
     children: [
-      l || t,
-      e && /* @__PURE__ */ m("span", { className: "text-b4 text-middleGrey inline-block font-normal", children: e })
+      m,
+      r && /* @__PURE__ */ a("span", { children: "*" }),
+      e && /* @__PURE__ */ a("span", { className: "ms-12 text-b4 text-grey font-normal", children: e })
     ]
   }
 );
 export {
-  f as FormLabel
+  b as FormLabel
 };

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;
@@ -15,6 +15,7 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     increase: () => void;
     decrease: () => void;
+    label?: import("react").ReactNode;
     validationStatus?: import("../../hooks/useInternalStatus").ValidationStatus | undefined;
     dataName?: string | undefined;
     errorMessage?: string | undefined;
@@ -28,7 +29,6 @@ export declare function useNumberField({ id, name, value: initialValue, onChange
     form?: string | undefined;
     list?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    label?: import("react").ReactNode;
     slot?: string | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
@@ -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 {};

package/molecules/Forms/NumberField.js

@@ -1,114 +1,117 @@
-import { jsx as c, jsxs as g } from "react/jsx-runtime";
-import { c as x } from "../../index-Cu0xwYjD.js";
-import { useValue as v } from "../../hooks/useValue.js";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { c as C } from "../../index-Cu0xwYjD.js";
+import { useId as y } from "react";
+import { useValue as I } from "../../hooks/useValue.js";
 import { Button as N } from "../Buttons/Button.js";
-import { FormControl as y } from "./FormControl.js";
-const C = { width: "28px", height: "28px" };
-let w = 0;
-function F({
-  id: s = `field-number-${++w}`,
-  name: e = s,
-  value: i = 0,
-  onChange: o,
-  min: a = 0,
-  max: l = 10,
-  disabled: u = !1,
-  dataTestId: d = "NumberField",
-  ...r
-}) {
-  const { value: t, setValue: n } = v({
-    name: e,
-    defaultValue: i,
+import { FormControl as w } from "./FormControl.js";
+const F = { width: "28px", height: "28px" };
+function V(m) {
+  const e = y(), {
+    id: n = e,
+    name: r = n,
+    value: c = 0,
+    onChange: d,
+    min: t = 0,
+    max: l = 10,
+    disabled: i = !1,
+    dataTestId: u = "NumberField",
+    ...f
+  } = m, { value: a, setValue: s } = I({
+    name: r,
+    defaultValue: c,
     formatter: Number,
-    onChange: o
+    onChange: d
   });
   return {
-    ...r,
-    id: s,
-    min: a,
+    ...f,
+    id: n,
+    min: t,
     max: l,
-    name: e,
-    value: t,
-    dataTestId: d,
-    disabled: u,
-    handleChange: (m) => {
-      const f = Number(m.target.value);
-      f >= a && f <= l && n(Number(f));
+    name: r,
+    value: a,
+    dataTestId: u,
+    disabled: i,
+    handleChange: (g) => {
+      const h = Number(g.target.value);
+      h >= t && h <= l && s(Number(h));
     },
     increase: () => {
-      t < l && n(t + 1);
+      a < l && s(a + 1);
     },
     decrease: () => {
-      t > a && n(t - 1);
+      a > t && s(a - 1);
     }
   };
 }
-const P = (s) => {
+const k = (m) => {
   const {
     disabled: e,
-    min: i,
-    max: o,
-    label: a,
-    description: l,
-    id: u,
-    dataTestId: d,
-    value: r,
-    handleChange: t,
-    increase: n,
-    decrease: b,
-    errorMessage: h,
+    min: n,
+    max: r,
+    label: c,
+    description: d,
+    id: t,
+    dataTestId: l,
+    value: i,
+    handleChange: u,
+    increase: f,
+    decrease: a,
+    errorMessage: s,
     validationStatus: p,
-    ...m
-  } = F(s);
-  return /* @__PURE__ */ c(
-    y,
+    required: b,
+    ...x
+  } = V(m);
+  return /* @__PURE__ */ o(
+    w,
     {
-      id: u,
-      label: a,
-      description: l,
+      id: t,
+      label: c,
+      description: d,
       className: "flex items-center justify-between",
       dataName: "NumberField",
-      dataTestId: d,
-      errorMessage: h,
+      dataTestId: l,
+      errorMessage: s,
       validationStatus: p,
       disabled: e,
+      required: b,
       layout: "vertical",
-      children: /* @__PURE__ */ g("div", { className: "flex items-center gap-x-8", children: [
-        /* @__PURE__ */ c(
+      children: /* @__PURE__ */ v("div", { className: "flex items-center gap-x-8", children: [
+        /* @__PURE__ */ o(
           N,
           {
             theme: "yellow",
-            onClick: b,
+            onClick: a,
             variant: "icon",
-            disabled: r <= i || e,
+            disabled: i <= n || e,
             icon: "MinusDefault",
             label: "MINUS"
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ o(
           "input",
           {
-            ...m,
-            className: x("text-b2 text-center font-normal outline-none", {
+            ...x,
+            className: C("text-b2 text-center font-normal outline-none", {
               "bg-pearl text-grey": e
             }),
-            style: C,
+            style: F,
             type: "number",
-            id: u,
-            onChange: t,
+            id: t,
+            onChange: u,
             disabled: e,
-            value: r,
-            min: i,
-            max: o
+            required: b,
+            value: i,
+            min: n,
+            max: r
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ o(
           N,
           {
             theme: "yellow",
-            onClick: n,
+            onClick: f,
             variant: "icon",
-            disabled: r >= o || e,
+            disabled: i >= r || e,
             icon: "PlusDefault",
             label: "PLUS"
           }
@@ -118,6 +121,6 @@ const P = (s) => {
   );
 };
 export {
-  P as NumberField,
-  F as useNumberField
+  k as NumberField,
+  V as useNumberField
 };

package/molecules/Forms/Password/Password.d.ts

@@ -2,5 +2,6 @@ import { FormControlProps } from '../FormControl';
 import { ValidationMessage } from './ValidationMessage';
 export interface PasswordProps<Value> extends FormControlProps<Value> {
     validationMessages?: ValidationMessage[];
+    withoutFieldValidation?: boolean;
 }
 export declare function Password<Value = string>(props: PasswordProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Password/Password.js

@@ -1,73 +1,98 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { c as y } from "../../../index-Cu0xwYjD.js";
-import { useState as N, useEffect as C } from "react";
-import { useValue as k } from "../../../hooks/useValue.js";
-import { FormControl as V } from "../FormControl.js";
-import { Icon as E } from "../../../atoms/Icons/Icon.js";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../../index-Cu0xwYjD.js";
+import { useId as M, useState as P, useEffect as S } from "react";
+import { useValue as T } from "../../../hooks/useValue.js";
+import { FormControl as D } from "../FormControl.js";
+import { Icon as n } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
-import { ValidationMessage as P } from "./ValidationMessage.js";
-let T = 0;
-function $(p) {
-  const {
-    id: t = `password-${++T}`,
-    name: s = t,
-    label: d,
-    value: m,
-    disabled: l = !1,
-    validationMessages: r = [],
-    className: c,
-    onChange: u,
-    dataTestId: b = "Password",
-    ...f
-  } = p, { value: g, setValue: x } = k({
-    name: s,
-    initialValue: m,
-    onChange: u
-  }), [e, i] = N("password");
-  C(() => i(e), [e]);
-  const h = () => i(e === "password" ? "text" : "password");
-  return /* @__PURE__ */ n(
-    V,
+import { ValidationMessage as F } from "./ValidationMessage.js";
+function K(f) {
+  const b = M(), {
+    id: r = b,
+    name: o = r,
+    label: x,
+    value: g,
+    disabled: d = !1,
+    required: c = !1,
+    validationStatus: e = "default",
+    errorMessage: h,
+    validationMessages: p = [],
+    withoutFieldValidation: s = !1,
+    className: v,
+    onChange: w,
+    dataTestId: y = "Password",
+    ...N
+  } = f, { value: C, setValue: V } = T({
+    name: o,
+    initialValue: g,
+    onChange: w
+  }), [t, u] = P("password");
+  S(() => u(t), [t]);
+  const k = () => u(t === "password" ? "text" : "password");
+  return /* @__PURE__ */ i(
+    D,
     {
-      id: t,
-      label: d,
+      id: r,
+      label: x,
       dataName: "Password",
-      dataTestId: b,
-      disabled: l,
+      dataTestId: y,
+      disabled: d,
+      required: c,
+      validationStatus: s ? "default" : e,
+      errorMessage: h,
       children: [
-        /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ i("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
-              ...f,
-              id: t,
-              name: s,
-              type: e,
-              value: g,
-              disabled: l,
-              onChange: (o) => x(o.target.value),
-              className: y(
-                "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black pe-[52px] border-lightGrey focus:border-black active:border-black",
-                c
+              ...N,
+              id: r,
+              name: o,
+              type: t,
+              value: C,
+              disabled: d,
+              required: c,
+              onChange: (l) => V(l.target.value),
+              className: m(
+                "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none bg-white text-black",
+                {
+                  "border-lightGrey focus:border-black active:border-black pe-[52px]": s || e === "default",
+                  "pe-[84px]": !s && (e === "error" || e === "success"),
+                  "border-red": !s && e === "error",
+                  "border-green": !s && e === "success"
+                },
+                v
               ),
-              "aria-label": s
+              "aria-label": o
             }
           ),
           /* @__PURE__ */ a(
-            "button",
+            "div",
             {
-              type: "button",
-              className: "pointer-events-auto ms-auto absolute right-20 top-12 size-24",
-              onClick: h,
-              children: /* @__PURE__ */ a(E, { name: e === "password" ? "EyeClosed" : "EyeOpened", width: "24px", type: "svg" })
+              className: m(
+                "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"
+              ),
+              children: /* @__PURE__ */ i("span", { className: "ms-auto flex gap-x-8", children: [
+                !s && e === "error" && /* @__PURE__ */ a(n, { name: "CrossDefault", color: "red", width: "24px" }),
+                !s && e === "success" && /* @__PURE__ */ a(n, { name: "CheckDefault", color: "green", width: "24px" }),
+                /* @__PURE__ */ a(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pointer-events-auto size-24 inline-flex",
+                    onClick: k,
+                    children: /* @__PURE__ */ a(n, { name: t === "password" ? "Invisible" : "Visible", width: "24px", type: "svg" })
+                  }
+                )
+              ] })
             }
           )
         ] }),
-        !!r.length && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: r.map(({ label: o, status: w }, v) => /* @__PURE__ */ a(P, { label: o, status: w }, v)) })
+        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: I }, j) => /* @__PURE__ */ a(F, { label: l, status: I }, j)) })
       ]
     }
   );
 }
 export {
-  $ as Password
+  K as Password
 };