@situaction/traq-ui-ste 1.2.29 → 1.2.31

package/dist/components/select/Select.d.ts

@@ -4,6 +4,7 @@ import * as PhosphorIcons from "@phosphor-icons/react";
 export type SelectItem = {
     label?: string;
     icon?: keyof typeof PhosphorIcons | null;
+    sizeIcon?: number;
     value: string;
 };
 export interface SelectProps {

package/dist/components/select/Select.js

@@ -5,18 +5,18 @@ import { Input as G } from "../input/Input.js";
 import { IconButton as H } from "../icon-button/IconButton.js";
 import "../accordion/Accordion.js";
 import { Icon as _ } from "../icon/Icon.js";
-import { Modal as J } from "../modal/Modal.js";
+import { Modal as I } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
-const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_133eb_78", Z = "_selectList_133eb_82", O = "_modal_133eb_91", I = "_itemLabel_133eb_98", ee = "_searchWrapper_133eb_103", te = "_noResults_133eb_109", f = {
-  selectContainer: Q,
-  children: X,
-  active: Y,
-  selectList: Z,
-  modal: O,
-  itemLabel: I,
+const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_133eb_78", Y = "_selectList_133eb_82", Z = "_modal_133eb_91", O = "_itemLabel_133eb_98", ee = "_searchWrapper_133eb_103", te = "_noResults_133eb_109", f = {
+  selectContainer: J,
+  children: Q,
+  active: X,
+  selectList: Y,
+  modal: Z,
+  itemLabel: O,
   searchWrapper: ee,
   noResults: te
 }, me = ({
@@ -27,15 +27,15 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   onSelect: B,
   positionOverride: b,
   placeholder: x = "Sélectionner",
-  searchPlaceholder: V,
+  searchPlaceholder: U,
   autoCloseCondition: w,
-  searchable: z = !1,
+  searchable: V = !1,
   fullWidth: T = !1
 }) => {
   const [t, l] = y(!1), [A, K] = y({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [n, S] = y(k ?? null), [$, F] = y(""), u = v(null), j = v(null), N = v(null), P = v({}), D = v({}), p = v(null);
+  }), [n, S] = y(k ?? null), [$, F] = y(""), u = v(null), z = v(null), N = v(null), P = v({}), j = v({}), p = v(null);
   d(() => {
     S(k || null);
   }, [k]), d(() => {
@@ -85,7 +85,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
         "aria-haspopup": "listbox"
       }
     );
-  }, U = h.filter(
+  }, D = h.filter(
     (e) => String(e.label ?? "").toLowerCase().includes($.toLowerCase())
   ), [C, R] = y("");
   return d(() => {
@@ -137,7 +137,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
           return (a = o.label) == null ? void 0 : a.toLowerCase().startsWith(c);
         });
         if (i) {
-          const o = D.current[i.value];
+          const o = j.current[i.value];
           o && o.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
@@ -151,7 +151,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   }, [t, b]), d(() => {
     if (!t || !w) return;
     const e = (r) => {
-      const c = r.target, i = u.current, o = j.current;
+      const c = r.target, i = u.current, o = z.current;
       i && i.contains(c) || o && o.contains(c) || l(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e, { passive: !0 }), () => {
@@ -166,7 +166,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   }, [t, w]), /* @__PURE__ */ L("div", { className: f.selectContainer, children: [
     q(),
     /* @__PURE__ */ s(
-      J,
+      I,
       {
         anchorRef: u,
         open: t,
@@ -175,13 +175,13 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
         disableOverlay: !0,
         className: f.modal,
         autoCloseCondition: w,
-        children: /* @__PURE__ */ L("div", { ref: j, children: [
-          z && /* @__PURE__ */ L("div", { children: [
+        children: /* @__PURE__ */ L("div", { ref: z, children: [
+          V && /* @__PURE__ */ L("div", { children: [
             /* @__PURE__ */ s(
               G,
               {
                 type: "text",
-                placeholder: V,
+                placeholder: U,
                 status: "ghost",
                 sizeStyle: "s",
                 value: $,
@@ -191,22 +191,22 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
             /* @__PURE__ */ s("div", { className: f.searchWrapper })
           ] }),
           /* @__PURE__ */ L("div", { className: f.selectList, ref: N, children: [
-            U.map((e) => /* @__PURE__ */ L(
+            D.map((e) => /* @__PURE__ */ L(
               "div",
               {
-                ref: (r) => D.current[e.value] = r,
+                ref: (r) => j.current[e.value] = r,
                 className: `${f.children} ${(n == null ? void 0 : n.value) === e.value ? f.active : ""}`,
                 onClick: () => M(e),
                 role: "option",
                 "aria-selected": (n == null ? void 0 : n.value) === e.value,
                 children: [
-                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: 16 }),
+                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: e.sizeIcon ? e.sizeIcon : 20 }),
                   e.label && /* @__PURE__ */ s("div", { className: f.itemLabel, children: e.label })
                 ]
               },
               e.value
             )),
-            U.length === 0 && /* @__PURE__ */ s("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
+            D.length === 0 && /* @__PURE__ */ s("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
           ] })
         ] })
       }

package/dist/components/tag/Tag.d.ts

@@ -4,8 +4,12 @@ import { Color, Size } from '../interface';
 export interface TagProps {
     /** The text label for the tag. This will be displayed if provided. */
     label?: string;
-    /** The color of the tag, must be one of the defined valid colors. */
+    /** The design-system color name (uses --color-<name>-* tokens). */
     color?: Color;
+    /** Custom background color (hex/rgb/hsl/var(...)). Overrides `color` if provided. */
+    backgroundColor?: string;
+    /** Custom text color (hex/rgb/hsl/var(...)). If omitted, a default is used. */
+    textColor?: string;
     /** Indicates if the tag can be deleted; when true, a delete icon is shown. */
     deletable?: boolean;
     /** The size of the tag, which affects its styling. */
@@ -15,8 +19,4 @@ export interface TagProps {
     /** A callback function to be called when the tag is clicked. */
     onClick?: () => void;
 }
-/**
- * Tag component to display a label with customizable color, size, and content.
- * It can also display a delete icon if `deletable` is true.
- */
 export declare const Tag: FC<TagProps>;

package/dist/components/tag/Tag.js

@@ -1,67 +1,76 @@
-import { jsxs as g, jsx as a } from "react/jsx-runtime";
-import { useEffect as c } from "react";
-import '../../styles/Tag.css';const d = "_tag_qjzpb_6", u = "_icon_qjzpb_15", b = "_label_qjzpb_70", p = "_flexHorizontalCenter_qjzpb_74", x = "_flexHorizontal_qjzpb_74", t = {
-  tag: d,
-  icon: u,
-  "tag-children": "_tag-children_qjzpb_20",
-  "tag-size-xl": "_tag-size-xl_qjzpb_30",
-  "tag-size-xl-round": "_tag-size-xl-round_qjzpb_34",
-  "tag-size-l": "_tag-size-l_qjzpb_40",
-  "tag-size-l-round": "_tag-size-l-round_qjzpb_44",
-  "tag-size-m": "_tag-size-m_qjzpb_50",
-  "tag-size-m-round": "_tag-size-m-round_qjzpb_54",
-  "tag-size-s": "_tag-size-s_qjzpb_60",
-  "tag-size-s-round": "_tag-size-s-round_qjzpb_64",
-  label: b,
-  flexHorizontalCenter: p,
-  flexHorizontal: x
-}, s = ["light", "dark", "gray", "blue-gray", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], f = ({
-  label: n,
-  color: e,
-  deletable: r = !1,
-  size: o = "m",
-  children: i,
-  onClick: l
+import { jsxs as z, jsx as e } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import '../../styles/Tag.css';const u = "_tag_1k5bo_6", m = "_icon_1k5bo_15", x = "_label_1k5bo_74", f = "_flexHorizontalCenter_1k5bo_78", k = "_flexHorizontal_1k5bo_78", t = {
+  tag: u,
+  icon: m,
+  "tag-children": "_tag-children_1k5bo_24",
+  "tag-size-xl": "_tag-size-xl_1k5bo_34",
+  "tag-size-xl-round": "_tag-size-xl-round_1k5bo_38",
+  "tag-size-l": "_tag-size-l_1k5bo_44",
+  "tag-size-l-round": "_tag-size-l-round_1k5bo_48",
+  "tag-size-m": "_tag-size-m_1k5bo_54",
+  "tag-size-m-round": "_tag-size-m-round_1k5bo_58",
+  "tag-size-s": "_tag-size-s_1k5bo_64",
+  "tag-size-s-round": "_tag-size-s-round_1k5bo_68",
+  label: x,
+  flexHorizontalCenter: f,
+  flexHorizontal: k
+}, h = [
+  "light",
+  "dark",
+  "gray",
+  "blue-gray",
+  "blue",
+  "blue-situaction",
+  "purple",
+  "pink",
+  "gold",
+  "brown",
+  "emerald"
+], p = "blue-situaction", H = ({
+  label: s,
+  color: o,
+  backgroundColor: l,
+  textColor: r,
+  deletable: g = !1,
+  size: _ = "m",
+  children: n,
+  onClick: i
 }) => {
-  c(() => {
-    e && !s.includes(e) && console.warn(`Warning: The color "${e}" is not a valid option. Expected one of: ${s.join(", ")}.`);
-  }, [e]);
-  const _ = [
+  const c = [
     t.tag,
-    i && !n && t[`tag-size-${o}-round`],
-    t[`tag-size-${o}`],
+    n && !s ? t[`tag-size-${_}-round`] : "",
+    t[`tag-size-${_}`],
     t.flexHorizontalCenter
-  ].join(" "), z = {
-    "--dynamic-background": e && s.includes(e) ? `var(--color-${e}-200)` : "var(--color-blue-situaction-200)",
-    "--dynamic-color-text": e && s.includes(e) ? `var(--color-${e}-950)` : "var(--color-blue-situaction-950)"
-  };
-  return /* @__PURE__ */ g(
-    "div",
-    {
-      className: _,
-      style: z,
-      children: [
-        i && /* @__PURE__ */ a("div", { className: `${t.flexHorizontalCenter} ${t["tag-children"]}`, children: i }),
-        n && /* @__PURE__ */ a("label", { className: `${t.flexHorizontal} ${t.label}`, children: n }),
-        r && /* @__PURE__ */ a("div", { className: t.icon, onClick: () => l == null ? void 0 : l(), children: /* @__PURE__ */ a(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "10",
-            height: "10",
-            viewBox: "0 0 256 256",
-            children: /* @__PURE__ */ a(
-              "path",
-              {
-                d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
-              }
-            )
-          }
-        ) })
-      ]
-    }
-  );
+  ].filter(Boolean).join(" "), d = b(() => {
+    if (l)
+      return {
+        "--dynamic-background": l,
+        "--dynamic-color-text": r ?? "var(--color-blue-situaction-950)"
+      };
+    const a = o && h.includes(o) ? o : p;
+    return {
+      "--dynamic-background": `var(--color-${a}-200)`,
+      "--dynamic-color-text": `var(--color-${a}-950)`
+    };
+  }, [l, r, o]);
+  return /* @__PURE__ */ z("div", { className: c, style: d, children: [
+    n && /* @__PURE__ */ e("div", { className: `${t.flexHorizontalCenter} ${t["tag-children"]}`, children: n }),
+    s && /* @__PURE__ */ e("label", { className: `${t.flexHorizontal} ${t.label}`, children: s }),
+    g && /* @__PURE__ */ e(
+      "div",
+      {
+        className: t.icon,
+        onClick: (a) => {
+          a.stopPropagation(), i == null || i();
+        },
+        role: "button",
+        "aria-label": "Delete tag",
+        children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 256 256", children: /* @__PURE__ */ e("path", { d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }) })
+      }
+    )
+  ] });
 };
 export {
-  f as Tag
+  H as Tag
 };

package/dist/styles/Tag.css

@@ -1 +1 @@
-._tag_qjzpb_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag_qjzpb_6 ._icon_qjzpb_15{display:flex;cursor:pointer;fill:var(--dynamic-color-text)!important}._tag-children_qjzpb_20{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_qjzpb_30{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_qjzpb_34{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_qjzpb_40{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_qjzpb_44{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_qjzpb_50{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_qjzpb_54{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_qjzpb_60{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_qjzpb_64{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_qjzpb_6 ._label_qjzpb_70{white-space:nowrap}._flexHorizontalCenter_qjzpb_74{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_qjzpb_74{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+._tag_1k5bo_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag_1k5bo_6 ._icon_1k5bo_15{display:flex;cursor:pointer;fill:var(--dynamic-color-text)!important}._tag_1k5bo_6 ._icon_1k5bo_15 svg,._tag_1k5bo_6 ._icon_1k5bo_15 svg path{fill:var(--dynamic-color-text)!important}._tag-children_1k5bo_24{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_1k5bo_34{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_1k5bo_38{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_1k5bo_44{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_1k5bo_48{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_1k5bo_54{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_1k5bo_58{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_1k5bo_64{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_1k5bo_68{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_1k5bo_6 ._label_1k5bo_74{white-space:nowrap}._flexHorizontalCenter_1k5bo_78{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_1k5bo_78{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}

package/package.json

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