@ark-ui/solid 0.8.1 → 0.10.0

package/dialog/dialog-content.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type DialogContentProps = HTMLArkProps<'div'>;
 export declare const DialogContent: (props: DialogContentProps) => JSX.Element;

package/dialog/dialog-context.d.ts

@@ -1,27 +1,4 @@
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseDialogReturn } from './use-dialog';
 export type DialogContext = UseDialogReturn;
-export declare const DialogProvider: ContextProviderComponent<Accessor<{
-    isOpen: boolean;
-    open(): void;
-    close(): void;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    backdropProps: JSX.HTMLAttributes<any>;
-    containerProps: JSX.HTMLAttributes<any>;
-    contentProps: JSX.HTMLAttributes<any>;
-    titleProps: JSX.HTMLAttributes<any>;
-    descriptionProps: JSX.HTMLAttributes<any>;
-    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>>, useDialogContext: () => Accessor<{
-    isOpen: boolean;
-    open(): void;
-    close(): void;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    backdropProps: JSX.HTMLAttributes<any>;
-    containerProps: JSX.HTMLAttributes<any>;
-    contentProps: JSX.HTMLAttributes<any>;
-    titleProps: JSX.HTMLAttributes<any>;
-    descriptionProps: JSX.HTMLAttributes<any>;
-    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>;
+export declare const DialogProvider: ContextProviderComponent<UseDialogReturn>, useDialogContext: () => UseDialogReturn;

package/dialog/dialog-description.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type DialogDescriptionProps = HTMLArkProps<'p'>;
 export declare const DialogDescription: (props: DialogDescriptionProps) => JSX.Element;

package/dialog/dialog-title.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type DialogTitleProps = HTMLArkProps<'h2'>;
 export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;

package/dialog/dialog-trigger.d.ts

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

package/dialog/dialog.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const DialogWithRenderFn: () => JSX.Element;

package/dialog/dialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dialog/index.cjs

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

package/dialog/index.d.ts

@@ -1,9 +1,23 @@
-export { Dialog, type DialogProps } from './dialog';
-export { DialogBackdrop, type DialogBackdropProps } from './dialog-backdrop';
-export { DialogCloseTrigger, type DialogCloseTriggerProps } from './dialog-close-trigger';
-export { DialogContainer, type DialogContainerProps } from './dialog-container';
-export { DialogContent, type DialogContentProps } from './dialog-content';
-export { DialogDescription, type DialogDescriptionProps } from './dialog-description';
-export { DialogTitle, type DialogTitleProps } from './dialog-title';
-export { DialogTrigger, type DialogTriggerProps } from './dialog-trigger';
-export { dialogAnatomy } from './dialog.anatomy';
+import { JSX } from 'solid-js';
+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 { DialogDescription, type DialogDescriptionProps } from './dialog-description';
+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: (props: DialogBackdropProps) => JSX.Element;
+    CloseTrigger: (props: DialogCloseTriggerProps) => JSX.Element;
+    Container: (props: DialogContainerProps) => JSX.Element;
+    Content: (props: DialogContentProps) => JSX.Element;
+    Description: (props: DialogDescriptionProps) => JSX.Element;
+    Title: (props: DialogTitleProps) => JSX.Element;
+    Trigger: (props: DialogTriggerProps) => JSX.Element;
+};
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger, dialogAnatomy, useDialogContext, };
+export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContainerProps, DialogContentProps, DialogDescriptionProps, DialogProps, DialogTitleProps, DialogTriggerProps, };

package/dialog/index.mjs

@@ -1,9 +1,23 @@
-export { Dialog } from './dialog.mjs';
-export { DialogBackdrop } from './dialog-backdrop.mjs';
-export { DialogCloseTrigger } from './dialog-close-trigger.mjs';
-export { DialogContainer } from './dialog-container.mjs';
-export { DialogContent } from './dialog-content.mjs';
-export { DialogDescription } from './dialog-description.mjs';
-export { DialogTitle } from './dialog-title.mjs';
-export { DialogTrigger } from './dialog-trigger.mjs';
+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 { 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,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
+
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger };

package/dialog/use-dialog.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const dialog = require('@zag-js/dialog');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/dialog/use-dialog.d.ts

@@ -1,17 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as dialog from '@zag-js/dialog';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseDialogProps = Optional<dialog.Context, 'id'>;
-export declare const useDialog: (props: UseDialogProps) => Accessor<{
-    isOpen: boolean;
-    open(): void;
-    close(): void;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    backdropProps: JSX.HTMLAttributes<any>;
-    containerProps: JSX.HTMLAttributes<any>;
-    contentProps: JSX.HTMLAttributes<any>;
-    titleProps: JSX.HTMLAttributes<any>;
-    descriptionProps: JSX.HTMLAttributes<any>;
-    closeTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>;
-export type UseDialogReturn = ReturnType<typeof useDialog>;
+export type UseDialogReturn = Accessor<dialog.Api<PropTypes>>;
+export declare const useDialog: (props: UseDialogProps) => UseDialogReturn;

package/dialog/use-dialog.mjs

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

package/editable/editable-area.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type EditableAreaProps = HTMLArkProps<'div'>;
 export declare const EditableArea: (props: EditableAreaProps) => JSX.Element;

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

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

package/editable/editable-context.d.ts

@@ -1,41 +1,4 @@
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseEditableReturn } from './use-editable';
 export type EditableContext = UseEditableReturn;
-export declare const EditableProvider: ContextProviderComponent<Accessor<{
-    isEditing: boolean;
-    isValueEmpty: boolean;
-    value: string;
-    setValue(value: string): void;
-    clearValue(): void;
-    edit(): void;
-    cancel(): void;
-    submit(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    areaProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    previewProps: JSX.HTMLAttributes<any>;
-    editTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    submitTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    cancelTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>>, useEditableContext: () => Accessor<{
-    isEditing: boolean;
-    isValueEmpty: boolean;
-    value: string;
-    setValue(value: string): void;
-    clearValue(): void;
-    edit(): void;
-    cancel(): void;
-    submit(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    areaProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    previewProps: JSX.HTMLAttributes<any>;
-    editTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    submitTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    cancelTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>;
+export declare const EditableProvider: ContextProviderComponent<UseEditableReturn>, useEditableContext: () => UseEditableReturn;

package/editable/editable-control.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type EditableControlProps = HTMLArkProps<'div'>;
 export declare const EditableControl: (props: EditableControlProps) => JSX.Element;

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

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

package/editable/editable-input.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type EditableInputProps = HTMLArkProps<'input'>;
 export declare const EditableInput: (props: EditableInputProps) => JSX.Element;

package/editable/editable-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type EditableLabelProps = HTMLArkProps<'label'>;
 export declare const EditableLabel: (props: EditableLabelProps) => JSX.Element;

package/editable/editable-preview.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type EditablePreviewProps = HTMLArkProps<'span'>;
 export declare const EditablePreview: (props: EditablePreviewProps) => JSX.Element;

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

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

package/editable/editable.cjs

@@ -12,7 +12,7 @@ const editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
 const Editable = props => {
-  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 [useEditableProps, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onInteractOutside', 'onPointerDownOutside', '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);

package/editable/editable.mjs

@@ -8,7 +8,7 @@ import { EditableProvider } from './editable-context.mjs';
 import { useEditable } from './use-editable.mjs';
 
 const Editable = props => {
-  const [useEditableProps, restProps] = 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 [useEditableProps, restProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onInteractOutside', 'onPointerDownOutside', 'onSubmit', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const editable = useEditable(useEditableProps);
   const [childrenProps, localProps] = splitProps(restProps, ['children']);
   const rootProps = mergeProps(() => editable().rootProps, localProps);

package/editable/editable.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Hook: () => JSX.Element;
+export declare const Basic: () => JSX.Element;

package/editable/index.cjs

@@ -2,22 +2,33 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const editable = require('./editable.cjs');
+const editable$1 = require('./editable.cjs');
 const editableArea = require('./editable-area.cjs');
 const editableCancelTrigger = require('./editable-cancel-trigger.cjs');
+const editableContext = require('./editable-context.cjs');
 const editableControl = require('./editable-control.cjs');
 const editableEditTrigger = require('./editable-edit-trigger.cjs');
 const editableInput = require('./editable-input.cjs');
 const editableLabel = require('./editable-label.cjs');
 const editablePreview = require('./editable-preview.cjs');
 const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
-const editable$1 = require('@zag-js/editable');
-
+const editable = require('@zag-js/editable');
 
+const Editable = Object.assign(editable$1.Editable, {
+  Root: editable$1.Editable,
+  Area: editableArea.EditableArea,
+  CancelTrigger: editableCancelTrigger.EditableCancelTrigger,
+  Control: editableControl.EditableControl,
+  EditTrigger: editableEditTrigger.EditableEditTrigger,
+  Input: editableInput.EditableInput,
+  Label: editableLabel.EditableLabel,
+  Preview: editablePreview.EditablePreview,
+  SubmitTrigger: editableSubmitTrigger.EditableSubmitTrigger
+});
 
-exports.Editable = editable.Editable;
 exports.EditableArea = editableArea.EditableArea;
 exports.EditableCancelTrigger = editableCancelTrigger.EditableCancelTrigger;
+exports.useEditableContext = editableContext.useEditableContext;
 exports.EditableControl = editableControl.EditableControl;
 exports.EditableEditTrigger = editableEditTrigger.EditableEditTrigger;
 exports.EditableInput = editableInput.EditableInput;
@@ -25,6 +36,7 @@ exports.EditableLabel = editableLabel.EditableLabel;
 exports.EditablePreview = editablePreview.EditablePreview;
 exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
 Object.defineProperty(exports, 'editableAnatomy', {
-	enumerable: true,
-	get: () => editable$1.anatomy
+  enumerable: true,
+  get: () => editable.anatomy
 });
+exports.Editable = Editable;

package/editable/index.d.ts

@@ -1,10 +1,25 @@
-export { Editable, type EditableProps } from './editable';
-export { EditableArea, type EditableAreaProps } from './editable-area';
-export { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
-export { EditableControl, type EditableControlProps } from './editable-control';
-export { EditableEditTrigger, type EditableEditTriggerProps } from './editable-edit-trigger';
-export { EditableInput, type EditableInputProps } from './editable-input';
-export { EditableLabel, type EditableLabelProps } from './editable-label';
-export { EditablePreview, type EditablePreviewProps } from './editable-preview';
-export { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
-export { editableAnatomy } from './editable.anatomy';
+import { JSX } from 'solid-js';
+import { type EditableProps } from './editable';
+import { EditableArea, type EditableAreaProps } from './editable-area';
+import { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
+import { useEditableContext } from './editable-context';
+import { EditableControl, type EditableControlProps } from './editable-control';
+import { EditableEditTrigger, type EditableEditTriggerProps } from './editable-edit-trigger';
+import { EditableInput, type EditableInputProps } from './editable-input';
+import { EditableLabel, type EditableLabelProps } from './editable-label';
+import { EditablePreview, type EditablePreviewProps } from './editable-preview';
+import { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
+import { editableAnatomy } from './editable.anatomy';
+declare const Editable: ((props: EditableProps) => JSX.Element) & {
+    Root: (props: EditableProps) => JSX.Element;
+    Area: (props: EditableAreaProps) => JSX.Element;
+    CancelTrigger: (props: EditableCancelTriggerProps) => JSX.Element;
+    Control: (props: EditableControlProps) => JSX.Element;
+    EditTrigger: (props: EditableEditTriggerProps) => JSX.Element;
+    Input: (props: EditableInputProps) => JSX.Element;
+    Label: (props: EditableLabelProps) => JSX.Element;
+    Preview: (props: EditablePreviewProps) => JSX.Element;
+    SubmitTrigger: (props: EditableSubmitTriggerProps) => JSX.Element;
+};
+export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, editableAnatomy, useEditableContext, };
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, };

package/editable/index.mjs

@@ -1,10 +1,25 @@
-export { Editable } from './editable.mjs';
-export { EditableArea } from './editable-area.mjs';
-export { EditableCancelTrigger } from './editable-cancel-trigger.mjs';
-export { EditableControl } from './editable-control.mjs';
-export { EditableEditTrigger } from './editable-edit-trigger.mjs';
-export { EditableInput } from './editable-input.mjs';
-export { EditableLabel } from './editable-label.mjs';
-export { EditablePreview } from './editable-preview.mjs';
-export { EditableSubmitTrigger } from './editable-submit-trigger.mjs';
+import { Editable as Editable$1 } from './editable.mjs';
+import { EditableArea } from './editable-area.mjs';
+import { EditableCancelTrigger } from './editable-cancel-trigger.mjs';
+export { useEditableContext } from './editable-context.mjs';
+import { EditableControl } from './editable-control.mjs';
+import { EditableEditTrigger } from './editable-edit-trigger.mjs';
+import { EditableInput } from './editable-input.mjs';
+import { EditableLabel } from './editable-label.mjs';
+import { EditablePreview } from './editable-preview.mjs';
+import { EditableSubmitTrigger } from './editable-submit-trigger.mjs';
 export { anatomy as editableAnatomy } from '@zag-js/editable';
+
+const Editable = Object.assign(Editable$1, {
+  Root: Editable$1,
+  Area: EditableArea,
+  CancelTrigger: EditableCancelTrigger,
+  Control: EditableControl,
+  EditTrigger: EditableEditTrigger,
+  Input: EditableInput,
+  Label: EditableLabel,
+  Preview: EditablePreview,
+  SubmitTrigger: EditableSubmitTrigger
+});
+
+export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger };

package/editable/use-editable.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const editable = require('@zag-js/editable');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/editable/use-editable.d.ts

@@ -1,24 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as editable from '@zag-js/editable';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseEditableProps = Optional<editable.Context, 'id'>;
-export type UseEditableReturn = ReturnType<typeof useEditable>;
-export declare const useEditable: (props: UseEditableProps) => Accessor<{
-    isEditing: boolean;
-    isValueEmpty: boolean;
-    value: string;
-    setValue(value: string): void;
-    clearValue(): void;
-    edit(): void;
-    cancel(): void;
-    submit(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    areaProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    previewProps: JSX.HTMLAttributes<any>;
-    editTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    submitTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    cancelTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-}>;
+export type UseEditableReturn = Accessor<editable.MachineApi<PropTypes>>;
+export declare const useEditable: (props: UseEditableProps) => Accessor<editable.MachineApi<PropTypes>>;

package/editable/use-editable.mjs

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

package/environment/environment-context.d.ts

@@ -1,4 +1,4 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type CommonProperties } from '@zag-js/types';
 export type EnvironmentContext = CommonProperties['getRootNode'];
-export declare const EnvironmentProvider: ContextProviderComponent<(() => Node | Document | ShadowRoot) | undefined>, useEnvironmentContext: () => (() => Node | Document | ShadowRoot) | undefined;
+export declare const EnvironmentProvider: ContextProviderComponent<(() => Node | ShadowRoot | Document) | undefined>, useEnvironmentContext: () => (() => Node | ShadowRoot | Document) | undefined;

package/environment/environment.cjs

@@ -6,7 +6,7 @@ const web = require('solid-js/web');
 const solidJs = require('solid-js');
 const environmentContext = require('./environment-context.cjs');
 
-const _tmpl$ = ["<span", " hidden></span>"];
+const _tmpl$ = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -16,7 +16,12 @@ const Environment = props => {
       return currentEnv();
     },
     get children() {
-      return [props.children, !props.value && web.ssr(_tmpl$, web.ssrHydrationKey())];
+      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
+        const _el$ = _tmpl$();
+        const _ref$ = spanRef;
+        typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
     }
   });
 };

package/environment/environment.mjs

@@ -1,8 +1,8 @@
-import { createComponent, ssr, ssrHydrationKey } from 'solid-js/web';
+import { createComponent, memo, use, template } from 'solid-js/web';
 import { createMemo } from 'solid-js';
 import { EnvironmentProvider } from './environment-context.mjs';
 
-const _tmpl$ = ["<span", " hidden></span>"];
+const _tmpl$ = /*#__PURE__*/template(`<span hidden>`);
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -12,7 +12,12 @@ const Environment = props => {
       return currentEnv();
     },
     get children() {
-      return [props.children, !props.value && ssr(_tmpl$, ssrHydrationKey())];
+      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
+        const _el$ = _tmpl$();
+        const _ref$ = spanRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
+        return _el$;
+      })())];
     }
   });
 };

package/environment/environment.stories.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/environment/environment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/environment/index.cjs

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

package/environment/index.d.ts

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