@ubloimmo/uikit 0.7.0 → 0.8.0

package/dist/components/Input/NumberInput/NumberInput.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -7,17 +7,12 @@
 
 
 import { j as n } from "../../../node_modules/react/jsx-runtime.js";
-import { isNumber as d, isString as I } from "@ubloimmo/front-util";
-import { useRef as j, useCallback as a, useMemo as S } from "react";
-import { StyledNumberInput as y } from "./NumberInput.styles.js";
-import "../Input.component.js";
-import { useInputValue as P, useInputOnChange as N, useInputStyles as V } from "../Input.utils.js";
-import "../EmailInput/EmailInput.component.js";
-import "../PasswordInput/PasswordInput.component.js";
-import "../PhoneInput/PhoneInput.component.js";
-import "../TextInput/TextInput.component.js";
-import { StyledInputContainer as v, StyledInputControlGroup as M, StyledInputGroupedControl as f, defaultCommonInputProps as k } from "../Input.common.js";
-import { useMergedProps as R } from "../../../utils/props.utils.js";
+import { isNumber as d, isString as j } from "@ubloimmo/front-util";
+import { useRef as S, useCallback as l, useMemo as y } from "react";
+import { StyledNumberInput as P } from "./NumberInput.styles.js";
+import { StyledInputContainer as N, StyledInputControlGroup as V, StyledInputGroupedControl as f, defaultCommonInputProps as v } from "../Input.common.js";
+import { useInputValue as M, useInputOnChange as k, useInputStyles as R } from "../Input.utils.js";
+import { useMergedProps as q, useTestId as z } from "../../../utils/props.utils.js";
 import "../../Action/Action.component.js";
 import "../../ActionIcon/ActionIcon.component.js";
 import "../../Badge/Badge.component.js";
@@ -26,6 +21,10 @@ import "../../Dialog/Dialog.component.js";
 import "../../Dialog/Dialog.context.js";
 import "../../Heading/Heading.component.js";
 import { Icon as h } from "../../Icon/Icon.component.js";
+import "../EmailInput/EmailInput.component.js";
+import "../PasswordInput/PasswordInput.component.js";
+import "../PhoneInput/PhoneInput.component.js";
+import "../TextInput/TextInput.component.js";
 import "../../InputAssistiveText/InputAssistiveText.component.js";
 import "../../InputLabel/InputLabel.component.js";
 import "../../Loading/Loading.component.js";
@@ -35,19 +34,20 @@ import "../../StaticIcon/StaticIcon.component.js";
 import "../../Text/Text.component.js";
 import "../../Hypertext/Hypertext.component.js";
 import "../../Tooltip/Tooltip.component.js";
