@optiaxiom/react 1.6.0 → 1.6.2

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent.js

@@ -30,9 +30,7 @@ const DateRangePickerContent = forwardRef(
     const { labelId: fieldLabelId } = useFieldContext(
       "@optiaxiom/react/DateRangePickerContent"
     );
-    const { setOpen, setValue, triggerRef, value } = useDateRangePickerContext(
-      "@optiaxiom/react/DateRangePickerContent"
-    );
+    const { setFrom, setOpen, setValue, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerContent");
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
       PopoverContent,
@@ -54,9 +52,14 @@ const DateRangePickerContent = forwardRef(
                 max,
                 min,
                 mode: "range",
+                onDateSelect: (date) => {
+                  setFrom((from) => from ? void 0 : date);
+                },
                 onValueChange: (value2) => {
                   setValue(value2);
-                  setOpen(false);
+                  requestAnimationFrame(() => {
+                    setOpen(false);
+                  });
                 },
                 today,
                 value,

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-DbyfuQZW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-B0GJMeXb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'_1urbzl2']});
+var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'qkkrl8']});
 
 export { root };

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-B9PeAY2B.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-CT-eyyIv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'lgo3ha']});
+var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'_2jpw7i']});
 
 export { footer };

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-0tNwGZhH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-CA0Tf9aV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'xxmqss']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'wp76mu']});
 
 export { header };

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1qe9czb']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1hx349w']});
 
 export { body };

package/dist/esm/packages/react/src/dialog/DialogContent-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DOGGV28d.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-D-n9WxBM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DWYDlan0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_2dwvk9'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1a457mp'],variants:{size:{sm:'n6my50',md:'tnpfar',lg:'_18ahn6b',fullscreen:'_1r2khdq'}}});
-var nestedDialogCountVar = 'var(--slz4p1)';
-var scrollPaddingBottomVar = 'var(--ck7ijg)';
-var scrollPaddingTopVar = 'var(--g32btc)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'bftf6g'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1x713ls'],variants:{size:{sm:'qdkrkj',md:'gpnux9',lg:'_1bgrhv8',fullscreen:'_8qo8e8'}}});
+var nestedDialogCountVar = 'var(--wfolzn)';
+var scrollPaddingBottomVar = 'var(--yry76c)';
+var scrollPaddingTopVar = 'var(--_3jvv6j)';
 
 export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-XnfJ6MTr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-Cpb4xCK9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_11ko2jo']});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1a6mf93']});
 
 export { footer };

package/dist/esm/packages/react/src/dialog/DialogHeader-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DgNn_B8T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-Bz3pgz63.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'dcxny0']});
-var close = recipeRuntime({base:['_1vxm4mn']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1nfakxr']});
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'vq1aka']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_54h474']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'hk5q56']});
+var close = recipeRuntime({base:['_1vtz82j']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_17pj2ia']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1g9m6oo']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1itid9q']});
 
 export { actions, close, description, header, title };

package/dist/esm/packages/react/src/disclosure/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-BnRQ3Stq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-BERIBOjd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_8gu8wg']});
-var outer = recipeRuntime({base:[{display:'grid'},'_32522j'],variants:{scale:{false:'_1atflwy',true:{}}}});
+var inner = recipeRuntime({base:['_1bn8w2m']});
+var outer = recipeRuntime({base:[{display:'grid'},'_16ceom5'],variants:{scale:{false:'xzuyoq',true:{}}}});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-eRkTu0_A.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-1KlSCIQR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_11lmu6j',start:'guaei8'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_12nflk5']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1wnidmj']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_188av6m',start:'v6wnrx'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'qoep6p']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'yk5yyy']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/file-upload/FileUpload-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-DLM3eS_3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-DdiutqqU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var upload = recipeRuntime({base:[{color:'fg.default'},'_1qxv31l']});
+var upload = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1b1flr4']});
 
 export { upload };

package/dist/esm/packages/react/src/file-upload/FileUpload.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useDropzone } from 'react-dropzone';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -9,24 +9,18 @@ import { upload } from './FileUpload-css.js';
 import { FileUploadProvider } from './FileUploadContext.js';
 
 const FileUpload = forwardRef(
-  ({ accept, children, className, onFilesDrop, ...props }, ref) => {
-    const { getInputProps, getRootProps, isDragActive, open } = useDropzone({
-      accept,
-      noClick: true,
-      noKeyboard: true,
-      onDrop: (acceptedFiles) => {
-        if (acceptedFiles.length) {
-          onFilesDrop?.(acceptedFiles);
-        }
-      }
-    });
+  ({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const inputRef = useRef(null);
     return /* @__PURE__ */ jsx(
       FileUploadProvider,
       {
-        getInputProps,
-        getRootProps,
-        isDragActive,
-        openFileDialog: open,
+        accept: (accept ?? []).join(","),
+        disabled,
+        inputRef,
+        onFilesDrop,
+        rootRef: innerRef,
         children: /* @__PURE__ */ jsx(Box, { ref, ...upload({}, className), ...props, children })
       }
     );

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-HAbbH3QD.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-DB6nbjFD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-CM5f737W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',border:'1',fontSize:'md',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors',z:'10'},'icu0r6'],variants:{drag:{false:{},true:['_1cqzvag']},hidden:{false:'_6h6z4a',true:'w0itao'},overlay:{false:{},true:'gy68n6'}}});
+var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'_1d6rnhc'],variants:{drag:{false:{},true:['lebufz']},hidden:{false:'yt2zth',true:'_66hu3b'},overlay:{false:{flex:'1'},true:[{z:'10'},'at7tsc']}}});
+var label = recipeRuntime({base:[{alignItems:'center',gap:'8'}],variants:{disabled:{false:{},true:'_4319ao'}}});
 
-export { dropzone };
+export { dropzone, label };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone.js

@@ -1,57 +1,73 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useState, useRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
-import { IconFileImportSolid } from '../icons/IconFileImportSolid.js';
+import { IconFileImport } from '../icons/IconFileImport.js';
 import { Text } from '../text/Text.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useFileUploadContext } from './FileUploadContext.js';
-import { dropzone } from './FileUploadDropzone-css.js';
+import { dropzone, label } from './FileUploadDropzone-css.js';
 import { FileUploadTrigger } from './FileUploadTrigger.js';
+import { useContainerSize } from './useContainerSize.js';
 import { useDraggingOverBody } from './useDraggingOverBody.js';
+import { useFileUploadDragging } from './useFileUploadDragging.js';
+import { useFileUploadDrop } from './useFileUploadDrop.js';
+import { useStickyPosition } from './useStickyPosition.js';
 
 const FileUploadDropzone = forwardRef(
   ({
     children,
     className,
     description,
-    label = "Drop your files here",
-    overlay,
+    label: label$1 = "Drag and drop files here",
+    overlay = false,
     ...props
-  }, ref) => {
-    const { getInputProps, getRootProps, isDragActive } = useFileUploadContext(
+  }, outerRef) => {
+    const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext(
       "@optiaxiom/react/FileUploadDropzone"
     );
+    const [isDragging, setIsDragging] = useState(false);
     const isDraggingOverBody = useDraggingOverBody();
+    const innerRef = useRef(null);
+    useStickyPosition(innerRef, overlay && isDraggingOverBody);
+    const size = useContainerSize(innerRef) ?? 0;
     return /* @__PURE__ */ jsxs(
       Flex,
       {
-        ref,
-        ...getRootProps({
-          ...dropzone(
-            {
-              drag: isDragActive,
-              hidden: overlay && !isDraggingOverBody,
-              overlay
-            },
-            className
-          ),
-          ...props
-        }),
+        fontSize: size > 448 ? "lg" : "md",
+        ref: useComposedRefs(innerRef, outerRef),
+        ...dropzone(
+          {
+            drag: isDragging,
+            hidden: overlay && !isDraggingOverBody,
+            overlay
+          },
+          className
+        ),
+        ...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(
             "input",
             {
-              ...getInputProps({
-                "aria-description": description,
-                "aria-label": label
-              })
+              accept,
+              "aria-description": description,
+              "aria-label": label$1,
+              disabled,
+              multiple: true,
+              onChange: (event) => {
+                onFilesDrop?.([...event.target.files || []]);
+                event.target.value = "";
+              },
+              ref: inputRef,
+              type: "file"
             }
-          ),
-          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: "8", children: [
-            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsx(IconFileImportSolid, {}) }),
-            /* @__PURE__ */ jsx(Text, { children: label }),
-            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", children: description })
+          ) }),
+          /* @__PURE__ */ jsxs(Flex, { ...label({ disabled }), children: [
+            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", h: size > 448 ? "lg" : "sm", children: /* @__PURE__ */ jsx(IconFileImport, {}) }),
+            /* @__PURE__ */ jsx(Text, { children: label$1 }),
+            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", children: description })
           ] }),
           !overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
         ]

