design-zystem 1.0.371 → 1.0.373

package/dist/ui/index.d.mts

@@ -1135,13 +1135,17 @@ interface TagBubbleProps {
     active?: boolean;
     activeColor?: ColorToken;
     inactiveColor?: ColorToken;
+    /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
+    activeFill?: boolean;
+    /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
+    pill?: boolean;
     count?: number | string | null;
     countColor?: ColorToken;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
 
 interface GanttDay {
     key: string | number;

package/dist/ui/index.d.ts

@@ -1135,13 +1135,17 @@ interface TagBubbleProps {
     active?: boolean;
     activeColor?: ColorToken;
     inactiveColor?: ColorToken;
+    /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
+    activeFill?: boolean;
+    /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
+    pill?: boolean;
     count?: number | string | null;
     countColor?: ColorToken;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
 
 interface GanttDay {
     key: string | number;

package/dist/ui/index.js

@@ -5209,18 +5209,66 @@ var DOT_CLASS = {
   "orange-600": "bg-orange-600",
   "purple-700": "bg-purple-700"
 };
+var LIGHT_BG_CLASS = {
+  "blue-700": "bg-blue-50",
+  "blue-900": "bg-blue-50",
+  "blue-950": "bg-blue-50",
+  "red-900": "bg-red-50",
+  "red-500": "bg-red-50",
+  "green-700": "bg-green-50",
+  "green-100": "bg-green-50",
+  "grey-600": "bg-grey-100",
+  "yellow-500": "bg-yellow-50",
+  "yellow-300": "bg-yellow-50",
+  "yellow-200": "bg-yellow-50",
+  "orange-600": "bg-orange-50",
+  "purple-700": "bg-purple-50"
+};
+var TEXT_CLASS2 = {
+  "blue-700": "text-blue-700",
+  "blue-900": "text-blue-900",
+  "blue-950": "text-blue-950",
+  "red-900": "text-red-900",
+  "red-500": "text-red-500",
+  "green-700": "text-green-700",
+  "green-100": "text-green-100",
+  "grey-600": "text-grey-600",
+  "yellow-500": "text-yellow-500",
+  "yellow-300": "text-yellow-300",
+  "yellow-200": "text-yellow-200",
+  "orange-600": "text-orange-600",
+  "purple-700": "text-purple-700"
+};
+var BORDER_CLASS = {
+  "blue-700": "border-blue-700",
+  "blue-900": "border-blue-900",
+  "blue-950": "border-blue-950",
+  "red-900": "border-red-900",
+  "red-500": "border-red-500",
+  "green-700": "border-green-700",
+  "green-100": "border-green-100",
+  "grey-600": "border-grey-600",
+  "yellow-500": "border-yellow-500",
+  "yellow-300": "border-yellow-300",
+  "yellow-200": "border-yellow-200",
+  "orange-600": "border-orange-600",
+  "purple-700": "border-purple-700"
+};
 var TagBubble = ({
   label,
   hideDot = false,
   active = false,
   activeColor = "blue-700",
   inactiveColor = "grey-600",
+  activeFill = false,
+  pill = false,
   count,
   countColor = "green-700",
   onClick,
   className
 }) => {
   const showCount = count !== void 0 && count !== null;
+  const filled = activeFill && active;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     RadixToggle.Root,
     {
@@ -5228,7 +5276,13 @@ var TagBubble = ({
       pressed: active,
       onClick,
       className: cn(
-        "inline-flex items-center gap-2 rounded-[6px] border border-grey-200 bg-white px-2.5 py-1.5 outline-none",
+        "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
+        pill ? "rounded-full" : "rounded-[6px]",
+        filled ? cn(
+          LIGHT_BG_CLASS[activeColor],
+          BORDER_CLASS[activeColor],
+          "border-2"
+        ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
         className
       ),
@@ -5242,7 +5296,16 @@ var TagBubble = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "whitespace-nowrap text-xs font-semibold text-neutral-800", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          "span",
+          {
+            className: cn(
+              "whitespace-nowrap text-xs font-semibold",
+              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+            ),
+            children: label
+          }
+        ),
         showCount && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Badge, { theme: countColor, size: "s", children: count })
       ]
     }

package/dist/ui/index.mjs

@@ -5045,18 +5045,66 @@ var DOT_CLASS = {
   "orange-600": "bg-orange-600",
   "purple-700": "bg-purple-700"
 };
+var LIGHT_BG_CLASS = {
+  "blue-700": "bg-blue-50",
+  "blue-900": "bg-blue-50",
+  "blue-950": "bg-blue-50",
+  "red-900": "bg-red-50",
+  "red-500": "bg-red-50",
+  "green-700": "bg-green-50",
+  "green-100": "bg-green-50",
+  "grey-600": "bg-grey-100",
+  "yellow-500": "bg-yellow-50",
+  "yellow-300": "bg-yellow-50",
+  "yellow-200": "bg-yellow-50",
+  "orange-600": "bg-orange-50",
+  "purple-700": "bg-purple-50"
+};
+var TEXT_CLASS2 = {
+  "blue-700": "text-blue-700",
+  "blue-900": "text-blue-900",
+  "blue-950": "text-blue-950",
+  "red-900": "text-red-900",
+  "red-500": "text-red-500",
+  "green-700": "text-green-700",
+  "green-100": "text-green-100",
+  "grey-600": "text-grey-600",
+  "yellow-500": "text-yellow-500",
+  "yellow-300": "text-yellow-300",
+  "yellow-200": "text-yellow-200",
+  "orange-600": "text-orange-600",
+  "purple-700": "text-purple-700"
+};
+var BORDER_CLASS = {
+  "blue-700": "border-blue-700",
+  "blue-900": "border-blue-900",
+  "blue-950": "border-blue-950",
+  "red-900": "border-red-900",
+  "red-500": "border-red-500",
+  "green-700": "border-green-700",
+  "green-100": "border-green-100",
+  "grey-600": "border-grey-600",
+  "yellow-500": "border-yellow-500",
+  "yellow-300": "border-yellow-300",
+  "yellow-200": "border-yellow-200",
+  "orange-600": "border-orange-600",
+  "purple-700": "border-purple-700"
+};
 var TagBubble = ({
   label,
   hideDot = false,
   active = false,
   activeColor = "blue-700",
   inactiveColor = "grey-600",
+  activeFill = false,
+  pill = false,
   count,
   countColor = "green-700",
   onClick,
   className
 }) => {
   const showCount = count !== void 0 && count !== null;
+  const filled = activeFill && active;
   return /* @__PURE__ */ jsxs35(
     RadixToggle.Root,
     {
@@ -5064,7 +5112,13 @@ var TagBubble = ({
       pressed: active,
       onClick,
       className: cn(
-        "inline-flex items-center gap-2 rounded-[6px] border border-grey-200 bg-white px-2.5 py-1.5 outline-none",
+        "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
+        pill ? "rounded-full" : "rounded-[6px]",
+        filled ? cn(
+          LIGHT_BG_CLASS[activeColor],
+          BORDER_CLASS[activeColor],
+          "border-2"
+        ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
         className
       ),
@@ -5078,7 +5132,16 @@ var TagBubble = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx70("span", { className: "whitespace-nowrap text-xs font-semibold text-neutral-800", children: label }),
+        /* @__PURE__ */ jsx70(
+          "span",
+          {
+            className: cn(
+              "whitespace-nowrap text-xs font-semibold",
+              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+            ),
+            children: label
+          }
+        ),
         showCount && /* @__PURE__ */ jsx70(Badge, { theme: countColor, size: "s", children: count })
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.371",
+  "version": "1.0.373",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",