design-zystem 1.0.422 → 1.0.424

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';
@@ -55,6 +56,9 @@ type ColorToken = (typeof COLOR_TOKENS)[number];
 type HexColor = `#${string}`;
 
 declare const boxVariants: (props?: ({
+    background?: "white" | "grey-100" | "grey-200" | null | undefined;
+    bordered?: boolean | null | undefined;
+    clickable?: boolean | null | undefined;
     padding?: "none" | "sm" | "md" | "lg" | null | undefined;
     radius?: "none" | "sm" | "md" | null | undefined;
     hasShadow?: boolean | null | undefined;
@@ -1116,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: {
@@ -1353,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;
@@ -1834,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';
@@ -55,6 +56,9 @@ type ColorToken = (typeof COLOR_TOKENS)[number];
 type HexColor = `#${string}`;
 
 declare const boxVariants: (props?: ({
+    background?: "white" | "grey-100" | "grey-200" | null | undefined;
+    bordered?: boolean | null | undefined;
+    clickable?: boolean | null | undefined;
     padding?: "none" | "sm" | "md" | "lg" | null | undefined;
     radius?: "none" | "sm" | "md" | null | undefined;
     hasShadow?: boolean | null | undefined;
@@ -1116,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: {
@@ -1353,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;
@@ -1834,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

@@ -508,8 +508,21 @@ var ACCENT_CLASS = {
   "orange-600": "border-l-4 border-l-orange-600",
   "purple-700": "border-l-4 border-l-purple-700"
 };
-var boxVariants = (0, import_class_variance_authority2.cva)("border border-grey-300 bg-white", {
+var boxVariants = (0, import_class_variance_authority2.cva)("", {
   variants: {
+    background: {
+      white: "bg-white",
+      "grey-100": "bg-grey-100",
+      "grey-200": "bg-grey-200"
+    },
+    bordered: {
+      true: "border border-grey-300",
+      false: "border-0"
+    },
+    clickable: {
+      true: "cursor-pointer",
+      false: ""
+    },
     padding: {
       none: "p-0",
       sm: "p-2",
@@ -526,11 +539,21 @@ var boxVariants = (0, import_class_variance_authority2.cva)("border border-grey-
       false: ""
     }
   },
-  defaultVariants: { padding: "md", radius: "md", hasShadow: false }
+  defaultVariants: {
+    background: "white",
+    bordered: true,
+    clickable: false,
+    padding: "md",
+    radius: "md",
+    hasShadow: false
+  }
 });
 var Box = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
+      background,
+      bordered,
+      clickable,
       padding,
       radius,
       hasShadow,
@@ -540,6 +563,9 @@ var Box = (0, import_react2.forwardRef)(
       className,
       style
     } = _b, props = __objRest(_b, [
+      "background",
+      "bordered",
+      "clickable",
       "padding",
       "radius",
       "hasShadow",
@@ -554,7 +580,14 @@ var Box = (0, import_react2.forwardRef)(
       __spreadValues({
         ref,
         className: cn(
-          boxVariants({ padding, radius, hasShadow }),
+          boxVariants({
+            background,
+            bordered,
+            clickable,
+            padding,
+            radius,
+            hasShadow
+          }),
           ACCENT_CLASS[accent],
           className
         ),
@@ -5397,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
     }
   );
 };
@@ -6368,6 +6402,7 @@ var TagBubble = (_a) => {
     inactiveColor = "grey-600",
     activeFill = false,
     pill = false,
+    size = "s",
     count,
     countColor = "green-700",
     onClick,
@@ -6380,6 +6415,7 @@ var TagBubble = (_a) => {
     "inactiveColor",
     "activeFill",
     "pill",
+    "size",
     "count",
     "countColor",
     "onClick",
@@ -6399,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"
@@ -6521,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:

package/dist/ui/index.mjs

@@ -301,8 +301,21 @@ var ACCENT_CLASS = {
   "orange-600": "border-l-4 border-l-orange-600",
   "purple-700": "border-l-4 border-l-purple-700"
 };
-var boxVariants = cva2("border border-grey-300 bg-white", {
+var boxVariants = cva2("", {
   variants: {
+    background: {
+      white: "bg-white",
+      "grey-100": "bg-grey-100",
+      "grey-200": "bg-grey-200"
+    },
+    bordered: {
+      true: "border border-grey-300",
+      false: "border-0"
+    },
+    clickable: {
+      true: "cursor-pointer",
+      false: ""
+    },
     padding: {
       none: "p-0",
       sm: "p-2",
@@ -319,11 +332,21 @@ var boxVariants = cva2("border border-grey-300 bg-white", {
       false: ""
     }
   },
-  defaultVariants: { padding: "md", radius: "md", hasShadow: false }
+  defaultVariants: {
+    background: "white",
+    bordered: true,
+    clickable: false,
+    padding: "md",
+    radius: "md",
+    hasShadow: false
+  }
 });
 var Box = forwardRef2(
   (_a, ref) => {
     var _b = _a, {
+      background,
+      bordered,
+      clickable,
       padding,
       radius,
       hasShadow,
@@ -333,6 +356,9 @@ var Box = forwardRef2(
       className,
       style
     } = _b, props = __objRest(_b, [
+      "background",
+      "bordered",
+      "clickable",
       "padding",
       "radius",
       "hasShadow",
@@ -347,7 +373,14 @@ var Box = forwardRef2(
       __spreadValues({
         ref,
         className: cn(
-          boxVariants({ padding, radius, hasShadow }),
+          boxVariants({
+            background,
+            bordered,
+            clickable,
+            padding,
+            radius,
+            hasShadow
+          }),
           ACCENT_CLASS[accent],
           className
         ),
@@ -5213,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
     }
   );
 };
@@ -6190,6 +6224,7 @@ var TagBubble = (_a) => {
     inactiveColor = "grey-600",
     activeFill = false,
     pill = false,
+    size = "s",
     count,
     countColor = "green-700",
     onClick,
@@ -6202,6 +6237,7 @@ var TagBubble = (_a) => {
     "inactiveColor",
     "activeFill",
     "pill",
+    "size",
     "count",
     "countColor",
     "onClick",
@@ -6221,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"
@@ -6343,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:

package/package.json

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