zuii 1.4.16 → 1.4.18

package/dist/components/Form/react/PasswordConfirm.js

@@ -1,50 +1,53 @@
-import { jsxs as x, jsx as t } from "react/jsx-runtime";
-import { useState as c, useEffect as V } from "react";
-import { InputGroup as m, Form as a } from "react-bootstrap";
+import { jsxs as m, Fragment as V, jsx as t } from "react/jsx-runtime";
+import { useState as c, useEffect as u } from "react";
+import { InputGroup as a, Form as l } from "react-bootstrap";
 import { Icon as w } from "../../Icon/react/index.js";
-const N = ({
+const $ = ({
   passwordToMatch: o,
   value: s = "",
-  onChange: l,
-  className: d = "",
-  placeholder: p = "Confirmez le mot de passe",
-  disabled: f = !1
+  onChange: d,
+  className: p = "",
+  placeholder: f = "Confirmez le mot de passe",
+  disabled: h = !1,
+  errorMessage: g = "Les mots de passe ne correspondent pas."
 }) => {
-  const [n, h] = c(!1), [i, C] = c(!0), r = "password-confirm";
-  V(() => {
-    C(s === "" || s === o);
+  const [n, C] = c(!1), [r, y] = c(!0), i = "password-confirm";
+  u(() => {
+    y(s === "" || s === o);
   }, [s, o]);
-  const g = () => {
-    h(!n);
-  }, y = (e) => {
-    l?.(e, e === o);
+  const _ = () => {
+    C(!n);
+  }, x = (e) => {
+    d?.(e, e === o);
   };
-  return /* @__PURE__ */ x(m, { className: `${r} ${d}`.trim(), hasValidation: !0, children: [
-    /* @__PURE__ */ t(
-      a.Control,
-      {
-        type: n ? "text" : "password",
-        value: s,
-        onChange: (e) => y(e.target.value),
-        placeholder: p,
-        disabled: f,
-        isInvalid: !i && s !== "",
-        isValid: i && s !== "" && s === o,
-        className: `${r}__control`
-      }
-    ),
-    /* @__PURE__ */ t(
-      m.Text,
-      {
-        className: `${r}__toggle`,
-        onClick: g,
-        style: { cursor: "pointer" },
-        children: /* @__PURE__ */ t(w, { name: n ? "icon-eye" : "icon-eye-closed", size: "sm" })
-      }
-    ),
-    /* @__PURE__ */ t(a.Control.Feedback, { type: "invalid", children: "Les mots de passe ne correspondent pas." })
+  return /* @__PURE__ */ m(V, { children: [
+    /* @__PURE__ */ m(a, { className: `form__input ${i} ${p}`.trim(), hasValidation: !0, children: [
+      /* @__PURE__ */ t(
+        l.Control,
+        {
+          type: n ? "text" : "password",
+          value: s,
+          onChange: (e) => x(e.target.value),
+          placeholder: f,
+          disabled: h,
+          isInvalid: !r && s !== "",
+          isValid: r && s !== "" && s === o,
+          className: "form__control"
+        }
+      ),
+      /* @__PURE__ */ t(
+        a.Text,
+        {
+          className: `${i}__toggle`,
+          onClick: _,
+          style: { cursor: "pointer" },
+          children: /* @__PURE__ */ t(w, { name: n ? "icon-eye" : "icon-eye-closed", size: "sm" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(l.Control.Feedback, { type: "invalid", children: g })
   ] });
 };
 export {
-  N as PasswordConfirm
+  $ as PasswordConfirm
 };

package/dist/components/Form/react/PasswordInput.js

@@ -1,40 +1,40 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { InputGroup as t, Form as w } from "react-bootstrap";
-import { Icon as f } from "../../Icon/react/index.js";
-const C = ({
+import { InputGroup as t, Form as f } from "react-bootstrap";
+import { Icon as w } from "../../Icon/react/index.js";
+const y = ({
   value: r,
-  onChange: a,
-  className: n = "",
+  onChange: n,
+  className: a = "",
   placeholder: i = "Mot de passe",
-  disabled: l = !1
+  disabled: m = !1
 }) => {
-  const [s, c] = u(!1), o = "password-input", m = () => {
-    c(!s);
+  const [o, l] = u(!1), e = "password-input", c = () => {
+    l(!o);
   };
-  return /* @__PURE__ */ d(t, { className: `${o} ${n}`.trim(), children: [
-    /* @__PURE__ */ e(
-      w.Control,
+  return /* @__PURE__ */ d(t, { className: `form__input ${e} ${a}`.trim(), children: [
+    /* @__PURE__ */ s(
+      f.Control,
       {
-        type: s ? "text" : "password",
+        type: o ? "text" : "password",
         value: r,
-        onChange: (p) => a?.(p.target.value),
+        onChange: (p) => n?.(p.target.value),
         placeholder: i,
-        disabled: l,
-        className: `${o}__control`
+        disabled: m,
+        className: "form__control"
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ s(
       t.Text,
       {
-        className: `${o}__toggle`,
-        onClick: m,
+        className: `${e}__toggle`,
+        onClick: c,
         style: { cursor: "pointer" },
-        children: /* @__PURE__ */ e(f, { name: s ? "icon-eye" : "icon-eye-closed", size: "sm" })
+        children: /* @__PURE__ */ s(w, { name: o ? "icon-eye" : "icon-eye-closed", size: "sm" })
       }
     )
   ] });
 };
 export {
-  C as PasswordInput
+  y as PasswordInput
 };

package/dist/components/Form/react/RangeInput.js

@@ -1,7 +1,6 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { Form as i } from "react-bootstrap";
-import '../style/index.css';/* empty css                  */
-const _ = ({
+const h = ({
   value: s,
   onChange: l,
   min: t = 0,
@@ -39,5 +38,5 @@ const _ = ({
   ] });
 };
 export {
-  _ as RangeInput
+  h as RangeInput
 };

package/dist/components/Form/react/Select.d.ts

@@ -54,6 +54,14 @@ export interface SelectProps {
      * @default 'default'
      */
     variant?: 'default' | 'country';
+    /**
+     * Nom de l'icône à afficher.
+     */
+    icon?: string;
+    /**
+     * Langue pour les traductions (ex: 'fr', 'en').
+     */
+    lang?: string;
 }
 /**
  * Composant Select premium basé sur Choices.js.
@@ -61,4 +69,4 @@ export interface SelectProps {
  * @param {SelectProps} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant Select rendu.
  */
-export declare const Select: ({ options, value, onChange, multiple, placeholder, disabled, searchable, className, name, variant, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ options, value, onChange, multiple, placeholder, disabled, searchable, className, name, variant, icon, lang, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/react/Select.js

@@ -1,73 +1,97 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useRef as f, useEffect as o } from "react";
-import { initSelect as R } from "../js/select.js";
-const b = ({
-  options: n,
-  value: r,
-  onChange: l,
-  multiple: s = !1,
-  placeholder: a = "Sélectionnez une option",
-  disabled: h = !1,
-  searchable: d = !0,
-  className: S = "",
-  name: V,
-  variant: A = "default"
+import { jsxs as R, jsx as S } from "react/jsx-runtime";
+import { useRef as i, useEffect as l } from "react";
+import { initSelect as E } from "../js/select.js";
+import { Icon as b } from "../../Icon/react/index.js";
+const V = {
+  fr: {
+    placeholder: "Sélectionnez une option",
+    noResultsText: "Aucun résultat trouvé",
+    noChoicesText: "Aucun choix disponible",
+    uniqueItemText: "Seules les valeurs uniques peuvent être ajoutées",
+    customAddItemText: "Seules les valeurs correspondant à un critère spécifique peuvent être ajoutées",
+    addItemText: (e) => `Appuyez sur Entrée pour ajouter **${e}**`,
+    maxItemText: (e) => `Seulement ${e} options peuvent être sélectionnées`
+  },
+  en: {
+    placeholder: "Select an option",
+    noResultsText: "No results found",
+    noChoicesText: "No choices to choose from",
+    uniqueItemText: "Only unique values can be added",
+    customAddItemText: "Only values matching specific conditions can be added",
+    addItemText: (e) => `Press Enter to add **${e}**`,
+    maxItemText: (e) => `Only ${e} options can be selected`
+  }
+}, L = ({
+  options: e,
+  value: t,
+  onChange: a,
+  multiple: c = !1,
+  placeholder: x = "Sélectionnez une option",
+  disabled: A = !1,
+  searchable: y = !0,
+  className: I = "",
+  name: v,
+  variant: h = "default",
+  icon: T,
+  lang: N
 }) => {
-  const u = f(null), c = f(null), y = f(l), m = f(r);
-  o(() => {
-    y.current = l;
-  }, [l]), o(() => {
-    m.current = r;
-  }, [r]);
-  const N = JSON.stringify(n);
-  return o(() => {
-    if (!(!n || n.length === 0)) {
-      if (u.current) {
-        u.current.innerHTML = "";
-        const t = r ?? m.current, i = n.map((e) => ({
-          value: e.value,
-          label: e.text,
-          selected: Array.isArray(t) ? t.includes(e.value) : t === e.value,
-          customProperties: {
-            flag: e.flag
-          }
-        }));
-        s || i.unshift({
-          value: "",
-          label: a,
-          selected: t === void 0 || t === "",
-          placeholder: !0
-        }), c.current = R(u.current, {
-          choices: i,
-          removeItemButton: s,
-          placeholderValue: a,
-          searchEnabled: d,
-          silent: !0,
-          variant: A
-        }, (e) => {
-          m.current = e, y.current && y.current(e);
-        });
-      }
-      return () => {
-        c.current && (c.current.destroy(), c.current = null);
-      };
-    }
-  }, [N, s, a, A, d]), o(() => {
-    if (c.current && r !== void 0) {
-      const t = c.current.getValue(!0), i = Array.isArray(r) ? r : [r], e = Array.isArray(t) ? t : [t];
-      JSON.stringify(i.sort()) !== JSON.stringify(e.sort()) && c.current.setChoiceByValue(r);
+  const o = i(null), s = i(null), d = i(a), f = i(t), g = N || (typeof document < "u" ? document.documentElement.lang : "fr") || "fr", m = V[g.startsWith("en") ? "en" : "fr"], p = x === "Sélectionnez une option" ? m.placeholder : x;
+  l(() => {
+    d.current = a;
+  }, [a]), l(() => {
+    f.current = t;
+  }, [t]);
+  const O = JSON.stringify(e);
+  return l(() => {
+    if (o.current) {
+      o.current.innerHTML = "";
+      const r = t ?? f.current, u = e.map((n) => ({
+        value: n.value,
+        label: n.text,
+        selected: Array.isArray(r) ? r.includes(n.value) : r === n.value,
+        customProperties: {
+          flag: n.flag
+        }
+      }));
+      c || u.unshift({
+        value: "",
+        label: p,
+        selected: r === void 0 || r === "",
+        placeholder: !0
+      }), s.current = E(o.current, {
+        choices: u,
+        removeItemButton: c,
+        placeholderValue: p,
+        searchEnabled: y,
+        silent: !0,
+        variant: h,
+        ...m
+      }, (n) => {
+        f.current = n, d.current && d.current(n);
+      });
     }
-  }, [r]), /* @__PURE__ */ g("div", { className: `form__input ${S}`.trim(), children: /* @__PURE__ */ g(
-    "select",
-    {
-      ref: u,
-      multiple: s,
-      disabled: h,
-      className: "select",
-      name: V
+    return () => {
+      s.current && (s.current.destroy(), s.current = null);
+    };
+  }, [O, c, p, h, y, m]), l(() => {
+    if (s.current && t !== void 0) {
+      const r = s.current.getValue(!0), u = Array.isArray(t) ? t : [t], n = Array.isArray(r) ? r : [r];
+      JSON.stringify(u.sort()) !== JSON.stringify(n.sort()) && s.current.setChoiceByValue(t);
     }
-  ) });
+  }, [t]), /* @__PURE__ */ R("div", { className: `form__input ${I}`.trim(), children: [
+    T && /* @__PURE__ */ S(b, { name: T, size: "sm" }),
+    /* @__PURE__ */ S(
+      "select",
+      {
+        ref: o,
+        multiple: c,
+        disabled: A,
+        className: "select",
+        name: v
+      }
+    )
+  ] });
 };
 export {
-  b as Select
+  L as Select
 };

package/dist/components/Form/react/TelInput.js

@@ -1,44 +1,52 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useRef as i, useEffect as s } from "react";
-import { Form as p } from "react-bootstrap";
-import d from "intl-tel-input";
-const h = ({
-  value: e,
-  onChange: n,
-  initialCountry: u = "fr",
-  className: f = "",
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as f, useState as g, useEffect as u } from "react";
+import { Form as b } from "react-bootstrap";
+import h from "intl-tel-input";
+import { getDefaultCountry as N, watchLanguageChange as y } from "../js/tel-input.js";
+const w = ({
+  value: n,
+  onChange: c,
+  initialCountry: o,
+  className: m = "",
   placeholder: l,
-  disabled: m = !1
+  disabled: p = !1
 }) => {
-  const t = i(null), r = i(null);
-  return s(() => {
-    if (t.current) {
-      r.current = d(t.current, {
-        initialCountry: u,
+  const r = f(null), t = f(null), [i, a] = g(o || N());
+  return u(() => {
+    const e = y(o, (d) => {
+      a(d);
+    });
+    return () => {
+      e && e.disconnect();
+    };
+  }, [o]), u(() => {
+    if (r.current) {
+      t.current = h(r.current, {
+        initialCountry: i,
         loadUtils: () => import("../../../node_modules/.pnpm/intl-tel-input@26.1.1/node_modules/intl-tel-input/build/js/utils.js"),
         separateDialCode: !0,
         strictMode: !0
       });
-      const o = () => {
-        n && n(r.current.getNumber());
+      const e = () => {
+        c && c(t.current.getNumber());
       };
-      return t.current.addEventListener("change", o), t.current.addEventListener("blur", o), () => {
-        r.current && r.current.destroy();
+      return r.current.addEventListener("change", e), r.current.addEventListener("blur", e), () => {
+        t.current && t.current.destroy();
       };
     }
-  }, [u]), s(() => {
-    r.current && e !== void 0 && e !== r.current.getNumber() && r.current.setNumber(e);
-  }, [e]), /* @__PURE__ */ c("div", { className: `tel-input-wrapper form__input ${f}`.trim(), children: /* @__PURE__ */ c(
-    p.Control,
+  }, [i]), u(() => {
+    t.current && n !== void 0 && n !== t.current.getNumber() && t.current.setNumber(n);
+  }, [n]), /* @__PURE__ */ s("div", { className: `tel-input-wrapper form__input ${m}`.trim(), children: /* @__PURE__ */ s(
+    b.Control,
     {
-      ref: t,
+      ref: r,
       type: "tel",
       placeholder: l,
-      disabled: m,
+      disabled: p,
       className: "tel-input-control "
     }
   ) });
 };
 export {
-  h as TelInput
+  w as TelInput
 };

package/dist/components/Form/react/index.d.ts

@@ -9,6 +9,9 @@ import { TelInputProps } from './TelInput';
 import { PasswordInputProps } from './PasswordInput';
 import { PasswordConfirmProps } from './PasswordConfirm';
 import { RangeInputProps } from './RangeInput';
+import { FormColorProps } from './FormColor';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { FormDateProps } from './FormDate';
 /**
  * Propriétés du composant FormControl.
  */
@@ -53,7 +56,7 @@ export declare const Form: {
         Input: BsPrefixRefForwardingComponent<"input", FormCheckInputProps>;
         Label: React.ForwardRefExoticComponent< FormCheckLabelProps & React.RefAttributes<HTMLLabelElement>>;
     };
-    Select: ({ options, value, onChange, multiple, placeholder, disabled, searchable, className, name, variant, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+    Select: ({ options, value, onChange, multiple, placeholder, disabled, searchable, className, name, variant, icon, lang, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
     InputGroup: BsPrefixRefForwardingComponent<"div", InputGroupProps> & {
         Text: BsPrefixRefForwardingComponent<"span", InputGroupTextProps>;
         Radio: (props: FormCheckInputProps) => import("react/jsx-runtime").JSX.Element;
@@ -62,8 +65,10 @@ export declare const Form: {
     Number: ({ value, onChange, min, max, step, className, placeholder, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
     Tel: ({ value, onChange, initialCountry, className, placeholder, disabled, }: TelInputProps) => import("react/jsx-runtime").JSX.Element;
     Password: ({ value, onChange, className, placeholder, disabled, }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
-    PasswordConfirm: ({ passwordToMatch, value, onChange, className, placeholder, disabled, }: PasswordConfirmProps) => import("react/jsx-runtime").JSX.Element;
+    PasswordConfirm: ({ passwordToMatch, value, onChange, className, placeholder, disabled, errorMessage, }: PasswordConfirmProps) => import("react/jsx-runtime").JSX.Element;
     Range: ({ value, onChange, min, max, step, className, }: RangeInputProps) => import("react/jsx-runtime").JSX.Element;
     FloatingLabel: BsPrefixRefForwardingComponent<"div", FloatingLabelProps>;
+    Color: ({ value, onChange, disabled, name, className, swatches, }: FormColorProps) => import("react/jsx-runtime").JSX.Element;
+    Date: ForwardRefExoticComponent< FormDateProps & RefAttributes<HTMLInputElement>>;
 };
 export {};

package/dist/components/Form/react/index.js

@@ -1,16 +1,18 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { Form as r, InputGroup as h } from "react-bootstrap";
-import { Icon as p } from "../../Icon/react/index.js";
+import { Form as r, InputGroup as C } from "react-bootstrap";
+import { Icon as c } from "../../Icon/react/index.js";
 import d from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/FloatingLabel.js";
 import '../style/index.css';/* empty css                  */
-import { NumberInput as C } from "./NumberInput.js";
+import { NumberInput as h } from "./NumberInput.js";
 import { TelInput as b } from "./TelInput.js";
-import { PasswordInput as I } from "./PasswordInput.js";
-import { PasswordConfirm as w } from "./PasswordConfirm.js";
-import { RangeInput as N } from "./RangeInput.js";
-import { Select as F } from "./Select.js";
+import { PasswordInput as F } from "./PasswordInput.js";
+import { PasswordConfirm as I } from "./PasswordConfirm.js";
+import { RangeInput as w } from "./RangeInput.js";
+import { Select as N } from "./Select.js";
 import { handleNumericKeyDown as _ } from "../js/number.js";
-const x = ({
+import { FormColor as x } from "./FormColor.js";
+import { FormDate as y } from "./FormDate.js";
+const D = ({
   label: n,
   floating: l,
   icon: m,
@@ -18,28 +20,28 @@ const x = ({
   onKeyDown: i,
   ...e
 }) => {
-  const u = (c) => {
-    e.type === "number" && _(c), i && i(c);
-  }, f = e.type === "number" ? "decimal" : void 0;
+  const f = (p) => {
+    e.type === "number" && _(p), i && i(p);
+  }, u = e.type === "number" ? "decimal" : void 0;
   return l && n ? /* @__PURE__ */ t(d, { label: n, controlId: e.id || e.name, children: /* @__PURE__ */ s("div", { className: "form__input", children: [
-    m && /* @__PURE__ */ t(p, { name: m, size: "sm" }),
+    m && /* @__PURE__ */ t(c, { name: m, size: "sm" }),
     /* @__PURE__ */ t(
       r.Control,
       {
         ...e,
-        onKeyDown: u,
-        inputMode: f,
+        onKeyDown: f,
+        inputMode: u,
         children: a
       }
     )
   ] }) }) : /* @__PURE__ */ s("div", { className: "form__input", children: [
-    m && /* @__PURE__ */ t(p, { name: m, size: "sm" }),
+    m && /* @__PURE__ */ t(c, { name: m, size: "sm" }),
     /* @__PURE__ */ t(
       r.Control,
       {
         ...e,
-        onKeyDown: u,
-        inputMode: f,
+        onKeyDown: f,
+        inputMode: u,
         children: a
       }
     )
@@ -57,18 +59,20 @@ const x = ({
   ] });
 };
 o.Group = r.Group;
-o.Control = x;
+o.Control = D;
 o.Label = r.Label;
 o.Text = r.Text;
 o.Check = r.Check;
-o.Select = F;
-o.InputGroup = h;
-o.Number = C;
+o.Select = N;
+o.InputGroup = C;
+o.Number = h;
 o.Tel = b;
-o.Password = I;
-o.PasswordConfirm = w;
-o.Range = N;
+o.Password = F;
+o.PasswordConfirm = I;
+o.Range = w;
 o.FloatingLabel = d;
+o.Color = x;
+o.Date = y;
 export {
   o as Form
 };