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

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

package/molecules/Forms/NumberField.js

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

package/molecules/Forms/Password/Password.js

@@ -1,57 +1,56 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { c as u } from "../../../index-Cu0xwYjD.js";
-import { useState as j, useEffect as I } from "react";
-import { useValue as M } from "../../../hooks/useValue.js";
-import { FormControl as P } from "../FormControl.js";
+import { c as m } from "../../../index-Cu0xwYjD.js";
+import { useId as j, useState as M, useEffect as P } from "react";
+import { useValue as S } from "../../../hooks/useValue.js";
+import { FormControl as T } from "../FormControl.js";
 import { Icon as n } from "../../../atoms/Icons/Icon.js";
 import "../../../atoms/Icons/contexts/IconsContext.js";
-import { ValidationMessage as S } from "./ValidationMessage.js";
-let T = 0;
-function B(m) {
-  const {
-    id: r = `password-${++T}`,
+import { ValidationMessage as D } from "./ValidationMessage.js";
+function J(u) {
+  const f = j(), {
+    id: r = f,
     name: o = r,
-    label: f,
-    value: b,
+    label: b,
+    value: x,
     disabled: d = !1,
     validationStatus: e = "default",
-    errorMessage: x,
-    validationMessages: p = [],
+    errorMessage: g,
+    validationMessages: c = [],
     withoutFieldValidation: s = !1,
-    className: g,
-    onChange: h,
-    dataTestId: v = "Password",
-    ...w
-  } = m, { value: y, setValue: N } = M({
+    className: h,
+    onChange: v,
+    dataTestId: w = "Password",
+    ...y
+  } = u, { value: N, setValue: C } = S({
     name: o,
-    initialValue: b,
-    onChange: h
-  }), [t, c] = j("password");
-  I(() => c(t), [t]);
-  const C = () => c(t === "password" ? "text" : "password");
+    initialValue: x,
+    onChange: v
+  }), [t, p] = M("password");
+  P(() => p(t), [t]);
+  const V = () => p(t === "password" ? "text" : "password");
   return /* @__PURE__ */ i(
-    P,
+    T,
     {
       id: r,
-      label: f,
+      label: b,
       dataName: "Password",
-      dataTestId: v,
+      dataTestId: w,
       disabled: d,
       validationStatus: s ? "default" : e,
-      errorMessage: x,
+      errorMessage: g,
       children: [
         /* @__PURE__ */ i("div", { className: "relative", children: [
           /* @__PURE__ */ a(
             "input",
             {
-              ...w,
+              ...y,
               id: r,
               name: o,
               type: t,
-              value: y,
+              value: N,
               disabled: d,
-              onChange: (l) => N(l.target.value),
-              className: u(
+              onChange: (l) => C(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",
@@ -59,7 +58,7 @@ function B(m) {
                   "border-red": !s && e === "error",
                   "border-green": !s && e === "success"
                 },
-                g
+                h
               ),
               "aria-label": o
             }
@@ -67,7 +66,7 @@ function B(m) {
           /* @__PURE__ */ a(
             "div",
             {
-              className: u(
+              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: [
@@ -78,7 +77,7 @@ function B(m) {
                   {
                     type: "button",
                     className: "pointer-events-auto size-24 inline-flex",
-                    onClick: C,
+                    onClick: V,
                     children: /* @__PURE__ */ a(n, { name: t === "password" ? "Invisible" : "Visible", width: "24px", type: "svg" })
                   }
                 )
@@ -86,11 +85,11 @@ function B(m) {
             }
           )
         ] }),
-        p.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: p.map(({ label: l, status: V }, k) => /* @__PURE__ */ a(S, { label: l, status: V }, k)) })
+        c.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: c.map(({ label: l, status: k }, I) => /* @__PURE__ */ a(D, { label: l, status: k }, I)) })
       ]
     }
   );
 }
 export {
-  B as Password
+  J as Password
 };

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