design-zystem 1.0.371 → 1.0.372

package/dist/ui/index.d.mts

@@ -1135,13 +1135,17 @@ interface TagBubbleProps {
     active?: boolean;
     activeColor?: ColorToken;
     inactiveColor?: ColorToken;
+    /** Actif : fond plein `activeColor` + texte blanc, au lieu du simple point de couleur. */
+    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 : fond plein `activeColor` + texte blanc, au lieu du simple point de couleur. */
+    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,36 @@ var DOT_CLASS = {
   "orange-600": "bg-orange-600",
   "purple-700": "bg-purple-700"
 };
+var FILL_BG_CLASS = {
+  "blue-700": "bg-blue-700",
+  "blue-900": "bg-blue-900",
+  "blue-950": "bg-blue-950",
+  "red-900": "bg-red-900",
+  "red-500": "bg-red-500",
+  "green-700": "bg-green-700",
+  "green-100": "bg-green-100",
+  "grey-600": "bg-grey-600",
+  "yellow-500": "bg-yellow-500",
+  "yellow-300": "bg-yellow-300",
+  "yellow-200": "bg-yellow-200",
+  "orange-600": "bg-orange-600",
+  "purple-700": "bg-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 +5246,9 @@ 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(FILL_BG_CLASS[activeColor], "border-transparent") : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
         className
       ),
@@ -5238,11 +5258,20 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
+              filled ? "bg-white" : DOT_CLASS[active ? activeColor : inactiveColor]
             )
           }
         ),
-        /* @__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-white" : "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,36 @@ var DOT_CLASS = {
   "orange-600": "bg-orange-600",
   "purple-700": "bg-purple-700"
 };
+var FILL_BG_CLASS = {
+  "blue-700": "bg-blue-700",
+  "blue-900": "bg-blue-900",
+  "blue-950": "bg-blue-950",
+  "red-900": "bg-red-900",
+  "red-500": "bg-red-500",
+  "green-700": "bg-green-700",
+  "green-100": "bg-green-100",
+  "grey-600": "bg-grey-600",
+  "yellow-500": "bg-yellow-500",
+  "yellow-300": "bg-yellow-300",
+  "yellow-200": "bg-yellow-200",
+  "orange-600": "bg-orange-600",
+  "purple-700": "bg-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 +5082,9 @@ 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(FILL_BG_CLASS[activeColor], "border-transparent") : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
         className
       ),
@@ -5074,11 +5094,20 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
+              filled ? "bg-white" : DOT_CLASS[active ? activeColor : inactiveColor]
             )
           }
         ),
-        /* @__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-white" : "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.372",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",