@situaction/traq-ui-ste 1.1.41 → 1.2.1

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/main.d.ts

@@ -28,4 +28,5 @@ export { SidePanelHeader } from './components/panel/side-panel-header/SidePanelH
 export { InputLabel } from './components/input-label/InputLabel';
 export { EditableField } from './components/editable-field/EditableField';
 export { EditableSelect } from './components/editable-select/EditableSelect';
+export { Toast } from './components/toast/Toast';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -2,10 +2,10 @@ import { Button as t } from "./components/button/Button.js";
 import { ButtonControlledScroll as p } from "./components/buttonControledScroll/ButtonControlledScroll.js";
 import { Input as f } from "./components/input/Input.js";
 import { Tabs as i } from "./components/tabs/Tabs.js";
-import { IconButton as d } from "./components/icon-button/IconButton.js";
+import { IconButton as a } from "./components/icon-button/IconButton.js";
 import { Tag as c } from "./components/tag/Tag.js";
 import { Title as u } from "./components/title/Title.js";
-import { TagCounter as S } from "./components/tag-counter/TagCounter.js";
+import { TagCounter as I } from "./components/tag-counter/TagCounter.js";
 import { Checkbox as C } from "./components/checkbox/Checkbox.js";
 import { Tooltip as h } from "./components/tooltip/Tooltip.js";
 import { Select as g } from "./components/select/Select.js";
@@ -27,7 +27,8 @@ import { SidePanelHeader as $ } from "./components/panel/side-panel-header/SideP
 import { InputLabel as ro } from "./components/input-label/InputLabel.js";
 import { EditableField as to } from "./components/editable-field/EditableField.js";
 import { EditableSelect as po } from "./components/editable-select/EditableSelect.js";
-import { ThemeProvider as fo, useTheme as lo } from "./components/theme/ThemeContext.js";
+import { Toast as fo } from "./components/toast/Toast.js";
+import { ThemeProvider as io, useTheme as no } from "./components/theme/ThemeContext.js";
 import './styles/Size.css';/* empty css               */
 export {
   A as Accordion,
@@ -40,7 +41,7 @@ export {
   to as EditableField,
   po as EditableSelect,
   w as Icon,
-  d as IconButton,
+  a as IconButton,
   f as Input,
   ro as InputLabel,
   O as ListControls,
@@ -56,9 +57,10 @@ export {
   X as Switch,
   i as Tabs,
   c as Tag,
-  S as TagCounter,
-  fo as ThemeProvider,
+  I as TagCounter,
+  io as ThemeProvider,
   u as Title,
+  fo as Toast,
   h as Tooltip,
-  lo as useTheme
+  no as useTheme
 };

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.41",
+  "version": "1.2.1",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",