@clubmed/trident-ui 1.0.0-beta.1 → 1.0.0-beta.11

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

package/molecules/Forms/Password/ValidationMessage.js

@@ -20,7 +20,7 @@ function x({ label: r, status: c }) {
   const { iconName: i, iconColor: o } = a[c];
   return /* @__PURE__ */ n("div", { className: "flex gap-[6px] px-20 items-center", children: [
     /* @__PURE__ */ e(t, { name: i, width: "30px", color: o }),
-    /* @__PURE__ */ e("span", { className: s("text-b4", `text-${o}`), children: r })
+    /* @__PURE__ */ e("span", { className: s("text-b3", `text-${o}`), children: r })
   ] });
 }
 export {

package/molecules/Forms/Radios/Radio.d.ts

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

package/molecules/Forms/Radios/Radio.js

@@ -1,57 +1,57 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { c as y } from "../../../index-Cu0xwYjD.js";
+import { c as b } from "../../../index-Cu0xwYjD.js";
+import { useId as k } from "react";
 import { useValue as w } from "../../../hooks/useValue.js";
 import "../../../controls-l0sNRNKZ.js";
-let k = 0;
-function R({
-  id: o = "radio-" + k++,
-  name: r = o,
-  className: d,
-  dataTestId: m,
-  disabled: t,
-  checked: f = !1,
-  value: i,
-  size: a = 24,
-  tabIndex: n = 0,
-  children: p,
-  onChange: l,
-  ...h
-}) {
-  const { value: s, setValue: u } = w({
-    name: r,
+function R(d) {
+  const n = k(), {
+    id: o = n,
+    name: l = o,
+    className: m,
+    dataTestId: h,
+    disabled: a,
+    checked: f = !1,
+    value: i,
+    size: t = 24,
+    tabIndex: p = 0,
+    children: u,
+    onChange: s,
+    ...v
+  } = d, { value: r, setValue: x } = w({
+    name: l,
     initialValue: f,
-    onChange(x, v) {
-      l == null || l(x, i !== void 0 ? i : v);
+    onChange(g, y) {
+      s == null || s(g, i !== void 0 ? i : y);
     }
   });
   return /* @__PURE__ */ c(
     "label",
     {
-      className: y(d, "relative flex items-center gap-8", {
-        "text-grey": t
+      className: b(m, "relative flex items-center gap-8", {
+        "text-grey": a
       }),
       children: [
         /* @__PURE__ */ c("span", { className: "relative", children: [
           /* @__PURE__ */ e(
             "input",
             {
-              ...h,
-              name: r,
-              "data-testid": m,
+              ...v,
+              name: l,
+              "data-testid": h,
               type: "radio",
-              tabIndex: n,
+              tabIndex: p,
               onChange: () => {
-                !t && u(!s);
+                !a && x(!r);
               },
-              defaultChecked: s,
+              defaultChecked: r,
               "data-name": "Radio",
-              disabled: t,
+              disabled: a,
               value: i
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: a, width: a }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: a * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
+          /* @__PURE__ */ e("span", { style: { height: t, width: t }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: t * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
         ] }),
-        p
+        u
       ]
     }
   );

package/molecules/Forms/Radios/RadioGroup.d.ts

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

package/molecules/Forms/Radios/RadioGroup.js

@@ -1,39 +1,38 @@
-import { jsx as g } from "react/jsx-runtime";
-import { Children as v, isValidElement as x, cloneElement as V } from "react";
-import { useValue as C } from "../../../hooks/useValue.js";
+import { jsx as v } from "react/jsx-runtime";
+import { useId as x, Children as I, isValidElement as b, cloneElement as C } from "react";
+import { useValue as h } from "../../../hooks/useValue.js";
 import { c as E } from "../../../index-Cu0xwYjD.js";
-let N = 0;
-function I({
-  id: o = "radio-group-" + N++,
-  name: r = o,
-  children: s,
-  value: u,
-  defaultValue: l,
-  onChange: m,
-  disabled: t,
-  readOnly: n,
-  tabIndex: i = 0,
-  ...a
-}) {
-  const { value: c, setValue: f } = C({
+function G(l) {
+  const s = x(), {
+    id: a = s,
+    name: r = a,
+    children: t,
+    value: i,
+    defaultValue: m,
+    onChange: u,
+    disabled: d,
+    readOnly: p,
+    tabIndex: c = 0,
+    ...n
+  } = l, { value: f, setValue: V } = h({
     name: r,
-    initialValue: u,
-    defaultValue: l,
-    onChange: m
+    initialValue: i,
+    defaultValue: m,
+    onChange: u
   });
-  return /* @__PURE__ */ g("div", { ...a, className: E("flex gap-12", a.className), role: "radiogroup", children: v.map(s, (e, p) => x(e) ? V(e, {
+  return /* @__PURE__ */ v("div", { ...n, className: E("flex gap-12", n.className), role: "radiogroup", children: I.map(t, (e, o) => b(e) ? C(e, {
     ...e.props,
     name: r,
-    id: `${o}-${p}`,
-    disabled: t,
-    readOnly: n,
-    tabIndex: i + p + 1,
-    checked: c === e.props.value,
-    onChange($, d) {
-      f(d);
+    id: `${a}-${o}`,
+    disabled: d,
+    readOnly: p,
+    tabIndex: c + o + 1,
+    checked: f === e.props.value,
+    onChange(N, g) {
+      V(g);
     }
   }) : e) });
 }
 export {
-  I as RadioGroup
+  G as RadioGroup
 };

package/molecules/Forms/Range.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 import './range.css';
 interface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     /**
@@ -37,5 +37,5 @@ interface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChan
         label: string;
     }[];
 }
-export declare const Range: FunctionComponent<RangeProps>;
+export declare const Range: (props: RangeProps) => import("react/jsx-runtime").JSX.Element;
 export {};