@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/dialog/{dialog-container.cjs → dialog-positioner.cjs}

@@ -9,11 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogContainer = react.forwardRef((props, ref) => {
-  const { containerProps } = dialogContext.useDialogContext();
-  const mergedProps = react$1.mergeProps(containerProps, props);
+const DialogPositioner = react.forwardRef((props, ref) => {
+  const api = dialogContext.useDialogContext();
+  const mergedProps = react$1.mergeProps(api.positionerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
-DialogContainer.displayName = "DialogContainer";
+DialogPositioner.displayName = "DialogPositioner";
 
-exports.DialogContainer = DialogContainer;
+exports.DialogPositioner = DialogPositioner;

package/dialog/dialog-positioner.d.ts

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

package/dialog/{dialog-container.mjs → dialog-positioner.mjs}

@@ -5,11 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
-const DialogContainer = forwardRef((props, ref) => {
-  const { containerProps } = useDialogContext();
-  const mergedProps = mergeProps(containerProps, props);
+const DialogPositioner = forwardRef((props, ref) => {
+  const api = useDialogContext();
+  const mergedProps = mergeProps(api.positionerProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
-DialogContainer.displayName = "DialogContainer";
+DialogPositioner.displayName = "DialogPositioner";
 
-export { DialogContainer };
+export { DialogPositioner };

package/dialog/dialog-title.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogTitle = react.forwardRef((props, ref) => {
-  const { titleProps } = dialogContext.useDialogContext();
-  const mergedProps = react$1.mergeProps(titleProps, props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = react$1.mergeProps(api.titleProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.h2, { ...mergedProps, ref });
 });
 DialogTitle.displayName = "DialogTitle";

package/dialog/dialog-title.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type DialogTitleProps = HTMLArkProps<'h2'>;
-export declare const DialogTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLHeadingElement>>;
+export interface DialogTitleProps extends HTMLArkProps<'h2'> {
+}
+export declare const DialogTitle: ForwardRefExoticComponent<DialogTitleProps & RefAttributes<HTMLHeadingElement>>;

package/dialog/dialog-title.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTitle = forwardRef((props, ref) => {
-  const { titleProps } = useDialogContext();
-  const mergedProps = mergeProps(titleProps, props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(api.titleProps, props);
   return /* @__PURE__ */ jsx(ark.h2, { ...mergedProps, ref });
 });
 DialogTitle.displayName = "DialogTitle";

package/dialog/dialog-trigger.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogTrigger = react.forwardRef((props, ref) => {
-  const { triggerProps } = dialogContext.useDialogContext();
-  const mergedProps = react$1.mergeProps(triggerProps, props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = react$1.mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 DialogTrigger.displayName = "DialogTrigger";

package/dialog/dialog-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type DialogTriggerProps = HTMLArkProps<'button'>;
-export declare const DialogTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface DialogTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DialogTrigger: ForwardRefExoticComponent<DialogTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dialog/dialog-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTrigger = forwardRef((props, ref) => {
-  const { triggerProps } = useDialogContext();
-  const mergedProps = mergeProps(triggerProps, props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 DialogTrigger.displayName = "DialogTrigger";

package/dialog/dialog.cjs

@@ -11,9 +11,9 @@ const useDialog = require('./use-dialog.cjs');
 
 const Dialog = (props) => {
   const { children, ...useDialogProps } = props;
-  const dialog = useDialog.useDialog(useDialogProps);
-  const view = runIfFn.runIfFn(children, dialog);
-  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: dialog, children: view });
+  const api = useDialog.useDialog(useDialogProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: view });
 };
 
 exports.Dialog = Dialog;

package/dialog/dialog.d.ts

@@ -3,7 +3,8 @@ import { type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type DialogContext } from './dialog-context';
 import { type UseDialogProps } from './use-dialog';
-export type DialogProps = Assign<UseDialogProps, {
+export interface DialogProps extends Assign<UseDialogProps, {
     children?: ReactNode | ((props: DialogContext) => ReactNode);
-}>;
+}> {
+}
 export declare const Dialog: (props: DialogProps) => JSX.Element;

package/dialog/dialog.mjs

@@ -7,9 +7,9 @@ import { useDialog } from './use-dialog.mjs';
 
 const Dialog = (props) => {
   const { children, ...useDialogProps } = props;
-  const dialog = useDialog(useDialogProps);
-  const view = runIfFn(children, dialog);
-  return /* @__PURE__ */ jsx(DialogProvider, { value: dialog, children: view });
+  const api = useDialog(useDialogProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(DialogProvider, { value: api, children: view });
 };
 
 export { Dialog };

package/dialog/index.cjs

@@ -3,38 +3,33 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dialog$1 = require('./dialog.cjs');
+const dialog = require('./dialog.cjs');
 const dialogBackdrop = require('./dialog-backdrop.cjs');
 const dialogCloseTrigger = require('./dialog-close-trigger.cjs');
-const dialogContainer = require('./dialog-container.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 dialogTitle = require('./dialog-title.cjs');
 const dialogTrigger = require('./dialog-trigger.cjs');
-const dialog = require('@zag-js/dialog');
 
-const Dialog = Object.assign(dialog$1.Dialog, {
-  Root: dialog$1.Dialog,
+const Dialog = Object.assign(dialog.Dialog, {
+  Root: dialog.Dialog,
   Backdrop: dialogBackdrop.DialogBackdrop,
   CloseTrigger: dialogCloseTrigger.DialogCloseTrigger,
-  Container: dialogContainer.DialogContainer,
   Content: dialogContent.DialogContent,
   Description: dialogDescription.DialogDescription,
+  Positioner: dialogPositioner.DialogPositioner,
   Title: dialogTitle.DialogTitle,
   Trigger: dialogTrigger.DialogTrigger
 });
 
 exports.DialogBackdrop = dialogBackdrop.DialogBackdrop;
 exports.DialogCloseTrigger = dialogCloseTrigger.DialogCloseTrigger;
-exports.DialogContainer = dialogContainer.DialogContainer;
 exports.DialogContent = dialogContent.DialogContent;
 exports.useDialogContext = dialogContext.useDialogContext;
 exports.DialogDescription = dialogDescription.DialogDescription;
+exports.DialogPositioner = dialogPositioner.DialogPositioner;
 exports.DialogTitle = dialogTitle.DialogTitle;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
-Object.defineProperty(exports, 'dialogAnatomy', {
-  enumerable: true,
-  get: () => dialog.anatomy
-});
 exports.Dialog = Dialog;

package/dialog/index.d.ts

@@ -1,36 +1,24 @@
-import { HTMLArkProps, PresenceProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
 import { type DialogProps } from './dialog';
 import { DialogBackdrop, type DialogBackdropProps } from './dialog-backdrop';
 import { DialogCloseTrigger, type DialogCloseTriggerProps } from './dialog-close-trigger';
-import { DialogContainer, type DialogContainerProps } from './dialog-container';
 import { DialogContent, type DialogContentProps } from './dialog-content';
-import { useDialogContext } from './dialog-context';
+import { useDialogContext, type DialogContext } from './dialog-context';
 import { DialogDescription, type DialogDescriptionProps } from './dialog-description';
+import { DialogPositioner, type DialogPositionerProps } from './dialog-positioner';
 import { DialogTitle, type DialogTitleProps } from './dialog-title';
 import { DialogTrigger, type DialogTriggerProps } from './dialog-trigger';
-import { dialogAnatomy } from './dialog.anatomy';
 declare const Dialog: ((props: DialogProps) => JSX.Element) & {
     Root: (props: DialogProps) => JSX.Element;
-    Backdrop: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    CloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Container: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLParagraphElement>>;
-    Title: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLHeadingElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
+    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, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger, dialogAnatomy, useDialogContext, };
-export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContainerProps, DialogContentProps, DialogDescriptionProps, DialogProps, DialogTitleProps, DialogTriggerProps, };
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, useDialogContext, };
+export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, };

package/dialog/index.mjs

@@ -2,23 +2,22 @@
 import { Dialog as Dialog$1 } from './dialog.mjs';
 import { DialogBackdrop } from './dialog-backdrop.mjs';
 import { DialogCloseTrigger } from './dialog-close-trigger.mjs';
-import { DialogContainer } from './dialog-container.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 { DialogTitle } from './dialog-title.mjs';
 import { DialogTrigger } from './dialog-trigger.mjs';
-export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 
 const Dialog = Object.assign(Dialog$1, {
   Root: Dialog$1,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
-  Container: DialogContainer,
   Content: DialogContent,
   Description: DialogDescription,
+  Positioner: DialogPositioner,
   Title: DialogTitle,
   Trigger: DialogTrigger
 });
 
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger };
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger };

package/dialog/use-dialog.cjs

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -28,14 +29,21 @@ function _interopNamespaceDefault(e) {
 
 const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 
-const useDialog = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+const useDialog = (props = {}) => {
+  const initialContext = {
     id: react.useId(),
-    getRootNode,
-    ...props
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent.useEvent(props.onOpenChange, { sync: true }),
+    onEscapeKeyDown: useEvent.useEvent(props.onEscapeKeyDown),
+    onInteractOutside: useEvent.useEvent(props.onInteractOutside)
   };
-  const [state, send] = react$1.useMachine(dialog__namespace.machine(context), { context });
+  const [state, send] = react$1.useMachine(dialog__namespace.machine(initialContext), { context });
   return dialog__namespace.connect(state, send, react$1.normalizeProps);
 };
 

package/dialog/use-dialog.d.ts

@@ -1,6 +1,12 @@
 import * as dialog from '@zag-js/dialog';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseDialogProps extends Optional<dialog.Context, 'id'> {
+    /**
+     * The initial open state of the dialog.
+     */
+    defaultOpen?: dialog.Context['open'];
 }
-export type UseDialogReturn = dialog.Api;
-export declare const useDialog: (props: UseDialogProps) => UseDialogReturn;
+export interface UseDialogReturn extends dialog.Api<PropTypes> {
+}
+export declare const useDialog: (props?: UseDialogProps) => UseDialogReturn;

package/dialog/use-dialog.mjs

@@ -3,16 +3,24 @@ 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';
 
-const useDialog = (props) => {
-  const getRootNode = useEnvironmentContext();
-  const context = {
+const useDialog = (props = {}) => {
+  const initialContext = {
     id: useId(),
-    getRootNode,
-    ...props
+    getRootNode: useEnvironmentContext(),
+    ...props,
+    open: props.defaultOpen ?? props.open
+  };
+  const context = {
+    ...initialContext,
+    open: props.open,
+    onOpenChange: useEvent(props.onOpenChange, { sync: true }),
+    onEscapeKeyDown: useEvent(props.onEscapeKeyDown),
+    onInteractOutside: useEvent(props.onInteractOutside)
   };
-  const [state, send] = useMachine(dialog.machine(context), { context });
+  const [state, send] = useMachine(dialog.machine(initialContext), { context });
   return dialog.connect(state, send, normalizeProps);
 };
 

package/editable/editable-area.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableArea = react.forwardRef((props, ref) => {
-  const { areaProps } = editableContext.useEditableContext();
-  const mergedProps = react$1.mergeProps(areaProps, props);
+  const api = editableContext.useEditableContext();
+  const mergedProps = react$1.mergeProps(api.areaProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 EditableArea.displayName = "EditableArea";

package/editable/editable-area.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableAreaProps = HTMLArkProps<'div'>;
-export declare const EditableArea: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface EditableAreaProps extends HTMLArkProps<'div'> {
+}
+export declare const EditableArea: ForwardRefExoticComponent<EditableAreaProps & RefAttributes<HTMLDivElement>>;

package/editable/editable-area.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableArea = forwardRef((props, ref) => {
-  const { areaProps } = useEditableContext();
-  const mergedProps = mergeProps(areaProps, props);
+  const api = useEditableContext();
+  const mergedProps = mergeProps(api.areaProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 EditableArea.displayName = "EditableArea";

package/editable/editable-cancel-trigger.cjs

@@ -11,8 +11,8 @@ const editableContext = require('./editable-context.cjs');
 
 const EditableCancelTrigger = react.forwardRef(
   (props, ref) => {
-    const { cancelTriggerProps } = editableContext.useEditableContext();
-    const mergedProps = react$1.mergeProps(cancelTriggerProps, props);
+    const api = editableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(api.cancelTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/editable/editable-cancel-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableCancelTriggerProps = HTMLArkProps<'button'>;
-export declare const EditableCancelTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface EditableCancelTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const EditableCancelTrigger: ForwardRefExoticComponent<EditableCancelTriggerProps & RefAttributes<HTMLButtonElement>>;

package/editable/editable-cancel-trigger.mjs

@@ -7,8 +7,8 @@ import { useEditableContext } from './editable-context.mjs';
 
 const EditableCancelTrigger = forwardRef(
   (props, ref) => {
-    const { cancelTriggerProps } = useEditableContext();
-    const mergedProps = mergeProps(cancelTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(api.cancelTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/editable/editable-context.d.ts

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

package/editable/editable-control.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableControl = react.forwardRef((props, ref) => {
-  const { controlProps } = editableContext.useEditableContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
+  const api = editableContext.useEditableContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 EditableControl.displayName = "EditableControl";

package/editable/editable-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableControlProps = HTMLArkProps<'div'>;
-export declare const EditableControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface EditableControlProps extends HTMLArkProps<'div'> {
+}
+export declare const EditableControl: ForwardRefExoticComponent<EditableControlProps & RefAttributes<HTMLDivElement>>;

package/editable/editable-control.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableControl = forwardRef((props, ref) => {
-  const { controlProps } = useEditableContext();
-  const mergedProps = mergeProps(controlProps, props);
+  const api = useEditableContext();
+  const mergedProps = mergeProps(api.controlProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 EditableControl.displayName = "EditableControl";

package/editable/editable-edit-trigger.cjs

@@ -11,8 +11,8 @@ const editableContext = require('./editable-context.cjs');
 
 const EditableEditTrigger = react.forwardRef(
   (props, ref) => {
-    const { editTriggerProps } = editableContext.useEditableContext();
-    const mergedProps = react$1.mergeProps(editTriggerProps, props);
+    const api = editableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(api.editTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/editable/editable-edit-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableEditTriggerProps = HTMLArkProps<'button'>;
-export declare const EditableEditTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface EditableEditTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const EditableEditTrigger: ForwardRefExoticComponent<EditableEditTriggerProps & RefAttributes<HTMLButtonElement>>;

package/editable/editable-edit-trigger.mjs

@@ -7,8 +7,8 @@ import { useEditableContext } from './editable-context.mjs';
 
 const EditableEditTrigger = forwardRef(
   (props, ref) => {
-    const { editTriggerProps } = useEditableContext();
-    const mergedProps = mergeProps(editTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(api.editTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/editable/editable-input.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableInput = react.forwardRef((props, ref) => {
-  const { inputProps } = editableContext.useEditableContext();
-  const mergedProps = react$1.mergeProps(inputProps, props);
+  const api = editableContext.useEditableContext();
+  const mergedProps = react$1.mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
 EditableInput.displayName = "EditableInput";

package/editable/editable-input.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableInputProps = HTMLArkProps<'input'>;
-export declare const EditableInput: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLInputElement>>;
+export interface EditableInputProps extends HTMLArkProps<'input'> {
+}
+export declare const EditableInput: ForwardRefExoticComponent<EditableInputProps & RefAttributes<HTMLInputElement>>;

package/editable/editable-input.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableInput = forwardRef((props, ref) => {
-  const { inputProps } = useEditableContext();
-  const mergedProps = mergeProps(inputProps, props);
+  const api = useEditableContext();
+  const mergedProps = mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 EditableInput.displayName = "EditableInput";

package/editable/editable-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = editableContext.useEditableContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = editableContext.useEditableContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 EditableLabel.displayName = "EditableLabel";

package/editable/editable-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type EditableLabelProps = HTMLArkProps<'label'>;
-export declare const EditableLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export interface EditableLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const EditableLabel: ForwardRefExoticComponent<EditableLabelProps & RefAttributes<HTMLLabelElement>>;

package/editable/editable-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableLabel = forwardRef((props, ref) => {
-  const { labelProps } = useEditableContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useEditableContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 EditableLabel.displayName = "EditableLabel";

package/editable/editable-preview.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditablePreview = react.forwardRef((props, ref) => {
-  const { previewProps } = editableContext.useEditableContext();
-  const mergedProps = react$1.mergeProps(previewProps, props);
+  const api = editableContext.useEditableContext();
+  const mergedProps = react$1.mergeProps(api.previewProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 EditablePreview.displayName = "EditablePreview";