-const x = {
-  ...k,
+import "../../Field/Field.component.js";
+const b = {
+  ...v,
   value: null,
   onChange: null,
   min: null,
   max: null,
   step: 1
-}, c = (o) => !I(o) || o.length === 0 ? null : parseFloat(o), q = (o) => {
-  const e = R(x, o), r = j(null), i = P(e.value), b = N(
+}, c = (o) => !j(o) || o.length === 0 ? null : parseFloat(o), B = (o) => {
+  const e = q(b, o), r = S(null), i = M(e.value), x = z("input-number", o), C = k(
     (t) => !0,
     c,
     e.onChange
-  ), p = a(
+  ), p = l(
     (t) => {
       if (!r.current)
         return;
@@ -56,29 +56,29 @@ const x = {
       r.current && (r.current.value = m), e.onChange && e.onChange(t);
     },
     [e]
-  ), C = a(() => {
+  ), g = l(() => {
     var u;
     if (!r.current)
       return;
     const m = (c(((u = r.current) == null ? void 0 : u.value) ?? i) ?? 0) + e.step;
     p(m);
-  }, [e, i, p]), g = a(() => {
+  }, [e, i, p]), I = l(() => {
     var u;
     if (!r.current)
       return;
     const m = (c(((u = r.current) == null ? void 0 : u.value) ?? i) ?? 0) - e.step;
     p(m);
-  }, [e, i, p]), s = V(e), l = S(() => ({
+  }, [e, i, p]), s = R(e), a = y(() => ({
     increment: `Incrémenter de ${e.step}`,
     decrement: `Décrémenter de ${e.step} `
   }), [e.step]);
-  return /* @__PURE__ */ n.jsxs(v, { ...s, children: [
+  return /* @__PURE__ */ n.jsxs(N, { ...s, "data-testid": "input-number-container", children: [
     /* @__PURE__ */ n.jsx(
-      y,
+      P,
       {
-        "data-testid": "input-number",
+        "data-testid": x,
         value: i,
-        onChange: b,
+        onChange: C,
         type: "number",
         min: e.min ?? void 0,
         max: e.max ?? void 0,
@@ -90,15 +90,15 @@ const x = {
         ...s
       }
     ),
-    /* @__PURE__ */ n.jsxs(M, { children: [
+    /* @__PURE__ */ n.jsxs(V, { children: [
       /* @__PURE__ */ n.jsx(
         f,
         {
           ...s,
-          onClick: C,
+          onClick: g,
           "data-testid": "input-control-increment",
-          "aria-label": l.increment,
-          title: l.increment,
+          "aria-label": a.increment,
+          title: a.increment,
           role: "button",
           "aria-roledescription": "Bouton d'augmentation, permet d'augmenter la valeur",
           children: /* @__PURE__ */ n.jsx(h, { name: "ChevronUp", size: "s-3" })
@@ -108,10 +108,10 @@ const x = {
         f,
         {
           ...s,
-          onClick: g,
+          onClick: I,
           "data-testid": "input-control-decrement",
-          "aria-label": l.decrement,
-          title: l.decrement,
+          "aria-label": a.decrement,
+          title: a.decrement,
           role: "button",
           "aria-roledescription": "Bouton de diminution, permet de diminuter la valeur",
           children: /* @__PURE__ */ n.jsx(h, { name: "ChevronDown", size: "s-3" })
@@ -120,7 +120,7 @@ const x = {
     ] })
   ] });
 };
-q.defaultProps = x;
+B.defaultProps = b;
 export {
-  q as NumberInput
+  B as NumberInput
 };

package/dist/components/Input/NumberInput/NumberInput.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Input/PasswordInput/PasswordInput.component.d.ts

@@ -1,4 +1,5 @@
 import { PasswordInputProps } from './PasswordInput.types';
+import { TestIdProps } from '../../../types';
 
 /**
  * Renders a password input component that allows for password visibility toggle.
@@ -9,7 +10,7 @@ import { PasswordInputProps } from './PasswordInput.types';
  * @return {JSX.Element} The rendered text input component.
  */
 declare const PasswordInput: {
-    (props: PasswordInputProps): JSX.Element;
+    (props: PasswordInputProps & TestIdProps): JSX.Element;
     defaultProps: Required<PasswordInputProps>;
 };
 export { PasswordInput };

package/dist/components/Input/PasswordInput/PasswordInput.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -7,37 +7,37 @@
 
 
 import { j as o } from "../../../node_modules/react/jsx-runtime.js";
-import { isNull as b, isString as p } from "@ubloimmo/front-util";
-import { useRef as f, useState as h, useEffect as y, useMemo as C } from "react";
-import { Icon as I } from "../../Icon/Icon.component.js";
-import { StyledInputContainer as g, StyledInput as x, StyledInputControlGroup as v, StyledInputGroupedControl as P, defaultCommonInputProps as S } from "../Input.common.js";
-import { useInputControlCallback as w, useInputOnChange as V, useInputValue as j, useInputStyles as T } from "../Input.utils.js";
-import { useMergedProps as E } from "../../../utils/props.utils.js";
-const u = {
+import { isNull as f, isString as u } from "@ubloimmo/front-util";
+import { useRef as h, useState as y, useEffect as C, useMemo as I } from "react";
+import { Icon as g } from "../../Icon/Icon.component.js";
+import { StyledInputContainer as x, StyledInput as v, StyledInputControlGroup as w, StyledInputGroupedControl as P, defaultCommonInputProps as S } from "../Input.common.js";
+import { useInputControlCallback as V, useInputOnChange as j, useInputValue as T, useInputStyles as E } from "../Input.utils.js";
+import { useMergedProps as R, useTestId as k } from "../../../utils/props.utils.js";
+const p = {
   ...S,
   value: null,
   onChange: null,
   onVisibilityChange: null,
   allowChangeVisibility: !0,
   visible: !1
-}, R = (a) => {
-  const l = f(null), e = E(u, a), [s, r] = h(
+}, q = (l) => {
+  const r = h(null), e = R(p, l), [i, a] = y(
     e.visible
   );
-  y(() => {
-    r(e.visible);
+  C(() => {
+    a(e.visible);
   }, [e.visible]);
-  const d = w(
-    l,
+  const d = V(
+    r,
     e,
     () => {
       if (!e.allowChangeVisibility)
         return;
-      const t = !s;
-      r(t), !b(e.onVisibilityChange) && e.onVisibilityChange(t);
+      const t = !i;
+      a(t), !f(e.onVisibilityChange) && e.onVisibilityChange(t);
     }
-  ), i = C(() => {
-    const t = s && !e.disabled;
+  ), s = I(() => {
+    const t = i && !e.disabled;
     return {
       ...t ? {
         inputType: "text",
@@ -48,44 +48,51 @@ const u = {
       },
       controlTitle: `${t ? "Cacher" : "Afficher"} le mot de passe`
     };
-  }, [e, s]), c = V(
-    (t) => p(t),
-    (t) => p(t) && t.length > 0 ? t : null,
+  }, [e, i]), c = j(
+    (t) => u(t),
+    (t) => u(t) && t.length > 0 ? t : null,
     e.onChange
-  ), m = j(e.value), n = T(e);
-  return /* @__PURE__ */ o.jsxs(g, { ...n, children: [
-    /* @__PURE__ */ o.jsx(
-      x,
-      {
-        "data-testid": "input-password",
-        value: m,
-        type: i.inputType,
-        onChange: c,
-        placeholder: e.placeholder,
-        disabled: e.disabled,
-        required: e.required,
-        "aria-roledescription": "Champs de saisie mot de passe",
-        role: "textbox",
-        ref: l,
-        ...n
-      }
-    ),
-    /* @__PURE__ */ o.jsx(v, { children: /* @__PURE__ */ o.jsx(
-      P,
-      {
-        ...n,
-        "data-testid": "input-control",
-        onClick: d,
-        title: i.controlTitle,
-        "aria-label": i.controlTitle,
-        role: "button",
-        "aria-roledescription": "Bouton de visibilité du mot de passe",
-        children: /* @__PURE__ */ o.jsx(I, { name: i.controlIcon })
-      }
-    ) })
-  ] });
+  ), m = T(e.value), n = E(e), b = k("input-password", l);
+  return /* @__PURE__ */ o.jsxs(
+    x,
+    {
+      ...n,
+      "data-testid": "input-password-container",
+      children: [
+        /* @__PURE__ */ o.jsx(
+          v,
+          {
+            "data-testid": b,
+            value: m,
+            type: s.inputType,
+            onChange: c,
+            placeholder: e.placeholder,
+            disabled: e.disabled,
+            required: e.required,
+            "aria-roledescription": "Champs de saisie mot de passe",
+            role: "textbox",
+            ref: r,
+            ...n
+          }
+        ),
+        /* @__PURE__ */ o.jsx(w, { children: /* @__PURE__ */ o.jsx(
+          P,
+          {
+            ...n,
+            "data-testid": "input-control",
+            onClick: d,
+            title: s.controlTitle,
+            "aria-label": s.controlTitle,
+            role: "button",
+            "aria-roledescription": "Bouton de visibilité du mot de passe",
+            children: /* @__PURE__ */ o.jsx(g, { name: s.controlIcon })
+          }
+        ) })
+      ]
+    }
+  );
 };
-R.defaultProps = u;
+q.defaultProps = p;
 export {
-  R as PasswordInput
+  q as PasswordInput
 };

package/dist/components/Input/PhoneInput/PhoneInput.component.d.ts

@@ -1,4 +1,5 @@
 import { InputProps } from '../Input.types';
+import { TestIdProps } from '../../../types';
 
 /**
  * Renders a international phone input component.
@@ -9,7 +10,7 @@ import { InputProps } from '../Input.types';
  * @return {JSX.Element} The rendered phone input component.
  */
 declare const PhoneInput: {
-    (props: InputProps<"phone">): JSX.Element;
+    (props: InputProps<"phone"> & TestIdProps): JSX.Element;
     defaultProps: Required<InputProps<"phone">>;
 };
 export { PhoneInput };

package/dist/components/Input/PhoneInput/PhoneInput.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Input/PhoneInput/PhoneInput.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Input/PhoneInput/PhoneInput.utils.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Input/TextInput/TextInput.component.js

@@ -1,42 +1,42 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
 */
 
 
-import { j as l } from "../../../node_modules/react/jsx-runtime.js";
-import { isString as o } from "@ubloimmo/front-util";
-import { StyledInput as d, defaultCommonInputProps as m } from "../Input.common.js";
-import { useInputOnChange as a, useInputValue as i, useInputStyles as c } from "../Input.utils.js";
+import { j as d } from "../../../node_modules/react/jsx-runtime.js";
+import { isString as n } from "@ubloimmo/front-util";
+import { StyledInput as m, defaultCommonInputProps as a } from "../Input.common.js";
+import { useInputOnChange as i, useInputValue as c, useInputStyles as I } from "../Input.utils.js";
 import "react";
-import { useMergedProps as f } from "../../../utils/props.utils.js";
-const n = {
-  ...m,
+import { useMergedProps as f, useTestId as g } from "../../../utils/props.utils.js";
+const r = {
+  ...a,
   value: null,
   onChange: null
-}, g = (r) => {
-  const t = f(n, r), p = a(
-    (e) => o(e),
-    (e) => o(e) && e.length > 0 ? e : null,
+}, x = (o) => {
+  const t = f(r, o), s = i(
+    (e) => n(e),
+    (e) => n(e) && e.length > 0 ? e : null,
     t.onChange
-  ), s = i(t.value), u = c(t);
-  return /* @__PURE__ */ l.jsx(
-    d,
+  ), u = c(t.value), p = I(t), l = g("input-text", o);
+  return /* @__PURE__ */ d.jsx(
+    m,
     {
-      "data-testid": "input-text",
-      value: s,
+      "data-testid": l,
+      value: u,
       type: "text",
-      onChange: p,
+      onChange: s,
       placeholder: t.placeholder,
       required: t.required,
       disabled: t.disabled,
-      ...u
+      ...p
     }
   );
 };
-g.defaultProps = n;
+x.defaultProps = r;
 export {
-  g as TextInput
+  x as TextInput
 };

package/dist/components/Input/index.d.ts

@@ -1,6 +1,8 @@
 export * from './Input.component';
-export * from './Input.types';
 export * from './Input.utils';
+export * from './Input.data';
+export type * from './Input.types';
+export type * from './Input.generic.types';
 export * from './EmailInput';
 export * from './NumberInput';
 export * from './PasswordInput';

package/dist/components/InputAssistiveText/InputAssistiveText.component.js

@@ -1,28 +1,28 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
 */
 
 
-import { j as s } from "../../node_modules/react/jsx-runtime.js";
-import p from "styled-components";
-import { Text as n } from "../Text/Text.component.js";
-import "@ubloimmo/front-util";
-import { useLogger as u } from "../../utils/log.utils.js";
-import { useMergedProps as d } from "../../utils/props.utils.js";
+import { j as t } from "../../node_modules/react/jsx-runtime.js";
+import { isNull as n } from "@ubloimmo/front-util";
+import u from "styled-components";
+import { Text as x } from "../Text/Text.component.js";
+import { useLogger as d } from "../../utils/log.utils.js";
+import { useMergedProps as f } from "../../utils/props.utils.js";
 import { isNonEmptyString as r } from "../../utils/string.utils.js";
-const x = {
+const l = {
   assistiveText: null,
   errorText: null,
   error: !1
 }, a = (m) => {
-  const l = d(x, m), { assistiveText: t, errorText: e, error: i } = l, { warn: o } = u("InputAssistiveText");
-  return !r(t) && !r(e) ? (o("InputAssistiveText must have a defined assistiveText or errorText."), null) : (i && !r(e) && o("errorText is missing. If error is true, errorText must be defined."), /* @__PURE__ */ s.jsx(f, { "data-testid": "assistive-text", children: i && r(e) ? /* @__PURE__ */ s.jsx(n, { size: "s", color: "error-base", children: e }) : /* @__PURE__ */ s.jsx(n, { size: "s", color: "gray-400", children: t }) }));
+  const p = f(l, m), { assistiveText: s, errorText: e, error: i } = p, { warn: o } = d("InputAssistiveText");
+  return (n(s) || !r(s)) && (n(e) || !r(e)) ? (o("InputAssistiveText must have a defined assistiveText or errorText."), null) : (i && !r(e) && o("errorText is missing. If error is true, errorText must be defined."), /* @__PURE__ */ t.jsx(T, { "data-testid": "assistive-text", children: i && r(e) ? /* @__PURE__ */ t.jsx(x, { size: "s", color: "error-base", children: e }) : /* @__PURE__ */ t.jsx(x, { size: "s", color: "gray-400", children: s }) }));
 };
-a.defaultProps = x;
-const f = p.div`
+a.defaultProps = l;
+const T = u.div`
   display: flex;
   flex-direction: column;
 `;

package/dist/components/InputAssistiveText/InputAssistiveText.types.d.ts

@@ -3,13 +3,13 @@ import { Nullable } from '@ubloimmo/front-util';
 export type InputAssistiveTextProps = {
     /**
      * The text content to be displayed as assistive text
-     * @type {string}
+     * @type {Nullable<string>}
      * @default null
      */
     assistiveText?: Nullable<string>;
     /**
      * The text content to be displayed as error text
-     * @type {string}
+     * @type {Nullable<string>}
      * @default null
      */
     errorText?: Nullable<string>;

package/dist/components/InputLabel/InputLabel.component.d.ts

@@ -1,14 +1,15 @@
 import { InputLabelProps } from './InputLabel.types';
+import { TestIdProps } from '../../types';
 
 /**
  * Renders an input label component, to be used in association with the Input component.
- * @version 0.0.2
+ * @version 0.0.3
  *
  * @param {InputLabelProps} props - The props for the InputLabel component.
  * @return {JSX.Element} The InputLabel component.
  */
 declare const InputLabel: {
-    (props: InputLabelProps): JSX.Element;
+    (props: InputLabelProps & TestIdProps): JSX.Element;
     defaultProps: Required<InputLabelProps>;
 };
 export { InputLabel };

package/dist/components/InputLabel/InputLabel.component.js

@@ -1,36 +1,72 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
 */
 
 
-import { j as e } from "../../node_modules/react/jsx-runtime.js";
-import i from "styled-components";
+import { j as a } from "../../node_modules/react/jsx-runtime.js";
+import l, { css as d } from "styled-components";
 import "@ubloimmo/front-util";
 import { useLogger as p } from "../../utils/log.utils.js";
-import { useMergedProps as m } from "../../utils/props.utils.js";
-import { isNonEmptyString as u } from "../../utils/string.utils.js";
-import { Text as o } from "../Text/Text.component.js";
-const s = {
+import { useMergedProps as c, useTestId as m, useClassName as f } from "../../utils/props.utils.js";
+import { isNonEmptyString as b } from "../../utils/string.utils.js";
+import { Text as x } from "../Text/Text.component.js";
+const n = {
   label: "[Input label]",
-  required: !1
-}, d = (l) => {
-  const { warn: a } = p("InputLabel"), r = m(
-    s,
-    l
-  ), { label: t, required: n } = r;
-  return u(t) || a("InputLabel must have a defined label."), /* @__PURE__ */ e.jsxs(b, { "data-testid": "input-label", ...r, children: [
-    /* @__PURE__ */ e.jsx(o, { color: "gray-600", size: "m", children: t }),
-    n && /* @__PURE__ */ e.jsx(o, { color: "warning-base", size: "m", weight: "medium", children: "*" })
-  ] });
+  required: !1,
+  children: null,
+  className: null
+}, I = (e) => {
+  const { warn: o } = p("InputLabel"), t = c(
+    n,
+    e
+  ), i = m("input-label", e), u = f(t), { label: r, required: s } = t;
+  return b(r) || o("InputLabel must have a defined label."), /* @__PURE__ */ a.jsxs(
+    L,
+    {
+      className: u,
+      "data-testid": i,
+      "data-required": String(s),
+      children: [
+        /* @__PURE__ */ a.jsx(
+          g,
+          {
+            color: "gray-600",
+            size: "m",
+            testId: "input-label-text",
+            $required: s,
+            children: r
+          }
+        ),
+        t.children
+      ]
+    }
+  );
 };
-d.defaultProps = s;
-const b = i.label`
+I.defaultProps = n;
+const g = l(x)`
+  ${(e) => e.$required && d`
+      &::after {
+        content: " *";
+        color: var(--warning-base);
+      }
+    `}
+`, L = l.label`
   display: flex;
-  gap: var(--s-05);
+  flex-direction: column;
+  gap: var(--s-2);
+
+  & > span[data-testid="text input-label-text"] {
+    transition: color 150ms ease-out 0s;
+  }
+
+  &:has(input:focus, textarea:focus, select:focus)
+    > span[data-testid="text input-label-text"] {
+    color: var(--gray-800);
+  }
 `;
 export {
-  d as InputLabel
+  I as InputLabel
 };

package/dist/components/InputLabel/InputLabel.types.d.ts

@@ -1,4 +1,6 @@
+import { StyleOverrideProps } from '../../types';
 import { Nullable } from '@ubloimmo/front-util';
+import { ReactNode } from 'react';
 
 export type InputLabelProps = {
     /**
@@ -14,5 +16,11 @@ export type InputLabelProps = {
      * @type {boolean}
      */
     required?: boolean;
-};
+    /**
+     * The child inputs to be rendered inside the label.
+     *
+     * @default null
+     */
+    children?: ReactNode;
+} & StyleOverrideProps;
 export type DefaultInputLabelProps = Required<InputLabelProps>;

package/dist/components/Loading/Loading.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Loading/animations/BouncingBalls/BouncingBalls.animation.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Loading/animations/BouncingBalls/BouncingBalls.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.7.0
+* @ubloimmo/uikit version 0.8.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo