@ark-ui/react 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -6,6 +6,31 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.2.1] - 2023-12-13
+
+### Fixed
+
+- Resolved an issue where the `ark` factory type was not being exported correctly.
+
+## [1.2.0] - 2023-12-13
+
+### Added
+
+- Added the `ToastGroup` component.
+- Added entrypoint for the  `ark` factory at `@ark-ui/react/factory`
+
+### Changed
+
+- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information.
+
+### Fixed
+
+- Added an explicit return type for the `Portal` component to resolve an issue with online code editors.
+- Resolved an issue where the `present` prop in the disclosure-type component was not being respected.
+- Resolved an issue where the `ark` function would log a warning when the `asChild` prop was set to `false`.
+- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`.
+- Fixed an issue with hydration mismatch in the `Portal` component.
+
 ## [1.1.0] - 2023-11-21
 
 ### Added

package/README.md

@@ -62,22 +62,35 @@ To use a component from `@ark-ui/react`, import it and include it in your applic
 
 ```tsx
 import { Slider, type SliderProps } from '@ark-ui/react'
-
-export const MySlider = (props: SliderProps) => (
-  <Slider.Root min={0} max={100} defaultValue={[33]} {...props}>
-    <Slider.Control>
-      <Slider.Track>
-        <Slider.Range />
-      </Slider.Track>
-      <Slider.Thumb index={0} />
-    </Slider.Control>
-    <Slider.MarkerGroup>
-      <Slider.Marker value={25}>25</Slider.Marker>
-      <Slider.Marker value={50}>50</Slider.Marker>
-      <Slider.Marker value={75}>75</Slider.Marker>
-    </Slider.MarkerGroup>
-  </Slider.Root>
-)
+import { useState } from 'react'
+
+export const MySlider = (props: SliderProps) => {
+  const [value, setValue] = useState([42])
+
+  return (
+    <Slider.Root
+      min={0}
+      max={100}
+      value={value}
+      onValueChange={(e) => setValue(e.value)}
+      {...props}
+    >
+      <Slider.Label>Label</Slider.Label>
+      <Slider.ValueText />
+      <Slider.Control>
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb key={0} index={0} />
+      </Slider.Control>
+      <Slider.MarkerGroup>
+        <Slider.Marker value={25}>25</Slider.Marker>
+        <Slider.Marker value={50}>50</Slider.Marker>
+        <Slider.Marker value={75}>75</Slider.Marker>
+      </Slider.MarkerGroup>
+    </Slider.Root>
+  )
+}
 ```
 
 ## Documentation

package/color-picker/color-picker.cjs

@@ -43,7 +43,7 @@ const ColorPicker = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useColorPicker.useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsxs(presenceContext.PresenceProvider, { value: presenceApi, children: [

package/color-picker/color-picker.mjs

@@ -39,7 +39,7 @@ const ColorPicker = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxs(PresenceProvider, { value: presenceApi, children: [

package/combobox/combobox.cjs

@@ -61,7 +61,7 @@ const ComboboxImpl = (props, ref) => {
     ]
   );
   const api = useCombobox.useCombobox(useComboboxProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });

package/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';

package/combobox/combobox.mjs

@@ -57,7 +57,7 @@ const ComboboxImpl = (props, ref) => {
     ]
   );
   const api = useCombobox(useComboboxProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });

package/date-picker/date-picker.cjs

@@ -35,7 +35,6 @@ const DatePicker = react.forwardRef((props, ref) => {
       "isDateUnavailable",
       "locale",
       "max",
-      "messages",
       "min",
       "modal",
       "name",
@@ -51,12 +50,13 @@ const DatePicker = react.forwardRef((props, ref) => {
       "selectionMode",
       "startOfWeek",
       "timeZone",
+      "translations",
       "value",
       "view"
     ]
   );
   const api = useDatePicker.useDatePicker(useDatePickerProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });

package/date-picker/date-picker.mjs

@@ -31,7 +31,6 @@ const DatePicker = forwardRef((props, ref) => {
       "isDateUnavailable",
       "locale",
       "max",
-      "messages",
       "min",
       "modal",
       "name",
@@ -47,12 +46,13 @@ const DatePicker = forwardRef((props, ref) => {
       "selectionMode",
       "startOfWeek",
       "timeZone",
+      "translations",
       "value",
       "view"
     ]
   );
   const api = useDatePicker(useDatePickerProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(DatePickerProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });

package/date-picker/date-picker.stories.d.ts

@@ -6,3 +6,4 @@ declare const meta: Meta<DatePickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const RangeWithSingleGrid: () => JSX.Element;
+export declare const Standalone: () => JSX.Element;

package/dialog/dialog-backdrop.cjs

@@ -15,7 +15,7 @@ const usePresence = require('../presence/use-presence.cjs');
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();
   const presenceProps = presencePropsContext.usePresencePropsContext();
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   const mergedProps = react$1.mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;

package/dialog/dialog-backdrop.mjs

@@ -11,7 +11,7 @@ import { usePresence } from '../presence/use-presence.mjs';
 const DialogBackdrop = forwardRef((props, ref) => {
   const api = useDialogContext();
   const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const mergedProps = mergeProps(api.backdropProps, presenceApi.getPresenceProps(ref), props);
   if (presenceApi.isUnmounted) {
     return null;

package/dialog/dialog.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const core = require('@zag-js/core');
 require('react');
 require('../presence/index.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
@@ -17,7 +18,7 @@ const presenceContext = require('../presence/presence-context.cjs');
 const Dialog = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = useDialog.useDialog(localProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(core.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
 };

package/dialog/dialog.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/core';
 import 'react';
 import '../presence/index.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
@@ -13,7 +14,7 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const Dialog = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = useDialog(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) });
 };

package/editable/editable.cjs

@@ -13,7 +13,7 @@ const editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
 const Editable = react.forwardRef((props, ref) => {
-  const [useEditableProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+  const [useEditableProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
       "activationMode",
@@ -46,7 +46,7 @@ const Editable = react.forwardRef((props, ref) => {
     ]
   );
   const api = useEditable.useEditable(useEditableProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(editableContext.EditableProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });

package/editable/editable.mjs

@@ -9,7 +9,7 @@ import { EditableProvider } from './editable-context.mjs';
 import { useEditable } from './use-editable.mjs';
 
 const Editable = forwardRef((props, ref) => {
-  const [useEditableProps, { children, ...divProps }] = createSplitProps()(
+  const [useEditableProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
       "activationMode",
@@ -42,7 +42,7 @@ const Editable = forwardRef((props, ref) => {
     ]
   );
   const api = useEditable(useEditableProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(EditableProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });

package/factory.cjs

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
 const core = require('@zag-js/core');
 const react = require('react');
 const composeRefs = require('./compose-refs.cjs');
@@ -11,7 +10,7 @@ const withAsChild = (Component) => {
   const Comp = react.forwardRef((props, ref) => {
     const { asChild, children, ...restProps } = props;
     if (!asChild) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, ref });
+      return react.createElement(Component, { ...restProps, ref }, children);
     }
     const onlyChild = react.Children.only(children);
     return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {

package/factory.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, { type ComponentPropsWithoutRef, type JSX } from 'react';
 type JsxElements = {
     [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
 };

package/factory.mjs

@@ -1,13 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/core';
-import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
 import { composeRefs } from './compose-refs.mjs';
 
 const withAsChild = (Component) => {
   const Comp = forwardRef((props, ref) => {
     const { asChild, children, ...restProps } = props;
     if (!asChild) {
-      return /* @__PURE__ */ jsx(Component, { ...props, ref });
+      return createElement(Component, { ...restProps, ref }, children);
     }
     const onlyChild = Children.only(children);
     return isValidElement(onlyChild) ? cloneElement(onlyChild, {

package/factory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/file-upload/file-upload-item-preview-image.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const fileUploadContext = require('./file-upload-context.cjs');
+const fileUploadItemContext = require('./file-upload-item-context.cjs');
+
+const FileUploadItemPreviewImage = react.forwardRef((props, ref) => {
+  const [url, setUrl] = react.useState("");
+  const api = fileUploadContext.useFileUploadContext();
+  const item = fileUploadItemContext.useFileUploadItemContext();
+  const mergedProps = react$1.mergeProps(api.getItemPreviewImageProps({ ...item, url }), props);
+  react.useEffect(() => {
+    api.createFileUrl(item.file, (url2) => setUrl(url2));
+  }, [item, api]);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
+});
+FileUploadItemPreviewImage.displayName = "FileUploadItemPreviewImage";
+
+exports.FileUploadItemPreviewImage = FileUploadItemPreviewImage;

package/file-upload/file-upload-item-preview-image.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface FileUploadItemPreviewImageProps extends HTMLArkProps<'img'> {
+}
+export declare const FileUploadItemPreviewImage: ForwardRefExoticComponent<FileUploadItemPreviewImageProps & RefAttributes<HTMLImageElement>>;

package/file-upload/file-upload-item-preview-image.mjs

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef, useState, useEffect } from 'react';
+import { ark } from '../factory.mjs';
+import { useFileUploadContext } from './file-upload-context.mjs';
+import { useFileUploadItemContext } from './file-upload-item-context.mjs';
+
+const FileUploadItemPreviewImage = forwardRef((props, ref) => {
+  const [url, setUrl] = useState("");
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps(api.getItemPreviewImageProps({ ...item, url }), props);
+  useEffect(() => {
+    api.createFileUrl(item.file, (url2) => setUrl(url2));
+  }, [item, api]);
+  return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
+});
+FileUploadItemPreviewImage.displayName = "FileUploadItemPreviewImage";
+
+export { FileUploadItemPreviewImage };

package/file-upload/file-upload-item-preview.cjs

@@ -12,18 +12,12 @@ const fileUploadItemContext = require('./file-upload-item-context.cjs');
 
 const FileUploadItemPreview = react.forwardRef(
   (props, ref) => {
-    const [url, setUrl] = react.useState("");
     const api = fileUploadContext.useFileUploadContext();
     const item = fileUploadItemContext.useFileUploadItemContext();
-    react.useEffect(() => {
-      api.createFileUrl(item.file, (url2) => setUrl(url2));
-    }, [item, api]);
-    try {
-      const mergedProps = react$1.mergeProps(api.getItemPreviewProps({ ...item, url }), props);
-      return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
-    } catch (e) {
+    const mergedProps = react$1.mergeProps(api.getItemPreviewProps(item), props);
+    if (!item.file.type.match(props.type ?? ".*"))
       return null;
-    }
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 FileUploadItemPreview.displayName = "FileUploadItemPreview";

package/file-upload/file-upload-item-preview.d.ts

@@ -1,6 +1,11 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface FileUploadItemPreviewProps extends HTMLArkProps<'img'> {
+export interface FileUploadItemPreviewProps extends HTMLArkProps<'div'> {
+    /**
+     * The file type to match against. Matches all file types by default.
+     * @default '.*'
+     */
+    type?: string;
 }
 export declare const FileUploadItemPreview: ForwardRefExoticComponent<FileUploadItemPreviewProps & RefAttributes<HTMLImageElement>>;

package/file-upload/file-upload-item-preview.mjs

@@ -1,25 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useFileUploadContext } from './file-upload-context.mjs';
 import { useFileUploadItemContext } from './file-upload-item-context.mjs';
 
 const FileUploadItemPreview = forwardRef(
   (props, ref) => {
-    const [url, setUrl] = useState("");
     const api = useFileUploadContext();
     const item = useFileUploadItemContext();
-    useEffect(() => {
-      api.createFileUrl(item.file, (url2) => setUrl(url2));
-    }, [item, api]);
-    try {
-      const mergedProps = mergeProps(api.getItemPreviewProps({ ...item, url }), props);
-      return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
-    } catch (e) {
+    const mergedProps = mergeProps(api.getItemPreviewProps(item), props);
+    if (!item.file.type.match(props.type ?? ".*"))
       return null;
-    }
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 FileUploadItemPreview.displayName = "FileUploadItemPreview";

package/file-upload/file-upload.cjs

@@ -23,13 +23,17 @@ const FileUpload = react.forwardRef((props, ref) => {
       "files",
       "getRootNode",
       "id",
-      "isValidFile",
+      "ids",
       "locale",
       "maxFiles",
       "maxFileSize",
       "minFileSize",
       "name",
-      "onFilesChange"
+      "onFileAccept",
+      "onFileReject",
+      "onFilesChange",
+      "translations",
+      "validate"
     ]
   );
   const api = useFileUpload.useFileUpload(useFileUploadProps);

package/file-upload/file-upload.mjs

@@ -19,13 +19,17 @@ const FileUpload = forwardRef((props, ref) => {
       "files",
       "getRootNode",
       "id",
-      "isValidFile",
+      "ids",
       "locale",
       "maxFiles",
       "maxFileSize",
       "minFileSize",
       "name",
-      "onFilesChange"
+      "onFileAccept",
+      "onFileReject",
+      "onFilesChange",
+      "translations",
+      "validate"
     ]
   );
   const api = useFileUpload(useFileUploadProps);

package/file-upload/index.cjs

@@ -11,6 +11,7 @@ const fileUploadItemDeleteTrigger = require('./file-upload-item-delete-trigger.c
 const fileUploadItemGroup = require('./file-upload-item-group.cjs');
 const fileUploadItemName = require('./file-upload-item-name.cjs');
 const fileUploadItemPreview = require('./file-upload-item-preview.cjs');
+const fileUploadItemPreviewImage = require('./file-upload-item-preview-image.cjs');
 const fileUploadItemSizeText = require('./file-upload-item-size-text.cjs');
 const fileUploadLabel = require('./file-upload-label.cjs');
 const fileUploadTrigger = require('./file-upload-trigger.cjs');
@@ -18,14 +19,15 @@ const fileUploadTrigger = require('./file-upload-trigger.cjs');
 const FileUpload = Object.assign(fileUpload.FileUpload, {
   Root: fileUpload.FileUpload,
   Dropzone: fileUploadDropzone.FileUploadDropzone,
-  Label: fileUploadLabel.FileUploadLabel,
-  Trigger: fileUploadTrigger.FileUploadTrigger,
-  ItemGroup: fileUploadItemGroup.FileUploadItemGroup,
   Item: fileUploadItem.FileUploadItem,
+  ItemDeleteTrigger: fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger,
+  ItemGroup: fileUploadItemGroup.FileUploadItemGroup,
   ItemName: fileUploadItemName.FileUploadItemName,
   ItemPreview: fileUploadItemPreview.FileUploadItemPreview,
+  ItemPreviewImage: fileUploadItemPreviewImage.FileUploadItemPreviewImage,
   ItemSizeText: fileUploadItemSizeText.FileUploadItemSizeText,
-  ItemDeleteTrigger: fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger
+  Label: fileUploadLabel.FileUploadLabel,
+  Trigger: fileUploadTrigger.FileUploadTrigger
 });
 
 exports.useFileUploadContext = fileUploadContext.useFileUploadContext;
@@ -34,7 +36,7 @@ exports.FileUploadItem = fileUploadItem.FileUploadItem;
 exports.FileUploadItemDeleteTrigger = fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger;
 exports.FileUploadItemGroup = fileUploadItemGroup.FileUploadItemGroup;
 exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
-exports.FileUploadItemPreview = fileUploadItemPreview.FileUploadItemPreview;
+exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
 exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
 exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;

package/file-upload/index.d.ts

@@ -7,21 +7,23 @@ import { FileUploadItem, type FileUploadItemProps } from './file-upload-item';
 import { FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps } from './file-upload-item-delete-trigger';
 import { FileUploadItemGroup, type FileUploadItemGroupProps } from './file-upload-item-group';
 import { FileUploadItemName, type FileUploadItemNameProps } from './file-upload-item-name';
-import { FileUploadItemPreview, type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, type FileUploadItemPreviewImageProps } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, type FileUploadItemSizeTextProps } from './file-upload-item-size-text';
 import { FileUploadLabel, type FileUploadLabelProps } from './file-upload-label';
 import { FileUploadTrigger, type FileUploadTriggerProps } from './file-upload-trigger';
 declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;
     Dropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<FileUploadLabelProps & RefAttributes<HTMLLabelElement>>;
-    Trigger: ForwardRefExoticComponent<FileUploadTriggerProps & RefAttributes<HTMLButtonElement>>;
-    ItemGroup: ForwardRefExoticComponent<FileUploadItemGroupProps & RefAttributes<HTMLUListElement>>;
     Item: ForwardRefExoticComponent<FileUploadItemProps & RefAttributes<HTMLLIElement>>;
+    ItemDeleteTrigger: ForwardRefExoticComponent<FileUploadItemDeleteTriggerProps & RefAttributes<HTMLButtonElement>>;
+    ItemGroup: ForwardRefExoticComponent<FileUploadItemGroupProps & RefAttributes<HTMLUListElement>>;
     ItemName: ForwardRefExoticComponent<FileUploadItemNameProps & RefAttributes<HTMLDivElement>>;
     ItemPreview: ForwardRefExoticComponent<FileUploadItemPreviewProps & RefAttributes<HTMLImageElement>>;
+    ItemPreviewImage: ForwardRefExoticComponent<FileUploadItemPreviewImageProps & RefAttributes<HTMLImageElement>>;
     ItemSizeText: ForwardRefExoticComponent<FileUploadItemSizeTextProps & RefAttributes<HTMLDivElement>>;
-    ItemDeleteTrigger: ForwardRefExoticComponent<FileUploadItemDeleteTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Label: ForwardRefExoticComponent<FileUploadLabelProps & RefAttributes<HTMLLabelElement>>;
+    Trigger: ForwardRefExoticComponent<FileUploadTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
-export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewImageProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };

package/file-upload/index.mjs

@@ -7,6 +7,7 @@ import { FileUploadItemDeleteTrigger } from './file-upload-item-delete-trigger.m
 import { FileUploadItemGroup } from './file-upload-item-group.mjs';
 import { FileUploadItemName } from './file-upload-item-name.mjs';
 import { FileUploadItemPreview } from './file-upload-item-preview.mjs';
+import { FileUploadItemPreviewImage } from './file-upload-item-preview-image.mjs';
 import { FileUploadItemSizeText } from './file-upload-item-size-text.mjs';
 import { FileUploadLabel } from './file-upload-label.mjs';
 import { FileUploadTrigger } from './file-upload-trigger.mjs';
@@ -14,14 +15,15 @@ import { FileUploadTrigger } from './file-upload-trigger.mjs';
 const FileUpload = Object.assign(FileUpload$1, {
   Root: FileUpload$1,
   Dropzone: FileUploadDropzone,
-  Label: FileUploadLabel,
-  Trigger: FileUploadTrigger,
-  ItemGroup: FileUploadItemGroup,
   Item: FileUploadItem,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  ItemGroup: FileUploadItemGroup,
   ItemName: FileUploadItemName,
   ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
   ItemSizeText: FileUploadItemSizeText,
-  ItemDeleteTrigger: FileUploadItemDeleteTrigger
+  Label: FileUploadLabel,
+  Trigger: FileUploadTrigger
 });
 
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger };

package/file-upload/use-file-upload.cjs

@@ -37,7 +37,8 @@ const useFileUpload = (props = {}) => {
   };
   const context = {
     ...initialContext,
-    isValidFile: useEvent.useEvent(props.isValidFile),
+    onFileAccept: useEvent.useEvent(props.onFileAccept),
+    onFileReject: useEvent.useEvent(props.onFileReject),
     onFilesChange: useEvent.useEvent(props.onFilesChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(fileUpload__namespace.machine(initialContext), { context });

package/file-upload/use-file-upload.mjs

@@ -14,7 +14,8 @@ const useFileUpload = (props = {}) => {
   };
   const context = {
     ...initialContext,
-    isValidFile: useEvent(props.isValidFile),
+    onFileAccept: useEvent(props.onFileAccept),
+    onFileReject: useEvent(props.onFileReject),
     onFilesChange: useEvent(props.onFilesChange, { sync: true })
   };
   const [state, send] = useMachine(fileUpload.machine(initialContext), { context });

package/hover-card/hover-card.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
 require('react');
 require('../presence/index.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
@@ -16,7 +17,7 @@ const presenceContext = require('../presence/presence-context.cjs');
 const HoverCard = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = useHoverCard.useHoverCard(localProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(hoverCardContext.HoverCardProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };