@ark-ui/react 1.3.0 → 2.0.1

package/date-picker/index.mjs

@@ -1,56 +1,29 @@
-'use client';
-import { DatePicker as DatePicker$1 } from './date-picker.mjs';
-import { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
-import { DatePickerContent } from './date-picker-content.mjs';
+export { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
+export { DatePickerContent } from './date-picker-content.mjs';
 export { useDatePickerContext } from './date-picker-context.mjs';
-import { DatePickerControl } from './date-picker-control.mjs';
-import { DatePickerInput } from './date-picker-input.mjs';
-import { DatePickerLabel } from './date-picker-label.mjs';
-import { DatePickerMonthSelect } from './date-picker-month-select.mjs';
-import { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
-import { DatePickerPositioner } from './date-picker-positioner.mjs';
-import { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
-import { DatePickerRangeText } from './date-picker-range-text.mjs';
-import { DatePickerTable } from './date-picker-table.mjs';
-import { DatePickerTableBody } from './date-picker-table-body.mjs';
-import { DatePickerTableCell } from './date-picker-table-cell.mjs';
+export { DatePickerControl } from './date-picker-control.mjs';
+export { DatePickerInput } from './date-picker-input.mjs';
+export { DatePickerLabel } from './date-picker-label.mjs';
+export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
+export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
+export { DatePickerPositioner } from './date-picker-positioner.mjs';
+export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
+export { DatePickerRangeText } from './date-picker-range-text.mjs';
+export { DatePickerRoot } from './date-picker-root.mjs';
+export { DatePickerTable } from './date-picker-table.mjs';
+export { DatePickerTableBody } from './date-picker-table-body.mjs';
+export { DatePickerTableCell } from './date-picker-table-cell.mjs';
 export { useDatePickerTableCellContext } from './date-picker-table-cell-context.mjs';
-import { DatePickerTableCellTrigger } from './date-picker-table-cell-trigger.mjs';
+export { DatePickerTableCellTrigger } from './date-picker-table-cell-trigger.mjs';
 export { useDatePickerTableContext } from './date-picker-table-context.mjs';
-import { DatePickerTableHead } from './date-picker-table-head.mjs';
-import { DatePickerTableHeader } from './date-picker-table-header.mjs';
-import { DatePickerTableRow } from './date-picker-table-row.mjs';
-import { DatePickerTrigger } from './date-picker-trigger.mjs';
-import { DatePickerView } from './date-picker-view.mjs';
+export { DatePickerTableHead } from './date-picker-table-head.mjs';
+export { DatePickerTableHeader } from './date-picker-table-header.mjs';
+export { DatePickerTableRow } from './date-picker-table-row.mjs';
+export { DatePickerTrigger } from './date-picker-trigger.mjs';
+export { DatePickerView } from './date-picker-view.mjs';
 export { useDatePickerViewContext } from './date-picker-view-context.mjs';
-import { DatePickerViewControl } from './date-picker-view-control.mjs';
-import { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
-import { DatePickerYearSelect } from './date-picker-year-select.mjs';
-
-const DatePicker = Object.assign(DatePicker$1, {
-  Root: DatePicker$1,
-  ClearTrigger: DatePickerClearTrigger,
-  Content: DatePickerContent,
-  Control: DatePickerControl,
-  Input: DatePickerInput,
-  Label: DatePickerLabel,
-  MonthSelect: DatePickerMonthSelect,
-  NextTrigger: DatePickerNextTrigger,
-  Positioner: DatePickerPositioner,
-  PrevTrigger: DatePickerPrevTrigger,
-  RangeText: DatePickerRangeText,
-  Table: DatePickerTable,
-  TableBody: DatePickerTableBody,
-  TableCell: DatePickerTableCell,
-  TableCellTrigger: DatePickerTableCellTrigger,
-  TableHead: DatePickerTableHead,
-  TableHeader: DatePickerTableHeader,
-  TableRow: DatePickerTableRow,
-  Trigger: DatePickerTrigger,
-  View: DatePickerView,
-  ViewControl: DatePickerViewControl,
-  ViewTrigger: DatePickerViewTrigger,
-  YearSelect: DatePickerYearSelect
-});
-
-export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };
+export { DatePickerViewControl } from './date-picker-view-control.mjs';
+export { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
+export { DatePickerYearSelect } from './date-picker-year-select.mjs';
+import * as datePicker from './date-picker.mjs';
+export { datePicker as DatePicker };

package/date-picker/use-date-picker.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const datePicker = require('@zag-js/date-picker');
 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/date-picker/use-date-picker.mjs

@@ -2,9 +2,8 @@
 import * as datePicker from '@zag-js/date-picker';
 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 useDatePicker = (props = {}) => {
   const initialContext = {

package/dialog/dialog-backdrop.cjs

@@ -7,10 +7,9 @@ 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 presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const dialogContext = require('./dialog-context.cjs');
 
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-backdrop.mjs

@@ -3,10 +3,9 @@ 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 { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { useDialogContext } from './dialog-context.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/dialog-content.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 DialogContent = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-content.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 DialogContent = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/dialog-positioner.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 DialogPositioner = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-positioner.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 DialogPositioner = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/dialog-root.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@zag-js/core');
+require('react');
+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 DialogRoot = (props) => {
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
+  const api = useDialog.useDialog(localProps);
+  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 }) }) });
+};
+
+exports.DialogRoot = DialogRoot;

package/dialog/dialog-root.d.ts

@@ -0,0 +1,8 @@
+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 DialogRootProps extends UseDialogProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseDialogReturn) => ReactNode);
+}
+export declare const DialogRoot: (props: DialogRootProps) => JSX.Element;

package/dialog/dialog-root.mjs

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/core';
+import 'react';
+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';
+
+const DialogRoot = (props) => {
+  const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
+  const api = useDialog(localProps);
+  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 }) }) });
+};
+
+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/dialog.cjs

@@ -1,26 +1,23 @@
-'use client';
 'use strict';
 
 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');
-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 dialogBackdrop = require('./dialog-backdrop.cjs');
+const dialogCloseTrigger = require('./dialog-close-trigger.cjs');
+const dialogContent = require('./dialog-content.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 = (props) => {
-  const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
-  const api = useDialog.useDialog(localProps);
-  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 }) }) });
-};
 
-exports.Dialog = Dialog;
+
+exports.Backdrop = dialogBackdrop.DialogBackdrop;
+exports.CloseTrigger = dialogCloseTrigger.DialogCloseTrigger;
+exports.Content = dialogContent.DialogContent;
+exports.Description = dialogDescription.DialogDescription;
+exports.Positioner = dialogPositioner.DialogPositioner;
+exports.Root = dialogRoot.DialogRoot;
+exports.Title = dialogTitle.DialogTitle;
+exports.Trigger = dialogTrigger.DialogTrigger;

package/dialog/dialog.d.ts

@@ -1,8 +1,9 @@
-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 {
-    children?: ReactNode | ((api: UseDialogReturn) => ReactNode);
-}
-export declare const Dialog: (props: DialogProps) => JSX.Element;
+import { DialogBackdrop as Backdrop } from './dialog-backdrop';
+import { DialogCloseTrigger as CloseTrigger } from './dialog-close-trigger';
+import { DialogContent as Content } from './dialog-content';
+import { DialogDescription as Description } from './dialog-description';
+import { DialogPositioner as Positioner } from './dialog-positioner';
+import { DialogRoot as Root } from './dialog-root';
+import { DialogTitle as Title } from './dialog-title';
+import { DialogTrigger as Trigger } from './dialog-trigger';
+export { Backdrop, CloseTrigger, Content, Description, Positioner, Root, Title, Trigger };

package/dialog/dialog.mjs

@@ -1,22 +1,8 @@
-'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';
-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 [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
-  const api = useDialog(localProps);
-  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 }) }) });
-};
-
-export { Dialog };
+export { DialogBackdrop as Backdrop } from './dialog-backdrop.mjs';
+export { DialogCloseTrigger as CloseTrigger } from './dialog-close-trigger.mjs';
+export { DialogContent as Content } from './dialog-content.mjs';
+export { DialogDescription as Description } from './dialog-description.mjs';
+export { DialogPositioner as Positioner } from './dialog-positioner.mjs';
+export { DialogRoot as Root } from './dialog-root.mjs';
+export { DialogTitle as Title } from './dialog-title.mjs';
+export { DialogTrigger as Trigger } from './dialog-trigger.mjs';

package/dialog/index.cjs

@@ -1,28 +1,19 @@
-'use client';
 'use strict';
 
 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 = require('./dialog.cjs');
+
 
-const Dialog = Object.assign(dialog.Dialog, {
-  Root: dialog.Dialog,
-  Backdrop: dialogBackdrop.DialogBackdrop,
-  CloseTrigger: dialogCloseTrigger.DialogCloseTrigger,
-  Content: dialogContent.DialogContent,
-  Description: dialogDescription.DialogDescription,
-  Positioner: dialogPositioner.DialogPositioner,
-  Title: dialogTitle.DialogTitle,
-  Trigger: dialogTrigger.DialogTrigger
-});
 
 exports.DialogBackdrop = dialogBackdrop.DialogBackdrop;
 exports.DialogCloseTrigger = dialogCloseTrigger.DialogCloseTrigger;
@@ -30,6 +21,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;
+exports.Dialog = dialog;

package/dialog/index.d.ts

@@ -1,25 +1,13 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
-/// <reference types="react" />
 import type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
-import { type DialogProps } from './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;
-    Backdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;
-    CloseTrigger: ForwardRefExoticComponent<DialogCloseTriggerProps & RefAttributes<HTMLButtonElement>>;
-    Content: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
-    Positioner: ForwardRefExoticComponent<DialogPositionerProps & RefAttributes<HTMLDivElement>>;
-    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, DialogOpenChangeDetails, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps };
+export * as Dialog from './dialog';
+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,23 +1,11 @@
-'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 { DialogBackdrop } from './dialog-backdrop.mjs';
+export { DialogCloseTrigger } from './dialog-close-trigger.mjs';
+export { DialogContent } from './dialog-content.mjs';
 export { useDialogContext } from './dialog-context.mjs';
-import { DialogDescription } from './dialog-description.mjs';
-import { DialogPositioner } from './dialog-positioner.mjs';
-import { DialogTitle } from './dialog-title.mjs';
-import { DialogTrigger } from './dialog-trigger.mjs';
-
-const Dialog = Object.assign(Dialog$1, {
-  Root: Dialog$1,
-  Backdrop: DialogBackdrop,
-  CloseTrigger: DialogCloseTrigger,
-  Content: DialogContent,
-  Description: DialogDescription,
-  Positioner: DialogPositioner,
-  Title: DialogTitle,
-  Trigger: DialogTrigger
-});
-
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger };
+export { DialogDescription } from './dialog-description.mjs';
+export { DialogPositioner } from './dialog-positioner.mjs';
+export { DialogRoot } from './dialog-root.mjs';
+export { DialogTitle } from './dialog-title.mjs';
+export { DialogTrigger } from './dialog-trigger.mjs';
+import * as dialog from './dialog.mjs';
+export { dialog as Dialog };

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

@@ -0,0 +1,55 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const editableContext = require('./editable-context.cjs');
+const useEditable = require('./use-editable.cjs');
+
+const EditableRoot = react.forwardRef((props, ref) => {
+  const [useEditableProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "activationMode",
+      "autoResize",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "finalFocusEl",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "invalid",
+      "maxLength",
+      "name",
+      "onEdit",
+      "onFocusOutside",
+      "onInteractOutside",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueCommit",
+      "onValueRevert",
+      "placeholder",
+      "readOnly",
+      "selectOnFocus",
+      "startWithEditView",
+      "submitMode",
+      "translations",
+      "value"
+    ]
+  );
+  const api = useEditable.useEditable(useEditableProps);
+  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 }) });
+});
+EditableRoot.displayName = "EditableRoot";
+
+exports.EditableRoot = EditableRoot;

package/editable/editable-root.d.ts

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

package/editable/editable-root.mjs

@@ -0,0 +1,51 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { EditableProvider } from './editable-context.mjs';
+import { useEditable } from './use-editable.mjs';
+
+const EditableRoot = forwardRef((props, ref) => {
+  const [useEditableProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "activationMode",
+      "autoResize",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "finalFocusEl",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "invalid",
+      "maxLength",
+      "name",
+      "onEdit",
+      "onFocusOutside",
+      "onInteractOutside",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueCommit",
+      "onValueRevert",
+      "placeholder",
+      "readOnly",
+      "selectOnFocus",
+      "startWithEditView",
+      "submitMode",
+      "translations",
+      "value"
+    ]
+  );
+  const api = useEditable(useEditableProps);
+  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 }) });
+});
+EditableRoot.displayName = "EditableRoot";
+
+export { EditableRoot };