package/dist/esm/packages/react/src/file-upload/FileUploadTrigger.js

@@ -7,23 +7,26 @@ import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { useFileUploadContext } from './FileUploadContext.js';
+import { useFileUploadTrigger } from './useFileUploadTrigger.js';
 
 const Slot = createSlot("@optiaxiom/react/FileUploadTrigger");
 const FileUploadTrigger = forwardRef(({ asChild, children, onClick, ...props }, ref) => {
   const { boxProps, restProps } = extractBoxProps(props);
   const Comp = asChild ? Slot : Button;
-  const { openFileDialog } = useFileUploadContext(
+  const { disabled } = useFileUploadContext(
     "@optiaxiom/react/FileUploadTrigger"
   );
+  const open = useFileUploadTrigger();
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsx(
     Comp,
     {
+      disabled,
       onClick: (event) => {
         onClick?.(event);
         if (event.defaultPrevented) {
           return;
         }
-        openFileDialog();
+        open();
       },
       ref,
       ...restProps,

package/dist/esm/packages/react/src/file-upload/useContainerSize.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useContainerSize = (ref) => {
+  const [size, setSize] = useState();
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      if (!ref.current) {
+        return;
+      }
+      for (const entry of entries) {
+        setSize(entry.borderBoxSize[0].blockSize);
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+};
+
+export { useContainerSize };

package/dist/esm/packages/react/src/file-upload/useDraggingOverBody.js

@@ -1,9 +1,16 @@
 import { useState, useRef, useEffect } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
 
 const useDraggingOverBody = () => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
   const [isDragging, setIsDragging] = useState(false);
   const dropRef = useRef();
   useEffect(() => {
+    if (disabled) {
+      return;
+    }
     const over = () => {
       setIsDragging(true);
       window.clearTimeout(dropRef.current);
@@ -15,7 +22,7 @@ const useDraggingOverBody = () => {
     return () => {
       document.body.removeEventListener("dragover", over);
     };
-  }, []);
+  }, [disabled]);
   return isDragging;
 };
 

package/dist/esm/packages/react/src/file-upload/useFileUploadDragging.js

@@ -0,0 +1,42 @@
+import { useRef } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadDragging = ({ onDragEnter, onDragLeave, onDrop, ...props } = {}, onDraggingChange) => {
+  const { disabled } = useFileUploadContext(
+    "@optiaxiom/react/FileUploadDropzone"
+  );
+  const targetsRef = useRef([]);
+  return {
+    ...props,
+    onDragEnter: (event) => {
+      onDragEnter?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = [...targetsRef.current, event.target];
+      onDraggingChange(true);
+    },
+    onDragLeave: (event) => {
+      onDragLeave?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = targetsRef.current.filter(
+        (element) => element !== event.target
+      );
+      if (targetsRef.current.length === 0) {
+        onDraggingChange(false);
+      }
+    },
+    onDrop: (event) => {
+      onDrop?.(event);
+      if (disabled) {
+        return;
+      }
+      targetsRef.current = [];
+      onDraggingChange(false);
+    }
+  };
+};
+
+export { useFileUploadDragging };

package/dist/esm/packages/react/src/file-upload/useFileUploadDrop.js

@@ -0,0 +1,113 @@
+import { AxiomAuthContext } from '@optiaxiom/globals';
+import { useContext } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadDrop = ({
+  onDragOver,
+  onDrop,
+  ...props
+} = {}) => {
+  const { accept, disabled, onFilesDrop } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadDrop"
+  );
+  const auth = useContext(AxiomAuthContext);
+  return {
+    ...props,
+    onDragOver: (event) => {
+      onDragOver?.(event);
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+    },
+    onDrop: async (event) => {
+      onDrop?.(event);
+      if (disabled) {
+        return;
+      }
+      event.preventDefault();
+      onFilesDrop?.(
+        event.dataTransfer.items ? (await Promise.all(
+          Array.from(event.dataTransfer.items).map((item) => {
+            if (item.kind === "file") {
+              const file = item.getAsFile();
+              return file && isValidFile(file, accept) ? file : null;
+            } else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
+              if (!auth) {
+                throw new Error(
+                  "Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?"
+                );
+              }
+              try {
+                const data = JSON.parse(
+                  event.dataTransfer.getData(item.type)
+                );
+                const resource = {
+                  name: data.name || "",
+                  type: data.mime_type || "",
+                  url: data.link
+                };
+                return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
+              } catch {
+              }
+            }
+            return null;
+          })
+        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter(
+          (file) => isValidFile(file, accept)
+        )
+      );
+    }
+  };
+};
+async function getRemoteFile(resource, auth, retry = false) {
+  const url = new URL(resource.url);
+  if (!url.searchParams.has("instance_id")) {
+    url.searchParams.set("instance_id", auth.instance || "");
+  }
+  const response = await fetch(url.toString(), {
+    headers: {
+      Authorization: `Bearer ${auth.token}`,
+      "X-Instance-Id": auth.instance,
+      "X-Product-Sku": "Axiom"
+    }
+  });
+  if (response.status === 401 && retry) {
+    return getRemoteFile(resource, {
+      ...auth,
+      token: await auth.refresh()
+    });
+  }
+  if (!response.ok) {
+    return null;
+  }
+  return new File([await response.arrayBuffer()], resource.name, {
+    type: response.headers.get("Content-Type") || "application/octet-stream"
+  });
+}
+function isValidFile(file, accept) {
+  if (!file) {
+    return false;
+  }
+  if (!accept) {
+    return true;
+  }
+  const acceptedFiles = accept.split(",");
+  if (acceptedFiles.length === 0) {
+    return true;
+  }
+  const fileName = "name" in file ? file.name : "";
+  const mimeType = (file.type || "").toLowerCase();
+  const baseMimeType = mimeType.replace(/\/.*$/, "");
+  return acceptedFiles.some((type) => {
+    const validType = type.trim().toLowerCase();
+    if (validType.charAt(0) === ".") {
+      return fileName.toLowerCase().endsWith(validType);
+    } else if (validType.endsWith("/*")) {
+      return baseMimeType === validType.replace(/\/.*$/, "");
+    }
+    return mimeType === validType;
+  });
+}
+
+export { useFileUploadDrop };

package/dist/esm/packages/react/src/file-upload/useFileUploadTrigger.js

@@ -1,10 +1,13 @@
+import { useCallback } from 'react';
 import { useFileUploadContext } from './FileUploadContext.js';
 
 const useFileUploadTrigger = () => {
-  const { openFileDialog } = useFileUploadContext(
+  const { inputRef } = useFileUploadContext(
     "@optiaxiom/react/useFileUploadOpen"
   );
-  return openFileDialog;
+  return useCallback(() => {
+    inputRef.current?.click();
+  }, [inputRef]);
 };
 
 export { useFileUploadTrigger };

package/dist/esm/packages/react/src/file-upload/useStickyPosition.js

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useStickyPosition = (ref, visible) => {
+  const { rootRef } = useFileUploadContext(
+    "@optiaxiom/react/useStickyPosition"
+  );
+  useEffect(() => {
+    if (!visible || !rootRef.current) {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (!rootRef.current || !ref.current) {
+        return;
+      }
+      const entry = entries[0];
+      if (!entry.isIntersecting) {
+        return;
+      }
+      const { height, top } = entries[0].intersectionRect;
+      const rootRect = rootRef.current.getBoundingClientRect();
+      ref.current.style.maxHeight = `${Math.max(108, height)}px`;
+      ref.current.style.top = `${top - rootRect.top}px`;
+    });
+    observer.observe(rootRef.current);
+    let timer = 0;
+    const listener = () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (rootRef.current) {
+          observer.unobserve(rootRef.current);
+          observer.observe(rootRef.current);
+        }
+      }, 300);
+    };
+    window.addEventListener("scroll", listener, true);
+    return () => {
+      window.removeEventListener("scroll", listener, true);
+      observer.disconnect();
+    };
+  }, [visible, rootRef, ref]);
+};
+
+export { useStickyPosition };