design-zystem 1.0.370 → 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;
@@ -1534,6 +1538,7 @@ declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeC
  *   - "weekdayTime": jour/date + heure (24h)
  *   - "time": heure seule (24h) (ex: 14:32)
  *   - "longDate": jour + mois complet + année, sans jour de semaine (ex: 16 mai 2024)
+ *   - "dayMonth": jour + mois complet, sans jour de semaine (année si différente) (ex: 16 mai)
  *   - "dateISO": format ISO YYYY-MM-DD (safe timezone pour le backend)
  */
 declare const formatDate: (dateString: Date | string | number | null | undefined, type?: string, language?: string) => string;

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;
@@ -1534,6 +1538,7 @@ declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeC
  *   - "weekdayTime": jour/date + heure (24h)
  *   - "time": heure seule (24h) (ex: 14:32)
  *   - "longDate": jour + mois complet + année, sans jour de semaine (ex: 16 mai 2024)
+ *   - "dayMonth": jour + mois complet, sans jour de semaine (année si différente) (ex: 16 mai)
  *   - "dateISO": format ISO YYYY-MM-DD (safe timezone pour le backend)
  */
 declare const formatDate: (dateString: Date | string | number | null | undefined, type?: string, language?: string) => string;

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 })
       ]
     }
@@ -7094,6 +7123,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "time":
       return formatTime2();
+    case "dayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format2(__spreadValues({
+        day: "numeric",
+        month: "long"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "longDate":
       return format2({ day: "numeric", month: "long", year: "numeric" });
     default:

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 })
       ]
     }
@@ -6944,6 +6973,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "time":
       return formatTime2();
+    case "dayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format2(__spreadValues({
+        day: "numeric",
+        month: "long"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "longDate":
       return format2({ day: "numeric", month: "long", year: "numeric" });
     default:

package/package.json

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