@ark-ui/react 0.10.0-beta.0 → 0.10.0

package/dialog/dialog-backdrop.d.ts

@@ -1,6 +1,10 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { PresenceProps } from '..';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type DialogPresenceProps } from './dialog-presence';
-export type DialogBackdropProps = HTMLArkProps<'div'> & Omit<DialogPresenceProps, 'children'>;
-export declare const DialogBackdrop: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, DialogBackdropProps>>;
+export type DialogBackdropProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<DialogPresenceProps, 'children'>;
+export declare const DialogBackdrop: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-backdrop.mjs

@@ -1,16 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 import { DialogPresence } from './dialog-presence.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => /* @__PURE__ */ jsx(DialogPresence, { children: /* @__PURE__ */ jsx(InnerDialogBackdrop, { ref, ...props }) }));
+DialogBackdrop.displayName = "DialogBackdrop";
 const InnerDialogBackdrop = forwardRef((props, ref) => {
   const { backdropProps } = useDialogContext();
   const mergedProps = mergeProps(backdropProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+InnerDialogBackdrop.displayName = "InnerDialogBackdrop";
 
 export { DialogBackdrop };

package/dialog/dialog-close-trigger.cjs

@@ -4,15 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogCloseTrigger = forwardRef.forwardRef((props, ref) => {
-  const { closeTriggerProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(closeTriggerProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-});
+const DialogCloseTrigger = react.forwardRef(
+  (props, ref) => {
+    const { closeTriggerProps } = dialogContext.useDialogContext();
+    const mergedProps = react$1.mergeProps(closeTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+DialogCloseTrigger.displayName = "DialogCloseTrigger";
 
 exports.DialogCloseTrigger = DialogCloseTrigger;

package/dialog/dialog-close-trigger.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type DialogCloseTriggerProps = HTMLArkProps<'button'>;
-export declare const DialogCloseTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DialogCloseTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const DialogCloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dialog/dialog-close-trigger.mjs

@@ -1,14 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
-const DialogCloseTrigger = forwardRef((props, ref) => {
-  const { closeTriggerProps } = useDialogContext();
-  const mergedProps = mergeProps(closeTriggerProps, props);
-  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-});
+const DialogCloseTrigger = forwardRef(
+  (props, ref) => {
+    const { closeTriggerProps } = useDialogContext();
+    const mergedProps = mergeProps(closeTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+DialogCloseTrigger.displayName = "DialogCloseTrigger";
 
 export { DialogCloseTrigger };

package/dialog/dialog-container.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogContainer = forwardRef.forwardRef((props, ref) => {
+const DialogContainer = react.forwardRef((props, ref) => {
   const { containerProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(containerProps, props);
+  const mergedProps = react$1.mergeProps(containerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+DialogContainer.displayName = "DialogContainer";
 
 exports.DialogContainer = DialogContainer;

package/dialog/dialog-container.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type DialogContainerProps = HTMLArkProps<'div'>;
-export declare const DialogContainer: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DialogContainerProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const DialogContainer: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-container.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogContainer = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const DialogContainer = forwardRef((props, ref) => {
   const mergedProps = mergeProps(containerProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+DialogContainer.displayName = "DialogContainer";
 
 export { DialogContainer };

package/dialog/dialog-content.cjs

@@ -4,21 +4,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const dialogPresence = require('./dialog-presence.cjs');
 
-const DialogContent = forwardRef.forwardRef((props, ref) => {
+const DialogContent = react.forwardRef((props, ref) => {
   const [presenceProps, dialogContentProps] = splitPresenceProps.splitPresenceProps(props);
   return /* @__PURE__ */ jsxRuntime.jsx(dialogPresence.DialogPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerDialogContent, { ref, ...dialogContentProps }) });
 });
-const InnerDialogContent = forwardRef.forwardRef((props, ref) => {
-  const { contentProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+DialogContent.displayName = "DialogContent";
+const InnerDialogContent = react.forwardRef(
+  (props, ref) => {
+    const { contentProps } = dialogContext.useDialogContext();
+    const mergedProps = react$1.mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+InnerDialogContent.displayName = "InnerDialogContent";
 
 exports.DialogContent = DialogContent;

package/dialog/dialog-content.d.ts

@@ -1,6 +1,10 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { PresenceProps } from '../presence';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type DialogPresenceProps } from './dialog-presence';
-export type DialogContentProps = HTMLArkProps<'div'> & Omit<DialogPresenceProps, 'children'>;
-export declare const DialogContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, DialogContentProps>>;
+export type DialogContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<DialogPresenceProps, 'children'>;
+export declare const DialogContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-content.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 import { DialogPresence } from './dialog-presence.mjs';
@@ -11,10 +11,14 @@ const DialogContent = forwardRef((props, ref) => {
   const [presenceProps, dialogContentProps] = splitPresenceProps(props);
   return /* @__PURE__ */ jsx(DialogPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerDialogContent, { ref, ...dialogContentProps }) });
 });
-const InnerDialogContent = forwardRef((props, ref) => {
-  const { contentProps } = useDialogContext();
-  const mergedProps = mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+DialogContent.displayName = "DialogContent";
+const InnerDialogContent = forwardRef(
+  (props, ref) => {
+    const { contentProps } = useDialogContext();
+    const mergedProps = mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+InnerDialogContent.displayName = "InnerDialogContent";
 
 export { DialogContent };

package/dialog/dialog-description.cjs

@@ -4,15 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogDescription = forwardRef.forwardRef((props, ref) => {
-  const { descriptionProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(descriptionProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
-});
+const DialogDescription = react.forwardRef(
+  (props, ref) => {
+    const { descriptionProps } = dialogContext.useDialogContext();
+    const mergedProps = react$1.mergeProps(descriptionProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
+  }
+);
+DialogDescription.displayName = "DialogDescription";
 
 exports.DialogDescription = DialogDescription;

package/dialog/dialog-description.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type DialogDescriptionProps = HTMLArkProps<'p'>;
-export declare const DialogDescription: ForwardRefExoticComponent<Assign<AsChildComponentProps<"p">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DialogDescriptionProps = ComponentPropsWithoutRef<typeof ark.p>;
+export declare const DialogDescription: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLParagraphElement>>;

package/dialog/dialog-description.mjs

@@ -1,14 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
-const DialogDescription = forwardRef((props, ref) => {
-  const { descriptionProps } = useDialogContext();
-  const mergedProps = mergeProps(descriptionProps, props);
-  return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
-});
+const DialogDescription = forwardRef(
+  (props, ref) => {
+    const { descriptionProps } = useDialogContext();
+    const mergedProps = mergeProps(descriptionProps, props);
+    return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
+  }
+);
+DialogDescription.displayName = "DialogDescription";
 
 export { DialogDescription };

package/dialog/dialog-title.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogTitle = forwardRef.forwardRef((props, ref) => {
+const DialogTitle = react.forwardRef((props, ref) => {
   const { titleProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(titleProps, props);
+  const mergedProps = react$1.mergeProps(titleProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.h2, { ...mergedProps, ref });
 });
+DialogTitle.displayName = "DialogTitle";
 
 exports.DialogTitle = DialogTitle;

package/dialog/dialog-title.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type DialogTitleProps = HTMLArkProps<'h2'>;
-export declare const DialogTitle: ForwardRefExoticComponent<Assign<AsChildComponentProps<"h2">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DialogTitleProps = ComponentPropsWithoutRef<typeof ark.h2>;
+export declare const DialogTitle: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLHeadingElement>>;

package/dialog/dialog-title.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTitle = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const DialogTitle = forwardRef((props, ref) => {
   const mergedProps = mergeProps(titleProps, props);
   return /* @__PURE__ */ jsx(ark.h2, { ...mergedProps, ref });
 });
+DialogTitle.displayName = "DialogTitle";
 
 export { DialogTitle };

package/dialog/dialog-trigger.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogTrigger = forwardRef.forwardRef((props, ref) => {
+const DialogTrigger = react.forwardRef((props, ref) => {
   const { triggerProps } = dialogContext.useDialogContext();
-  const mergedProps = react.mergeProps(triggerProps, props);
+  const mergedProps = react$1.mergeProps(triggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
+DialogTrigger.displayName = "DialogTrigger";
 
 exports.DialogTrigger = DialogTrigger;

package/dialog/dialog-trigger.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type DialogTriggerProps = HTMLArkProps<'button'>;
-export declare const DialogTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DialogTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const DialogTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/dialog/dialog-trigger.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTrigger = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const DialogTrigger = forwardRef((props, ref) => {
   const mergedProps = mergeProps(triggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
+DialogTrigger.displayName = "DialogTrigger";
 
 export { DialogTrigger };

package/dialog/use-dialog.cjs

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const dialog = require('@zag-js/dialog');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,12 +30,12 @@ const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 const useDialog = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props
   };
-  const [state, send] = react.useMachine(dialog__namespace.machine(context), { context });
-  return dialog__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(dialog__namespace.machine(context), { context });
+  return dialog__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useDialog = useDialog;

package/editable/editable-area.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const editableContext = require('./editable-context.cjs');
 
-const EditableArea = forwardRef.forwardRef((props, ref) => {
+const EditableArea = react.forwardRef((props, ref) => {
   const { areaProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(areaProps, props);
+  const mergedProps = react$1.mergeProps(areaProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+EditableArea.displayName = "EditableArea";
 
 exports.EditableArea = EditableArea;

package/editable/editable-area.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type EditableAreaProps = HTMLArkProps<'div'>;
-export declare const EditableArea: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type EditableAreaProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const EditableArea: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/editable/editable-area.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableArea = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const EditableArea = forwardRef((props, ref) => {
   const mergedProps = mergeProps(areaProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+EditableArea.displayName = "EditableArea";
 
 export { EditableArea };

package/editable/editable-cancel-trigger.cjs

@@ -4,16 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const editableContext = require('./editable-context.cjs');
 
-const EditableCancelTrigger = forwardRef.forwardRef((props, ref) => {
-  const { cancelTriggerProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(cancelTriggerProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-});
+const EditableCancelTrigger = react.forwardRef(
+  (props, ref) => {
+    const { cancelTriggerProps } = editableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(cancelTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+EditableCancelTrigger.displayName = "EditableArea";
 
 exports.EditableCancelTrigger = EditableCancelTrigger;

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

@@ -1,7 +1,8 @@
-import type { AsChildComponentProps } from '../factory';
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent, type ReactElement } from 'react';
-export type EditableCancelTriggerProps = {
-    children: ReactElement;
-};
-export declare const EditableCancelTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type EditableCancelTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const EditableCancelTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/editable/editable-cancel-trigger.mjs

@@ -1,15 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
-const EditableCancelTrigger = forwardRef((props, ref) => {
-  const { cancelTriggerProps } = useEditableContext();
-  const mergedProps = mergeProps(cancelTriggerProps, props);
-  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-});
+const EditableCancelTrigger = forwardRef(
+  (props, ref) => {
+    const { cancelTriggerProps } = useEditableContext();
+    const mergedProps = mergeProps(cancelTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+EditableCancelTrigger.displayName = "EditableArea";
 
 export { EditableCancelTrigger };

package/editable/editable-control.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const editableContext = require('./editable-context.cjs');
 
-const EditableControl = forwardRef.forwardRef((props, ref) => {
+const EditableControl = react.forwardRef((props, ref) => {
   const { controlProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(controlProps, props);
+  const mergedProps = react$1.mergeProps(controlProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+EditableControl.displayName = "EditableControl";
 
 exports.EditableControl = EditableControl;

package/editable/editable-control.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type EditableControlProps = HTMLArkProps<'div'>;
-export declare const EditableControl: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type EditableControlProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const EditableControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;