design-zystem 1.0.397 → 1.0.399

package/dist/ui/index.d.mts

@@ -732,8 +732,12 @@ interface TableRowProps {
     backgroundColor?: HexColor;
     /** Liseré vertical gauche, même usage que `backgroundColor`. */
     accentColor?: HexColor;
+    /** Index de la ligne dans une liste virtualisée (ex. @tanstack/react-virtual,
+     * dont `measureElement` lit cet attribut sur l'élément mesuré pour retrouver
+     * quelle ligne a changé de taille). Sans objet hors virtualisation. */
+    'data-index'?: number;
 }
-declare const TableRow: ({ children, onClick, className, backgroundColor, accentColor, }: TableRowProps) => react.JSX.Element;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
 
 declare const SURFACE_CLASS: {
     readonly white: "bg-white";

package/dist/ui/index.d.ts

@@ -732,8 +732,12 @@ interface TableRowProps {
     backgroundColor?: HexColor;
     /** Liseré vertical gauche, même usage que `backgroundColor`. */
     accentColor?: HexColor;
+    /** Index de la ligne dans une liste virtualisée (ex. @tanstack/react-virtual,
+     * dont `measureElement` lit cet attribut sur l'élément mesuré pour retrouver
+     * quelle ligne a changé de taille). Sans objet hors virtualisation. */
+    'data-index'?: number;
 }
-declare const TableRow: ({ children, onClick, className, backgroundColor, accentColor, }: TableRowProps) => react.JSX.Element;
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
 
 declare const SURFACE_CLASS: {
     readonly white: "bg-white";

package/dist/ui/index.js

@@ -3450,30 +3450,37 @@ var TableHeaderCell = ({
 );
 
 // src/ui/components/ui/table/TableRow.tsx
+var import_react26 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var TableRow = ({
-  children,
-  onClick,
-  className,
-  backgroundColor,
-  accentColor
-}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-  "tr",
-  {
+var TableRow = (0, import_react26.forwardRef)(
+  ({
+    children,
     onClick,
-    className: cn(
-      "border-t border-grey-200 transition-colors hover:bg-black/[0.025]",
-      onClick && "cursor-pointer",
-      accentColor && "border-l-4",
-      className
-    ),
-    style: {
-      backgroundColor,
-      borderLeftColor: accentColor
-    },
-    children
-  }
+    className,
+    backgroundColor,
+    accentColor,
+    "data-index": dataIndex
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "tr",
+    {
+      ref,
+      "data-index": dataIndex,
+      onClick,
+      className: cn(
+        "border-t border-grey-200 transition-colors hover:bg-black/[0.025]",
+        onClick && "cursor-pointer",
+        accentColor && "border-l-4",
+        className
+      ),
+      style: {
+        backgroundColor,
+        borderLeftColor: accentColor
+      },
+      children
+    }
+  )
 );
+TableRow.displayName = "TableRow";
 
 // src/ui/components/ui/table/TableCell.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -3566,7 +3573,7 @@ var TableFooterCell = ({
 );
 
 // src/ui/components/ui/Avatar.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var RadixAvatar = __toESM(require("@radix-ui/react-avatar"));
 
 // src/utils/string/capitalizeFirstLetter.ts
@@ -3690,8 +3697,8 @@ var formatNameWithInitial = (firstname, lastname) => {
 
 // src/ui/components/ui/Avatar.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var AvatarSizeContext = (0, import_react26.createContext)(40);
-var useAvatarSize = () => (0, import_react26.useContext)(AvatarSizeContext);
+var AvatarSizeContext = (0, import_react27.createContext)(40);
+var useAvatarSize = () => (0, import_react27.useContext)(AvatarSizeContext);
 var BADGE_BG_CLASS = {
   "blue-700": "bg-blue-700",
   "blue-900": "bg-blue-900",
@@ -3722,7 +3729,7 @@ var BADGE_ICON_COLOR_CLASS = {
   "orange-600": "text-orange-600",
   "purple-700": "text-purple-700"
 };
-var Avatar = (0, import_react26.forwardRef)(
+var Avatar = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = 40,
@@ -3775,7 +3782,7 @@ var Avatar = (0, import_react26.forwardRef)(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = (0, import_react26.forwardRef)((_a, ref) => {
+var AvatarImage = (0, import_react27.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     RadixAvatar.Image,
@@ -3801,7 +3808,7 @@ var FALLBACK_COLOR_CLASS = {
   "orange-600": "bg-orange-600 text-white",
   "purple-700": "bg-purple-700 text-white"
 };
-var AvatarFallback = (0, import_react26.forwardRef)((_a, ref) => {
+var AvatarFallback = (0, import_react27.forwardRef)((_a, ref) => {
   var _b = _a, { color = "grey-600", className, style } = _b, props = __objRest(_b, ["color", "className", "style"]);
   const size = useAvatarSize();
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -3818,7 +3825,7 @@ var AvatarFallback = (0, import_react26.forwardRef)((_a, ref) => {
   );
 });
 AvatarFallback.displayName = "AvatarFallback";
-var AvatarBadge = (0, import_react26.forwardRef)(
+var AvatarBadge = (0, import_react27.forwardRef)(
   (_a, ref) => {
     var _b = _a, { size, className, style } = _b, props = __objRest(_b, ["size", "className", "style"]);
     const avatarSize = useAvatarSize();
@@ -3849,14 +3856,14 @@ var AvatarGroup = (_a) => {
     "className",
     "children"
   ]);
-  const items = import_react26.Children.toArray(children).filter(
-    import_react26.isValidElement
+  const items = import_react27.Children.toArray(children).filter(
+    import_react27.isValidElement
   );
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Layout, __spreadProps(__spreadValues({ className: cn("-space-x-2", className) }, props), { children: [
     visible.map(
-      (child, index) => (0, import_react26.cloneElement)(child, {
+      (child, index) => (0, import_react27.cloneElement)(child, {
         key: index,
         size,
         className: cn("ring-2 ring-white", child.props.className)
@@ -4150,7 +4157,7 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_vaul = require("vaul");
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
 
@@ -4222,11 +4229,11 @@ var Drawer = ({
   overlayClassName
 }) => {
   const isVertical = direction === "left" || direction === "right";
-  const contentRef = (0, import_react27.useRef)(null);
-  const [panel, setPanel] = (0, import_react27.useState)(null);
-  const overlayRef = (0, import_react27.useRef)(null);
+  const contentRef = (0, import_react28.useRef)(null);
+  const [panel, setPanel] = (0, import_react28.useState)(null);
+  const overlayRef = (0, import_react28.useRef)(null);
   useAllowPortalScroll(modal && open, contentRef, overlayRef);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!open || !panel) return;
     return registerOpenDrawer(panel, overlayRef.current);
   }, [open, panel]);
@@ -4241,7 +4248,7 @@ var Drawer = ({
     const overlay = target.closest("[data-vaul-overlay]");
     return Boolean(target.closest(KEEP_OPEN_SELECTOR)) || overlay !== null && isOverlayOfDrawerAbove(overlay, contentRef.current);
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (modal || !open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -4255,7 +4262,7 @@ var Drawer = ({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [modal, open, onClose]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (modal || !open) return;
     const frame = requestAnimationFrame(() => {
       document.body.style.pointerEvents = "auto";
@@ -4420,17 +4427,17 @@ var Popover = ({
 ] });
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/ui/components/ui/sidebar/SidebarContext.ts
-var import_react28 = require("react");
-var SidebarCollapsedContext = (0, import_react28.createContext)(false);
+var import_react29 = require("react");
+var SidebarCollapsedContext = (0, import_react29.createContext)(false);
 var SidebarCollapsedProvider = SidebarCollapsedContext.Provider;
-var useSidebarCollapsed = () => (0, import_react28.useContext)(SidebarCollapsedContext);
+var useSidebarCollapsed = () => (0, import_react29.useContext)(SidebarCollapsedContext);
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var Sidebar = (0, import_react29.forwardRef)(
+var Sidebar = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { collapsed = false, className, children } = _b, props = __objRest(_b, ["collapsed", "className", "children"]);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SidebarCollapsedProvider, { value: collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -4451,9 +4458,9 @@ var Sidebar = (0, import_react29.forwardRef)(
 Sidebar.displayName = "Sidebar";
 
 // src/ui/components/ui/sidebar/SidebarTrigger.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var SidebarTrigger = (0, import_react30.forwardRef)((_a, ref) => {
+var SidebarTrigger = (0, import_react31.forwardRef)((_a, ref) => {
   var _b = _a, { collapsed, className } = _b, props = __objRest(_b, ["collapsed", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "button",
@@ -4480,9 +4487,9 @@ var SidebarTrigger = (0, import_react30.forwardRef)((_a, ref) => {
 SidebarTrigger.displayName = "SidebarTrigger";
 
 // src/ui/components/ui/sidebar/SidebarHeader.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var SidebarHeader = (0, import_react31.forwardRef)(
+var SidebarHeader = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
@@ -4497,9 +4504,9 @@ var SidebarHeader = (0, import_react31.forwardRef)(
 SidebarHeader.displayName = "SidebarHeader";
 
 // src/ui/components/ui/sidebar/SidebarContent.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var SidebarContent = (0, import_react32.forwardRef)(
+var SidebarContent = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -4518,9 +4525,9 @@ var SidebarContent = (0, import_react32.forwardRef)(
 SidebarContent.displayName = "SidebarContent";
 
 // src/ui/components/ui/sidebar/SidebarGroup.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var SidebarGroup = (0, import_react33.forwardRef)(
+var SidebarGroup = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { label, className, children } = _b, props = __objRest(_b, ["label", "className", "children"]);
     const collapsed = useSidebarCollapsed();
@@ -4541,9 +4548,9 @@ var SidebarGroup = (0, import_react33.forwardRef)(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/ui/components/ui/sidebar/SidebarMenuButton.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var SidebarMenuButton = (0, import_react34.forwardRef)(
+var SidebarMenuButton = (0, import_react35.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       icon,
@@ -4623,9 +4630,9 @@ var SidebarMenuButton = (0, import_react34.forwardRef)(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 
 // src/ui/components/ui/sidebar/SidebarMenuSub.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var SidebarMenuSub = (0, import_react35.forwardRef)(
+var SidebarMenuSub = (0, import_react36.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
@@ -4643,22 +4650,22 @@ var SidebarMenuSub = (0, import_react35.forwardRef)(
 SidebarMenuSub.displayName = "SidebarMenuSub";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubItem.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var SidebarMenuSubItem = (0, import_react36.forwardRef)((_a, ref) => {
+var SidebarMenuSubItem = (0, import_react37.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", __spreadValues({ ref, className: cn("relative", className) }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubButton.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var SIZE_CLASS = {
   default: "h-10",
   lg: "h-14"
 };
-var SidebarMenuSubButton = (0, import_react37.forwardRef)((_a, ref) => {
+var SidebarMenuSubButton = (0, import_react38.forwardRef)((_a, ref) => {
   var _b = _a, { active, size = "default", className } = _b, props = __objRest(_b, ["active", "size", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "button",
@@ -4679,9 +4686,9 @@ var SidebarMenuSubButton = (0, import_react37.forwardRef)((_a, ref) => {
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 // src/ui/components/ui/sidebar/SidebarFooter.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var SidebarFooter = (0, import_react38.forwardRef)(
+var SidebarFooter = (0, import_react39.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -4719,9 +4726,9 @@ var SidebarSupportInfo = ({
 };
 
 // src/ui/components/ui/sidebar/SidebarMenuSearchInput.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var SidebarMenuSearchInput = (0, import_react39.forwardRef)((_a, ref) => {
+var SidebarMenuSearchInput = (0, import_react40.forwardRef)((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(InputGroup, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FaIcon, { name: "magnifying-glass", size: 14, className: "text-white/50" }) }),
@@ -4740,7 +4747,7 @@ var SidebarMenuSearchInput = (0, import_react39.forwardRef)((_a, ref) => {
 SidebarMenuSearchInput.displayName = "SidebarMenuSearchInput";
 
 // src/ui/components/ui/sidebar/SidebarUserMenu.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var RadixPopover5 = __toESM(require("@radix-ui/react-popover"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var panelClassName = cn(
@@ -4757,7 +4764,7 @@ var SidebarUserMenu = ({
   className
 }) => {
   const collapsed = useSidebarCollapsed();
-  const [open, setOpen] = (0, import_react40.useState)(false);
+  const [open, setOpen] = (0, import_react41.useState)(false);
   const runAndClose = (action) => {
     action();
     setOpen(false);
@@ -5075,7 +5082,7 @@ var toast = {
 };
 
 // src/ui/components/ui/PageContainer.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var pageContainerVariants = (0, import_class_variance_authority13.cva)(
@@ -5092,7 +5099,7 @@ var pageContainerVariants = (0, import_class_variance_authority13.cva)(
     defaultVariants: { padding: "md" }
   }
 );
-var PageContainer = (0, import_react41.forwardRef)(
+var PageContainer = (0, import_react42.forwardRef)(
   (_a, ref) => {
     var _b = _a, { padding, className } = _b, props = __objRest(_b, ["padding", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -5107,7 +5114,7 @@ var PageContainer = (0, import_react41.forwardRef)(
 PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var IconTabs = ({
   items,
@@ -5117,10 +5124,10 @@ var IconTabs = ({
   className
 }) => {
   var _a;
-  const listRef = (0, import_react42.useRef)(null);
-  const tabRefs = (0, import_react42.useRef)([]);
-  const [bar, setBar] = (0, import_react42.useState)({ left: 0, top: 0, width: 0, height: 0 });
-  const updateBar = (0, import_react42.useCallback)(() => {
+  const listRef = (0, import_react43.useRef)(null);
+  const tabRefs = (0, import_react43.useRef)([]);
+  const [bar, setBar] = (0, import_react43.useState)({ left: 0, top: 0, width: 0, height: 0 });
+  const updateBar = (0, import_react43.useCallback)(() => {
     const root = listRef.current;
     const activeEl = tabRefs.current[value];
     if (!root || !activeEl) return;
@@ -5133,7 +5140,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -5315,7 +5322,7 @@ var Banner = ({
 };
 
 // src/ui/components/ui/FloatingButton.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/ui/lib/floatingArc.ts
 var MAX_STEP = 65;
@@ -5469,20 +5476,20 @@ var FloatingButton = ({
   safeArea,
   onOffsetChange
 }) => {
-  const containerRef = (0, import_react43.useRef)(null);
-  const [placement, setPlacement] = (0, import_react43.useState)(() => ({
+  const containerRef = (0, import_react44.useRef)(null);
+  const [placement, setPlacement] = (0, import_react44.useState)(() => ({
     geometry: __spreadValues({ base: 90 }, arcLayout(actions.length, ARC_RADIUS, SUB_SIZE)),
     shift: { x: 0, y: 0 }
   }));
-  const [isDragging, setIsDragging] = (0, import_react43.useState)(false);
-  const [offset, setOffset] = (0, import_react43.useState)(() => readStoredOffset(persistKey));
-  const offsetRef = (0, import_react43.useRef)(offset);
-  const lastPointRef = (0, import_react43.useRef)({ x: 0, y: 0 });
-  const dragDistanceRef = (0, import_react43.useRef)(0);
-  (0, import_react43.useEffect)(() => {
+  const [isDragging, setIsDragging] = (0, import_react44.useState)(false);
+  const [offset, setOffset] = (0, import_react44.useState)(() => readStoredOffset(persistKey));
+  const offsetRef = (0, import_react44.useRef)(offset);
+  const lastPointRef = (0, import_react44.useRef)({ x: 0, y: 0 });
+  const dragDistanceRef = (0, import_react44.useRef)(0);
+  (0, import_react44.useEffect)(() => {
     onOffsetChange == null ? void 0 : onOffsetChange(offset);
   }, [offset, onOffsetChange]);
-  const clampOffset = (0, import_react43.useCallback)(
+  const clampOffset = (0, import_react44.useCallback)(
     (next) => {
       var _a, _b, _c, _d;
       const el = containerRef.current;
@@ -5502,14 +5509,14 @@ var FloatingButton = ({
     },
     [safeArea == null ? void 0 : safeArea.left, safeArea == null ? void 0 : safeArea.top, safeArea == null ? void 0 : safeArea.right, safeArea == null ? void 0 : safeArea.bottom]
   );
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     const corrected = clampOffset(offsetRef.current);
     if (corrected.x === offsetRef.current.x && corrected.y === offsetRef.current.y)
       return;
     offsetRef.current = corrected;
     setOffset(corrected);
   }, [clampOffset]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -5545,7 +5552,7 @@ var FloatingButton = ({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [draggable, isDragging, persistKey, clampOffset]);
-  const resolvePlacement = (0, import_react43.useCallback)(() => {
+  const resolvePlacement = (0, import_react44.useCallback)(() => {
     var _a, _b, _c, _d;
     const el = containerRef.current;
     if (!el || typeof window === "undefined") return;
@@ -5574,13 +5581,13 @@ var FloatingButton = ({
     safeArea == null ? void 0 : safeArea.right,
     safeArea == null ? void 0 : safeArea.bottom
   ]);
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     if (isOpen) resolvePlacement();
   }, [isOpen, offset, resolvePlacement]);
-  (0, import_react43.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -5676,7 +5683,7 @@ var FloatingButton = ({
 };
 
 // src/ui/components/ui/ActivityFeedPanel.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var PANEL_WIDTH = 500;
 var PANEL_MAX_HEIGHT = 750;
@@ -5711,15 +5718,15 @@ var ActivityFeedPanel = ({
   emptyMessage = "Rien de neuf pour l\u2019instant.",
   items
 }) => {
-  const panelRef = (0, import_react44.useRef)(null);
-  const [placement, setPlacement] = (0, import_react44.useState)(
+  const panelRef = (0, import_react45.useRef)(null);
+  const [placement, setPlacement] = (0, import_react45.useState)(
     () => typeof window === "undefined" ? {} : resolveFloatingPanelPlacement(
       offset,
       window.innerWidth,
       window.innerHeight
     )
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!open || typeof document === "undefined") return;
     const handlePointerDown = (event) => {
       var _a;
@@ -5730,7 +5737,7 @@ var ActivityFeedPanel = ({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [open, onClose]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!open || typeof window === "undefined") return;
     const recompute = () => setPlacement(
       resolveFloatingPanelPlacement(
@@ -6351,7 +6358,7 @@ var HistoryDrawer = (_a) => {
 };
 
 // src/ui/components/ui/history/HistoryButton.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var LABEL = "Historique";
 var SHORT_TOOLTIP = "Voir l\u2019historique des actions";
@@ -6367,7 +6374,7 @@ var HistoryButton = (_a) => {
     "tooltip",
     "onOpenChange"
   ]);
-  const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
   const changeOpen = (nextIsOpen) => {
     setIsOpen(nextIsOpen);
     onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
@@ -6667,7 +6674,7 @@ var Timeline = ({
 };
 
 // src/ui/components/ui/ColorPicker.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var swatchVariants = (0, import_class_variance_authority15.cva)(
@@ -6696,7 +6703,7 @@ var inputVariants = (0, import_class_variance_authority15.cva)(
     defaultVariants: { size: "m" }
   }
 );
-var ColorPicker = (0, import_react46.forwardRef)(
+var ColorPicker = (0, import_react47.forwardRef)(
   ({
     label,
     value,
@@ -6706,7 +6713,7 @@ var ColorPicker = (0, import_react46.forwardRef)(
     size,
     className
   }, ref) => {
-    const [internalColor, setInternalColor] = (0, import_react46.useState)(defaultValue);
+    const [internalColor, setInternalColor] = (0, import_react47.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const handleChange = (e) => {
       const next = e.target.value;
@@ -6770,7 +6777,7 @@ var ColorPicker = (0, import_react46.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/FileUploadZone.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
@@ -6803,23 +6810,23 @@ var FileUploadZone = ({
   showFileName = false,
   className
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react47.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react47.useState)(
+  const [isDragging, setIsDragging] = (0, import_react48.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react48.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react47.useState)(null);
-  const [fileName, setFileName] = (0, import_react47.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react47.useState)(null);
-  const inputRef = (0, import_react47.useRef)(null);
+  const [fileType, setFileType] = (0, import_react48.useState)(null);
+  const [fileName, setFileName] = (0, import_react48.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react48.useState)(null);
+  const inputRef = (0, import_react48.useRef)(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
   const previewUrl = multiple ? null : controlledPreviewUrl || (showPreview ? internalPreviewUrl : null);
-  const emitError = (0, import_react47.useCallback)(
+  const emitError = (0, import_react48.useCallback)(
     (message) => onError ? onError(message) : setInlineError(message),
     [onError]
   );
-  const validateFile = (0, import_react47.useCallback)(
+  const validateFile = (0, import_react48.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type))
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -6833,7 +6840,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react47.useCallback)(
+  const processFile = (0, import_react48.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -6848,7 +6855,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react47.useCallback)(
+  const processFiles = (0, import_react48.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {
@@ -7007,7 +7014,7 @@ var FileUploadZone = ({
 };
 
 // src/ui/components/ui/FilePicker.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var FilePicker = ({
   label,
@@ -7021,7 +7028,7 @@ var FilePicker = ({
   disabled = false,
   className
 }) => {
-  const inputRef = (0, import_react48.useRef)(null);
+  const inputRef = (0, import_react49.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "input",
@@ -7059,7 +7066,7 @@ var FilePicker = ({
 };
 
 // src/ui/components/ui/Item.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var itemVariants = (0, import_class_variance_authority16.cva)(
@@ -7079,7 +7086,7 @@ var itemVariants = (0, import_class_variance_authority16.cva)(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Item4 = (0, import_react49.forwardRef)(
+var Item4 = (0, import_react50.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant, size, className } = _b, props = __objRest(_b, ["variant", "size", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -7238,7 +7245,7 @@ var Attachment = ({
 };
 
 // src/ui/components/ui/PdfPreview.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_pdf = require("react-pdf");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 import_react_pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${import_react_pdf.pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -7248,8 +7255,8 @@ var PdfPreview = ({
   maxHeight = "600px",
   className
 }) => {
-  const [hasError, setHasError] = (0, import_react50.useState)(false);
-  const [numPages, setNumPages] = (0, import_react50.useState)(0);
+  const [hasError, setHasError] = (0, import_react51.useState)(false);
+  const [numPages, setNumPages] = (0, import_react51.useState)(0);
   const height = Math.round(width * 1.3);
   const thumbnailSkeleton = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Skeleton, { width, height });
   if (hasError) {
@@ -7305,7 +7312,7 @@ var PdfPreview = ({
 };
 
 // src/ui/components/ui/VideoPlayer.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var formatVideoDuration = (seconds) => {
   if (seconds === void 0 || !Number.isFinite(seconds) || seconds < 0)
@@ -7345,20 +7352,20 @@ var VideoPlayer = ({
   defaultVolume = DEFAULT_VOLUME,
   className
 }) => {
-  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react51.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, import_react51.useState)(false);
-  const [hasPosterError, setHasPosterError] = (0, import_react51.useState)(false);
-  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react51.useState)(false);
-  const inlineVideoRef = (0, import_react51.useRef)(null);
-  const expandedVideoRef = (0, import_react51.useRef)(null);
-  (0, import_react51.useEffect)(() => {
+  const [isInlinePlaying, setIsInlinePlaying] = (0, import_react52.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react52.useState)(false);
+  const [hasPosterError, setHasPosterError] = (0, import_react52.useState)(false);
+  const [hasFramePreviewError, setHasFramePreviewError] = (0, import_react52.useState)(false);
+  const inlineVideoRef = (0, import_react52.useRef)(null);
+  const expandedVideoRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     setHasPosterError(false);
   }, [poster]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setHasFramePreviewError(false);
   }, [src]);
   const visiblePoster = hasPosterError ? void 0 : poster;
-  const attachExpandedVideo = (0, import_react51.useCallback)(
+  const attachExpandedVideo = (0, import_react52.useCallback)(
     (video) => {
       expandedVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -7370,7 +7377,7 @@ var VideoPlayer = ({
     e.preventDefault();
     (_a = expandedVideoRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
   };
-  const attachInlineVideo = (0, import_react51.useCallback)(
+  const attachInlineVideo = (0, import_react52.useCallback)(
     (video) => {
       inlineVideoRef.current = video;
       if (video) video.volume = clampVolume(defaultVolume);
@@ -7635,7 +7642,7 @@ var ScrollArea = (_a) => {
 };
 
 // src/ui/components/ui/Message.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var BUBBLE_BACKGROUND = {
   own: { solid: "bg-blue-700", pale: "bg-blue-50" },
@@ -7647,7 +7654,7 @@ var BUBBLE_TAIL = {
   teammate: "rounded-br-none",
   other: "rounded-bl-none"
 };
-var Message = (0, import_react52.forwardRef)(
+var Message = (0, import_react53.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isOwn = false,
@@ -7789,7 +7796,7 @@ var Message = (0, import_react52.forwardRef)(
 Message.displayName = "Message";
 
 // src/ui/components/ui/MessageScroller.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var SEPARATOR_LINE = {
   neutral: "",
@@ -7841,9 +7848,9 @@ var MessageScroller = ({
   viewportRef,
   className
 }) => {
-  const fallbackRef = (0, import_react53.useRef)(null);
+  const fallbackRef = (0, import_react54.useRef)(null);
   const scrollerRef = viewportRef != null ? viewportRef : fallbackRef;
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     if (!autoScroll) return;
     const viewport = scrollerRef.current;
     if (!viewport) return;
@@ -7897,7 +7904,7 @@ var MessageScroller = ({
 };
 
 // src/ui/components/ui/Stepper.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var Stepper = ({
   numberOfSteps,
@@ -7915,7 +7922,7 @@ var Stepper = ({
     children: Array.from({ length: numberOfSteps }, (_, i) => {
       const isActive = i === current;
       const isCompleted = i < current;
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_react54.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_react55.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
@@ -7935,7 +7942,7 @@ var Stepper = ({
 );
 
 // src/ui/components/ui/DatePicker.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_react_day_picker = require("react-day-picker");
 var import_locale = require("react-day-picker/locale");
 var import_style2 = require("react-day-picker/style.css");
@@ -8004,8 +8011,8 @@ var DatePicker = ({
   className
 }) => {
   const isRange = mode === "range";
-  const [open, setOpen] = (0, import_react55.useState)(false);
-  const [activePreset, setActivePreset] = (0, import_react55.useState)(null);
+  const [open, setOpen] = (0, import_react56.useState)(false);
+  const [activePreset, setActivePreset] = (0, import_react56.useState)(null);
   const resolvedPresets = presets != null ? presets : isRange ? RANGE_PRESETS : SINGLE_PRESETS;
   const displayText = isRange ? startDate && endDate ? `${(0, import_date_fns.format)(startDate, "dd/MM/yyyy")} \u2014 ${(0, import_date_fns.format)(endDate, "dd/MM/yyyy")}` : placeholder != null ? placeholder : "S\xE9lectionner une p\xE9riode" : value ? (0, import_date_fns.format)(value, "dd/MM/yyyy") : placeholder != null ? placeholder : "S\xE9lectionner une date";
   const hasValue = isRange ? Boolean(startDate && endDate) : Boolean(value);

package/dist/ui/index.mjs

@@ -3266,30 +3266,37 @@ var TableHeaderCell = ({
 );
 
 // src/ui/components/ui/table/TableRow.tsx
+import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var TableRow = ({
-  children,
-  onClick,
-  className,
-  backgroundColor,
-  accentColor
-}) => /* @__PURE__ */ jsx39(
-  "tr",
-  {
+var TableRow = forwardRef17(
+  ({
+    children,
     onClick,
-    className: cn(
-      "border-t border-grey-200 transition-colors hover:bg-black/[0.025]",
-      onClick && "cursor-pointer",
-      accentColor && "border-l-4",
-      className
-    ),
-    style: {
-      backgroundColor,
-      borderLeftColor: accentColor
-    },
-    children
-  }
+    className,
+    backgroundColor,
+    accentColor,
+    "data-index": dataIndex
+  }, ref) => /* @__PURE__ */ jsx39(
+    "tr",
+    {
+      ref,
+      "data-index": dataIndex,
+      onClick,
+      className: cn(
+        "border-t border-grey-200 transition-colors hover:bg-black/[0.025]",
+        onClick && "cursor-pointer",
+        accentColor && "border-l-4",
+        className
+      ),
+      style: {
+        backgroundColor,
+        borderLeftColor: accentColor
+      },
+      children
+    }
+  )
 );
+TableRow.displayName = "TableRow";
 
 // src/ui/components/ui/table/TableCell.tsx
 import { jsx as jsx40 } from "react/jsx-runtime";
@@ -3385,7 +3392,7 @@ var TableFooterCell = ({
 import {
   createContext as createContext2,
   useContext as useContext2,
-  forwardRef as forwardRef17,
+  forwardRef as forwardRef18,
   Children,
   cloneElement,
   isValidElement
@@ -3545,7 +3552,7 @@ var BADGE_ICON_COLOR_CLASS = {
   "orange-600": "text-orange-600",
   "purple-700": "text-purple-700"
 };
-var Avatar = forwardRef17(
+var Avatar = forwardRef18(
   (_a, ref) => {
     var _b = _a, {
       size = 40,
@@ -3598,7 +3605,7 @@ var Avatar = forwardRef17(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = forwardRef17((_a, ref) => {
+var AvatarImage = forwardRef18((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx44(
     RadixAvatar.Image,
@@ -3624,7 +3631,7 @@ var FALLBACK_COLOR_CLASS = {
   "orange-600": "bg-orange-600 text-white",
   "purple-700": "bg-purple-700 text-white"
 };
-var AvatarFallback = forwardRef17((_a, ref) => {
+var AvatarFallback = forwardRef18((_a, ref) => {
   var _b = _a, { color = "grey-600", className, style } = _b, props = __objRest(_b, ["color", "className", "style"]);
   const size = useAvatarSize();
   return /* @__PURE__ */ jsx44(
@@ -3641,7 +3648,7 @@ var AvatarFallback = forwardRef17((_a, ref) => {
   );
 });
 AvatarFallback.displayName = "AvatarFallback";
-var AvatarBadge = forwardRef17(
+var AvatarBadge = forwardRef18(
   (_a, ref) => {
     var _b = _a, { size, className, style } = _b, props = __objRest(_b, ["size", "className", "style"]);
     const avatarSize = useAvatarSize();
@@ -4243,7 +4250,7 @@ var Popover = ({
 ] });
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 
 // src/ui/components/ui/sidebar/SidebarContext.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -4253,7 +4260,7 @@ var useSidebarCollapsed = () => useContext3(SidebarCollapsedContext);
 
 // src/ui/components/ui/sidebar/Sidebar.tsx
 import { jsx as jsx50 } from "react/jsx-runtime";
-var Sidebar = forwardRef18(
+var Sidebar = forwardRef19(
   (_a, ref) => {
     var _b = _a, { collapsed = false, className, children } = _b, props = __objRest(_b, ["collapsed", "className", "children"]);
     return /* @__PURE__ */ jsx50(SidebarCollapsedProvider, { value: collapsed, children: /* @__PURE__ */ jsx50(
@@ -4274,9 +4281,9 @@ var Sidebar = forwardRef18(
 Sidebar.displayName = "Sidebar";
 
 // src/ui/components/ui/sidebar/SidebarTrigger.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
-var SidebarTrigger = forwardRef19((_a, ref) => {
+var SidebarTrigger = forwardRef20((_a, ref) => {
   var _b = _a, { collapsed, className } = _b, props = __objRest(_b, ["collapsed", "className"]);
   return /* @__PURE__ */ jsx51(
     "button",
@@ -4303,9 +4310,9 @@ var SidebarTrigger = forwardRef19((_a, ref) => {
 SidebarTrigger.displayName = "SidebarTrigger";
 
 // src/ui/components/ui/sidebar/SidebarHeader.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
-var SidebarHeader = forwardRef20(
+var SidebarHeader = forwardRef21(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ jsx52(
@@ -4320,9 +4327,9 @@ var SidebarHeader = forwardRef20(
 SidebarHeader.displayName = "SidebarHeader";
 
 // src/ui/components/ui/sidebar/SidebarContent.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-var SidebarContent = forwardRef21(
+var SidebarContent = forwardRef22(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ jsx53(
@@ -4341,9 +4348,9 @@ var SidebarContent = forwardRef21(
 SidebarContent.displayName = "SidebarContent";
 
 // src/ui/components/ui/sidebar/SidebarGroup.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { jsx as jsx54, jsxs as jsxs26 } from "react/jsx-runtime";
-var SidebarGroup = forwardRef22(
+var SidebarGroup = forwardRef23(
   (_a, ref) => {
     var _b = _a, { label, className, children } = _b, props = __objRest(_b, ["label", "className", "children"]);
     const collapsed = useSidebarCollapsed();
@@ -4364,9 +4371,9 @@ var SidebarGroup = forwardRef22(
 SidebarGroup.displayName = "SidebarGroup";
 
 // src/ui/components/ui/sidebar/SidebarMenuButton.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { jsx as jsx55, jsxs as jsxs27 } from "react/jsx-runtime";
-var SidebarMenuButton = forwardRef23(
+var SidebarMenuButton = forwardRef24(
   (_a, ref) => {
     var _b = _a, {
       icon,
@@ -4446,9 +4453,9 @@ var SidebarMenuButton = forwardRef23(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 
 // src/ui/components/ui/sidebar/SidebarMenuSub.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
-var SidebarMenuSub = forwardRef24(
+var SidebarMenuSub = forwardRef25(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ jsx56(
@@ -4466,22 +4473,22 @@ var SidebarMenuSub = forwardRef24(
 SidebarMenuSub.displayName = "SidebarMenuSub";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubItem.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var SidebarMenuSubItem = forwardRef25((_a, ref) => {
+var SidebarMenuSubItem = forwardRef26((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsx57("li", __spreadValues({ ref, className: cn("relative", className) }, props));
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 // src/ui/components/ui/sidebar/SidebarMenuSubButton.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var SIZE_CLASS = {
   default: "h-10",
   lg: "h-14"
 };
-var SidebarMenuSubButton = forwardRef26((_a, ref) => {
+var SidebarMenuSubButton = forwardRef27((_a, ref) => {
   var _b = _a, { active, size = "default", className } = _b, props = __objRest(_b, ["active", "size", "className"]);
   return /* @__PURE__ */ jsx58(
     "button",
@@ -4502,9 +4509,9 @@ var SidebarMenuSubButton = forwardRef26((_a, ref) => {
 SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 // src/ui/components/ui/sidebar/SidebarFooter.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
-var SidebarFooter = forwardRef27(
+var SidebarFooter = forwardRef28(
   (_a, ref) => {
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ jsx59(
@@ -4542,9 +4549,9 @@ var SidebarSupportInfo = ({
 };
 
 // src/ui/components/ui/sidebar/SidebarMenuSearchInput.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import { jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
-var SidebarMenuSearchInput = forwardRef28((_a, ref) => {
+var SidebarMenuSearchInput = forwardRef29((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxs29(InputGroup, { children: [
     /* @__PURE__ */ jsx61(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx61(FaIcon, { name: "magnifying-glass", size: 14, className: "text-white/50" }) }),
@@ -4898,7 +4905,7 @@ var toast = {
 };
 
 // src/ui/components/ui/PageContainer.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var pageContainerVariants = cva13(
@@ -4915,7 +4922,7 @@ var pageContainerVariants = cva13(
     defaultVariants: { padding: "md" }
   }
 );
-var PageContainer = forwardRef29(
+var PageContainer = forwardRef30(
   (_a, ref) => {
     var _b = _a, { padding, className } = _b, props = __objRest(_b, ["padding", "className"]);
     return /* @__PURE__ */ jsx66(
@@ -6496,7 +6503,7 @@ var Timeline = ({
 };
 
 // src/ui/components/ui/ColorPicker.tsx
-import { forwardRef as forwardRef30, useState as useState13 } from "react";
+import { forwardRef as forwardRef31, useState as useState13 } from "react";
 import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx82, jsxs as jsxs46 } from "react/jsx-runtime";
 var swatchVariants = cva15(
@@ -6525,7 +6532,7 @@ var inputVariants = cva15(
     defaultVariants: { size: "m" }
   }
 );
-var ColorPicker = forwardRef30(
+var ColorPicker = forwardRef31(
   ({
     label,
     value,
@@ -6888,7 +6895,7 @@ var FilePicker = ({
 };
 
 // src/ui/components/ui/Item.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx85 } from "react/jsx-runtime";
 var itemVariants = cva16(
@@ -6908,7 +6915,7 @@ var itemVariants = cva16(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Item4 = forwardRef31(
+var Item4 = forwardRef32(
   (_a, ref) => {
     var _b = _a, { variant, size, className } = _b, props = __objRest(_b, ["variant", "size", "className"]);
     return /* @__PURE__ */ jsx85(
@@ -7469,7 +7476,7 @@ var ScrollArea = (_a) => {
 };
 
 // src/ui/components/ui/Message.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx90, jsxs as jsxs53 } from "react/jsx-runtime";
 var BUBBLE_BACKGROUND = {
   own: { solid: "bg-blue-700", pale: "bg-blue-50" },
@@ -7481,7 +7488,7 @@ var BUBBLE_TAIL = {
   teammate: "rounded-br-none",
   other: "rounded-bl-none"
 };
-var Message = forwardRef32(
+var Message = forwardRef33(
   (_a, ref) => {
     var _b = _a, {
       isOwn = false,

package/package.json

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