@ark-ui/solid 0.2.0 → 0.4.0

package/dist/dialog/dialog-description.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogDescription = props => {
   const dialog = useDialogContext();
-  return createComponent(ark.p, mergeProps(() => dialog().descriptionProps, props));
+  const descriptionProps = mergeProps(() => dialog().descriptionProps, props);
+  return createComponent(ark.p, descriptionProps);
 };
 
 export { DialogDescription };

package/dist/dialog/dialog-title.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogTitle = props => {
   const dialog = dialogContext.useDialogContext();
-  return web.createComponent(factory.ark.h2, web.mergeProps(() => dialog().titleProps, props));
+  const titleProps = solid.mergeProps(() => dialog().titleProps, props);
+  return web.createComponent(factory.ark.h2, titleProps);
 };
 
 exports.DialogTitle = DialogTitle;

package/dist/dialog/dialog-title.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTitle = props => {
   const dialog = useDialogContext();
-  return createComponent(ark.h2, mergeProps(() => dialog().titleProps, props));
+  const titleProps = mergeProps(() => dialog().titleProps, props);
+  return createComponent(ark.h2, titleProps);
 };
 
 export { DialogTitle };

package/dist/dialog/dialog-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
 const DialogTrigger = props => {
   const dialog = dialogContext.useDialogContext();
-  const triggerProps = dialog().triggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = solid.mergeProps(() => dialog().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.DialogTrigger = DialogTrigger;

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

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type DialogTriggerProps = {
-    children: JSX.Element;
-};
-export declare const DialogTrigger: (props: DialogTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DialogTriggerProps = HTMLArkProps<'button'>;
+export declare const DialogTrigger: (props: DialogTriggerProps) => JSX.Element;

package/dist/dialog/dialog-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
 const DialogTrigger = props => {
   const dialog = useDialogContext();
-  const triggerProps = dialog().triggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = mergeProps(() => dialog().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { DialogTrigger };

package/dist/dialog/dialog.cjs

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
 const createSplitProps = require('../create-split-props.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
 
 const Dialog = props => {
-  const [useDialogProps, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
-  const dialog = useDialog.useDialog(useDialogProps);
-  const view = solidJs.children(() => runIfFn.runIfFn(restProps.children, dialog()));
+  const [dialogParams, localProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
+  const api = useDialog.useDialog(dialogParams);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(dialogContext.DialogProvider, {
-    value: dialog,
+    value: api,
     get children() {
-      return view();
+      return getChildren();
     }
   });
 };

package/dist/dialog/dialog.d.ts

@@ -1,6 +1,6 @@
 import { type JSX } from 'solid-js';
 import { type UseDialogProps, type UseDialogReturn } from './use-dialog';
 export type DialogProps = UseDialogProps & {
-    children?: JSX.Element | ((state: ReturnType<UseDialogReturn>) => JSX.Element);
+    children?: JSX.Element | ((state: UseDialogReturn) => JSX.Element);
 };
 export declare const Dialog: (props: DialogProps) => JSX.Element;

package/dist/dialog/dialog.mjs

@@ -1,18 +1,17 @@
 import { createComponent } from 'solid-js/web';
-import { children } from 'solid-js';
 import { createSplitProps } from '../create-split-props.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
 
 const Dialog = props => {
-  const [useDialogProps, restProps] = createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
-  const dialog = useDialog(useDialogProps);
-  const view = children(() => runIfFn(restProps.children, dialog()));
+  const [dialogParams, localProps] = createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
+  const api = useDialog(dialogParams);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(DialogProvider, {
-    value: dialog,
+    value: api,
     get children() {
-      return view();
+      return getChildren();
     }
   });
 };

package/dist/dialog/use-dialog.cjs

@@ -28,7 +28,7 @@ const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
 
 const useDialog = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), { context });
   return solidJs.createMemo(() => dialog__namespace.connect(state, send, solid.normalizeProps));
 };

package/dist/dialog/use-dialog.mjs

@@ -1,6 +1,6 @@
 import * as dialog from '@zag-js/dialog';
-import { useMachine, normalizeProps } from '@zag-js/solid';
-import { mergeProps, createUniqueId, createMemo } from 'solid-js';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useDialog = (props) => {

package/dist/editable/editable-area.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableArea = props => {
   const editable = editableContext.useEditableContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => editable().areaProps, props));
+  const areaProps = solid.mergeProps(() => editable().areaProps, props);
+  return web.createComponent(factory.ark.div, areaProps);
 };
 
 exports.EditableArea = EditableArea;

package/dist/editable/editable-area.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableArea = props => {
   const editable = useEditableContext();
-  return createComponent(ark.div, mergeProps(() => editable().areaProps, props));
+  const areaProps = mergeProps(() => editable().areaProps, props);
+  return createComponent(ark.div, areaProps);
 };
 
 export { EditableArea };

package/dist/editable/editable-cancel-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableCancelTrigger = props => {
-  const dialog = editableContext.useEditableContext();
-  const triggerProps = dialog().cancelTriggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const editable = editableContext.useEditableContext();
+  const triggerProps = solid.mergeProps(() => editable().cancelTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.EditableCancelTrigger = EditableCancelTrigger;

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

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type EditableCancelTriggerProps = {
-    children: JSX.Element;
-};
-export declare const EditableCancelTrigger: (props: EditableCancelTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type EditableCancelTriggerProps = HTMLArkProps<'button'>;
+export declare const EditableCancelTrigger: (props: EditableCancelTriggerProps) => JSX.Element;

package/dist/editable/editable-cancel-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableCancelTrigger = props => {
-  const dialog = useEditableContext();
-  const triggerProps = dialog().cancelTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const editable = useEditableContext();
+  const triggerProps = mergeProps(() => editable().cancelTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { EditableCancelTrigger };

package/dist/editable/editable-control.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableControl = props => {
   const editable = editableContext.useEditableContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => editable().controlProps, props));
+  const controlProps = solid.mergeProps(() => editable().controlProps, props);
+  return web.createComponent(factory.ark.div, controlProps);
 };
 
 exports.EditableControl = EditableControl;

package/dist/editable/editable-control.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableControl = props => {
   const editable = useEditableContext();
-  return createComponent(ark.div, mergeProps(() => editable().controlProps, props));
+  const controlProps = mergeProps(() => editable().controlProps, props);
+  return createComponent(ark.div, controlProps);
 };
 
 export { EditableControl };

package/dist/editable/editable-edit-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableEditTrigger = props => {
-  const dialog = editableContext.useEditableContext();
-  const triggerProps = dialog().editTriggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const editable = editableContext.useEditableContext();
+  const triggerProps = solid.mergeProps(() => editable().editTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.EditableEditTrigger = EditableEditTrigger;

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

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type EditableEditTriggerProps = {
-    children: JSX.Element;
-};
-export declare const EditableEditTrigger: (props: EditableEditTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type EditableEditTriggerProps = HTMLArkProps<'button'>;
+export declare const EditableEditTrigger: (props: EditableEditTriggerProps) => JSX.Element;

package/dist/editable/editable-edit-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableEditTrigger = props => {
-  const dialog = useEditableContext();
-  const triggerProps = dialog().editTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const editable = useEditableContext();
+  const triggerProps = mergeProps(() => editable().editTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { EditableEditTrigger };

package/dist/editable/editable-input.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableInput = props => {
   const editable = editableContext.useEditableContext();
-  return web.createComponent(factory.ark.input, web.mergeProps(() => editable().inputProps, props));
+  const inputProps = solid.mergeProps(() => editable().inputProps, props);
+  return web.createComponent(factory.ark.input, inputProps);
 };
 
 exports.EditableInput = EditableInput;

package/dist/editable/editable-input.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableInput = props => {
   const editable = useEditableContext();
-  return createComponent(ark.input, mergeProps(() => editable().inputProps, props));
+  const inputProps = mergeProps(() => editable().inputProps, props);
+  return createComponent(ark.input, inputProps);
 };
 
 export { EditableInput };

package/dist/editable/editable-label.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableLabel = props => {
   const editable = editableContext.useEditableContext();
-  return web.createComponent(factory.ark.label, web.mergeProps(() => editable().labelProps, props));
+  const labelProps = solid.mergeProps(() => editable().labelProps, props);
+  return web.createComponent(factory.ark.label, labelProps);
 };
 
 exports.EditableLabel = EditableLabel;

package/dist/editable/editable-label.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableLabel = props => {
   const editable = useEditableContext();
-  return createComponent(ark.label, mergeProps(() => editable().labelProps, props));
+  const labelProps = mergeProps(() => editable().labelProps, props);
+  return createComponent(ark.label, labelProps);
 };
 
 export { EditableLabel };

package/dist/editable/editable-preview.cjs

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditablePreview = props => {
   const editable = editableContext.useEditableContext();
-  return web.createComponent(factory.ark.span, web.mergeProps(() => editable().previewProps, props));
+  const previewProps = solid.mergeProps(() => editable().previewProps, props);
+  return web.createComponent(factory.ark.span, previewProps);
 };
 
 exports.EditablePreview = EditablePreview;

package/dist/editable/editable-preview.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditablePreview = props => {
   const editable = useEditableContext();
-  return createComponent(ark.span, mergeProps(() => editable().previewProps, props));
+  const previewProps = mergeProps(() => editable().previewProps, props);
+  return createComponent(ark.span, previewProps);
 };
 
 export { EditablePreview };

package/dist/editable/editable-submit-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const editableContext = require('./editable-context.cjs');
 
 const EditableSubmitTrigger = props => {
   const dialog = editableContext.useEditableContext();
-  const triggerProps = dialog().submitTriggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = solid.mergeProps(() => dialog().submitTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.EditableSubmitTrigger = EditableSubmitTrigger;

package/dist/editable/editable-submit-trigger.d.ts

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type EditableSubmitTriggerProps = {
-    children: JSX.Element;
-};
-export declare const EditableSubmitTrigger: (props: EditableSubmitTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type EditableSubmitTriggerProps = HTMLArkProps<'button'>;
+export declare const EditableSubmitTrigger: (props: EditableSubmitTriggerProps) => JSX.Element;

package/dist/editable/editable-submit-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
 const EditableSubmitTrigger = props => {
   const dialog = useEditableContext();
-  const triggerProps = dialog().submitTriggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const triggerProps = mergeProps(() => dialog().submitTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { EditableSubmitTrigger };

package/dist/editable/editable.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
@@ -11,23 +12,21 @@ const editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
 const Editable = props => {
-  const [useEditableProps, editableContextProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onInteractOutside', 'onSubmit', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onInteractOutside', 'onSubmit', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const editable = useEditable.useEditable(useEditableProps);
+  const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
+  const rootProps = solid.mergeProps(() => editable().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(childrenProps.children, editable);
   return web.createComponent(editableContext.EditableProvider, {
     value: editable,
     get children() {
-      return web.createComponent(EditableContextWrapper, editableContextProps);
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };
-const EditableContextWrapper = props => {
-  const editable = editableContext.useEditableContext();
-  const view = solidJs.children(() => runIfFn.runIfFn(props.children, editable));
-  return web.createComponent(factory.ark.div, web.mergeProps(() => editable().rootProps, props, {
-    get children() {
-      return view();
-    }
-  }));
-};
 
 exports.Editable = Editable;

package/dist/editable/editable.d.ts

@@ -1,11 +1,9 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type EditableContext } from './editable-context';
 import { type UseEditableProps } from './use-editable';
-export type EditableProps = Assign<EditableContextWrapperProps, UseEditableProps>;
-export declare const Editable: (props: EditableProps) => JSX.Element;
-type EditableContextWrapperProps = Assign<HTMLArkProps<'div'>, {
-    children: JSX.Element | ((context: EditableContext) => JSX.Element);
+export type EditableProps = Assign<HTMLArkProps<'div'>, UseEditableProps & {
+    children: JSX.Element | ((api: EditableContext) => JSX.Element);
 }>;
-export {};
+export declare const Editable: (props: EditableProps) => JSX.Element;