design-zystem 1.0.423 → 1.0.425

package/dist/index.d.mts

@@ -1270,6 +1270,7 @@ declare const GanttSwatch: ({ color, filled, }: {
  *   - "weekdayTime": weekday/date + time (24h)
  *   - "longDate": day + full month + year, no weekday (ex: 16 mai 2024)
  *   - "dayMonth": day + full month, no weekday (year only if different)
+ *   - "shortDayMonth": DD/MM, year only if different (ex: 16/05, 16/05/2024)
  *   - "dateISO": ISO format YYYY-MM-DD (timezone-safe for backend)
  */
 declare const formatDate: (dateString: Date | string | number | null | undefined, type?: string, language?: string) => string;

package/dist/index.d.ts

@@ -1270,6 +1270,7 @@ declare const GanttSwatch: ({ color, filled, }: {
  *   - "weekdayTime": weekday/date + time (24h)
  *   - "longDate": day + full month + year, no weekday (ex: 16 mai 2024)
  *   - "dayMonth": day + full month, no weekday (year only if different)
+ *   - "shortDayMonth": DD/MM, year only if different (ex: 16/05, 16/05/2024)
  *   - "dateISO": ISO format YYYY-MM-DD (timezone-safe for backend)
  */
 declare const formatDate: (dateString: Date | string | number | null | undefined, type?: string, language?: string) => string;

package/dist/index.js

@@ -6899,6 +6899,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
         month: "long"
       }, dateYear !== currentYear && { year: "numeric" }));
     }
+    case "shortDayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format(__spreadValues({
+        day: "2-digit",
+        month: "2-digit"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "monthYear":
       return format({ month: "long", year: "numeric" });
     default:

package/dist/index.mjs

@@ -6776,6 +6776,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
         month: "long"
       }, dateYear !== currentYear && { year: "numeric" }));
     }
+    case "shortDayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format(__spreadValues({
+        day: "2-digit",
+        month: "2-digit"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "monthYear":
       return format({ month: "long", year: "numeric" });
     default:

package/dist/ui/index.d.mts

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { ToasterProps } from 'sonner';
 import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
@@ -1119,6 +1120,8 @@ interface ToastOptions {
     timeOut?: number;
     /** Remplace le toast déjà affiché sous cet id (ex. celui renvoyé par `toast.loading`) au lieu d'en ouvrir un nouveau. */
     id?: ToastId;
+    /** Coin d'affichage de ce toast seul, ex. `bottom-left` pour ne pas couvrir le pied d'un drawer ouvert à droite. */
+    position?: ToasterProps['position'];
 }
 /** API impérative, appelable hors composant React. Monte `<Toaster />` une fois à la racine de l'app. */
 declare const toast: {
@@ -1356,13 +1359,15 @@ interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggl
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
     pill?: boolean;
+    /** `m` : hauteur fixe de 36 px, alignée sur les champs et boutons d'une barre de filtres. */
+    size?: 's' | 'm';
     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, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, size, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;
@@ -1837,6 +1842,7 @@ declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeC
  *   - "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)
+ *   - "shortDayMonth": JJ/MM, année si différente (ex: 16/05, 16/05/2024)
  *   - "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

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { ToasterProps } from 'sonner';
 import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
@@ -1119,6 +1120,8 @@ interface ToastOptions {
     timeOut?: number;
     /** Remplace le toast déjà affiché sous cet id (ex. celui renvoyé par `toast.loading`) au lieu d'en ouvrir un nouveau. */
     id?: ToastId;
+    /** Coin d'affichage de ce toast seul, ex. `bottom-left` pour ne pas couvrir le pied d'un drawer ouvert à droite. */
+    position?: ToasterProps['position'];
 }
 /** API impérative, appelable hors composant React. Monte `<Toaster />` une fois à la racine de l'app. */
 declare const toast: {
@@ -1356,13 +1359,15 @@ interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggl
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
     pill?: boolean;
+    /** `m` : hauteur fixe de 36 px, alignée sur les champs et boutons d'une barre de filtres. */
+    size?: 's' | 'm';
     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, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, size, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;
@@ -1837,6 +1842,7 @@ declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeC
  *   - "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)
+ *   - "shortDayMonth": JJ/MM, année si différente (ex: 16/05, 16/05/2024)
  *   - "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

@@ -5430,7 +5430,8 @@ var show = (type, message, options) => {
     ),
     {
       id: options == null ? void 0 : options.id,
-      duration: timeOut
+      duration: timeOut,
+      position: options == null ? void 0 : options.position
     }
   );
 };
