@ark-ui/react 2.2.3 → 3.0.0-1

package/dist/components/editable/editable-root.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useEditable } from './use-editable.js';
+import { EditableProvider } from './use-editable-context.js';
+
+const EditableRoot = forwardRef((props, ref) => {
+  const [useEditableProps, localProps] = createSplitProps()(props, [
+    "activationMode",
+    "autoResize",
+    "defaultValue",
+    "disabled",
+    "finalFocusEl",
+    "form",
+    "id",
+    "ids",
+    "invalid",
+    "maxLength",
+    "name",
+    "onEdit",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onPointerDownOutside",
+    "onValueChange",
+    "onValueCommit",
+    "onValueRevert",
+    "placeholder",
+    "readOnly",
+    "selectOnFocus",
+    "startWithEditView",
+    "submitMode",
+    "translations",
+    "value"
+  ]);
+  const editable = useEditable(useEditableProps);
+  const mergedProps = mergeProps(editable.rootProps, localProps);
+  return /* @__PURE__ */ jsx(EditableProvider, { value: editable, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+EditableRoot.displayName = "EditableRoot";
+
+export { EditableRoot };

package/dist/components/editable/editable-submit-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 useEditableContext = require('./use-editable-context.cjs');
+
+const EditableSubmitTrigger = react.forwardRef(
+  (props, ref) => {
+    const editable = useEditableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(editable.submitTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+EditableSubmitTrigger.displayName = "EditableSubmitTrigger";
+
+exports.EditableSubmitTrigger = EditableSubmitTrigger;

package/dist/components/editable/editable-submit-trigger.d.cts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface EditableSubmitTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const EditableSubmitTrigger: ForwardRefExoticComponent<EditableSubmitTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/editable/editable-submit-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface EditableSubmitTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const EditableSubmitTrigger: ForwardRefExoticComponent<EditableSubmitTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/editable/editable-submit-trigger.js

@@ -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.js';
+import { useEditableContext } from './use-editable-context.js';
+
+const EditableSubmitTrigger = forwardRef(
+  (props, ref) => {
+    const editable = useEditableContext();
+    const mergedProps = mergeProps(editable.submitTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+EditableSubmitTrigger.displayName = "EditableSubmitTrigger";
+
+export { EditableSubmitTrigger };

package/dist/components/editable/editable.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const editableArea = require('./editable-area.cjs');
+const editableCancelTrigger = require('./editable-cancel-trigger.cjs');
+const editableContext = require('./editable-context.cjs');
+const editableControl = require('./editable-control.cjs');
+const editableEditTrigger = require('./editable-edit-trigger.cjs');
+const editableInput = require('./editable-input.cjs');
+const editableLabel = require('./editable-label.cjs');
+const editablePreview = require('./editable-preview.cjs');
+const editableRoot = require('./editable-root.cjs');
+const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
+
+
+
+exports.Area = editableArea.EditableArea;
+exports.CancelTrigger = editableCancelTrigger.EditableCancelTrigger;
+exports.Context = editableContext.EditableContext;
+exports.Control = editableControl.EditableControl;
+exports.EditTrigger = editableEditTrigger.EditableEditTrigger;
+exports.Input = editableInput.EditableInput;
+exports.Label = editableLabel.EditableLabel;
+exports.Preview = editablePreview.EditablePreview;
+exports.Root = editableRoot.EditableRoot;
+exports.SubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;

package/dist/components/editable/editable.d.cts

@@ -0,0 +1,11 @@
+export type { ValueChangeDetails } from '@zag-js/editable';
+export { EditableArea as Area, type EditableAreaProps as AreaProps } from './editable-area';
+export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
+export { EditableContext as Context, type EditableContextProps as ContextProps, } from './editable-context';
+export { EditableControl as Control, type EditableControlProps as ControlProps, } from './editable-control';
+export { EditableEditTrigger as EditTrigger, type EditableEditTriggerProps as EditTriggerProps, } from './editable-edit-trigger';
+export { EditableInput as Input, type EditableInputProps as InputProps } from './editable-input';
+export { EditableLabel as Label, type EditableLabelProps as LabelProps } from './editable-label';
+export { EditablePreview as Preview, type EditablePreviewProps as PreviewProps, } from './editable-preview';
+export { EditableRoot as Root, type EditableRootProps as RootProps } from './editable-root';
+export { EditableSubmitTrigger as SubmitTrigger, type EditableSubmitTriggerProps as SubmitTriggerProps, } from './editable-submit-trigger';

package/dist/components/editable/editable.d.ts

@@ -0,0 +1,11 @@
+export type { ValueChangeDetails } from '@zag-js/editable';
+export { EditableArea as Area, type EditableAreaProps as AreaProps } from './editable-area';
+export { EditableCancelTrigger as CancelTrigger, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger';
+export { EditableContext as Context, type EditableContextProps as ContextProps, } from './editable-context';
+export { EditableControl as Control, type EditableControlProps as ControlProps, } from './editable-control';
+export { EditableEditTrigger as EditTrigger, type EditableEditTriggerProps as EditTriggerProps, } from './editable-edit-trigger';
+export { EditableInput as Input, type EditableInputProps as InputProps } from './editable-input';
+export { EditableLabel as Label, type EditableLabelProps as LabelProps } from './editable-label';
+export { EditablePreview as Preview, type EditablePreviewProps as PreviewProps, } from './editable-preview';
+export { EditableRoot as Root, type EditableRootProps as RootProps } from './editable-root';
+export { EditableSubmitTrigger as SubmitTrigger, type EditableSubmitTriggerProps as SubmitTriggerProps, } from './editable-submit-trigger';

package/dist/components/editable/editable.js

@@ -0,0 +1,10 @@
+export { EditableArea as Area } from './editable-area.js';
+export { EditableCancelTrigger as CancelTrigger } from './editable-cancel-trigger.js';
+export { EditableContext as Context } from './editable-context.js';
+export { EditableControl as Control } from './editable-control.js';
+export { EditableEditTrigger as EditTrigger } from './editable-edit-trigger.js';
+export { EditableInput as Input } from './editable-input.js';
+export { EditableLabel as Label } from './editable-label.js';
+export { EditablePreview as Preview } from './editable-preview.js';
+export { EditableRoot as Root } from './editable-root.js';
+export { EditableSubmitTrigger as SubmitTrigger } from './editable-submit-trigger.js';

package/dist/components/editable/index.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const editableArea = require('./editable-area.cjs');
+const editableCancelTrigger = require('./editable-cancel-trigger.cjs');
+const editableContext = require('./editable-context.cjs');
+const editableControl = require('./editable-control.cjs');
+const editableEditTrigger = require('./editable-edit-trigger.cjs');
+const editableInput = require('./editable-input.cjs');
+const editableLabel = require('./editable-label.cjs');
+const editablePreview = require('./editable-preview.cjs');
+const editableRoot = require('./editable-root.cjs');
+const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
+const useEditableContext = require('./use-editable-context.cjs');
+const editable = require('./editable.cjs');
+
+
+
+exports.EditableArea = editableArea.EditableArea;
+exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
+exports.EditableContext = editableContext.EditableContext;
+exports.EditableControl = editableControl.EditableControl;
+exports.EditableEditTrigger = editableEditTrigger.EditableEditTrigger;
+exports.EditableInput = editableInput.EditableInput;
+exports.EditableLabel = editableLabel.EditableLabel;
+exports.EditablePreview = editablePreview.EditablePreview;
+exports.EditableRoot = editableRoot.EditableRoot;
+exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
+exports.useEditableContext = useEditableContext.useEditableContext;
+exports.Editable = editable;

package/dist/components/editable/index.d.cts

@@ -0,0 +1,13 @@
+export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export { EditableArea, type EditableAreaProps } from './editable-area';
+export { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
+export { EditableContext, type EditableContextProps } from './editable-context';
+export { EditableControl, type EditableControlProps } from './editable-control';
+export { EditableEditTrigger, type EditableEditTriggerProps } from './editable-edit-trigger';
+export { EditableInput, type EditableInputProps } from './editable-input';
+export { EditableLabel, type EditableLabelProps } from './editable-label';
+export { EditablePreview, type EditablePreviewProps } from './editable-preview';
+export { EditableRoot, type EditableRootProps } from './editable-root';
+export { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
+export { type UseEditableContext, useEditableContext } from './use-editable-context';
+export * as Editable from './editable';

package/dist/components/editable/index.d.ts

@@ -0,0 +1,13 @@
+export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export { EditableArea, type EditableAreaProps } from './editable-area';
+export { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
+export { EditableContext, type EditableContextProps } from './editable-context';
+export { EditableControl, type EditableControlProps } from './editable-control';
+export { EditableEditTrigger, type EditableEditTriggerProps } from './editable-edit-trigger';
+export { EditableInput, type EditableInputProps } from './editable-input';
+export { EditableLabel, type EditableLabelProps } from './editable-label';
+export { EditablePreview, type EditablePreviewProps } from './editable-preview';
+export { EditableRoot, type EditableRootProps } from './editable-root';
+export { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
+export { type UseEditableContext, useEditableContext } from './use-editable-context';
+export * as Editable from './editable';

package/dist/components/editable/index.js

@@ -0,0 +1,13 @@
+export { EditableArea } from './editable-area.js';
+export { EditableCancelTrigger } from './editable-cancel-trigger.js';
+export { EditableContext } from './editable-context.js';
+export { EditableControl } from './editable-control.js';
+export { EditableEditTrigger } from './editable-edit-trigger.js';
+export { EditableInput } from './editable-input.js';
+export { EditableLabel } from './editable-label.js';
+export { EditablePreview } from './editable-preview.js';
+export { EditableRoot } from './editable-root.js';
+export { EditableSubmitTrigger } from './editable-submit-trigger.js';
+export { useEditableContext } from './use-editable-context.js';
+import * as editable from './editable.js';
+export { editable as Editable };

package/dist/components/editable/use-editable-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [EditableProvider, useEditableContext] = createContext.createContext({
+  name: "EditableContext",
+  hookName: "useEditableContext",
+  providerName: "<EditableProvider />"
+});
+
+exports.EditableProvider = EditableProvider;
+exports.useEditableContext = useEditableContext;

package/dist/components/editable/use-editable-context.d.cts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+import { UseEditableReturn } from './use-editable';
+
+export interface UseEditableContext extends UseEditableReturn {
+}
+export declare const EditableProvider: Provider<UseEditableContext>, useEditableContext: () => UseEditableContext;

package/dist/components/editable/use-editable-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+import { UseEditableReturn } from './use-editable';
+
+export interface UseEditableContext extends UseEditableReturn {
+}
+export declare const EditableProvider: Provider<UseEditableContext>, useEditableContext: () => UseEditableContext;

package/dist/components/editable/use-editable-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [EditableProvider, useEditableContext] = createContext({
+  name: "EditableContext",
+  hookName: "useEditableContext",
+  providerName: "<EditableProvider />"
+});
+
+export { EditableProvider, useEditableContext };

package/dist/components/editable/use-editable.cjs

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const editable = require('@zag-js/editable');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const useEvent = require('../../utils/use-event.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 editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
+
+const useEditable = (props = {}) => {
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const initialContext = {
+    id: react.useId(),
+    dir,
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onEdit: useEvent.useEvent(props.onEdit),
+    onValueCommit: useEvent.useEvent(props.onValueCommit),
+    onValueRevert: useEvent.useEvent(props.onValueRevert)
+  };
+  const [state, send] = react$1.useMachine(editable__namespace.machine(initialContext), { context });
+  return editable__namespace.connect(state, send, react$1.normalizeProps);
+};
+
+exports.useEditable = useEditable;

package/dist/components/editable/use-editable.d.cts

@@ -0,0 +1,13 @@
+import { Optional } from '../../types';
+import { PropTypes } from '@zag-js/types';
+import * as editable from '@zag-js/editable';
+export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the editable when it is first rendered.
+     * Use when you do not need to control the state of the editable.
+     */
+    defaultValue?: editable.Context['value'];
+}
+export interface UseEditableReturn extends editable.Api<PropTypes> {
+}
+export declare const useEditable: (props?: UseEditableProps) => UseEditableReturn;

package/dist/components/editable/use-editable.d.ts

@@ -0,0 +1,13 @@
+import { Optional } from '../../types';
+import { PropTypes } from '@zag-js/types';
+import * as editable from '@zag-js/editable';
+export interface UseEditableProps extends Optional<Omit<editable.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the editable when it is first rendered.
+     * Use when you do not need to control the state of the editable.
+     */
+    defaultValue?: editable.Context['value'];
+}
+export interface UseEditableReturn extends editable.Api<PropTypes> {
+}
+export declare const useEditable: (props?: UseEditableProps) => UseEditableReturn;

package/dist/components/editable/use-editable.js

@@ -0,0 +1,31 @@
+'use client';
+import * as editable from '@zag-js/editable';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+import { useEvent } from '../../utils/use-event.js';
+
+const useEditable = (props = {}) => {
+  const { getRootNode } = useEnvironmentContext();
+  const { dir } = useLocaleContext();
+  const initialContext = {
+    id: useId(),
+    dir,
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onEdit: useEvent(props.onEdit),
+    onValueCommit: useEvent(props.onValueCommit),
+    onValueRevert: useEvent(props.onValueRevert)
+  };
+  const [state, send] = useMachine(editable.machine(initialContext), { context });
+  return editable.connect(state, send, normalizeProps);
+};
+
+export { useEditable };

package/dist/components/factory.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@zag-js/core');
+const react = require('react');
+const composeRefs = require('../utils/compose-refs.cjs');
+
+function getRef(child) {
+  if ("ref" in child.props)
+    return child.props.ref;
+  if ("ref" in child)
+    return child.ref;
+  return null;
+}
+const withAsChild = (Component) => {
+  const Comp = react.memo(
+    react.forwardRef((props, ref) => {
+      const { asChild, children, ...restProps } = props;
+      if (!asChild) {
+        return react.createElement(Component, { ...restProps, ref }, children);
+      }
+      const onlyChild = react.Children.only(children);
+      if (!react.isValidElement(onlyChild)) {
+        return null;
+      }
+      const childRef = getRef(onlyChild);
+      return react.cloneElement(onlyChild, {
+        ...core.mergeProps(restProps, onlyChild.props),
+        ref: ref ? composeRefs.composeRefs(ref, childRef) : childRef
+      });
+    })
+  );
+  Comp.displayName = Component.displayName || Component.name;
+  return Comp;
+};
+const jsxFactory = () => {
+  const cache = /* @__PURE__ */ new Map();
+  return new Proxy(withAsChild, {
+    apply(_target, _thisArg, argArray) {
+      return withAsChild(argArray[0]);
+    },
+    get(_, element) {
+      const asElement = element;
+      if (!cache.has(asElement)) {
+        cache.set(asElement, withAsChild(asElement));
+      }
+      return cache.get(asElement);
+    }
+  });
+};
+const ark = jsxFactory();
+
+exports.ark = ark;
+exports.jsxFactory = jsxFactory;

package/dist/components/factory.d.cts

@@ -0,0 +1,18 @@
+import { default as React, ComponentPropsWithoutRef, JSX } from 'react';
+
+type JsxElements = {
+    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
+};
+type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
+type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
+    asChild?: boolean;
+};
+export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T> & {
+    /**
+     * Render as a different element type.
+     */
+    asChild?: boolean;
+};
+export declare const jsxFactory: () => JsxElements;
+export declare const ark: JsxElements;
+export {};

package/dist/components/factory.d.ts

@@ -0,0 +1,18 @@
+import { default as React, ComponentPropsWithoutRef, JSX } from 'react';
+
+type JsxElements = {
+    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
+};
+type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
+type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
+    asChild?: boolean;
+};
+export type HTMLArkProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T> & {
+    /**
+     * Render as a different element type.
+     */
+    asChild?: boolean;
+};
+export declare const jsxFactory: () => JsxElements;
+export declare const ark: JsxElements;
+export {};

package/dist/components/factory.js

@@ -0,0 +1,50 @@
+import { mergeProps } from '@zag-js/core';
+import { memo, forwardRef, createElement, Children, isValidElement, cloneElement } from 'react';
+import { composeRefs } from '../utils/compose-refs.js';
+
+function getRef(child) {
+  if ("ref" in child.props)
+    return child.props.ref;
+  if ("ref" in child)
+    return child.ref;
+  return null;
+}
+const withAsChild = (Component) => {
+  const Comp = memo(
+    forwardRef((props, ref) => {
+      const { asChild, children, ...restProps } = props;
+      if (!asChild) {
+        return createElement(Component, { ...restProps, ref }, children);
+      }
+      const onlyChild = Children.only(children);
+      if (!isValidElement(onlyChild)) {
+        return null;
+      }
+      const childRef = getRef(onlyChild);
+      return cloneElement(onlyChild, {
+        ...mergeProps(restProps, onlyChild.props),
+        ref: ref ? composeRefs(ref, childRef) : childRef
+      });
+    })
+  );
+  Comp.displayName = Component.displayName || Component.name;
+  return Comp;
+};
+const jsxFactory = () => {
+  const cache = /* @__PURE__ */ new Map();
+  return new Proxy(withAsChild, {
+    apply(_target, _thisArg, argArray) {
+      return withAsChild(argArray[0]);
+    },
+    get(_, element) {
+      const asElement = element;
+      if (!cache.has(asElement)) {
+        cache.set(asElement, withAsChild(asElement));
+      }
+      return cache.get(asElement);
+    }
+  });
+};
+const ark = jsxFactory();
+
+export { ark, jsxFactory };

package/dist/components/file-upload/file-upload-context.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useFileUploadContext = require('./use-file-upload-context.cjs');
+
+const FileUploadContext = (props) => props.children(useFileUploadContext.useFileUploadContext());
+
+exports.FileUploadContext = FileUploadContext;

package/dist/components/file-upload/file-upload-context.d.cts

@@ -0,0 +1,7 @@
+import { UseFileUploadContext } from './use-file-upload-context';
+import { ReactNode } from 'react';
+
+export interface FileUploadContextProps {
+    children: (context: UseFileUploadContext) => ReactNode;
+}
+export declare const FileUploadContext: (props: FileUploadContextProps) => ReactNode;

package/dist/components/file-upload/file-upload-context.d.ts

@@ -0,0 +1,7 @@
+import { UseFileUploadContext } from './use-file-upload-context';
+import { ReactNode } from 'react';
+
+export interface FileUploadContextProps {
+    children: (context: UseFileUploadContext) => ReactNode;
+}
+export declare const FileUploadContext: (props: FileUploadContextProps) => ReactNode;

package/dist/components/file-upload/file-upload-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { useFileUploadContext } from './use-file-upload-context.js';
+
+const FileUploadContext = (props) => props.children(useFileUploadContext());
+
+export { FileUploadContext };

package/dist/components/file-upload/file-upload-dropzone.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 useFileUploadContext = require('./use-file-upload-context.cjs');
+
+const FileUploadDropzone = react.forwardRef(
+  (props, ref) => {
+    const fileUpload = useFileUploadContext.useFileUploadContext();
+    const mergedProps = react$1.mergeProps(fileUpload.dropzoneProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+
+exports.FileUploadDropzone = FileUploadDropzone;

package/dist/components/file-upload/file-upload-dropzone.d.cts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface FileUploadDropzoneProps extends HTMLArkProps<'div'> {
+}
+export declare const FileUploadDropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;

package/dist/components/file-upload/file-upload-dropzone.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface FileUploadDropzoneProps extends HTMLArkProps<'div'> {
+}
+export declare const FileUploadDropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;

package/dist/components/file-upload/file-upload-dropzone.js

@@ -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.js';
+import { useFileUploadContext } from './use-file-upload-context.js';
+
+const FileUploadDropzone = forwardRef(
+  (props, ref) => {
+    const fileUpload = useFileUploadContext();
+    const mergedProps = mergeProps(fileUpload.dropzoneProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+
+export { FileUploadDropzone };