design-zystem 1.0.316 → 1.0.317

package/dist/ui/index.d.mts

@@ -509,8 +509,15 @@ interface TableHeaderCellProps {
     /** Séparateur vertical entre colonnes. */
     borderLeft?: boolean;
     className?: string;
+    /** Rend la cellule triable — affiche `children` dans un bouton avec une icône
+     * de tri (neutre / chevron haut / chevron bas selon `isSort`+`sortOrder`). */
+    useSort?: boolean;
+    /** Cette colonne est la colonne de tri actuellement active. */
+    isSort?: boolean;
+    sortOrder?: 'asc' | 'desc' | null;
+    onClick?: () => void;
 }
-declare const TableHeaderCell: ({ children, width, sticky, stickyOffset, surface, borderLeft, className, }: TableHeaderCellProps) => react.JSX.Element;
+declare const TableHeaderCell: ({ children, width, sticky, stickyOffset, surface, borderLeft, className, useSort, isSort, sortOrder, onClick, }: TableHeaderCellProps) => react.JSX.Element;
 
 interface TableRowProps {
     children?: ReactNode;

package/dist/ui/index.d.ts

@@ -509,8 +509,15 @@ interface TableHeaderCellProps {
     /** Séparateur vertical entre colonnes. */
     borderLeft?: boolean;
     className?: string;
+    /** Rend la cellule triable — affiche `children` dans un bouton avec une icône
+     * de tri (neutre / chevron haut / chevron bas selon `isSort`+`sortOrder`). */
+    useSort?: boolean;
+    /** Cette colonne est la colonne de tri actuellement active. */
+    isSort?: boolean;
+    sortOrder?: 'asc' | 'desc' | null;
+    onClick?: () => void;
 }
-declare const TableHeaderCell: ({ children, width, sticky, stickyOffset, surface, borderLeft, className, }: TableHeaderCellProps) => react.JSX.Element;
+declare const TableHeaderCell: ({ children, width, sticky, stickyOffset, surface, borderLeft, className, useSort, isSort, sortOrder, onClick, }: TableHeaderCellProps) => react.JSX.Element;
 
 interface TableRowProps {
     children?: ReactNode;

package/dist/ui/index.js

@@ -2600,7 +2600,11 @@ var TableHeaderCell = ({
   stickyOffset = "0px",
   surface = "grey-100",
   borderLeft = false,
-  className
+  className,
+  useSort = false,
+  isSort = false,
+  sortOrder = null,
+  onClick
 }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "th",
   {
@@ -2618,7 +2622,25 @@ var TableHeaderCell = ({
       left: sticky === "left" ? stickyOffset : void 0,
       right: sticky === "right" ? stickyOffset : void 0
     },
-    children
+    children: useSort ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: "inline-flex items-center gap-1",
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            FaIcon,
+            {
+              name: isSort ? sortOrder === "asc" ? "chevron-up" : "chevron-down" : "sort",
+              size: 10,
+              className: isSort ? "text-neutral-800" : "text-grey-500"
+            }
+          )
+        ]
+      }
+    ) : children
   }
 );
 

package/dist/ui/index.mjs

@@ -2429,7 +2429,7 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 var TableHeaderRow = ({ children }) => /* @__PURE__ */ jsx32("tr", { children });
 
 // src/ui/components/ui/table/TableHeaderCell.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var SURFACE_CLASS = {
   white: "bg-white",
   "grey-100": "bg-grey-100"
