@optiaxiom/react 1.5.12 → 1.6.1

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

@@ -1,11 +1,15 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useRef } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Popover } from '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import '../popover/PopoverContent.js';
 import '../popover/PopoverTrigger.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import { toInstant } from '../utils/toInstant.js';
+import { toPlainDate } from '../utils/toPlainDate.js';
 import { DateRangePickerProvider } from './DateRangePickerContext.js';
 
 function DateRangePicker({
@@ -20,6 +24,7 @@ function DateRangePicker({
   ...props
 }) {
   const triggerRef = useRef(null);
+  const [from, setFrom] = useState();
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultOpen,
@@ -32,10 +37,24 @@ function DateRangePicker({
     onChange: onValueChange,
     prop: valueProp
   });
+  useEffect(() => {
+    if (open) {
+      setFrom(void 0);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open && from) {
+      const end = toInstant(toPlainDate(from) + "T23:59:59.999");
+      if (end) {
+        setValue({ from, to: end });
+      }
+    }
+  }, [from, open, setValue]);
   return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
     DateRangePickerProvider,
     {
       disabled,
+      setFrom,
       setOpen,
       setValue,
       triggerRef,

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-DPCLHeWG.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'},'k0osna']});
+
+export { root };

package/dist/esm/packages/react/src/{aside/Aside.js → details-panel/DetailsPanel.js}

@@ -6,16 +6,16 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { root } from './Aside-css.js';
-import { AsideProvider } from './AsideContext.js';
+import { root } from './DetailsPanel-css.js';
+import { DetailsPanelProvider } from './DetailsPanelContext.js';
 
-const Slot = createSlot("@optiaxiom/react/Aside");
-const Aside = forwardRef(
+const Slot = createSlot("@optiaxiom/react/DetailsPanel");
+const DetailsPanel = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "aside";
     const labelId = useId();
     const descriptionId = useId();
-    return /* @__PURE__ */ jsx(AsideProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DetailsPanelProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(
       Box,
       {
         "aria-describedby": descriptionId,
@@ -29,6 +29,6 @@ const Aside = forwardRef(
     ) });
   }
 );
-Aside.displayName = "@optiaxiom/react/Aside";
+DetailsPanel.displayName = "@optiaxiom/react/DetailsPanel";
 
-export { Aside };
+export { DetailsPanel };

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const DetailsPanelBody = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { flex: "1", fontSize: "md", px: "16", ref, ...props, children });
+});
+DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
+
+export { DetailsPanelBody };

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [DetailsPanelProvider, useDetailsPanelContext] = createContext("@optiaxiom/react/DetailsPanel");
+
+export { DetailsPanelProvider, useDetailsPanelContext };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BoDQZb4b.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'mz1psv']});
+
+export { footer };

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ButtonProvider } from '../button/ButtonContext.js';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './DetailsPanelFooter-css.js';
+
+const DetailsPanelFooter = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children }) });
+});
+DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
+
+export { DetailsPanelFooter };

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

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

package/dist/esm/packages/react/src/{aside/AsideHeader.js → details-panel/DetailsPanelHeader.js}

@@ -11,13 +11,13 @@ import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
-import { useAsideContext } from './AsideContext.js';
-import { header } from './AsideHeader-css.js';
+import { useDetailsPanelContext } from './DetailsPanelContext.js';
+import { header } from './DetailsPanelHeader-css.js';
 
-const AsideHeader = forwardRef(
+const DetailsPanelHeader = forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
-    const { descriptionId, labelId } = useAsideContext(
-      "@optiaxiom/react/AsideHeader"
+    const { descriptionId, labelId } = useDetailsPanelContext(
+      "@optiaxiom/react/DetailsPanelHeader"
     );
     return /* @__PURE__ */ jsx(ButtonProvider, { size: "sm", children: /* @__PURE__ */ jsxs(Box, { ref, ...header({}, className), ...props, children: [
       addonBefore && /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children: addonBefore }),
@@ -47,6 +47,6 @@ const AsideHeader = forwardRef(
     ] }) });
   }
 );
-AsideHeader.displayName = "@optiaxiom/react/AsideHeader";
+DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
 
