design-zystem 1.0.328 → 1.0.330

package/dist/index.d.mts

@@ -1059,8 +1059,9 @@ interface TooltipProps {
     width?: string;
     height?: string;
     direction?: 'top' | 'bottom' | 'left' | 'right';
+    fullWidth?: boolean;
 }
-declare const Tooltip: ({ backgroundColor, data, width, height, direction, children, }: TooltipProps) => react.JSX.Element;
+declare const Tooltip: ({ backgroundColor, data, width, height, direction, fullWidth, children, }: TooltipProps) => react.JSX.Element;
 
 interface PaginationProps {
     currentPage: number;

package/dist/index.d.ts

@@ -1059,8 +1059,9 @@ interface TooltipProps {
     width?: string;
     height?: string;
     direction?: 'top' | 'bottom' | 'left' | 'right';
+    fullWidth?: boolean;
 }
-declare const Tooltip: ({ backgroundColor, data, width, height, direction, children, }: TooltipProps) => react.JSX.Element;
+declare const Tooltip: ({ backgroundColor, data, width, height, direction, fullWidth, children, }: TooltipProps) => react.JSX.Element;
 
 interface PaginationProps {
     currentPage: number;

package/dist/index.js

@@ -1387,7 +1387,8 @@ var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var StyledTooltipWrapper = import_styled_components12.default.div`
   position: relative;
-  display: inline-block;
+  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
+  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
   cursor: pointer;
 `;
 var StyledTooltipContent = import_styled_components12.default.div`
@@ -1484,6 +1485,7 @@ var Tooltip = ({
   width,
   height,
   direction = "top",
+  fullWidth = false,
   children
 }) => {
   const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
@@ -1492,6 +1494,7 @@ var Tooltip = ({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     StyledTooltipWrapper,
     {
+      $fullWidth: fullWidth,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
@@ -1739,7 +1742,7 @@ var NewModal = ({
                   children: leftButtonLabel
                 }
               ) }),
-              rightButtonLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { flex: "1", children: confirmDisabled && rightButtonDisabledTooltip ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tooltip, { data: [rightButtonDisabledTooltip], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              rightButtonLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { flex: "1", children: confirmDisabled && rightButtonDisabledTooltip ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tooltip, { data: [rightButtonDisabledTooltip], fullWidth: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Button,
                 {
                   outline: isOutline,

package/dist/index.mjs

@@ -1244,7 +1244,8 @@ import styled12 from "styled-components";
 import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var StyledTooltipWrapper = styled12.div`
   position: relative;
-  display: inline-block;
+  display: ${(props) => props.$fullWidth ? "block" : "inline-block"};
+  width: ${(props) => props.$fullWidth ? "100%" : "auto"};
   cursor: pointer;
 `;
 var StyledTooltipContent = styled12.div`
@@ -1341,6 +1342,7 @@ var Tooltip = ({
   width,
   height,
   direction = "top",
+  fullWidth = false,
   children
 }) => {
   const [isVisible, setIsVisible] = useState2(false);
@@ -1349,6 +1351,7 @@ var Tooltip = ({
   return /* @__PURE__ */ jsxs5(
     StyledTooltipWrapper,
     {
+      $fullWidth: fullWidth,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
@@ -1596,7 +1599,7 @@ var NewModal = ({
                   children: leftButtonLabel
                 }
               ) }),
-              rightButtonLabel && /* @__PURE__ */ jsx16(Row, { flex: "1", children: confirmDisabled && rightButtonDisabledTooltip ? /* @__PURE__ */ jsx16(Tooltip, { data: [rightButtonDisabledTooltip], children: /* @__PURE__ */ jsx16(
+              rightButtonLabel && /* @__PURE__ */ jsx16(Row, { flex: "1", children: confirmDisabled && rightButtonDisabledTooltip ? /* @__PURE__ */ jsx16(Tooltip, { data: [rightButtonDisabledTooltip], fullWidth: true, children: /* @__PURE__ */ jsx16(
                 Button,
                 {
                   outline: isOutline,

package/dist/ui/index.d.mts

@@ -687,8 +687,8 @@ interface DrawerProps {
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
      * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Il ne se ferme alors
-     * plus au clic extérieur, seulement par son bouton de fermeture.
+     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
+     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.d.ts

@@ -687,8 +687,8 @@ interface DrawerProps {
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
      * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Il ne se ferme alors
-     * plus au clic extérieur, seulement par son bouton de fermeture.
+     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
+     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.js

@@ -3376,6 +3376,7 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
+var import_react24 = require("react");
 var import_vaul = require("vaul");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var CONTENT_POSITION = {
@@ -3394,6 +3395,20 @@ var Drawer = ({
   className
 }) => {
   const isVertical = direction === "left" || direction === "right";
+  const contentRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
+    if (modal || !open || typeof document === "undefined") return;
+    const handlePointerDown = (event) => {
+      var _a;
+      const target = event.target;
+      if (!target) return;
+      if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
+      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      onClose == null ? void 0 : onClose();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [modal, open, onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_vaul.Drawer.Root,
     {
@@ -3406,6 +3421,7 @@ var Drawer = ({
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_vaul.Drawer.Content,
           {
+            ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
               if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
@@ -3657,7 +3673,7 @@ var toast = {
 };
 
 // src/ui/components/ui/PageContainer.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var pageContainerVariants = (0, import_class_variance_authority13.cva)(
@@ -3674,7 +3690,7 @@ var pageContainerVariants = (0, import_class_variance_authority13.cva)(
     defaultVariants: { padding: "md" }
   }
 );
-var PageContainer = (0, import_react24.forwardRef)(
+var PageContainer = (0, import_react25.forwardRef)(
   (_a, ref) => {
     var _b = _a, { padding, className } = _b, props = __objRest(_b, ["padding", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -3689,7 +3705,7 @@ var PageContainer = (0, import_react24.forwardRef)(
 PageContainer.displayName = "PageContainer";
 
 // src/ui/components/ui/IconTabs.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var IconTabs = ({
   items,
@@ -3699,10 +3715,10 @@ var IconTabs = ({
   className
 }) => {
   var _a;
-  const listRef = (0, import_react25.useRef)(null);
-  const tabRefs = (0, import_react25.useRef)([]);
-  const [bar, setBar] = (0, import_react25.useState)({ left: 0, top: 0, width: 0, height: 0 });
-  const updateBar = (0, import_react25.useCallback)(() => {
+  const listRef = (0, import_react26.useRef)(null);
+  const tabRefs = (0, import_react26.useRef)([]);
+  const [bar, setBar] = (0, import_react26.useState)({ left: 0, top: 0, width: 0, height: 0 });
+  const updateBar = (0, import_react26.useCallback)(() => {
     const root = listRef.current;
     const activeEl = tabRefs.current[value];
     if (!root || !activeEl) return;
@@ -3715,7 +3731,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -3862,7 +3878,7 @@ var Banner = ({
 );
 
 // src/ui/components/ui/FloatingButton.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/ui/lib/floatingArc.ts
 var MAX_STEP = 65;
@@ -4008,17 +4024,17 @@ var FloatingButton = ({
   persistKey,
   safeArea
 }) => {
-  const containerRef = (0, import_react26.useRef)(null);
-  const [placement, setPlacement] = (0, import_react26.useState)(() => ({
+  const containerRef = (0, import_react27.useRef)(null);
+  const [placement, setPlacement] = (0, import_react27.useState)(() => ({
     geometry: __spreadValues({ base: 90 }, arcLayout(actions.length, ARC_RADIUS, SUB_SIZE)),
     shift: { x: 0, y: 0 }
   }));
-  const [isDragging, setIsDragging] = (0, import_react26.useState)(false);
-  const [offset, setOffset] = (0, import_react26.useState)(() => readStoredOffset(persistKey));
-  const offsetRef = (0, import_react26.useRef)(offset);
-  const lastPointRef = (0, import_react26.useRef)({ x: 0, y: 0 });
-  const dragDistanceRef = (0, import_react26.useRef)(0);
-  const clampOffset = (0, import_react26.useCallback)(
+  const [isDragging, setIsDragging] = (0, import_react27.useState)(false);
+  const [offset, setOffset] = (0, import_react27.useState)(() => readStoredOffset(persistKey));
+  const offsetRef = (0, import_react27.useRef)(offset);
+  const lastPointRef = (0, import_react27.useRef)({ x: 0, y: 0 });
+  const dragDistanceRef = (0, import_react27.useRef)(0);
+  const clampOffset = (0, import_react27.useCallback)(
     (next) => {
       var _a, _b, _c, _d;
       const el = containerRef.current;
@@ -4038,14 +4054,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_react26.useLayoutEffect)(() => {
+  (0, import_react27.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_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -4081,7 +4097,7 @@ var FloatingButton = ({
       window.removeEventListener("pointercancel", endDrag);
     };
   }, [draggable, isDragging, persistKey, clampOffset]);
-  const resolvePlacement = (0, import_react26.useCallback)(() => {
+  const resolvePlacement = (0, import_react27.useCallback)(() => {
     var _a, _b, _c, _d;
     const el = containerRef.current;
     if (!el || typeof window === "undefined") return;
@@ -4110,13 +4126,13 @@ var FloatingButton = ({
     safeArea == null ? void 0 : safeArea.right,
     safeArea == null ? void 0 : safeArea.bottom
   ]);
-  (0, import_react26.useLayoutEffect)(() => {
+  (0, import_react27.useLayoutEffect)(() => {
     if (isOpen) resolvePlacement();
   }, [isOpen, offset, resolvePlacement]);
-  (0, import_react26.useLayoutEffect)(() => {
+  (0, import_react27.useLayoutEffect)(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -4635,7 +4651,7 @@ var Timeline = ({
 };
 
 // src/ui/components/ui/ColorPicker.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var swatchVariants = (0, import_class_variance_authority15.cva)(
@@ -4664,7 +4680,7 @@ var inputVariants = (0, import_class_variance_authority15.cva)(
     defaultVariants: { size: "m" }
   }
 );
-var ColorPicker = (0, import_react27.forwardRef)(
+var ColorPicker = (0, import_react28.forwardRef)(
   ({
     label,
     value,
@@ -4674,7 +4690,7 @@ var ColorPicker = (0, import_react27.forwardRef)(
     size,
     className
   }, ref) => {
-    const [internalColor, setInternalColor] = (0, import_react27.useState)(defaultValue);
+    const [internalColor, setInternalColor] = (0, import_react28.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const handleChange = (e) => {
       const next = e.target.value;
@@ -4738,7 +4754,7 @@ var ColorPicker = (0, import_react27.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/FileUploadZone.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
@@ -4771,23 +4787,23 @@ var FileUploadZone = ({
   showFileName = false,
   className
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react28.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react28.useState)(
+  const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react29.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react28.useState)(null);
-  const [fileName, setFileName] = (0, import_react28.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react28.useState)(null);
-  const inputRef = (0, import_react28.useRef)(null);
+  const [fileType, setFileType] = (0, import_react29.useState)(null);
+  const [fileName, setFileName] = (0, import_react29.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react29.useState)(null);
+  const inputRef = (0, import_react29.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_react28.useCallback)(
+  const emitError = (0, import_react29.useCallback)(
     (message) => onError ? onError(message) : setInlineError(message),
     [onError]
   );
-  const validateFile = (0, import_react28.useCallback)(
+  const validateFile = (0, import_react29.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type))
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -4801,7 +4817,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react28.useCallback)(
+  const processFile = (0, import_react29.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -4816,7 +4832,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react28.useCallback)(
+  const processFiles = (0, import_react29.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {
@@ -4975,7 +4991,7 @@ var FileUploadZone = ({
 };
 
 // src/ui/components/ui/FilePicker.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var FilePicker = ({
   label,
@@ -4989,7 +5005,7 @@ var FilePicker = ({
   disabled = false,
   className
 }) => {
-  const inputRef = (0, import_react29.useRef)(null);
+  const inputRef = (0, import_react30.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "input",
@@ -5027,7 +5043,7 @@ var FilePicker = ({
 };
 
 // src/ui/components/ui/Item.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var itemVariants = (0, import_class_variance_authority16.cva)(
@@ -5047,7 +5063,7 @@ var itemVariants = (0, import_class_variance_authority16.cva)(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Item3 = (0, import_react30.forwardRef)(
+var Item3 = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { variant, size, className } = _b, props = __objRest(_b, ["variant", "size", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -5206,7 +5222,7 @@ var Attachment = ({
 };
 
 // src/ui/components/ui/PdfPreview.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_pdf = require("react-pdf");
 var import_jsx_runtime65 = 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`;
@@ -5216,8 +5232,8 @@ var PdfPreview = ({
   maxHeight = "600px",
   className
 }) => {
-  const [hasError, setHasError] = (0, import_react31.useState)(false);
-  const [numPages, setNumPages] = (0, import_react31.useState)(0);
+  const [hasError, setHasError] = (0, import_react32.useState)(false);
+  const [numPages, setNumPages] = (0, import_react32.useState)(0);
   const height = Math.round(width * 1.3);
   const thumbnailSkeleton = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Skeleton, { width, height });
   if (hasError) {
@@ -5324,7 +5340,7 @@ var ScrollArea = (_a) => {
 };
 
 // src/ui/components/ui/Message.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var BUBBLE_BACKGROUND = {
   own: { solid: "bg-blue-700", soft: "bg-blue-50" },
@@ -5334,7 +5350,7 @@ var BUBBLE_TAIL = {
   own: "rounded-br-none",
   other: "rounded-bl-none"
 };
-var Message = (0, import_react32.forwardRef)(
+var Message = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "other",
@@ -5443,7 +5459,7 @@ var Message = (0, import_react32.forwardRef)(
 Message.displayName = "Message";
 
 // src/ui/components/ui/MessageScroller.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var SEPARATOR_LINE = {
   neutral: "",
@@ -5494,9 +5510,9 @@ var MessageScroller = ({
   viewportRef,
   className
 }) => {
-  const fallbackRef = (0, import_react33.useRef)(null);
+  const fallbackRef = (0, import_react34.useRef)(null);
   const scrollerRef = viewportRef != null ? viewportRef : fallbackRef;
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (!autoScroll) return;
     const viewport = scrollerRef.current;
     if (!viewport) return;
@@ -5538,7 +5554,7 @@ var MessageScroller = ({
 };
 
 // src/ui/components/ui/Stepper.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var Stepper = ({
   numberOfSteps,
@@ -5556,7 +5572,7 @@ var Stepper = ({
     children: Array.from({ length: numberOfSteps }, (_, i) => {
       const isActive = i === current;
       const isCompleted = i < current;
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react34.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react35.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
@@ -5576,7 +5592,7 @@ var Stepper = ({
 );
 
 // src/ui/components/ui/DatePicker.tsx
-var import_react35 = require("react");
+var import_react36 = 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");
@@ -5637,8 +5653,8 @@ var DatePicker = ({
   className
 }) => {
   const isRange = mode === "range";
-  const [open, setOpen] = (0, import_react35.useState)(false);
-  const [activePreset, setActivePreset] = (0, import_react35.useState)(null);
+  const [open, setOpen] = (0, import_react36.useState)(false);
+  const [activePreset, setActivePreset] = (0, import_react36.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

@@ -3219,6 +3219,7 @@ var CollapsibleContent = (_a) => {
 };
 
 // src/ui/components/ui/Drawer.tsx
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
 var CONTENT_POSITION = {
@@ -3237,6 +3238,20 @@ var Drawer = ({
   className
 }) => {
   const isVertical = direction === "left" || direction === "right";
+  const contentRef = useRef6(null);
+  useEffect5(() => {
+    if (modal || !open || typeof document === "undefined") return;
+    const handlePointerDown = (event) => {
+      var _a;
+      const target = event.target;
+      if (!target) return;
+      if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
+      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      onClose == null ? void 0 : onClose();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [modal, open, onClose]);
   return /* @__PURE__ */ jsx45(
     VaulDrawer.Root,
     {
@@ -3249,6 +3264,7 @@ var Drawer = ({
         /* @__PURE__ */ jsx45(
           VaulDrawer.Content,
           {
+            ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
               if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
@@ -3532,7 +3548,7 @@ var PageContainer = forwardRef17(
 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 { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef7, useState as useState6 } from "react";
 import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var IconTabs = ({
   items,
@@ -3542,8 +3558,8 @@ var IconTabs = ({
   className
 }) => {
   var _a;
-  const listRef = useRef6(null);
-  const tabRefs = useRef6([]);
+  const listRef = useRef7(null);
+  const tabRefs = useRef7([]);
   const [bar, setBar] = useState6({ left: 0, top: 0, width: 0, height: 0 });
   const updateBar = useCallback2(() => {
     const root = listRef.current;
@@ -3558,7 +3574,7 @@ var IconTabs = ({
       height: box.height
     });
   }, [value]);
-  useEffect5(() => {
+  useEffect6(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     if (listRef.current) ro.observe(listRef.current);
@@ -3707,9 +3723,9 @@ var Banner = ({
 // src/ui/components/ui/FloatingButton.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useLayoutEffect,
-  useRef as useRef7,
+  useRef as useRef8,
   useState as useState7
 } from "react";
 
@@ -3857,16 +3873,16 @@ var FloatingButton = ({
   persistKey,
   safeArea
 }) => {
-  const containerRef = useRef7(null);
+  const containerRef = useRef8(null);
   const [placement, setPlacement] = useState7(() => ({
     geometry: __spreadValues({ base: 90 }, arcLayout(actions.length, ARC_RADIUS, SUB_SIZE)),
     shift: { x: 0, y: 0 }
   }));
   const [isDragging, setIsDragging] = useState7(false);
   const [offset, setOffset] = useState7(() => readStoredOffset(persistKey));
-  const offsetRef = useRef7(offset);
-  const lastPointRef = useRef7({ x: 0, y: 0 });
-  const dragDistanceRef = useRef7(0);
+  const offsetRef = useRef8(offset);
+  const lastPointRef = useRef8({ x: 0, y: 0 });
+  const dragDistanceRef = useRef8(0);
   const clampOffset = useCallback3(
     (next) => {
       var _a, _b, _c, _d;
@@ -3894,7 +3910,7 @@ var FloatingButton = ({
     offsetRef.current = corrected;
     setOffset(corrected);
   }, [clampOffset]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!draggable || !isDragging) return;
     const onPointerMove = (e) => {
       const dx = e.clientX - lastPointRef.current.x;
@@ -3965,7 +3981,7 @@ var FloatingButton = ({
   useLayoutEffect(() => {
     resolvePlacement();
   }, [resolvePlacement]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const onResize = () => {
       resolvePlacement();
@@ -4587,7 +4603,7 @@ var ColorPicker = forwardRef18(
 ColorPicker.displayName = "ColorPicker";
 
 // src/ui/components/ui/FileUploadZone.tsx
-import { useCallback as useCallback4, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback4, useRef as useRef9, useState as useState9 } from "react";
 import { Fragment as Fragment3, jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
@@ -4627,7 +4643,7 @@ var FileUploadZone = ({
   const [fileType, setFileType] = useState9(null);
   const [fileName, setFileName] = useState9(null);
   const [inlineError, setInlineError] = useState9(null);
-  const inputRef = useRef8(null);
+  const inputRef = useRef9(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
@@ -4824,7 +4840,7 @@ var FileUploadZone = ({
 };
 
 // src/ui/components/ui/FilePicker.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { Fragment as Fragment4, jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
 var FilePicker = ({
   label,
@@ -4838,7 +4854,7 @@ var FilePicker = ({
   disabled = false,
   className
 }) => {
-  const inputRef = useRef9(null);
+  const inputRef = useRef10(null);
   return /* @__PURE__ */ jsxs35(Fragment4, { children: [
     /* @__PURE__ */ jsx62(
       "input",
@@ -5292,7 +5308,7 @@ var Message = forwardRef20(
 Message.displayName = "Message";
 
 // src/ui/components/ui/MessageScroller.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef10 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef11 } from "react";
 import { jsx as jsx68, jsxs as jsxs40 } from "react/jsx-runtime";
 var SEPARATOR_LINE = {
   neutral: "",
@@ -5343,7 +5359,7 @@ var MessageScroller = ({
   viewportRef,
   className
 }) => {
-  const fallbackRef = useRef10(null);
+  const fallbackRef = useRef11(null);
   const scrollerRef = viewportRef != null ? viewportRef : fallbackRef;
   useLayoutEffect2(() => {
     if (!autoScroll) return;

package/package.json

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