@ark-ui/react 1.0.1 → 1.2.0

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

@@ -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 FileUploadItemPreview = react.forwardRef(
+  (props, ref) => {
+    const api = fileUploadContext.useFileUploadContext();
+    const item = fileUploadItemContext.useFileUploadItemContext();
+    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";
+
+exports.FileUploadItemPreview = FileUploadItemPreview;

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

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/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 api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    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";
+
+export { FileUploadItemPreview };

package/file-upload/file-upload-item-size-text.cjs

@@ -0,0 +1,24 @@
+'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 FileUploadItemSizeText = react.forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const api = fileUploadContext.useFileUploadContext();
+    const item = fileUploadItemContext.useFileUploadItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemSizeTextProps(item), rest);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: children || api.getFileSize(item.file) });
+  }
+);
+FileUploadItemSizeText.displayName = "FileUploadItemSizeText";
+
+exports.FileUploadItemSizeText = FileUploadItemSizeText;

package/file-upload/file-upload-item-size-text.d.ts

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

package/file-upload/file-upload-item-size-text.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/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 FileUploadItemSizeText = forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(api.getItemSizeTextProps(item), rest);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: children || api.getFileSize(item.file) });
+  }
+);
+FileUploadItemSizeText.displayName = "FileUploadItemSizeText";
+
+export { FileUploadItemSizeText };

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

@@ -0,0 +1,24 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const fileUploadContext = require('./file-upload-context.cjs');
+const fileUploadItemContext = require('./file-upload-item-context.cjs');
+
+const FileUploadItem = react.forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, ["file"]);
+  const api = fileUploadContext.useFileUploadContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(fileUploadItemContext.FileUploadItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref, children: view }) });
+});
+FileUploadItem.displayName = "FileUploadItem";
+
+exports.FileUploadItem = FileUploadItem;

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

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/file-upload';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface FileUploadItemProps extends Assign<HTMLArkProps<'ul'>, ItemProps> {
+}
+export declare const FileUploadItem: ForwardRefExoticComponent<FileUploadItemProps & RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useFileUploadContext } from './file-upload-context.mjs';
+import { FileUploadItemProvider } from './file-upload-item-context.mjs';
+
+const FileUploadItem = forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, ["file"]);
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(FileUploadItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref, children: view }) });
+});
+FileUploadItem.displayName = "FileUploadItem";
+
+export { FileUploadItem };

package/file-upload/file-upload-label.cjs

@@ -0,0 +1,19 @@
+'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 FileUploadLabel = react.forwardRef((props, ref) => {
+  const api = fileUploadContext.useFileUploadContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+FileUploadLabel.displayName = "FileUploadLabel";
+
+exports.FileUploadLabel = FileUploadLabel;

package/file-upload/file-upload-label.d.ts

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

package/file-upload/file-upload-label.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useFileUploadContext } from './file-upload-context.mjs';
+
+const FileUploadLabel = forwardRef((props, ref) => {
+  const api = useFileUploadContext();
+  const mergedProps = mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+FileUploadLabel.displayName = "FileUploadLabel";
+
+export { FileUploadLabel };

package/file-upload/file-upload-trigger.cjs

@@ -0,0 +1,21 @@
+'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 FileUploadTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = fileUploadContext.useFileUploadContext();
+    const mergedProps = react$1.mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+FileUploadTrigger.displayName = "FileUploadTrigger";
+
+exports.FileUploadTrigger = FileUploadTrigger;

package/file-upload/file-upload-trigger.d.ts

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

package/file-upload/file-upload-trigger.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useFileUploadContext } from './file-upload-context.mjs';
+
+const FileUploadTrigger = forwardRef(
+  (props, ref) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(api.triggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+FileUploadTrigger.displayName = "FileUploadTrigger";
+
+export { FileUploadTrigger };

package/file-upload/file-upload.cjs

@@ -0,0 +1,46 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const fileUploadContext = require('./file-upload-context.cjs');
+const useFileUpload = require('./use-file-upload.cjs');
+
+const FileUpload = react.forwardRef((props, ref) => {
+  const [useFileUploadProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "accept",
+      "allowDrop",
+      "dir",
+      "disabled",
+      "files",
+      "getRootNode",
+      "id",
+      "ids",
+      "locale",
+      "maxFiles",
+      "maxFileSize",
+      "minFileSize",
+      "name",
+      "onFileAccept",
+      "onFileReject",
+      "onFilesChange",
+      "translations",
+      "validate"
+    ]
+  );
+  const api = useFileUpload.useFileUpload(useFileUploadProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(fileUploadContext.FileUploadProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+FileUpload.displayName = "FileUpload";
+
+exports.FileUpload = FileUpload;

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

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
+export interface FileUploadProps extends Assign<HTMLArkProps<'div'>, UseFileUploadProps & {
+    children?: ((api: UseFileUploadReturn) => ReactNode) | ReactNode;
+}> {
+}
+export declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;

package/file-upload/file-upload.mjs

@@ -0,0 +1,42 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { FileUploadProvider } from './file-upload-context.mjs';
+import { useFileUpload } from './use-file-upload.mjs';
+
+const FileUpload = forwardRef((props, ref) => {
+  const [useFileUploadProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "accept",
+      "allowDrop",
+      "dir",
+      "disabled",
+      "files",
+      "getRootNode",
+      "id",
+      "ids",
+      "locale",
+      "maxFiles",
+      "maxFileSize",
+      "minFileSize",
+      "name",
+      "onFileAccept",
+      "onFileReject",
+      "onFilesChange",
+      "translations",
+      "validate"
+    ]
+  );
+  const api = useFileUpload(useFileUploadProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(FileUploadProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };

package/file-upload/file-upload.stories.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { FileUpload } from './';
+type FileUploadType = typeof FileUpload;
+declare const meta: Meta<FileUploadType>;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/file-upload/file-upload.test.d.ts

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

package/file-upload/index.cjs

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const fileUpload = require('./file-upload.cjs');
+const fileUploadContext = require('./file-upload-context.cjs');
+const fileUploadDropzone = require('./file-upload-dropzone.cjs');
+const fileUploadItem = require('./file-upload-item.cjs');
+const fileUploadItemDeleteTrigger = require('./file-upload-item-delete-trigger.cjs');
+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');
+
+const FileUpload = Object.assign(fileUpload.FileUpload, {
+  Root: fileUpload.FileUpload,
+  Dropzone: fileUploadDropzone.FileUploadDropzone,
+  Item: fileUploadItem.FileUploadItem,
+  ItemDeleteTrigger: fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger,
+  ItemGroup: fileUploadItemGroup.FileUploadItemGroup,
+  ItemName: fileUploadItemName.FileUploadItemName,
+  ItemPreview: fileUploadItemPreview.FileUploadItemPreview,
+  ItemPreviewImage: fileUploadItemPreviewImage.FileUploadItemPreviewImage,
+  ItemSizeText: fileUploadItemSizeText.FileUploadItemSizeText,
+  Label: fileUploadLabel.FileUploadLabel,
+  Trigger: fileUploadTrigger.FileUploadTrigger
+});
+
+exports.useFileUploadContext = fileUploadContext.useFileUploadContext;
+exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
+exports.FileUploadItem = fileUploadItem.FileUploadItem;
+exports.FileUploadItemDeleteTrigger = fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger;
+exports.FileUploadItemGroup = fileUploadItemGroup.FileUploadItemGroup;
+exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
+exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
+exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
+exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
+exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
+exports.FileUpload = FileUpload;

package/file-upload/index.d.ts

@@ -0,0 +1,29 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type FileUploadProps } from './file-upload';
+import { useFileUploadContext, type FileUploadContext } from './file-upload-context';
+import { FileUploadDropzone, type FileUploadDropzoneProps } from './file-upload-dropzone';
+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 { 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>>;
+    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>>;
+    Label: ForwardRefExoticComponent<FileUploadLabelProps & RefAttributes<HTMLLabelElement>>;
+    Trigger: ForwardRefExoticComponent<FileUploadTriggerProps & RefAttributes<HTMLButtonElement>>;
+};
+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

@@ -0,0 +1,29 @@
+'use client';
+import { FileUpload as FileUpload$1 } from './file-upload.mjs';
+export { useFileUploadContext } from './file-upload-context.mjs';
+import { FileUploadDropzone } from './file-upload-dropzone.mjs';
+import { FileUploadItem } from './file-upload-item.mjs';
+import { FileUploadItemDeleteTrigger } from './file-upload-item-delete-trigger.mjs';
+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';
+
+const FileUpload = Object.assign(FileUpload$1, {
+  Root: FileUpload$1,
+  Dropzone: FileUploadDropzone,
+  Item: FileUploadItem,
+  ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+  ItemGroup: FileUploadItemGroup,
+  ItemName: FileUploadItemName,
+  ItemPreview: FileUploadItemPreview,
+  ItemPreviewImage: FileUploadItemPreviewImage,
+  ItemSizeText: FileUploadItemSizeText,
+  Label: FileUploadLabel,
+  Trigger: FileUploadTrigger
+});
+
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger };

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

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const fileUpload = require('@zag-js/file-upload');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const fileUpload__namespace = /*#__PURE__*/_interopNamespaceDefault(fileUpload);
+
+const useFileUpload = (props = {}) => {
+  const initialContext = {
+    id: react.useId(),
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props
+  };
+  const context = {
+    ...initialContext,
+    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 });
+  return fileUpload__namespace.connect(state, send, react$1.normalizeProps);
+};
+
+exports.useFileUpload = useFileUpload;

package/file-upload/use-file-upload.d.ts

@@ -0,0 +1,8 @@
+import * as fileUpload from '@zag-js/file-upload';
+import { type PropTypes } from '@zag-js/react';
+import { type Optional } from '../types';
+export interface UseFileUploadProps extends Optional<fileUpload.Context, 'id'> {
+}
+export interface UseFileUploadReturn extends fileUpload.Api<PropTypes> {
+}
+export declare const useFileUpload: (props?: UseFileUploadProps) => UseFileUploadReturn;

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

@@ -0,0 +1,25 @@
+'use client';
+import * as fileUpload from '@zag-js/file-upload';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useId } from 'react';
+import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useFileUpload = (props = {}) => {
+  const initialContext = {
+    id: useId(),
+    getRootNode: useEnvironmentContext(),
+    ...props
+  };
+  const context = {
+    ...initialContext,
+    onFileAccept: useEvent(props.onFileAccept),
+    onFileReject: useEvent(props.onFileReject),
+    onFilesChange: useEvent(props.onFilesChange, { sync: true })
+  };
+  const [state, send] = useMachine(fileUpload.machine(initialContext), { context });
+  return fileUpload.connect(state, send, normalizeProps);
+};
+
+export { useFileUpload };

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 }) });
 };