-export { AsideHeader };
+export { DetailsPanelHeader };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'m6lbzo']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1bewi5k']});
 
 export { body };

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-K3l0nH6T.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-CRMcitky.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Efgo6GTj.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-BG0pbEf8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1qpgwbn'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'saeewx'],variants:{size:{sm:'_18vqamo',md:'lcpf8z',lg:'f7v3ea',fullscreen:'llii78'}}});
-var nestedDialogCountVar = 'var(--_1uy774u)';
-var scrollPaddingBottomVar = 'var(--ayt7wd)';
-var scrollPaddingTopVar = 'var(--rcnvby)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_10csj5e'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1deh5uk'],variants:{size:{sm:'_13uirg9',md:'_1ea14lc',lg:'_1uy7v0h',fullscreen:'jit4yf'}}});
+var nestedDialogCountVar = 'var(--h947ma)';
+var scrollPaddingBottomVar = 'var(--nz8v4v)';
+var scrollPaddingTopVar = 'var(--kxst0t)';
 
 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-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-CNlvDxcq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-B-GXf8Av.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'},'_1yfxst0']});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1ab4v1g']});
 
 export { footer };

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-CdzDxpmh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-pPuUz8ZH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'gw85n6']});
-var close = recipeRuntime({base:['bshttg']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_7jj770']});
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_5naajl']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1xca2pc']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_6o8ln6']});
+var close = recipeRuntime({base:['_13oaa0n']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_19twp2a']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1vqhgaf']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'usgp49']});
 
 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-BpEx1Goo.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DT81rVtB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-CoETppVN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1rtug99']});
-var outer = recipeRuntime({base:[{display:'grid'},'_1tagohg'],variants:{scale:{false:'z7afdr',true:{}}}});
+var inner = recipeRuntime({base:['_1ys5kus']});
+var outer = recipeRuntime({base:[{display:'grid'},'tyhskd'],variants:{scale:{false:'y9ctog',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-BpEx1Goo.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-Cp3Y3AhR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DGbkbF-u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1vm4gar',start:'_22o6rn'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'c86j28']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_11a9gm8']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1vtyvfo',start:'oqg9p0'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1wyvnm7']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1g9fo7g']});
 
 export { icon, root, trigger };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/file-upload/FileUpload.css.ts.vanilla-6dTO5osP.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var upload = recipeRuntime({base:[{color:'fg.default'},'l62r1n']});
+
+export { upload };

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

@@ -5,18 +5,15 @@ import { useDropzone } from 'react-dropzone';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { upload } from './FileUpload-css.js';
 import { FileUploadProvider } from './FileUploadContext.js';
 
 const FileUpload = forwardRef(
-  ({ accept, children, onFilesDrop, ...props }, ref) => {
-    const {
-      getInputProps,
-      getRootProps,
-      isDragAccept,
-      isDragActive,
-      isDragReject
-    } = useDropzone({
+  ({ accept, children, className, onFilesDrop, ...props }, ref) => {
+    const { getInputProps, getRootProps, isDragActive, open } = useDropzone({
       accept,
+      noClick: true,
+      noKeyboard: true,
       onDrop: (acceptedFiles) => {
         if (acceptedFiles.length) {
           onFilesDrop?.(acceptedFiles);
@@ -28,9 +25,9 @@ const FileUpload = forwardRef(
       {
         getInputProps,
         getRootProps,
-        isDragAccept: isDragActive && isDragAccept,
-        isDragReject: isDragActive && isDragReject,
-        children: /* @__PURE__ */ jsx(Box, { color: "fg.default", ref, ...props, children })
+        isDragActive,
+        openFileDialog: open,
+        children: /* @__PURE__ */ jsx(Box, { ref, ...upload({}, className), ...props, children })
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-B7ehcGlv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-C2nTMLrH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var dropzone = recipeRuntime({base:[{alignItems:'center',border:'1',cursor:'pointer',display:'flex',flexDirection:'column',fontSize:'md',gap:'8',justifyContent:'center',p:'16',rounded:'lg',textAlign:'center',transition:'colors'},'gx5wdj'],variants:{drag:{accept:[{borderColor:'border.success'},'l5sijz'],'default':'_1387npu',reject:[{borderColor:'border.error'},'_1b8t850']}}});
+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'},'vu0owr'],variants:{drag:{false:{},true:['t5d9rz']},hidden:{false:'_35li5p',true:'_169ko0l'},overlay:{false:{},true:'gvx5ah'}}});
 
 export { dropzone };

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

@@ -1,41 +1,64 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { IconFileImportSolid } from '../icons/IconFileImportSolid.js';
 import { Text } from '../text/Text.js';
 import { useFileUploadContext } from './FileUploadContext.js';
 import { dropzone } from './FileUploadDropzone-css.js';
+import { FileUploadTrigger } from './FileUploadTrigger.js';
+import { useDraggingOverBody } from './useDraggingOverBody.js';
 
-const FileUploadDropzone = forwardRef(({ children, className, ...props }, ref) => {
-  const { getInputProps, getRootProps, isDragAccept, isDragReject } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
-  const id = useId();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref,
-      ...getRootProps({
-        ...dropzone(
-          {
-            drag: isDragAccept ? "accept" : isDragReject ? "reject" : "default"
-          },
-          className
-        ),
-        ...props
-      }),
-      children: [
-        /* @__PURE__ */ jsx("input", { "aria-labelledby": id, ...getInputProps() }),
-        /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", children: /* @__PURE__ */ jsx(IconFileImportSolid, {}) }),
-        /* @__PURE__ */ jsx(Text, { "aria-hidden": true, id, children: "Drag and drop or click to upload" }),
-        children
-      ]
-    }
-  );
-});
+const FileUploadDropzone = forwardRef(
+  ({
+    children,
+    className,
+    description,
+    label = "Drop your files here",
+    overlay,
+    ...props
+  }, ref) => {
+    const { getInputProps, getRootProps, isDragActive } = useFileUploadContext(
+      "@optiaxiom/react/FileUploadDropzone"
+    );
+    const isDraggingOverBody = useDraggingOverBody();
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        ...getRootProps({
+          ...dropzone(
+            {
+              drag: isDragActive,
+              hidden: overlay && !isDraggingOverBody,
+              overlay
+            },
+            className
+          ),
+          ...props
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps({
+                "aria-description": description,
+                "aria-label": label
+              })
+            }
+          ),
+          /* @__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 })
+          ] }),
+          !overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
+        ]
+      }
+    );
+  }
+);
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 
 export { FileUploadDropzone };

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

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { useFileUploadContext } from './FileUploadContext.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(
+    "@optiaxiom/react/FileUploadTrigger"
+  );
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        openFileDialog();
+      },
+      ref,
+      ...restProps,
+      children: children || "Select files"
+    }
+  ) });
+});
+FileUploadTrigger.displayName = "@optiaxiom/react/FileUploadTrigger";
+
+export { FileUploadTrigger };

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

@@ -0,0 +1,22 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useDraggingOverBody = () => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dropRef = useRef();
+  useEffect(() => {
+    const over = () => {
+      setIsDragging(true);
+      window.clearTimeout(dropRef.current);
+      dropRef.current = window.setTimeout(() => {
+        setIsDragging(false);
+      }, 100);
+    };
+    document.body.addEventListener("dragover", over);
+    return () => {
+      document.body.removeEventListener("dragover", over);
+    };
+  }, []);
+  return isDragging;
+};
+
+export { useDraggingOverBody };

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

@@ -0,0 +1,10 @@
+import { useFileUploadContext } from './FileUploadContext.js';
+
+const useFileUploadTrigger = () => {
+  const { openFileDialog } = useFileUploadContext(
+    "@optiaxiom/react/useFileUploadOpen"
+  );
+  return openFileDialog;
+};
+
+export { useFileUploadTrigger };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DHb3EFeq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CzUSojq5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_3vivuf'});
+var mark = recipeRuntime({base:'_12oe70z'});
 
 export { mark };

package/dist/esm/packages/react/src/hooks/useResponsiveMatches.js

@@ -3,7 +3,7 @@ import { conditions } from '../utils/conditions.js';
 import 'react';
 import 'react/jsx-runtime';
 import '../utils/isHoverSupported.js';
-import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@8.1.0_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
+import { useMediaQuery } from '../../../../node_modules/.pnpm/@mantine_hooks@8.2.1_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js';
 
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {

package/dist/esm/packages/react/src/icons/IconPlusSolid.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconPlusSolid = withIcon(
+  {
+    name: "IconPlusSolid",
+    viewBox: "0 0 448 512"
+  },
+  // <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconPlusSolid };

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BpEx1Goo.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BAYk07S8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-zWd2qt2J.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BYgxSnsJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_14lo1r6',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_1av0k0b']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'f97yvi']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_85tlq5'],variants:{offset:{false:'_17lx4dx',true:{}},position:{'bottom-right':'_1qr1rwr','top-right':'_1f417un'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_6xrewz']});
+var badge = recipeRuntime({base:'_1my8ouf',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_11tlsvj']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'jh8ede']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_19lhfbj'],variants:{offset:{false:'_4m1h2z',true:{}},position:{'bottom-right':'_1h01xec','top-right':'j1wnwl'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1jywehe']});
 
 export { badge, floating, indicator };