@ark-ui/react 1.0.1 → 1.2.0

package/color-picker/index.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { ColorFormat } from '@zag-js/color-picker';
 import { type ColorPickerProps } from './color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
 import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
@@ -14,15 +15,18 @@ import { ColorPickerContent, type ColorPickerContentProps } from './color-picker
 import { useColorPickerContext, type ColorPickerContext } from './color-picker-context';
 import { ColorPickerControl, type ColorPickerControlProps } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './color-picker-format-select';
+import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
-import { type ColorPickerViewProps } from './color-picker-view';
+import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
 declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
@@ -35,15 +39,18 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     Content: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<ColorPickerControlProps & RefAttributes<HTMLDivElement>>;
     EyeDropperTrigger: ForwardRefExoticComponent<ColorPickerEyeDropperTriggerProps & RefAttributes<HTMLButtonElement>>;
+    FormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;
+    FormatSelect: ForwardRefExoticComponent<ColorPickerFormatSelectProps & RefAttributes<HTMLSelectElement>>;
     Label: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;
     Positioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;
     Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
     SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
+    SwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;
     SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
     TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
     View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };

package/color-picker/index.mjs

@@ -13,10 +13,13 @@ import { ColorPickerContent } from './color-picker-content.mjs';
 export { useColorPickerContext } from './color-picker-context.mjs';
 import { ColorPickerControl } from './color-picker-control.mjs';
 import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+import { ColorPickerFormatSelect } from './color-picker-format-select.mjs';
+import { ColorPickerFormatTrigger } from './color-picker-format-trigger.mjs';
 import { ColorPickerLabel } from './color-picker-label.mjs';
 import { ColorPickerPositioner } from './color-picker-positioner.mjs';
 import { ColorPickerSwatch } from './color-picker-swatch.mjs';
 import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
+import { ColorPickerSwatchIndicator } from './color-picker-swatch-indicator.mjs';
 import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
 import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
 import { ColorPickerTrigger } from './color-picker-trigger.mjs';
@@ -35,10 +38,13 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   Content: ColorPickerContent,
   Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  FormatTrigger: ColorPickerFormatTrigger,
+  FormatSelect: ColorPickerFormatSelect,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Swatch: ColorPickerSwatch,
   SwatchGroup: ColorPickerSwatchGroup,
+  SwatchIndicator: ColorPickerSwatchIndicator,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
   Trigger: ColorPickerTrigger,
@@ -46,4 +52,4 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   View: ColorPickerView
 });
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView };

package/color-picker/use-color-picker.cjs

@@ -29,7 +29,7 @@ function _interopNamespaceDefault(e) {
 
 const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
 
-const useColorPicker = (props = {}) => {
+const useColorPicker = (props) => {
   const initialContext = {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),

package/color-picker/use-color-picker.d.ts

@@ -6,8 +6,11 @@ export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context,
      * The initial value of the color picker.
      */
     defaultValue?: string;
+    /**
+     * The current value of the color picker.
+     */
     value?: string;
 }
 export interface UseColorPickerReturn extends colorPicker.Api<PropTypes> {
 }
-export declare const useColorPicker: (props?: UseColorPickerProps) => UseColorPickerReturn;
+export declare const useColorPicker: (props: UseColorPickerProps) => UseColorPickerReturn;

package/color-picker/use-color-picker.mjs

@@ -6,7 +6,7 @@ import '../environment/index.mjs';
 import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
-const useColorPicker = (props = {}) => {
+const useColorPicker = (props) => {
   const initialContext = {
     id: useId(),
     getRootNode: useEnvironmentContext(),

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-context.cjs

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

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type UseFileUploadReturn } from './use-file-upload';
+export interface FileUploadContext extends UseFileUploadReturn {
+}
+export declare const FileUploadProvider: Provider<FileUploadContext>, useFileUploadContext: () => FileUploadContext;

package/file-upload/file-upload-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [FileUploadProvider, useFileUploadContext] = createContext({
+  name: "FileUploadContext",
+  hookName: "useFileUploadContext",
+  providerName: "<FileUploadProvider />"
+});
+
+export { FileUploadProvider, useFileUploadContext };

package/file-upload/file-upload-dropzone.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 FileUploadDropzone = react.forwardRef(
+  (props, ref) => {
+    const api = fileUploadContext.useFileUploadContext();
+    const mergedProps = react$1.mergeProps(api.dropzoneProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+    ] });
+  }
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+
+exports.FileUploadDropzone = FileUploadDropzone;

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

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

package/file-upload/file-upload-dropzone.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { jsxs, Fragment, 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 FileUploadDropzone = forwardRef(
+  (props, ref) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(api.dropzoneProps, props);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+    ] });
+  }
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+
+export { FileUploadDropzone };

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

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

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/file-upload';
+export interface FileUploadItemContext extends ItemProps {
+}
+export declare const FileUploadItemProvider: Provider<FileUploadItemContext>, useFileUploadItemContext: () => FileUploadItemContext;

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

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
+  name: "FileUploadItemContext",
+  hookName: "useFileUploadItemContext",
+  providerName: "<FileUploadItemProvider />"
+});
+
+export { FileUploadItemProvider, useFileUploadItemContext };

package/file-upload/file-upload-item-delete-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 fileUploadItemContext = require('./file-upload-item-context.cjs');
+
+const FileUploadItemDeleteTrigger = react.forwardRef((props, ref) => {
+  const api = fileUploadContext.useFileUploadContext();
+  const item = fileUploadItemContext.useFileUploadItemContext();
+  const mergedProps = react$1.mergeProps(api.getItemDeleteTriggerProps(item), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+FileUploadItemDeleteTrigger.displayName = "FileUploadItemDeleteTrigger";
+
+exports.FileUploadItemDeleteTrigger = FileUploadItemDeleteTrigger;

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

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

package/file-upload/file-upload-item-delete-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';
+import { useFileUploadItemContext } from './file-upload-item-context.mjs';
+
+const FileUploadItemDeleteTrigger = forwardRef((props, ref) => {
+  const api = useFileUploadContext();
+  const item = useFileUploadItemContext();
+  const mergedProps = mergeProps(api.getItemDeleteTriggerProps(item), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+FileUploadItemDeleteTrigger.displayName = "FileUploadItemDeleteTrigger";
+
+export { FileUploadItemDeleteTrigger };

package/file-upload/file-upload-item-group.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 runIfFn = require('../run-if-fn.cjs');
+const fileUploadContext = require('./file-upload-context.cjs');
+
+const FileUploadItemGroup = react.forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const api = fileUploadContext.useFileUploadContext();
+    const mergedProps = react$1.mergeProps(api.itemGroupProps, rest);
+    const view = runIfFn.runIfFn(children, api.files);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref, children: view });
+  }
+);
+FileUploadItemGroup.displayName = "FileUploadItemGroup";
+
+exports.FileUploadItemGroup = FileUploadItemGroup;

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

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface FileUploadItemGroupProps extends Assign<HTMLArkProps<'ul'>, {
+    children?: ReactNode | ((state: File[]) => ReactNode);
+}> {
+}
+export declare const FileUploadItemGroup: ForwardRefExoticComponent<FileUploadItemGroupProps & RefAttributes<HTMLUListElement>>;

package/file-upload/file-upload-item-group.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 { runIfFn } from '../run-if-fn.mjs';
+import { useFileUploadContext } from './file-upload-context.mjs';
+
+const FileUploadItemGroup = forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(api.itemGroupProps, rest);
+    const view = runIfFn(children, api.files);
+    return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref, children: view });
+  }
+);
+FileUploadItemGroup.displayName = "FileUploadItemGroup";
+
+export { FileUploadItemGroup };

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

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

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

package/file-upload/file-upload-item-name.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 FileUploadItemName = forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(api.getItemNameProps(item), rest);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: children || item.file.name });
+  }
+);
+FileUploadItemName.displayName = "FileUploadItemName";
+
+export { FileUploadItemName };