design-zystem 1.0.372 → 1.0.374

package/dist/ui/index.d.mts

@@ -1135,7 +1135,7 @@ interface TagBubbleProps {
     active?: boolean;
     activeColor?: ColorToken;
     inactiveColor?: ColorToken;
-    /** Actif : fond plein `activeColor` + texte blanc, au lieu du simple point de couleur. */
+    /** 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;

package/dist/ui/index.d.ts

@@ -1135,7 +1135,7 @@ interface TagBubbleProps {
     active?: boolean;
     activeColor?: ColorToken;
     inactiveColor?: ColorToken;
-    /** Actif : fond plein `activeColor` + texte blanc, au lieu du simple point de couleur. */
+    /** 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;

package/dist/ui/index.js

@@ -2907,7 +2907,7 @@ var Table = ({
     "div",
     {
       className: cn(
-        "overflow-auto rounded-lg border border-grey-300",
+        "flex flex-col overflow-auto rounded-lg border border-grey-300",
         className
       ),
       style: {
@@ -5209,20 +5209,50 @@ 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 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,
@@ -5248,7 +5278,11 @@ var TagBubble = ({
       className: cn(
         "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",
+        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
       ),
@@ -5258,7 +5292,7 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              filled ? "bg-white" : DOT_CLASS[active ? activeColor : inactiveColor]
+              DOT_CLASS[active ? activeColor : inactiveColor]
             )
           }
         ),
@@ -5267,7 +5301,7 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? "text-white" : "text-neutral-800"
+              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
             children: label
           }

package/dist/ui/index.mjs

@@ -2730,7 +2730,7 @@ var Table = ({
     "div",
     {
       className: cn(
-        "overflow-auto rounded-lg border border-grey-300",
+        "flex flex-col overflow-auto rounded-lg border border-grey-300",
         className
       ),
       style: {
@@ -5045,20 +5045,50 @@ 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 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,
@@ -5084,7 +5114,11 @@ var TagBubble = ({
       className: cn(
         "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",
+        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
       ),
@@ -5094,7 +5128,7 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              filled ? "bg-white" : DOT_CLASS[active ? activeColor : inactiveColor]
+              DOT_CLASS[active ? activeColor : inactiveColor]
             )
           }
         ),
@@ -5103,7 +5137,7 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? "text-white" : "text-neutral-800"
+              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
             children: label
           }

package/package.json

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