@ark-ui/react 1.2.1 → 2.0.0

package/dialog/{dialog.cjs → dialog-root.cjs}

@@ -6,16 +6,15 @@ 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 presenceContext = require('../presence/presence-context.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
-const Dialog = (props) => {
+const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = useDialog.useDialog(localProps);
   const presenceApi = usePresence.usePresence(core.mergeProps({ present: api.isOpen }, presenceProps));
@@ -23,4 +22,4 @@ const Dialog = (props) => {
   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 }) }) });
 };
 
-exports.Dialog = Dialog;
+exports.DialogRoot = DialogRoot;

package/dialog/{dialog.d.ts → dialog-root.d.ts}

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
 import type { UsePresenceProps } from '../presence';
 import { type UseDialogProps, type UseDialogReturn } from './use-dialog';
-export interface DialogProps extends UseDialogProps, UsePresenceProps {
+export interface DialogRootProps extends UseDialogProps, UsePresenceProps {
     children?: ReactNode | ((api: UseDialogReturn) => ReactNode);
 }
-export declare const Dialog: (props: DialogProps) => JSX.Element;
+export declare const DialogRoot: (props: DialogRootProps) => JSX.Element;

package/dialog/{dialog.mjs → dialog-root.mjs}

@@ -2,16 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/core';
 import 'react';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
-const Dialog = (props) => {
+const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = useDialog(localProps);
   const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
@@ -19,4 +18,4 @@ const Dialog = (props) => {
   return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) });
 };
 
-export { Dialog };
+export { DialogRoot };

package/dialog/dialog-trigger.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const dialogContext = require('./dialog-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const dialogContext = require('./dialog-context.cjs');
 
 const DialogTrigger = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-trigger.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDialogContext } from './dialog-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTrigger = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/index.cjs

@@ -3,18 +3,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dialog = require('./dialog.cjs');
 const dialogBackdrop = require('./dialog-backdrop.cjs');
 const dialogCloseTrigger = require('./dialog-close-trigger.cjs');
 const dialogContent = require('./dialog-content.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const dialogDescription = require('./dialog-description.cjs');
 const dialogPositioner = require('./dialog-positioner.cjs');
+const dialogRoot = require('./dialog-root.cjs');
 const dialogTitle = require('./dialog-title.cjs');
 const dialogTrigger = require('./dialog-trigger.cjs');
 
-const Dialog = Object.assign(dialog.Dialog, {
-  Root: dialog.Dialog,
+const Dialog = {
+  Root: dialogRoot.DialogRoot,
   Backdrop: dialogBackdrop.DialogBackdrop,
   CloseTrigger: dialogCloseTrigger.DialogCloseTrigger,
   Content: dialogContent.DialogContent,
@@ -22,7 +22,7 @@ const Dialog = Object.assign(dialog.Dialog, {
   Positioner: dialogPositioner.DialogPositioner,
   Title: dialogTitle.DialogTitle,
   Trigger: dialogTrigger.DialogTrigger
-});
+};
 
 exports.DialogBackdrop = dialogBackdrop.DialogBackdrop;
 exports.DialogCloseTrigger = dialogCloseTrigger.DialogCloseTrigger;
@@ -30,6 +30,7 @@ exports.DialogContent = dialogContent.DialogContent;
 exports.useDialogContext = dialogContext.useDialogContext;
 exports.DialogDescription = dialogDescription.DialogDescription;
 exports.DialogPositioner = dialogPositioner.DialogPositioner;
+exports.DialogRoot = dialogRoot.DialogRoot;
 exports.DialogTitle = dialogTitle.DialogTitle;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.Dialog = Dialog;

package/dialog/index.d.ts

@@ -1,17 +1,18 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
-import { type DialogProps } from './dialog';
+import type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
 import { DialogBackdrop, type DialogBackdropProps } from './dialog-backdrop';
 import { DialogCloseTrigger, type DialogCloseTriggerProps } from './dialog-close-trigger';
 import { DialogContent, type DialogContentProps } from './dialog-content';
 import { useDialogContext, type DialogContext } from './dialog-context';
 import { DialogDescription, type DialogDescriptionProps } from './dialog-description';
 import { DialogPositioner, type DialogPositionerProps } from './dialog-positioner';
+import { DialogRoot, type DialogRootProps } from './dialog-root';
 import { DialogTitle, type DialogTitleProps } from './dialog-title';
 import { DialogTrigger, type DialogTriggerProps } from './dialog-trigger';
-declare const Dialog: ((props: DialogProps) => JSX.Element) & {
-    Root: (props: DialogProps) => JSX.Element;
+export declare const Dialog: {
+    Root: (props: DialogRootProps) => JSX.Element;
     Backdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;
     CloseTrigger: ForwardRefExoticComponent<DialogCloseTriggerProps & RefAttributes<HTMLButtonElement>>;
     Content: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;
@@ -20,5 +21,5 @@ declare const Dialog: ((props: DialogProps) => JSX.Element) & {
     Title: ForwardRefExoticComponent<DialogTitleProps & RefAttributes<HTMLHeadingElement>>;
     Trigger: ForwardRefExoticComponent<DialogTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, useDialogContext, };
-export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, };
+export { DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, useDialogContext, };
+export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogOpenChangeDetails, DialogPositionerProps, DialogRootProps, DialogTitleProps, DialogTriggerProps, };

package/dialog/index.mjs

@@ -1,16 +1,16 @@
 'use client';
-import { Dialog as Dialog$1 } from './dialog.mjs';
 import { DialogBackdrop } from './dialog-backdrop.mjs';
 import { DialogCloseTrigger } from './dialog-close-trigger.mjs';
 import { DialogContent } from './dialog-content.mjs';
 export { useDialogContext } from './dialog-context.mjs';
 import { DialogDescription } from './dialog-description.mjs';
 import { DialogPositioner } from './dialog-positioner.mjs';
+import { DialogRoot } from './dialog-root.mjs';
 import { DialogTitle } from './dialog-title.mjs';
 import { DialogTrigger } from './dialog-trigger.mjs';
 
-const Dialog = Object.assign(Dialog$1, {
-  Root: Dialog$1,
+const Dialog = {
+  Root: DialogRoot,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
   Content: DialogContent,
@@ -18,6 +18,6 @@ const Dialog = Object.assign(Dialog$1, {
   Positioner: DialogPositioner,
   Title: DialogTitle,
   Trigger: DialogTrigger
-});
+};
 
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger };
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger };

package/dialog/{dialog.stories.d.ts → stories/dialog.stories.d.ts}

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Dialog } from './';
-type DialogType = typeof Dialog;
-declare const meta: Meta<DialogType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;

package/dialog/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type DialogRootProps } from '../';
+export declare const ComponentUnderTest: (props: DialogRootProps) => JSX.Element;

package/dialog/use-dialog.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const dialog = require('@zag-js/dialog');
 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');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/dialog/use-dialog.mjs

@@ -2,9 +2,8 @@
 import * as dialog from '@zag-js/dialog';
 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';
+import { useEvent } from '../use-event.mjs';
 
 const useDialog = (props = {}) => {
   const initialContext = {

package/editable/{editable.cjs → editable-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
-const Editable = react.forwardRef((props, ref) => {
+const EditableRoot = react.forwardRef((props, ref) => {
   const [useEditableProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -50,6 +50,6 @@ const Editable = react.forwardRef((props, ref) => {
   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 }) });
 });
-Editable.displayName = "Editable";
+EditableRoot.displayName = "EditableRoot";
 
-exports.Editable = Editable;
+exports.EditableRoot = EditableRoot;

package/editable/{editable.d.ts → editable-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseEditableProps, type UseEditableReturn } from './use-editable';
-export interface EditableProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface EditableRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseEditableReturn) => ReactNode);
 }>, UseEditableProps> {
 }
-export declare const Editable: ForwardRefExoticComponent<EditableProps & RefAttributes<HTMLDivElement>>;
+export declare const EditableRoot: ForwardRefExoticComponent<EditableRootProps & RefAttributes<HTMLDivElement>>;

package/editable/{editable.mjs → editable-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { EditableProvider } from './editable-context.mjs';
 import { useEditable } from './use-editable.mjs';
 
-const Editable = forwardRef((props, ref) => {
+const EditableRoot = forwardRef((props, ref) => {
   const [useEditableProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
@@ -46,6 +46,6 @@ const Editable = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(EditableProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-Editable.displayName = "Editable";
+EditableRoot.displayName = "EditableRoot";
 
-export { Editable };
+export { EditableRoot };

package/editable/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const editable = require('./editable.cjs');
 const editableArea = require('./editable-area.cjs');
 const editableCancelTrigger = require('./editable-cancel-trigger.cjs');
 const editableContext = require('./editable-context.cjs');
@@ -12,10 +11,11 @@ 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 Editable = Object.assign(editable.Editable, {
-  Root: editable.Editable,
+const Editable = {
+  Root: editableRoot.EditableRoot,
   Area: editableArea.EditableArea,
   CancelTrigger: editableCancelTrigger.EditableCancelTrigger,
   Control: editableControl.EditableControl,
@@ -24,7 +24,7 @@ const Editable = Object.assign(editable.Editable, {
   Label: editableLabel.EditableLabel,
   Preview: editablePreview.EditablePreview,
   SubmitTrigger: editableSubmitTrigger.EditableSubmitTrigger
-});
+};
 
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
@@ -34,5 +34,6 @@ 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.Editable = Editable;

package/editable/index.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type EditableProps } from './editable';
+import type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
 import { EditableArea, type EditableAreaProps } from './editable-area';
 import { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
 import { useEditableContext, type EditableContext } from './editable-context';
@@ -9,9 +9,10 @@ import { EditableEditTrigger, type EditableEditTriggerProps } from './editable-e
 import { EditableInput, type EditableInputProps } from './editable-input';
 import { EditableLabel, type EditableLabelProps } from './editable-label';
 import { EditablePreview, type EditablePreviewProps } from './editable-preview';
+import { EditableRoot, type EditableRootProps } from './editable-root';
 import { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
-declare const Editable: ForwardRefExoticComponent<EditableProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<EditableProps & RefAttributes<HTMLDivElement>>;
+export declare const Editable: {
+    Root: ForwardRefExoticComponent<EditableRootProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<EditableAreaProps & RefAttributes<HTMLDivElement>>;
     CancelTrigger: ForwardRefExoticComponent<EditableCancelTriggerProps & RefAttributes<HTMLButtonElement>>;
     Control: ForwardRefExoticComponent<EditableControlProps & RefAttributes<HTMLDivElement>>;
@@ -21,5 +22,5 @@ declare const Editable: ForwardRefExoticComponent<EditableProps & RefAttributes<
     Preview: ForwardRefExoticComponent<EditablePreviewProps & RefAttributes<HTMLSpanElement>>;
     SubmitTrigger: ForwardRefExoticComponent<EditableSubmitTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };
-export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, };
+export { EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, useEditableContext, };
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableRootProps, EditableSubmitTriggerProps, EditableValueChangeDetails, };

package/editable/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { Editable as Editable$1 } from './editable.mjs';
 import { EditableArea } from './editable-area.mjs';
 import { EditableCancelTrigger } from './editable-cancel-trigger.mjs';
 export { useEditableContext } from './editable-context.mjs';
@@ -8,10 +7,11 @@ import { EditableEditTrigger } from './editable-edit-trigger.mjs';
 import { EditableInput } from './editable-input.mjs';
 import { EditableLabel } from './editable-label.mjs';
 import { EditablePreview } from './editable-preview.mjs';
+import { EditableRoot } from './editable-root.mjs';
 import { EditableSubmitTrigger } from './editable-submit-trigger.mjs';
 
-const Editable = Object.assign(Editable$1, {
-  Root: Editable$1,
+const Editable = {
+  Root: EditableRoot,
   Area: EditableArea,
   CancelTrigger: EditableCancelTrigger,
   Control: EditableControl,
@@ -20,6 +20,6 @@ const Editable = Object.assign(Editable$1, {
   Label: EditableLabel,
   Preview: EditablePreview,
   SubmitTrigger: EditableSubmitTrigger
-});
+};
 
-export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger };
+export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger };

package/editable/{editable.stories.d.ts → stories/editable.stories.d.ts}

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Editable } from './';
-type EditableType = typeof Editable;
-declare const meta: Meta<EditableType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const CustomControls: () => JSX.Element;

package/editable/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type EditableRootProps } from '../';
+export declare const ComponentUnderTest: (props: EditableRootProps) => JSX.Element;

package/editable/tests/controlled.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type EditableRootProps } from '../';
+export declare const ControlledComponentUnderTest: (props: EditableRootProps) => JSX.Element;

package/editable/use-editable.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const editable = require('@zag-js/editable');
 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');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/editable/use-editable.mjs

@@ -2,9 +2,8 @@
 import * as editable from '@zag-js/editable';
 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';
+import { useEvent } from '../use-event.mjs';
 
 const useEditable = (props = {}) => {
   const initialContext = {

package/environment/index.cjs

@@ -6,9 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const environment = require('./environment.cjs');
 const environmentContext = require('./environment-context.cjs');
 
-const Environment = Object.assign(environment.Environment, {
-  Root: environment.Environment
-});
 
+
+exports.Environment = environment.Environment;
 exports.useEnvironmentContext = environmentContext.useEnvironmentContext;
-exports.Environment = Environment;

package/environment/index.d.ts

@@ -1,8 +1,4 @@
-import { JSX } from 'react/jsx-runtime';
-import { type EnvironmentProps } from './environment';
+import { Environment, type EnvironmentProps } from './environment';
 import { useEnvironmentContext, type EnvironmentContext } from './environment-context';
-declare const Environment: ((props: EnvironmentProps) => JSX.Element) & {
-    Root: (props: EnvironmentProps) => JSX.Element;
-};
 export { Environment, useEnvironmentContext };
 export type { EnvironmentContext, EnvironmentProps };

package/environment/index.mjs

@@ -1,9 +1,3 @@
 'use client';
-import { Environment as Environment$1 } from './environment.mjs';
+export { Environment } from './environment.mjs';
 export { useEnvironmentContext } from './environment-context.mjs';
-
-const Environment = Object.assign(Environment$1, {
-  Root: Environment$1
-});
-
-export { Environment };

package/environment/{environment.stories.d.ts → stories/environment.stories.d.ts}

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

package/file-upload/{file-upload.cjs → file-upload-root.cjs}

@@ -12,7 +12,7 @@ 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 FileUploadRoot = react.forwardRef((props, ref) => {
   const [useFileUploadProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -41,6 +41,6 @@ const FileUpload = react.forwardRef((props, ref) => {
   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";
+FileUploadRoot.displayName = "FileUploadRoot";
 
-exports.FileUpload = FileUpload;
+exports.FileUploadRoot = FileUploadRoot;

package/file-upload/{file-upload.d.ts → file-upload-root.d.ts}

@@ -2,8 +2,8 @@ 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 & {
+export interface FileUploadRootProps extends Assign<HTMLArkProps<'div'>, UseFileUploadProps & {
     children?: ((api: UseFileUploadReturn) => ReactNode) | ReactNode;
 }> {
 }
-export declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;
+export declare const FileUploadRoot: ForwardRefExoticComponent<FileUploadRootProps & RefAttributes<HTMLDivElement>>;

package/file-upload/{file-upload.mjs → file-upload-root.mjs}

@@ -8,7 +8,7 @@ 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 FileUploadRoot = forwardRef((props, ref) => {
   const [useFileUploadProps, { children, ...divProps }] = createSplitProps()(
     props,
     [
@@ -37,6 +37,6 @@ const FileUpload = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(FileUploadProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
-FileUpload.displayName = "FileUpload";
+FileUploadRoot.displayName = "FileUploadRoot";
 
-export { FileUpload };
+export { FileUploadRoot };

package/file-upload/index.cjs

@@ -3,7 +3,6 @@
 
 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');
@@ -14,10 +13,11 @@ 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 fileUploadRoot = require('./file-upload-root.cjs');
 const fileUploadTrigger = require('./file-upload-trigger.cjs');
 
-const FileUpload = Object.assign(fileUpload.FileUpload, {
-  Root: fileUpload.FileUpload,
+const FileUpload = {
+  Root: fileUploadRoot.FileUploadRoot,
   Dropzone: fileUploadDropzone.FileUploadDropzone,
   Item: fileUploadItem.FileUploadItem,
   ItemDeleteTrigger: fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger,
@@ -28,7 +28,7 @@ const FileUpload = Object.assign(fileUpload.FileUpload, {
   ItemSizeText: fileUploadItemSizeText.FileUploadItemSizeText,
   Label: fileUploadLabel.FileUploadLabel,
   Trigger: fileUploadTrigger.FileUploadTrigger
-});
+};
 
 exports.useFileUploadContext = fileUploadContext.useFileUploadContext;
 exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
@@ -39,5 +39,6 @@ exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
 exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
 exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
 exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
+exports.FileUploadRoot = fileUploadRoot.FileUploadRoot;
 exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
 exports.FileUpload = FileUpload;

package/file-upload/index.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type FileUploadProps } from './file-upload';
+import type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails } from '@zag-js/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';
@@ -11,9 +11,10 @@ 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 { FileUploadRoot, type FileUploadRootProps } from './file-upload-root';
 import { FileUploadTrigger, type FileUploadTriggerProps } from './file-upload-trigger';
-declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: {
+    Root: ForwardRefExoticComponent<FileUploadRootProps & RefAttributes<HTMLDivElement>>;
     Dropzone: ForwardRefExoticComponent<FileUploadDropzoneProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<FileUploadItemProps & RefAttributes<HTMLLIElement>>;
     ItemDeleteTrigger: ForwardRefExoticComponent<FileUploadItemDeleteTriggerProps & RefAttributes<HTMLButtonElement>>;
@@ -25,5 +26,5 @@ declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttribu
     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, };
+export { FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, useFileUploadContext, };
+export type { FileUploadContext, FileUploadDropzoneProps, FileUploadFileAcceptDetails, FileUploadFileChangeDetails, FileUploadFileRejectDetails, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewImageProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadRootProps, FileUploadTriggerProps, };

package/file-upload/index.mjs

@@ -1,5 +1,4 @@
 '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';
@@ -10,10 +9,11 @@ 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 { FileUploadRoot } from './file-upload-root.mjs';
 import { FileUploadTrigger } from './file-upload-trigger.mjs';
 
-const FileUpload = Object.assign(FileUpload$1, {
-  Root: FileUpload$1,
+const FileUpload = {
+  Root: FileUploadRoot,
   Dropzone: FileUploadDropzone,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
@@ -24,6 +24,6 @@ const FileUpload = Object.assign(FileUpload$1, {
   ItemSizeText: FileUploadItemSizeText,
   Label: FileUploadLabel,
   Trigger: FileUploadTrigger
-});
+};
 
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger };