@situaction/traq-ui-ste 1.1.40 → 1.2.0

package/dist/components/select/Select.js

@@ -1,65 +1,65 @@
 import { jsxs as $, jsx as r } from "react/jsx-runtime";
-import { useState as x, useRef as h, useEffect as w } from "react";
+import { useState as g, useRef as h, useEffect as w } from "react";
 import { Button as N } from "../button/Button.js";
-import { IconButton as W } from "../icon-button/IconButton.js";
-import { Icon as p } from "../icon/Icon.js";
-import { Modal as q } from "../modal/Modal.js";
+import { IconButton as q } from "../icon-button/IconButton.js";
+import { Icon as _ } from "../icon/Icon.js";
+import { Modal as z } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
-const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_1o5wx_61", G = "_active_1o5wx_78", H = "_selectList_1o5wx_82", J = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
-  selectContainer: z,
-  selected: A,
-  children: D,
-  active: G,
-  selectList: H,
-  modal: J,
+const A = "_selectContainer_1o5wx_54", D = "_selected_1o5wx_57", G = "_children_1o5wx_61", H = "_active_1o5wx_78", J = "_selectList_1o5wx_82", O = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
+  selectContainer: A,
+  selected: D,
+  children: G,
+  active: H,
+  selectList: J,
+  modal: O,
   dropdownFadeIn: Q,
   itemLabel: X
 }, ce = ({
-  selected: _,
-  size: b = "m",
+  selected: b,
+  size: p = "m",
   listItem: s,
-  modeDisplay: g = "all",
+  modeDisplay: R = "all",
   onSelect: B,
-  positionOverride: R,
+  positionOverride: L,
   placeholder: P = "Sélectionner",
   autoCloseCondition: j,
   fullWidth: T = !1
 }) => {
-  const [n, u] = x(!1), U = h(null), [V, F] = x({
+  const [n, u] = g(!1), U = h(null), [V, F] = g({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [c, L] = x(_ ?? null);
+  }), [c, C] = g(b ?? null);
   w(() => {
-    _ ? L(_) : s.length > 0 ? L(s[0]) : L(null);
-  }, [_, s]), w(() => {
-    R && F(R);
-  }, [R]);
+    b ? C(b) : s.length > 0 ? C(s[0]) : C(null);
+  }, [b, s]), w(() => {
+    L && F(L);
+  }, [L]);
   const M = (e) => {
-    L(e), u(!1), B && B(e);
-  }, O = () => {
+    C(e), u(!1), B && B(e);
+  }, W = () => {
     const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || P || "Sélectionner";
-    return g === "icon" && e ? /* @__PURE__ */ r(W, { ref: d, mode: "tertiary", size: b, onClick: () => u(!n), children: /* @__PURE__ */ r(p, { icon: c.icon }) }) : g === "text" ? /* @__PURE__ */ r(
+    return R === "icon" && e ? /* @__PURE__ */ r(q, { ref: d, mode: "tertiary", size: p, onClick: () => u(!n), children: /* @__PURE__ */ r(_, { icon: c.icon }) }) : R === "text" ? /* @__PURE__ */ r(
       N,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        childrenRight: /* @__PURE__ */ r(p, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        size: b,
+        childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        size: p,
         fullWidth: T,
         onClick: () => u(!n)
       }
-    ) : g === "all" ? /* @__PURE__ */ r(
+    ) : R === "all" ? /* @__PURE__ */ r(
       N,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        size: b,
+        size: p,
         fullWidth: T,
-        childrenLeft: e && /* @__PURE__ */ r(p, { icon: c.icon }),
-        childrenRight: /* @__PURE__ */ r(p, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        childrenLeft: e && /* @__PURE__ */ r(_, { icon: c.icon }),
+        childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         onClick: () => u(!n)
       }
     ) : /* @__PURE__ */ r(
@@ -69,22 +69,22 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
         mode: "tertiary",
         fullWidth: T,
         label: P ?? "Sélectionner",
-        size: b,
+        size: p,
         onClick: () => u(!n)
       }
     );
-  }, E = h(null), C = h({}), [k, v] = x(""), f = h(null), K = h({}), S = (e) => {
+  }, E = h(null), k = h({}), [y, v] = g(""), f = h(null), K = h({}), S = (e) => {
     if (!n) return;
     const o = e.key.length === 1 ? e.key.toLowerCase() : "";
     if (!o) return;
-    const l = k + o;
-    v(l);
-    const a = s.find((t) => {
-      var i;
-      return (i = t.label) == null ? void 0 : i.toLowerCase().startsWith(l);
+    const a = y + o;
+    v(a);
+    const i = s.find((t) => {
+      var l;
+      return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
     });
-    if (a) {
-      const t = C.current[a.value];
+    if (i) {
+      const t = k.current[i.value];
       t == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
     f.current && clearTimeout(f.current), f.current = setTimeout(() => {
@@ -93,23 +93,23 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
   };
   w(() => (n ? window.addEventListener("keydown", S) : (window.removeEventListener("keydown", S), v("")), () => {
     window.removeEventListener("keydown", S);
-  }), [n, k, s]), w(() => {
+  }), [n, y, s]), w(() => {
     const e = (o) => {
       if (!n) return;
-      const l = o.key.length === 1 ? o.key.toLowerCase() : "";
-      if (!l) return;
-      const a = k + l;
-      v(a);
+      const a = o.key.length === 1 ? o.key.toLowerCase() : "";
+      if (!a) return;
+      const i = y + a;
+      v(i);
       const t = s.find(
-        (i) => {
-          var y;
-          return (y = i.label) == null ? void 0 : y.toLowerCase().startsWith(a);
+        (l) => {
+          var x;
+          return (x = l.label) == null ? void 0 : x.toLowerCase().startsWith(i);
         }
       );
-      if (t && E.current && t.value in C.current && C.current[t.value]) {
-        const i = E.current, y = C.current[t.value];
-        i.scrollTo({
-          top: y.offsetTop - i.offsetTop,
+      if (t && E.current && t.value in k.current && k.current[t.value]) {
+        const l = E.current, x = k.current[t.value];
+        l.scrollTo({
+          top: x.offsetTop - l.offsetTop,
           behavior: "smooth"
         });
       }
@@ -118,19 +118,19 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
       }, 700);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [n, s, k]), w(() => {
+  }, [n, s, y]), w(() => {
     if (!n) return;
     const e = (o) => {
-      const l = o.key.toLowerCase();
-      if (l.length === 1) {
-        const a = s.find(
+      const a = o.key.toLowerCase();
+      if (a.length === 1) {
+        const i = s.find(
           (t) => {
-            var i;
-            return (i = t.label) == null ? void 0 : i.toLowerCase().startsWith(l);
+            var l;
+            return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
           }
         );
-        if (a) {
-          const t = K.current[a.value];
+        if (i) {
+          const t = K.current[i.value];
           t && t.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
@@ -141,15 +141,15 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
   return w(() => {
     if (n && d.current) {
       const e = d.current.getBoundingClientRect().height;
-      F({
+      F(L || {
         top: `${e + 6}px`,
         left: "0px"
       });
     }
   }, [n]), /* @__PURE__ */ $("div", { className: m.selectContainer, children: [
-    O(),
+    W(),
     /* @__PURE__ */ r(
-      q,
+      z,
       {
         ref: U,
         anchorRef: d,
@@ -166,7 +166,7 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
             className: `${m.children} ${(c == null ? void 0 : c.value) === e.value ? m.active : ""}`,
             onClick: () => M(e),
             children: [
-              e.icon && /* @__PURE__ */ r(p, { icon: e.icon, size: 16 }),
+              e.icon && /* @__PURE__ */ r(_, { icon: e.icon, size: 16 }),
               e.label && /* @__PURE__ */ r("div", { className: m.itemLabel, children: e.label })
             ]
           },

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import * as PhosphorIcons from "@phosphor-icons/react";
+type ToastPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+interface ToastProps {
+    title: string;
+    icon?: keyof typeof PhosphorIcons;
+    children?: ReactNode;
+    closable?: boolean;
+    error?: boolean;
+    success?: boolean;
+    autoCloseDelay?: number;
+    open?: boolean;
+    position?: ToastPosition;
+    onClose?: () => void;
+}
+export declare const Toast: ({ title, icon, children, closable, error, success, autoCloseDelay, open, position, onClose }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/toast/Toast.js

@@ -0,0 +1,68 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as g, useEffect as h } from "react";
+import { Icon as w } from "../icon/Icon.js";
+import { IconButton as C } from "../icon-button/IconButton.js";
+import '../../styles/Toast.css';const I = "_toast_10w18_30", z = "_base_10w18_69", j = "_success_10w18_73", k = "_error_10w18_77", B = "_closing_10w18_104", t = {
+  toast: I,
+  "toast-header": "_toast-header_10w18_49",
+  "toast-title-container": "_toast-title-container_10w18_55",
+  "toast-title": "_toast-title_10w18_55",
+  "toast-content": "_toast-content_10w18_65",
+  base: z,
+  success: j,
+  error: k,
+  "bottom-right": "_bottom-right_10w18_84",
+  "bottom-left": "_bottom-left_10w18_89",
+  "top-right": "_top-right_10w18_94",
+  "top-left": "_top-left_10w18_99",
+  closing: B
+}, X = ({
+  title: d,
+  icon: b,
+  children: l,
+  closable: i = !0,
+  error: r = !1,
+  success: c = !1,
+  autoCloseDelay: _ = 3e3,
+  open: s = !0,
+  position: v = "bottom-right",
+  // ✅ Valeur par défaut
+  onClose: f
+}) => {
+  const [p, m] = g(s), [N, u] = g(!1);
+  let o = "";
+  r ? o = t.error : c ? o = t.success : o = t.base;
+  const T = r ? "Warning" : c ? "CheckCircle" : "Info", $ = r ? "var(--color-error-500)" : c ? "var(--color-succes-500)" : "var(--general-text-icons)", a = () => {
+    u(!0), setTimeout(() => {
+      m(!1), f && f();
+    }, 300);
+  };
+  return h(() => {
+    s ? (m(!0), u(!1)) : a();
+  }, [s]), h(() => {
+    if (!i && s) {
+      const x = setTimeout(() => {
+        a();
+      }, _);
+      return () => clearTimeout(x);
+    }
+  }, [i, _, s]), p ? /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${t.toast} ${o} ${N ? t.closing : ""} ${t[v]}`,
+      children: [
+        /* @__PURE__ */ n("div", { className: t["toast-header"], children: [
+          /* @__PURE__ */ n("div", { className: t["toast-title-container"], children: [
+            /* @__PURE__ */ e(w, { icon: b || T, size: 24, color: $ }),
+            /* @__PURE__ */ e("span", { className: t["toast-title"], children: d })
+          ] }),
+          i && /* @__PURE__ */ e(C, { mode: "ghost", size: "s", onClick: a, children: /* @__PURE__ */ e(w, { icon: "X", size: 16, weight: "regular" }) })
+        ] }),
+        l && /* @__PURE__ */ e("div", { className: `${t["toast-content"]}`, children: l })
+      ]
+    }
+  ) : null;
+};
+export {
+  X as Toast
+};

package/dist/styles/Toast.css

@@ -0,0 +1 @@
+._toast_10w18_30{padding:.625rem;display:inline-flex;flex-direction:column;justify-content:start;align-items:start;border-radius:.25rem;border:1px solid var(--general-border-window);background:var(--background-primary);box-shadow:0 4px 4px 0 var(--shadow-color-lowest);width:auto;max-width:80vw;min-width:200px;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease;position:fixed;z-index:9999}._toast-header_10w18_49{display:flex;justify-content:space-between;align-items:center;width:100%}._toast-title-container_10w18_55{display:flex;align-items:center;gap:8px}._toast-title_10w18_55{font-size:1em;font-style:normal;font-weight:700}._toast-content_10w18_65{padding-left:2rem}._base_10w18_69 ._toast-title_10w18_55{color:var(--general-text-icons)}._success_10w18_73 ._toast-title_10w18_55{color:var(--color-succes-500)}._error_10w18_77{border-color:var(--color-error-500)}._error_10w18_77 ._toast-title_10w18_55{color:var(--color-error-500)}._bottom-right_10w18_84{bottom:1.25rem;right:1.25rem}._bottom-left_10w18_89{bottom:1.25rem;left:1.25rem}._top-right_10w18_94{top:1.25rem;right:1.25rem}._top-left_10w18_99{top:1.25rem;left:1.25rem}._closing_10w18_104{opacity:0;transform:translateY(10px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.1.40",
+  "version": "1.2.0",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",