@@ -6401,6 +6402,7 @@ var TagBubble = (_a) => {
     inactiveColor = "grey-600",
     activeFill = false,
     pill = false,
+    size = "s",
     count,
     countColor = "green-700",
     onClick,
@@ -6413,6 +6415,7 @@ var TagBubble = (_a) => {
     "inactiveColor",
     "activeFill",
     "pill",
+    "size",
     "count",
     "countColor",
     "onClick",
@@ -6432,6 +6435,7 @@ var TagBubble = (_a) => {
       className: cn(
         "inline-flex items-center justify-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
+        size === "m" && "h-9",
         filled ? cn(
           isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
@@ -6554,6 +6558,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "longDate":
       return format2({ day: "numeric", month: "long", year: "numeric" });
+    case "shortDayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format2(__spreadValues({
+        day: "2-digit",
+        month: "2-digit"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "monthYear":
       return format2({ month: "long", year: "numeric" });
     default:
@@ -8573,7 +8585,7 @@ var DatePicker = ({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(RadixPopover6.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Layout, { column: true, gap: 1.5, align: "end", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Layout, { column: true, gap: 1.5, align, className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Layout, { align: "center", gap: 1.5, width: "auto", children: [
         /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(RadixPopover6.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           "button",
@@ -8615,7 +8627,10 @@ var DatePicker = ({
         {
           type: "button",
           onClick: handleReset,
-          className: "ml-auto flex w-fit items-center gap-1.5 rounded-[6px] border border-blue-700 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700",
+          className: cn(
+            "flex w-fit items-center gap-1.5 rounded-[6px] border border-blue-700 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700",
+            align === "end" && "ml-auto"
+          ),
           children: displayText
         }
       )

package/dist/ui/index.mjs

@@ -5246,7 +5246,8 @@ var show = (type, message, options) => {
     ),
     {
       id: options == null ? void 0 : options.id,
-      duration: timeOut
+      duration: timeOut,
+      position: options == null ? void 0 : options.position
     }
   );
 };
@@ -6223,6 +6224,7 @@ var TagBubble = (_a) => {
     inactiveColor = "grey-600",
     activeFill = false,
     pill = false,
+    size = "s",
     count,
     countColor = "green-700",
     onClick,
@@ -6235,6 +6237,7 @@ var TagBubble = (_a) => {
     "inactiveColor",
     "activeFill",
     "pill",
+    "size",
     "count",
     "countColor",
     "onClick",
@@ -6254,6 +6257,7 @@ var TagBubble = (_a) => {
       className: cn(
         "inline-flex items-center justify-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
+        size === "m" && "h-9",
         filled ? cn(
           isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
@@ -6376,6 +6380,14 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "longDate":
       return format2({ day: "numeric", month: "long", year: "numeric" });
+    case "shortDayMonth": {
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const dateYear = date.getFullYear();
+      return format2(__spreadValues({
+        day: "2-digit",
+        month: "2-digit"
+      }, dateYear !== currentYear && { year: "numeric" }));
+    }
     case "monthYear":
       return format2({ month: "long", year: "numeric" });
     default:
@@ -8410,7 +8422,7 @@ var DatePicker = ({
     ] });
   }
   return /* @__PURE__ */ jsxs58(RadixPopover6.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs58(Layout, { column: true, gap: 1.5, align: "end", className, children: [
+    /* @__PURE__ */ jsxs58(Layout, { column: true, gap: 1.5, align, className, children: [
       /* @__PURE__ */ jsxs58(Layout, { align: "center", gap: 1.5, width: "auto", children: [
         /* @__PURE__ */ jsx96(RadixPopover6.Trigger, { asChild: true, children: /* @__PURE__ */ jsx96(
           "button",
@@ -8452,7 +8464,10 @@ var DatePicker = ({
         {
           type: "button",
           onClick: handleReset,
-          className: "ml-auto flex w-fit items-center gap-1.5 rounded-[6px] border border-blue-700 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700",
+          className: cn(
+            "flex w-fit items-center gap-1.5 rounded-[6px] border border-blue-700 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700",
+            align === "end" && "ml-auto"
+          ),
           children: displayText
         }
       )

package/package.json

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