@@ -2441,7 +2441,11 @@ var TableHeaderCell = ({
   stickyOffset = "0px",
   surface = "grey-100",
   borderLeft = false,
-  className
+  className,
+  useSort = false,
+  isSort = false,
+  sortOrder = null,
+  onClick
 }) => /* @__PURE__ */ jsx33(
   "th",
   {
@@ -2459,7 +2463,25 @@ var TableHeaderCell = ({
       left: sticky === "left" ? stickyOffset : void 0,
       right: sticky === "right" ? stickyOffset : void 0
     },
-    children
+    children: useSort ? /* @__PURE__ */ jsxs17(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: "inline-flex items-center gap-1",
+        children: [
+          children,
+          /* @__PURE__ */ jsx33(
+            FaIcon,
+            {
+              name: isSort ? sortOrder === "asc" ? "chevron-up" : "chevron-down" : "sort",
+              size: 10,
+              className: isSort ? "text-neutral-800" : "text-grey-500"
+            }
+          )
+        ]
+      }
+    ) : children
   }
 );
 
@@ -2639,7 +2661,7 @@ var formatNameWithInitial = (firstname, lastname) => {
 };
 
 // src/ui/components/ui/Avatar.tsx
-import { Fragment as Fragment2, jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var AvatarSizeContext = createContext2(40);
 var useAvatarSize = () => useContext2(AvatarSizeContext);
 var BADGE_BG_CLASS = {
@@ -2693,7 +2715,7 @@ var Avatar = forwardRef16(
         ),
         style: __spreadValues({ width: size, height: size }, style)
       }, props), {
-        children: children != null ? children : /* @__PURE__ */ jsxs17(Fragment2, { children: [
+        children: children != null ? children : /* @__PURE__ */ jsxs18(Fragment2, { children: [
           src && /* @__PURE__ */ jsx39(AvatarImage, { src, alt: name }),
           /* @__PURE__ */ jsx39(AvatarFallback, { color, children: getInitials({ name }) }),
           badge && /* @__PURE__ */ jsx39(AvatarBadge, { className: BADGE_BG_CLASS[badge.backgroundColor], children: /* @__PURE__ */ jsx39(
@@ -2783,7 +2805,7 @@ var AvatarGroup = (_a) => {
   );
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
-  return /* @__PURE__ */ jsxs17(Layout, __spreadProps(__spreadValues({ className: cn("-space-x-2", className) }, props), { children: [
+  return /* @__PURE__ */ jsxs18(Layout, __spreadProps(__spreadValues({ className: cn("-space-x-2", className) }, props), { children: [
     visible.map(
       (child, index) => cloneElement(child, {
         key: index,
@@ -2791,7 +2813,7 @@ var AvatarGroup = (_a) => {
         className: cn("ring-2 ring-white", child.props.className)
       })
     ),
-    overflow > 0 && /* @__PURE__ */ jsxs17(
+    overflow > 0 && /* @__PURE__ */ jsxs18(
       Layout,
       {
         align: "center",
@@ -2814,7 +2836,7 @@ var AvatarGroup = (_a) => {
 // src/ui/components/ui/Radio.tsx
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
 var radioVariants = cva11(
   "relative h-[22px] w-[22px] shrink-0 rounded-full border-2 border-grey-300 outline-none transition-colors",
   {
@@ -2864,7 +2886,7 @@ var Radio = ({
     asChild: true,
     children: /* @__PURE__ */ jsx40(Layout, { column: true, gap: 2, className, width, children: items.map((item) => {
       const itemId = `radio-${item.value}`;
-      return /* @__PURE__ */ jsxs18(Layout, { row: true, gap: 2, align: "center", children: [
+      return /* @__PURE__ */ jsxs19(Layout, { row: true, gap: 2, align: "center", children: [
         /* @__PURE__ */ jsx40(
           RadixRadioGroup.Item,
           {
@@ -2898,7 +2920,7 @@ var Radio = ({
 import * as RadixProgress from "@radix-ui/react-progress";
 import * as RadixSlider from "@radix-ui/react-slider";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
 var trackVariants2 = cva12(
   "relative w-full overflow-hidden rounded-full bg-grey-200",
   {
@@ -2948,9 +2970,9 @@ var ProgressBar = ({
   const editable = Boolean(onChange);
   if (!editable) {
     const readOnlyPercent = Math.max(0, Math.min(100, current));
-    return /* @__PURE__ */ jsxs19(Layout, { column: true, fullWidth: true, gap: 1, className, children: [
+    return /* @__PURE__ */ jsxs20(Layout, { column: true, fullWidth: true, gap: 1, className, children: [
       label && /* @__PURE__ */ jsx41("span", { className: "text-xs text-grey-600", children: label }),
-      /* @__PURE__ */ jsxs19(Layout, { fullWidth: true, align: "center", gap: 2, children: [
+      /* @__PURE__ */ jsxs20(Layout, { fullWidth: true, align: "center", gap: 2, children: [
         /* @__PURE__ */ jsx41(
           RadixProgress.Root,
           {
@@ -2972,7 +2994,7 @@ var ProgressBar = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     Layout,
     {
       column: true,
@@ -2981,7 +3003,7 @@ var ProgressBar = ({
       className: cn(disabled && "cursor-not-allowed opacity-60", className),
       children: [
         label && /* @__PURE__ */ jsx41("span", { className: "text-xs text-grey-600", children: label }),
-        /* @__PURE__ */ jsxs19("div", { className: "relative w-full pt-6", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "relative w-full pt-6", children: [
           showLabel && /* @__PURE__ */ jsx41(
             "span",
             {
@@ -2990,7 +3012,7 @@ var ProgressBar = ({
               children: display(current)
             }
           ),
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             RadixSlider.Root,
             {
               value: [current],
@@ -3021,7 +3043,7 @@ var ProgressBar = ({
             }
           )
         ] }),
-        showLabel && /* @__PURE__ */ jsxs19(Layout, { align: "center", justify: "between", children: [
+        showLabel && /* @__PURE__ */ jsxs20(Layout, { align: "center", justify: "between", children: [
           /* @__PURE__ */ jsx41("span", { className: "text-xs text-grey-600", children: display(min) }),
           /* @__PURE__ */ jsx41("span", { className: "text-xs text-grey-600", children: display(max) })
         ] })
@@ -3051,7 +3073,7 @@ var CollapsibleContent = (_a) => {
 
 // src/ui/components/ui/Drawer.tsx
 import { Drawer as VaulDrawer } from "vaul";
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
 var CONTENT_POSITION = {
   top: "inset-x-4 top-4 rounded-2xl",
   bottom: "inset-x-4 bottom-4 rounded-2xl",
@@ -3073,7 +3095,7 @@ var Drawer = ({
       direction,
       open,
       onOpenChange: (next) => !next && (onClose == null ? void 0 : onClose()),
-      children: /* @__PURE__ */ jsxs20(VaulDrawer.Portal, { children: [
+      children: /* @__PURE__ */ jsxs21(VaulDrawer.Portal, { children: [
         /* @__PURE__ */ jsx43(VaulDrawer.Overlay, { className: "fixed inset-0 z-40 bg-black/35" }),
         /* @__PURE__ */ jsx43(
           VaulDrawer.Content,
@@ -3156,7 +3178,7 @@ var DrawerClose = VaulDrawer.Close;
 
 // src/ui/components/ui/Popover.tsx
 import * as RadixPopover3 from "@radix-ui/react-popover";
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
 var Popover = ({
   trigger,
   items,
@@ -3164,7 +3186,7 @@ var Popover = ({
   align = "end",
   side = "bottom",
   className
-}) => /* @__PURE__ */ jsxs21(RadixPopover3.Root, { children: [
+}) => /* @__PURE__ */ jsxs22(RadixPopover3.Root, { children: [
   /* @__PURE__ */ jsx44(RadixPopover3.Trigger, { asChild: true, children: trigger }),
   /* @__PURE__ */ jsx44(RadixPopover3.Portal, { children: /* @__PURE__ */ jsx44(
     RadixPopover3.Content,
@@ -3192,16 +3214,16 @@ var Popover = ({
 
 // src/ui/components/ui/Tooltip.tsx
 import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs23 } from "react/jsx-runtime";
 var Tooltip = ({
   children,
   content,
   side = "top",
   align = "center",
   className
-}) => /* @__PURE__ */ jsx45(RadixTooltip.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs22(RadixTooltip.Root, { children: [
+}) => /* @__PURE__ */ jsx45(RadixTooltip.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs23(RadixTooltip.Root, { children: [
   /* @__PURE__ */ jsx45(RadixTooltip.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx45(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs22(
+  /* @__PURE__ */ jsx45(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs23(
     RadixTooltip.Content,
     {
       side,
@@ -3230,7 +3252,7 @@ import { toast as sonnerToast2 } from "sonner";
 
 // src/ui/components/ui/ToastCard.tsx
 import { toast as sonnerToast } from "sonner";
-import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 var ICON = {
   success: "circle-check",
   error: "circle-xmark",
@@ -3267,7 +3289,7 @@ var ToastCard = ({
   title,
   message,
   timeOut
-}) => /* @__PURE__ */ jsxs23(
+}) => /* @__PURE__ */ jsxs24(
   Layout,
   {
     align: "start",
@@ -3296,7 +3318,7 @@ var ToastCard = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs23(Layout, { column: true, flex: 1, gap: 0.5, className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs24(Layout, { column: true, flex: 1, gap: 0.5, className: "min-w-0", children: [
         title && /* @__PURE__ */ jsx47("p", { className: "text-sm font-bold text-neutral-800", children: title }),
         /* @__PURE__ */ jsx47("p", { className: "text-sm text-neutral-800", children: message })
       ] }),
@@ -3387,7 +3409,7 @@ PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
 import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
-import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var IconTabs = ({
   items,
   value,
@@ -3418,8 +3440,8 @@ var IconTabs = ({
     if (listRef.current) ro.observe(listRef.current);
     return () => ro.disconnect();
   }, [updateBar]);
-  return /* @__PURE__ */ jsxs24(Layout, { column: true, className, children: [
-    /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(Layout, { column: true, className, children: [
+    /* @__PURE__ */ jsxs25(
       Layout,
       {
         ref: listRef,
@@ -3478,7 +3500,7 @@ var IconTabs = ({
 
 // src/ui/components/ui/Banner.tsx
 import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 var bannerVariants = cva14("rounded-[6px] border px-4 py-2", {
   variants: {
     tone: {
@@ -3504,7 +3526,7 @@ var Banner = ({
   fullWidth,
   width,
   className
-}) => /* @__PURE__ */ jsxs25(
+}) => /* @__PURE__ */ jsxs26(
   Layout,
   {
     role: "alert",
@@ -3515,8 +3537,8 @@ var Banner = ({
     width,
     className: cn(bannerVariants({ tone }), className),
     children: [
-      children ? children : message ? /* @__PURE__ */ jsx51(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs25(Layout, { column: true, align: "start", gap: 1, children: [
-        /* @__PURE__ */ jsxs25(Layout, { align: "center", gap: 2, children: [
+      children ? children : message ? /* @__PURE__ */ jsx51(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs26(Layout, { column: true, align: "start", gap: 1, children: [
+        /* @__PURE__ */ jsxs26(Layout, { align: "center", gap: 2, children: [
           badge && /* @__PURE__ */ jsx51(Badge, { color: tone != null ? tone : "blue-700", size: "xs", children: badge }),
           title && /* @__PURE__ */ jsx51(
             Text,
@@ -3537,7 +3559,7 @@ var Banner = ({
           onChange: toggle.onChange,
           disabled: toggle.disabled
         }
-      ) : action && /* @__PURE__ */ jsxs25(
+      ) : action && /* @__PURE__ */ jsxs26(
         Button,
         {
           look: "outline",
@@ -3560,7 +3582,7 @@ import {
   useRef as useRef7,
   useState as useState7
 } from "react";
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 var readStoredOffset = (key) => {
   if (!key || typeof window === "undefined") return { x: 0, y: 0 };
   try {
@@ -3663,7 +3685,7 @@ var FloatingButton = ({
     if (draggable && dragDistanceRef.current > DRAG_THRESHOLD) return;
     onToggle();
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: "fixed bottom-8 right-8 z-[1000]",
@@ -3676,7 +3698,7 @@ var FloatingButton = ({
       children: [
         actions.map((action, index) => {
           var _a;
-          return /* @__PURE__ */ jsxs26(
+          return /* @__PURE__ */ jsxs27(
             "button",
             {
               type: "button",
@@ -3701,7 +3723,7 @@ var FloatingButton = ({
             action.id
           );
         }),
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "button",
           {
             type: "button",
@@ -3729,7 +3751,7 @@ var FloatingButton = ({
 };
 
 // src/ui/components/ui/MetricCard.tsx
-import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
 var ICON_WRAP_CLASS = {
   "blue-700": "bg-blue-50 text-blue-700",
   "blue-900": "bg-blue-50 text-blue-900",
@@ -3761,7 +3783,7 @@ var MetricCard = ({
       selected && "border-blue-700",
       className
     ),
-    children: /* @__PURE__ */ jsxs27(Layout, { align: "center", gap: 3, fullWidth: true, children: [
+    children: /* @__PURE__ */ jsxs28(Layout, { align: "center", gap: 3, fullWidth: true, children: [
       /* @__PURE__ */ jsx53(
         "span",
         {
@@ -3772,12 +3794,12 @@ var MetricCard = ({
           children: /* @__PURE__ */ jsx53("i", { className: `fa-${iconFamily} fa-${icon}`, style: { fontSize: 18 } })
         }
       ),
-      children ? children : layout === "row" ? /* @__PURE__ */ jsxs27(Layout, { align: "center", gap: 1, children: [
+      children ? children : layout === "row" ? /* @__PURE__ */ jsxs28(Layout, { align: "center", gap: 1, children: [
         /* @__PURE__ */ jsx53(Text, { size: "s", weight: "bold", color: valueColor, children: value }),
         /* @__PURE__ */ jsx53(Text, { size: "s", color: "grey-600", children: title })
-      ] }) : /* @__PURE__ */ jsxs27(Layout, { column: true, gap: 1, children: [
+      ] }) : /* @__PURE__ */ jsxs28(Layout, { column: true, gap: 1, children: [
         /* @__PURE__ */ jsx53(Text, { size: "s", color: "grey-600", children: title }),
-        /* @__PURE__ */ jsxs27(Layout, { align: "baseline", gap: 1, children: [
+        /* @__PURE__ */ jsxs28(Layout, { align: "baseline", gap: 1, children: [
           /* @__PURE__ */ jsx53(Text, { size: "s", weight: "bold", color: valueColor, children: value }),
           subtitle && /* @__PURE__ */ jsx53(Text, { size: "xs", color: "grey-600", children: subtitle })
         ] })
@@ -3818,7 +3840,7 @@ var Skeleton = (_a) => {
 
 // src/ui/components/ui/TagBubble.tsx
 import * as RadixToggle from "@radix-ui/react-toggle";
-import { jsx as jsx55, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var DOT_CLASS = {
   "blue-700": "bg-blue-700",
   "blue-900": "bg-blue-900",
@@ -3839,7 +3861,7 @@ var TagBubble = ({
   className
 }) => {
   const showCount = count !== void 0 && count !== null;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     RadixToggle.Root,
     {
       type: "button",
@@ -3868,7 +3890,7 @@ var TagBubble = ({
 };
 
 // src/ui/components/ui/Gantt.tsx
-import { jsx as jsx56, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var Gantt = ({
   days,
   rows,
@@ -3884,7 +3906,7 @@ var Gantt = ({
   const bodyHeight = rows.length * rowHeight;
   const clickable = Boolean(onRowClick);
   const gridCols = { gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)` };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -3892,7 +3914,7 @@ var Gantt = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs30(
           "div",
           {
             className: "grid border-b border-grey-300 bg-grey-100",
@@ -3920,7 +3942,7 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs30(
           "div",
           {
             className: "grid overflow-y-auto overflow-x-hidden",
@@ -3943,7 +3965,7 @@ var Gantt = ({
                 },
                 row.key
               )) }),
-              /* @__PURE__ */ jsx56("div", { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxs29("div", { className: "relative w-full", style: { height: bodyHeight }, children: [
+              /* @__PURE__ */ jsx56("div", { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full", style: { height: bodyHeight }, children: [
                 days.map((day, i) => /* @__PURE__ */ jsx56(
                   "div",
                   {
@@ -4030,7 +4052,7 @@ var GanttSwatch = ({
 );
 
 // src/ui/components/ui/Bulk.tsx
-import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var BG_CLASS = {
   "blue-700": "bg-blue-700",
   "blue-900": "bg-blue-900",
@@ -4045,7 +4067,7 @@ var Bulk = ({
   sections,
   color = "blue-700",
   className
-}) => /* @__PURE__ */ jsxs30(
+}) => /* @__PURE__ */ jsxs31(
   "div",
   {
     className: cn(
@@ -4054,7 +4076,7 @@ var Bulk = ({
       className
     ),
     children: [
-      leftTitle && /* @__PURE__ */ jsxs30(Layout, { align: "center", gap: 6, className: "pr-6", children: [
+      leftTitle && /* @__PURE__ */ jsxs31(Layout, { align: "center", gap: 6, className: "pr-6", children: [
         /* @__PURE__ */ jsx57(
           "button",
           {
@@ -4075,7 +4097,7 @@ var Bulk = ({
           fullHeight: true,
           align: "stretch",
           className: "[&>button:not(:last-child)]:rounded-r-none",
-          children: sections.map((section) => /* @__PURE__ */ jsxs30(
+          children: sections.map((section) => /* @__PURE__ */ jsxs31(
             "button",
             {
               type: "button",
@@ -4099,7 +4121,7 @@ var Bulk = ({
 );
 
 // src/ui/components/ui/Timeline.tsx
-import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var Timeline = ({
   items,
   lineColor = "#F1F5F9",
@@ -4113,8 +4135,8 @@ var Timeline = ({
     var _a;
     const isLast = index === items.length - 1;
     const dotColor = (_a = item.color) != null ? _a : "#377EA1";
-    return /* @__PURE__ */ jsxs31(Layout, { gap: 3, children: [
-      /* @__PURE__ */ jsxs31(Layout, { column: true, align: "center", className: "w-4", children: [
+    return /* @__PURE__ */ jsxs32(Layout, { gap: 3, children: [
+      /* @__PURE__ */ jsxs32(Layout, { column: true, align: "center", className: "w-4", children: [
         /* @__PURE__ */ jsx58(
           "span",
           {
@@ -4130,7 +4152,7 @@ var Timeline = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31(Layout, { column: true, gap: 0.5, className: isLast ? void 0 : "pb-4", children: [
+      /* @__PURE__ */ jsxs32(Layout, { column: true, gap: 0.5, className: isLast ? void 0 : "pb-4", children: [
         /* @__PURE__ */ jsx58(Text, { size: "s", weight: item.highlighted ? "bold" : "semibold", children: item.title }),
         item.subtitle && /* @__PURE__ */ jsx58(Text, { size: "xs", color: "grey-600", children: item.subtitle }),
         item.description && /* @__PURE__ */ jsx58("span", { className: "text-xs italic text-neutral-800", children: item.description })
@@ -4142,7 +4164,7 @@ var Timeline = ({
 // src/ui/components/ui/ColorPicker.tsx
 import { forwardRef as forwardRef18, useState as useState8 } from "react";
 import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 var swatchVariants = cva15(
   "inline-flex shrink-0 overflow-hidden rounded-[6px] border border-grey-300",
   {
@@ -4186,7 +4208,7 @@ var ColorPicker = forwardRef18(
       if (value === void 0) setInternalColor(next);
       onChange == null ? void 0 : onChange(next);
     };
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       Layout,
       {
         column: true,
@@ -4195,7 +4217,7 @@ var ColorPicker = forwardRef18(
         className: cn(disabled && "opacity-60", className),
         children: [
           label && /* @__PURE__ */ jsx59("span", { className: "text-xs font-semibold text-neutral-800", children: label }),
-          /* @__PURE__ */ jsxs32(Layout, { gap: 2, children: [
+          /* @__PURE__ */ jsxs33(Layout, { gap: 2, children: [
             /* @__PURE__ */ jsx59(
               "label",
               {
@@ -4244,7 +4266,7 @@ ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/FileUploadZone.tsx
 import { useCallback as useCallback3, useRef as useRef8, useState as useState9 } from "react";
-import { Fragment as Fragment3, jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -4372,7 +4394,7 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       Layout,
       {
         column: true,
@@ -4414,14 +4436,14 @@ var FileUploadZone = ({
     );
   }
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     Layout,
     {
       column: true,
       gap: 1,
       className: cn(fullWidth ? "w-full" : "w-fit", className),
       children: [
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           "label",
           {
             onDragOver: handleDragOver,
@@ -4449,7 +4471,7 @@ var FileUploadZone = ({
               ),
               showIcon && /* @__PURE__ */ jsx60(FaIcon, { name: "cloud-arrow-up", size: 28, className: "text-blue-700" }),
               /* @__PURE__ */ jsx60("span", { className: "text-center text-sm text-grey-600", children: label }),
-              showBrowse && /* @__PURE__ */ jsxs33(Fragment3, { children: [
+              showBrowse && /* @__PURE__ */ jsxs34(Fragment3, { children: [
                 /* @__PURE__ */ jsx60("span", { className: "text-center text-xs text-grey-600", children: "ou" }),
                 /* @__PURE__ */ jsx60(
                   Button,
@@ -4469,7 +4491,7 @@ var FileUploadZone = ({
             ]
           }
         ),
-        showFileName && fileName && /* @__PURE__ */ jsxs33(Layout, { align: "center", justify: "center", gap: 2, children: [
+        showFileName && fileName && /* @__PURE__ */ jsxs34(Layout, { align: "center", justify: "center", gap: 2, children: [
           /* @__PURE__ */ jsx60(FaIcon, { name: "file", size: 16, className: "text-green-700" }),
           /* @__PURE__ */ jsx60("span", { className: "text-sm text-green-700", children: fileName })
         ] }),
@@ -4582,7 +4604,7 @@ var ItemActions = (_a) => {
 };
 
 // src/ui/components/ui/Attachment.tsx
-import { jsx as jsx62, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
 var Attachment = ({
   name,
   size,
@@ -4596,7 +4618,7 @@ var Attachment = ({
 }) => {
   const isUploading = status === "uploading";
   const isError = status === "error";
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     Item3,
     {
       variant: "outline",
@@ -4623,15 +4645,15 @@ var Attachment = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxs34(ItemContent, { children: [
+        /* @__PURE__ */ jsxs35(ItemContent, { children: [
           /* @__PURE__ */ jsx62(ItemTitle, { children: name }),
-          isUploading ? /* @__PURE__ */ jsxs34(ItemDescription, { className: "text-xs", children: [
+          isUploading ? /* @__PURE__ */ jsxs35(ItemDescription, { className: "text-xs", children: [
             "Uploading - ",
             progress,
             "%"
           ] }) : isError ? /* @__PURE__ */ jsx62(ItemDescription, { className: "text-xs text-red-900", children: errorMessage }) : size && /* @__PURE__ */ jsx62(ItemDescription, { className: "text-xs", children: size })
         ] }),
-        (onRetry || onRemove) && /* @__PURE__ */ jsxs34(ItemActions, { children: [
+        (onRetry || onRemove) && /* @__PURE__ */ jsxs35(ItemActions, { children: [
           isError && onRetry && /* @__PURE__ */ jsx62(
             "button",
             {
@@ -4661,7 +4683,7 @@ var Attachment = ({
 // src/ui/components/ui/PdfPreview.tsx
 import { useState as useState10 } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
-import { jsx as jsx63, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs36 } from "react/jsx-runtime";
 pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 var PdfPreview = ({
   file,
@@ -4674,7 +4696,7 @@ var PdfPreview = ({
   const height = Math.round(width * 1.3);
   const thumbnailSkeleton = /* @__PURE__ */ jsx63(Skeleton, { width, height });
   if (hasError) {
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       Layout,
       {
         column: true,
@@ -4727,7 +4749,7 @@ var PdfPreview = ({
 
 // src/ui/components/ui/ScrollArea.tsx
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import { jsx as jsx64, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs37 } from "react/jsx-runtime";
 var ScrollArea = (_a) => {
   var _b = _a, {
     children,
@@ -4738,7 +4760,7 @@ var ScrollArea = (_a) => {
     "className",
     "orientation"
   ]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     RadixScrollArea.Root,
     __spreadProps(__spreadValues({
       className: cn("relative overflow-hidden", className)
@@ -4769,7 +4791,7 @@ var ScrollArea = (_a) => {
 
 // src/ui/components/ui/Stepper.tsx
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx65, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs38 } from "react/jsx-runtime";
 var Stepper = ({
   numberOfSteps,
   current = 0,
@@ -4786,7 +4808,7 @@ var Stepper = ({
     children: Array.from({ length: numberOfSteps }, (_, i) => {
       const isActive = i === current;
       const isCompleted = i < current;
-      return /* @__PURE__ */ jsxs37(Fragment4, { children: [
+      return /* @__PURE__ */ jsxs38(Fragment4, { children: [
         /* @__PURE__ */ jsx65(
           "div",
           {
@@ -4822,7 +4844,7 @@ import {
 } from "date-fns";
 import { fr as dateFnsFr } from "date-fns/locale";
 import * as RadixPopover4 from "@radix-ui/react-popover";
-import { jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
 var formatMonthCaption = (month) => format(month, "MMM yyyy", { locale: dateFnsFr });
 var RANGE_PRESETS = [
   {
@@ -4949,7 +4971,7 @@ var DatePicker = ({
     }
   ) });
   if (!showPresets) {
-    return /* @__PURE__ */ jsxs38(RadixPopover4.Root, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxs39(RadixPopover4.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx66(RadixPopover4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx66(
         "button",
         {
@@ -4969,9 +4991,9 @@ var DatePicker = ({
       calendar
     ] });
   }
-  return /* @__PURE__ */ jsxs38(RadixPopover4.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs38(Layout, { column: true, gap: 1.5, className, children: [
-      /* @__PURE__ */ jsxs38(Layout, { align: "center", gap: 1.5, children: [
+  return /* @__PURE__ */ jsxs39(RadixPopover4.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs39(Layout, { column: true, gap: 1.5, className, children: [
+      /* @__PURE__ */ jsxs39(Layout, { align: "center", gap: 1.5, children: [
         /* @__PURE__ */ jsx66(RadixPopover4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx66(
           "button",
           {
@@ -5004,7 +5026,7 @@ var DatePicker = ({
           ) }, preset.label);
         })
       ] }),
-      hasValue && /* @__PURE__ */ jsxs38(
+      hasValue && /* @__PURE__ */ jsxs39(
         "button",
         {
           type: "button",

package/package.json

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