@ark-ui/react 3.11.1 → 4.0.0-0

package/dist/components/field/index.cjs

@@ -2,30 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const fieldContext = require('./field-context.cjs');
-const fieldErrorText = require('./field-error-text.cjs');
-const fieldHelperText = require('./field-helper-text.cjs');
-const fieldInput = require('./field-input.cjs');
-const fieldLabel = require('./field-label.cjs');
-const fieldSelect = require('./field-select.cjs');
-const fieldRoot = require('./field-root.cjs');
-const fieldRootProvider = require('./field-root-provider.cjs');
-const fieldTextarea = require('./field-textarea.cjs');
-const useFieldContext = require('./use-field-context.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
+const useFieldContext = require('./use-field-context.cjs');
 const field = require('./field.cjs');
 
 
 
-exports.FieldContext = fieldContext.FieldContext;
-exports.FieldErrorText = fieldErrorText.FieldErrorText;
-exports.FieldHelperText = fieldHelperText.FieldHelperText;
-exports.FieldInput = fieldInput.FieldInput;
-exports.FieldLabel = fieldLabel.FieldLabel;
-exports.FieldSelect = fieldSelect.FieldSelect;
-exports.FieldRoot = fieldRoot.FieldRoot;
-exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
-exports.FieldTextarea = fieldTextarea.FieldTextarea;
-exports.useFieldContext = useFieldContext.useFieldContext;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
+exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;

package/dist/components/field/index.d.cts

@@ -1,12 +1,3 @@
-export { FieldContext, type FieldContextProps } from './field-context';
-export { FieldErrorText, type FieldErrorTextBaseProps, type FieldErrorTextProps, } from './field-error-text';
-export { FieldHelperText, type FieldHelperTextBaseProps, type FieldHelperTextProps, } from './field-helper-text';
-export { FieldInput, type FieldInputBaseProps, type FieldInputProps } from './field-input';
-export { FieldLabel, type FieldLabelBaseProps, type FieldLabelProps } from './field-label';
-export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
-export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field-root';
-export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
-export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
-export { useFieldContext, type UseFieldContext } from './use-field-context';
 export { fieldAnatomy } from './field.anatomy';
+export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

package/dist/components/field/index.d.ts

@@ -1,12 +1,3 @@
-export { FieldContext, type FieldContextProps } from './field-context';
-export { FieldErrorText, type FieldErrorTextBaseProps, type FieldErrorTextProps, } from './field-error-text';
-export { FieldHelperText, type FieldHelperTextBaseProps, type FieldHelperTextProps, } from './field-helper-text';
-export { FieldInput, type FieldInputBaseProps, type FieldInputProps } from './field-input';
-export { FieldLabel, type FieldLabelBaseProps, type FieldLabelProps } from './field-label';
-export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
-export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field-root';
-export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
-export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
-export { useFieldContext, type UseFieldContext } from './use-field-context';
 export { fieldAnatomy } from './field.anatomy';
+export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

package/dist/components/field/index.js

@@ -1,13 +1,4 @@
-export { FieldContext } from './field-context.js';
-export { FieldErrorText } from './field-error-text.js';
-export { FieldHelperText } from './field-helper-text.js';
-export { FieldInput } from './field-input.js';
-export { FieldLabel } from './field-label.js';
-export { FieldSelect } from './field-select.js';
-export { FieldRoot } from './field-root.js';
-export { FieldRootProvider } from './field-root-provider.js';
-export { FieldTextarea } from './field-textarea.js';
-export { useFieldContext } from './use-field-context.js';
 export { fieldAnatomy } from './field.anatomy.js';
+export { useFieldContext } from './use-field-context.js';
 import * as field from './field.js';
 export { field as Field };

package/dist/components/fieldset/index.cjs

@@ -2,24 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const fieldsetContext = require('./fieldset-context.cjs');
-const fieldsetErrorText = require('./fieldset-error-text.cjs');
-const fieldsetHelperText = require('./fieldset-helper-text.cjs');
-const fieldsetRoot = require('./fieldset-root.cjs');
-const fieldsetRootProvider = require('./fieldset-root-provider.cjs');
-const fieldsetLegend = require('./fieldset-legend.cjs');
 const fieldset_anatomy = require('./fieldset.anatomy.cjs');
 const useFieldsetContext = require('./use-fieldset-context.cjs');
 const fieldset = require('./fieldset.cjs');
 
 
 
-exports.FieldsetContext = fieldsetContext.FieldsetContext;
-exports.FieldsetErrorText = fieldsetErrorText.FieldsetErrorText;
-exports.FieldsetHelperText = fieldsetHelperText.FieldsetHelperText;
-exports.FieldsetRoot = fieldsetRoot.FieldsetRoot;
-exports.FieldsetRootProvider = fieldsetRootProvider.FieldsetRootProvider;
-exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
 exports.fieldsetAnatomy = fieldset_anatomy.fieldsetAnatomy;
 exports.useFieldsetContext = useFieldsetContext.useFieldsetContext;
 exports.Fieldset = fieldset;

package/dist/components/fieldset/index.d.cts

@@ -1,9 +1,3 @@
-export { FieldsetContext, type FieldsetContextProps } from './fieldset-context';
-export { FieldsetErrorText, type FieldsetErrorTextBaseProps, type FieldsetErrorTextProps, } from './fieldset-error-text';
-export { FieldsetHelperText, type FieldsetHelperTextBaseProps, type FieldsetHelperTextProps, } from './fieldset-helper-text';
-export { FieldsetRoot, type FieldsetRootBaseProps, type FieldsetRootProps } from './fieldset-root';
-export { FieldsetRootProvider, type FieldsetRootProviderBaseProps, type FieldsetRootProviderProps, } from './fieldset-root-provider';
-export { FieldsetLegend, type FieldsetLegendBaseProps, type FieldsetLegendProps, } from './fieldset-legend';
 export { fieldsetAnatomy } from './fieldset.anatomy';
 export { useFieldsetContext, type UseFieldsetContext } from './use-fieldset-context';
 export * as Fieldset from './fieldset';

package/dist/components/fieldset/index.d.ts

@@ -1,9 +1,3 @@
-export { FieldsetContext, type FieldsetContextProps } from './fieldset-context';
-export { FieldsetErrorText, type FieldsetErrorTextBaseProps, type FieldsetErrorTextProps, } from './fieldset-error-text';
-export { FieldsetHelperText, type FieldsetHelperTextBaseProps, type FieldsetHelperTextProps, } from './fieldset-helper-text';
-export { FieldsetRoot, type FieldsetRootBaseProps, type FieldsetRootProps } from './fieldset-root';
-export { FieldsetRootProvider, type FieldsetRootProviderBaseProps, type FieldsetRootProviderProps, } from './fieldset-root-provider';
-export { FieldsetLegend, type FieldsetLegendBaseProps, type FieldsetLegendProps, } from './fieldset-legend';
 export { fieldsetAnatomy } from './fieldset.anatomy';
 export { useFieldsetContext, type UseFieldsetContext } from './use-fieldset-context';
 export * as Fieldset from './fieldset';

package/dist/components/fieldset/index.js

@@ -1,9 +1,3 @@
-export { FieldsetContext } from './fieldset-context.js';
-export { FieldsetErrorText } from './fieldset-error-text.js';
-export { FieldsetHelperText } from './fieldset-helper-text.js';
-export { FieldsetRoot } from './fieldset-root.js';
-export { FieldsetRootProvider } from './fieldset-root-provider.js';
-export { FieldsetLegend } from './fieldset-legend.js';
 export { fieldsetAnatomy } from './fieldset.anatomy.js';
 export { useFieldsetContext } from './use-fieldset-context.js';
 import * as fieldset from './fieldset.js';

package/dist/components/file-upload/index.cjs

@@ -2,20 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const fileUploadContext = require('./file-upload-context.cjs');
-const fileUploadDropzone = require('./file-upload-dropzone.cjs');
-const fileUploadHiddenInput = require('./file-upload-hidden-input.cjs');
-const fileUploadItem = require('./file-upload-item.cjs');
-const fileUploadItemDeleteTrigger = require('./file-upload-item-delete-trigger.cjs');
-const fileUploadItemGroup = require('./file-upload-item-group.cjs');
-const fileUploadItemName = require('./file-upload-item-name.cjs');
-const fileUploadItemPreview = require('./file-upload-item-preview.cjs');
-const fileUploadItemPreviewImage = require('./file-upload-item-preview-image.cjs');
-const fileUploadItemSizeText = require('./file-upload-item-size-text.cjs');
-const fileUploadLabel = require('./file-upload-label.cjs');
-const fileUploadRoot = require('./file-upload-root.cjs');
-const fileUploadRootProvider = require('./file-upload-root-provider.cjs');
-const fileUploadTrigger = require('./file-upload-trigger.cjs');
 const useFileUpload = require('./use-file-upload.cjs');
 const useFileUploadContext = require('./use-file-upload-context.cjs');
 const fileUpload$1 = require('./file-upload.cjs');
@@ -23,24 +9,10 @@ const fileUpload = require('@zag-js/file-upload');
 
 
 
-exports.FileUploadContext = fileUploadContext.FileUploadContext;
-exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
-exports.FileUploadHiddenInput = fileUploadHiddenInput.FileUploadHiddenInput;
-exports.FileUploadItem = fileUploadItem.FileUploadItem;
-exports.FileUploadItemDeleteTrigger = fileUploadItemDeleteTrigger.FileUploadItemDeleteTrigger;
-exports.FileUploadItemGroup = fileUploadItemGroup.FileUploadItemGroup;
-exports.FileUploadItemName = fileUploadItemName.FileUploadItemName;
-exports.FileUploadItemPreview = fileUploadItemPreview.FileUploadItemPreview;
-exports.FileUploadItemPreviewImage = fileUploadItemPreviewImage.FileUploadItemPreviewImage;
-exports.FileUploadItemSizeText = fileUploadItemSizeText.FileUploadItemSizeText;
-exports.FileUploadLabel = fileUploadLabel.FileUploadLabel;
-exports.FileUploadRoot = fileUploadRoot.FileUploadRoot;
-exports.FileUploadRootProvider = fileUploadRootProvider.FileUploadRootProvider;
-exports.FileUploadTrigger = fileUploadTrigger.FileUploadTrigger;
 exports.useFileUpload = useFileUpload.useFileUpload;
 exports.useFileUploadContext = useFileUploadContext.useFileUploadContext;
 exports.FileUpload = fileUpload$1;
 Object.defineProperty(exports, "fileUploadAnatomy", {
-  enumerable: true,
-  get: () => fileUpload.anatomy
+	enumerable: true,
+	get: () => fileUpload.anatomy
 });

package/dist/components/file-upload/index.d.cts

@@ -1,19 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, } from '@zag-js/file-upload';
-export { FileUploadContext, type FileUploadContextProps, } from './file-upload-context';
-export { FileUploadDropzone, type FileUploadDropzoneProps, type FileUploadDropzoneBaseProps, } from './file-upload-dropzone';
-export { FileUploadHiddenInput, type FileUploadHiddenInputProps, type FileUploadHiddenInputBaseProps, } from './file-upload-hidden-input';
-export { FileUploadItem, type FileUploadItemProps, type FileUploadItemBaseProps, } from './file-upload-item';
-export { FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps, type FileUploadItemDeleteTriggerBaseProps, } from './file-upload-item-delete-trigger';
-export { FileUploadItemGroup, type FileUploadItemGroupProps, type FileUploadItemGroupBaseProps, } from './file-upload-item-group';
-export { FileUploadItemName, type FileUploadItemNameProps, type FileUploadItemNameBaseProps, } from './file-upload-item-name';
-export { FileUploadItemPreview, type FileUploadItemPreviewProps, type FileUploadItemPreviewBaseProps, } from './file-upload-item-preview';
-export { FileUploadItemPreviewImage, type FileUploadItemPreviewImageProps, type FileUploadItemPreviewImageBaseProps, } from './file-upload-item-preview-image';
-export { FileUploadItemSizeText, type FileUploadItemSizeTextProps, type FileUploadItemSizeTextBaseProps, } from './file-upload-item-size-text';
-export { FileUploadLabel, type FileUploadLabelProps, type FileUploadLabelBaseProps, } from './file-upload-label';
-export { FileUploadRoot, type FileUploadRootProps, type FileUploadRootBaseProps, } from './file-upload-root';
-export { FileUploadRootProvider, type FileUploadRootProviderProps, type FileUploadRootProviderBaseProps, } from './file-upload-root-provider';
-export { FileUploadTrigger, type FileUploadTriggerProps, type FileUploadTriggerBaseProps, } from './file-upload-trigger';
+export { fileUploadAnatomy } from './file-upload.anatomy';
 export { useFileUpload, type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
 export { useFileUploadContext, type UseFileUploadContext } from './use-file-upload-context';
-export { fileUploadAnatomy } from './file-upload.anatomy';
 export * as FileUpload from './file-upload';

package/dist/components/file-upload/index.d.ts

@@ -1,19 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, } from '@zag-js/file-upload';
-export { FileUploadContext, type FileUploadContextProps, } from './file-upload-context';
-export { FileUploadDropzone, type FileUploadDropzoneProps, type FileUploadDropzoneBaseProps, } from './file-upload-dropzone';
-export { FileUploadHiddenInput, type FileUploadHiddenInputProps, type FileUploadHiddenInputBaseProps, } from './file-upload-hidden-input';
-export { FileUploadItem, type FileUploadItemProps, type FileUploadItemBaseProps, } from './file-upload-item';
-export { FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps, type FileUploadItemDeleteTriggerBaseProps, } from './file-upload-item-delete-trigger';
-export { FileUploadItemGroup, type FileUploadItemGroupProps, type FileUploadItemGroupBaseProps, } from './file-upload-item-group';
-export { FileUploadItemName, type FileUploadItemNameProps, type FileUploadItemNameBaseProps, } from './file-upload-item-name';
-export { FileUploadItemPreview, type FileUploadItemPreviewProps, type FileUploadItemPreviewBaseProps, } from './file-upload-item-preview';
-export { FileUploadItemPreviewImage, type FileUploadItemPreviewImageProps, type FileUploadItemPreviewImageBaseProps, } from './file-upload-item-preview-image';
-export { FileUploadItemSizeText, type FileUploadItemSizeTextProps, type FileUploadItemSizeTextBaseProps, } from './file-upload-item-size-text';
-export { FileUploadLabel, type FileUploadLabelProps, type FileUploadLabelBaseProps, } from './file-upload-label';
-export { FileUploadRoot, type FileUploadRootProps, type FileUploadRootBaseProps, } from './file-upload-root';
-export { FileUploadRootProvider, type FileUploadRootProviderProps, type FileUploadRootProviderBaseProps, } from './file-upload-root-provider';
-export { FileUploadTrigger, type FileUploadTriggerProps, type FileUploadTriggerBaseProps, } from './file-upload-trigger';
+export { fileUploadAnatomy } from './file-upload.anatomy';
 export { useFileUpload, type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
 export { useFileUploadContext, type UseFileUploadContext } from './use-file-upload-context';
-export { fileUploadAnatomy } from './file-upload.anatomy';
 export * as FileUpload from './file-upload';

package/dist/components/file-upload/index.js

@@ -1,17 +1,3 @@
-export { FileUploadContext } from './file-upload-context.js';
-export { FileUploadDropzone } from './file-upload-dropzone.js';
-export { FileUploadHiddenInput } from './file-upload-hidden-input.js';
-export { FileUploadItem } from './file-upload-item.js';
-export { FileUploadItemDeleteTrigger } from './file-upload-item-delete-trigger.js';
-export { FileUploadItemGroup } from './file-upload-item-group.js';
-export { FileUploadItemName } from './file-upload-item-name.js';
-export { FileUploadItemPreview } from './file-upload-item-preview.js';
-export { FileUploadItemPreviewImage } from './file-upload-item-preview-image.js';
-export { FileUploadItemSizeText } from './file-upload-item-size-text.js';
-export { FileUploadLabel } from './file-upload-label.js';
-export { FileUploadRoot } from './file-upload-root.js';
-export { FileUploadRootProvider } from './file-upload-root-provider.js';
-export { FileUploadTrigger } from './file-upload-trigger.js';
 export { useFileUpload } from './use-file-upload.js';
 export { useFileUploadContext } from './use-file-upload-context.js';
 import * as fileUpload from './file-upload.js';

package/dist/components/format/index.cjs

@@ -2,12 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const formatByte = require('./format-byte.cjs');
-const formatNumber = require('./format-number.cjs');
 const format = require('./format.cjs');
 
 
 
-exports.FormatByte = formatByte.FormatByte;
-exports.FormatNumber = formatNumber.FormatNumber;
 exports.Format = format;

package/dist/components/format/index.d.cts

@@ -1,3 +1 @@
-export { FormatByte, type FormatByteProps, } from './format-byte';
-export { FormatNumber, type FormatNumberProps, } from './format-number';
 export * as Format from './format';

package/dist/components/format/index.d.ts

@@ -1,3 +1 @@
-export { FormatByte, type FormatByteProps, } from './format-byte';
-export { FormatNumber, type FormatNumberProps, } from './format-number';
 export * as Format from './format';

package/dist/components/format/index.js

@@ -1,4 +1,2 @@
-export { FormatByte } from './format-byte.js';
-export { FormatNumber } from './format-number.js';
 import * as format from './format.js';
 export { format as Format };

package/dist/components/frame/frame-content.cjs

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const FrameContent = (props) => {
+  const { onMount, onUnmount, children } = props;
+  const mountedRef = react.useRef(false);
+  const calledRef = react.useRef(false);
+  react.useEffect(() => {
+    if (!mountedRef.current && !calledRef.current) {
+      onMount?.();
+      mountedRef.current = true;
+      calledRef.current = true;
+    }
+    return () => {
+      if (mountedRef.current) {
+        onUnmount?.();
+        mountedRef.current = false;
+      }
+    };
+  }, []);
+  return children;
+};
+
+exports.FrameContent = FrameContent;

package/dist/components/frame/frame-content.d.cts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface FrameContentProps {
+    onMount?(): void;
+    onUnmount?(): void;
+    children?: React.ReactNode;
+}
+export declare const FrameContent: (props: FrameContentProps) => ReactNode;
+export {};

package/dist/components/frame/frame-content.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface FrameContentProps {
+    onMount?(): void;
+    onUnmount?(): void;
+    children?: React.ReactNode;
+}
+export declare const FrameContent: (props: FrameContentProps) => ReactNode;
+export {};

package/dist/components/frame/frame-content.js

@@ -0,0 +1,24 @@
+'use client';
+import { useRef, useEffect } from 'react';
+
+const FrameContent = (props) => {
+  const { onMount, onUnmount, children } = props;
+  const mountedRef = useRef(false);
+  const calledRef = useRef(false);
+  useEffect(() => {
+    if (!mountedRef.current && !calledRef.current) {
+      onMount?.();
+      mountedRef.current = true;
+      calledRef.current = true;
+    }
+    return () => {
+      if (mountedRef.current) {
+        onUnmount?.();
+        mountedRef.current = false;
+      }
+    };
+  }, []);
+  return children;
+};
+
+export { FrameContent };

package/dist/components/frame/frame.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactDom = require('react-dom');
+const environmentProvider = require('../../providers/environment/environment-provider.cjs');
+const composeRefs = require('../../utils/compose-refs.cjs');
+const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
+const frameContent = require('./frame-content.cjs');
+
+const resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
+const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
+function getMountNode(frame) {
+  const doc = frame.contentWindow?.document;
+  if (!doc) return null;
+  const mountNode = doc.body.querySelector(".frame-root") || doc.body;
+  return mountNode;
+}
+const Frame = react.forwardRef((props, ref) => {
+  const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
+  const [frameRef, setFrameRef] = react.useState(null);
+  const [mountNode, setMountNode] = react.useState(null);
+  useSafeLayoutEffect.useSafeLayoutEffect(() => {
+    if (!frameRef) return;
+    const doc = frameRef.contentWindow?.document;
+    if (!doc) return;
+    doc.open();
+    doc.write(srcDoc);
+    doc.close();
+    setMountNode(getMountNode(frameRef));
+  }, [frameRef, srcDoc]);
+  react.useEffect(() => {
+    if (!frameRef || !frameRef.contentDocument) return;
+    const win = frameRef.contentWindow;
+    if (!win) return;
+    const mountNode2 = getMountNode(frameRef);
+    if (!mountNode2) return;
+    const exec = () => {
+      const rootEl = frameRef.contentDocument?.documentElement;
+      if (!rootEl) return;
+      frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
+      frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+    };
+    const resizeObserver = new win.ResizeObserver(exec);
+    exec();
+    if (frameRef.contentDocument) {
+      resizeObserver.observe(mountNode2);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [frameRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx(environmentProvider.EnvironmentProvider, { value: () => frameRef?.contentDocument ?? document, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "iframe",
+    {
+      title: `frame:${react.useId()}`,
+      ref: composeRefs.composeRefs(ref, setFrameRef),
+      ...rest,
+      children: [
+        mountNode ? reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(frameContent.FrameContent, { onMount, onUnmount, children }),
+          mountNode
+        ) : null,
+        head && frameRef ? reactDom.createPortal(head, frameRef.contentDocument.head) : null
+      ]
+    }
+  ) });
+});
+
+exports.Frame = Frame;

package/dist/components/frame/frame.d.cts

@@ -0,0 +1,13 @@
+import { Assign } from '../../types';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface FrameBaseProps {
+    /** Additional content to be inserted into the frame's <head> */
+    head?: React.ReactNode;
+    /** Callback function to be executed when the frame is mounted */
+    onMount?: () => void;
+    /** Callback function to be executed when the frame is unmounted */
+    onUnmount?: () => void;
+}
+export interface FrameProps extends Assign<React.IframeHTMLAttributes<HTMLIFrameElement>, FrameBaseProps> {
+}
+export declare const Frame: ForwardRefExoticComponent<FrameProps & RefAttributes<HTMLIFrameElement>>;

package/dist/components/frame/frame.d.ts

@@ -0,0 +1,13 @@
+import { Assign } from '../../types';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface FrameBaseProps {
+    /** Additional content to be inserted into the frame's <head> */
+    head?: React.ReactNode;
+    /** Callback function to be executed when the frame is mounted */
+    onMount?: () => void;
+    /** Callback function to be executed when the frame is unmounted */
+    onUnmount?: () => void;
+}
+export interface FrameProps extends Assign<React.IframeHTMLAttributes<HTMLIFrameElement>, FrameBaseProps> {
+}
+export declare const Frame: ForwardRefExoticComponent<FrameProps & RefAttributes<HTMLIFrameElement>>;

package/dist/components/frame/frame.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+import { EnvironmentProvider } from '../../providers/environment/environment-provider.js';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
+import { FrameContent } from './frame-content.js';
+
+const resetStyle = "<style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style>";
+const initialSrcDoc = `<html><head>${resetStyle}</head><body><div class="frame-root"></div></body></html>`;
+function getMountNode(frame) {
+  const doc = frame.contentWindow?.document;
+  if (!doc) return null;
+  const mountNode = doc.body.querySelector(".frame-root") || doc.body;
+  return mountNode;
+}
+const Frame = forwardRef((props, ref) => {
+  const { children, head, onMount, onUnmount, srcDoc = initialSrcDoc, ...rest } = props;
+  const [frameRef, setFrameRef] = useState(null);
+  const [mountNode, setMountNode] = useState(null);
+  useSafeLayoutEffect(() => {
+    if (!frameRef) return;
+    const doc = frameRef.contentWindow?.document;
+    if (!doc) return;
+    doc.open();
+    doc.write(srcDoc);
+    doc.close();
+    setMountNode(getMountNode(frameRef));
+  }, [frameRef, srcDoc]);
+  useEffect(() => {
+    if (!frameRef || !frameRef.contentDocument) return;
+    const win = frameRef.contentWindow;
+    if (!win) return;
+    const mountNode2 = getMountNode(frameRef);
+    if (!mountNode2) return;
+    const exec = () => {
+      const rootEl = frameRef.contentDocument?.documentElement;
+      if (!rootEl) return;
+      frameRef.style.setProperty("--width", `${mountNode2.scrollWidth}px`);
+      frameRef.style.setProperty("--height", `${mountNode2.scrollHeight}px`);
+    };
+    const resizeObserver = new win.ResizeObserver(exec);
+    exec();
+    if (frameRef.contentDocument) {
+      resizeObserver.observe(mountNode2);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [frameRef]);
+  return /* @__PURE__ */ jsx(EnvironmentProvider, { value: () => frameRef?.contentDocument ?? document, children: /* @__PURE__ */ jsxs(
+    "iframe",
+    {
+      title: `frame:${useId()}`,
+      ref: composeRefs(ref, setFrameRef),
+      ...rest,
+      children: [
+        mountNode ? createPortal(
+          /* @__PURE__ */ jsx(FrameContent, { onMount, onUnmount, children }),
+          mountNode
+        ) : null,
+        head && frameRef ? createPortal(head, frameRef.contentDocument.head) : null
+      ]
+    }
+  ) });
+});
+
+export { Frame };

package/dist/components/frame/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const frame = require('./frame.cjs');
+
+
+
+exports.Frame = frame.Frame;

package/dist/components/frame/index.d.cts

@@ -0,0 +1,2 @@
+export { Frame } from './frame';
+export type { FrameProps, FrameBaseProps } from './frame';

package/dist/components/frame/index.d.ts

@@ -0,0 +1,2 @@
+export { Frame } from './frame';
+export type { FrameProps, FrameBaseProps } from './frame';

package/dist/components/frame/index.js

@@ -0,0 +1 @@
+export { Frame } from './frame.js';

package/dist/components/hover-card/index.cjs

@@ -2,14 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const hoverCardArrow = require('./hover-card-arrow.cjs');
-const hoverCardArrowTip = require('./hover-card-arrow-tip.cjs');
-const hoverCardContent = require('./hover-card-content.cjs');
-const hoverCardContext = require('./hover-card-context.cjs');
-const hoverCardPositioner = require('./hover-card-positioner.cjs');
-const hoverCardRoot = require('./hover-card-root.cjs');
-const hoverCardRootProvider = require('./hover-card-root-provider.cjs');
-const hoverCardTrigger = require('./hover-card-trigger.cjs');
 const useHoverCard = require('./use-hover-card.cjs');
 const useHoverCardContext = require('./use-hover-card-context.cjs');
 const hoverCard$1 = require('./hover-card.cjs');
@@ -17,18 +9,10 @@ const hoverCard = require('@zag-js/hover-card');
 
 
 
-exports.HoverCardArrow = hoverCardArrow.HoverCardArrow;
-exports.HoverCardArrowTip = hoverCardArrowTip.HoverCardArrowTip;
-exports.HoverCardContent = hoverCardContent.HoverCardContent;
-exports.HoverCardContext = hoverCardContext.HoverCardContext;
-exports.HoverCardPositioner = hoverCardPositioner.HoverCardPositioner;
-exports.HoverCardRoot = hoverCardRoot.HoverCardRoot;
-exports.HoverCardRootProvider = hoverCardRootProvider.HoverCardRootProvider;
-exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
 exports.useHoverCard = useHoverCard.useHoverCard;
 exports.useHoverCardContext = useHoverCardContext.useHoverCardContext;
 exports.HoverCard = hoverCard$1;
 Object.defineProperty(exports, "hoverCardAnatomy", {
-  enumerable: true,
-  get: () => hoverCard.anatomy
+	enumerable: true,
+	get: () => hoverCard.anatomy
 });

package/dist/components/hover-card/index.d.cts

@@ -1,13 +1,4 @@
-export type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/hover-card';
-export { HoverCardArrow, type HoverCardArrowProps, type HoverCardArrowBaseProps, } from './hover-card-arrow';
-export { HoverCardArrowTip, type HoverCardArrowTipProps, type HoverCardArrowTipBaseProps, } from './hover-card-arrow-tip';
-export { HoverCardContent, type HoverCardContentProps, type HoverCardContentBaseProps, } from './hover-card-content';
-export { HoverCardContext, type HoverCardContextProps, } from './hover-card-context';
-export { HoverCardPositioner, type HoverCardPositionerProps, type HoverCardPositionerBaseProps, } from './hover-card-positioner';
-export { HoverCardRoot, type HoverCardRootProps, type HoverCardRootBaseProps, } from './hover-card-root';
-export { HoverCardRootProvider, type HoverCardRootProviderProps, type HoverCardRootProviderBaseProps, } from './hover-card-root-provider';
-export { HoverCardTrigger, type HoverCardTriggerProps, type HoverCardTriggerBaseProps, } from './hover-card-trigger';
+export { hoverCardAnatomy } from './hover-card.anatomy';
 export { useHoverCard, type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
 export { useHoverCardContext, type UseHoverCardContext } from './use-hover-card-context';
-export { hoverCardAnatomy } from './hover-card.anatomy';
 export * as HoverCard from './hover-card';

package/dist/components/hover-card/index.d.ts

@@ -1,13 +1,4 @@
-export type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/hover-card';
-export { HoverCardArrow, type HoverCardArrowProps, type HoverCardArrowBaseProps, } from './hover-card-arrow';
-export { HoverCardArrowTip, type HoverCardArrowTipProps, type HoverCardArrowTipBaseProps, } from './hover-card-arrow-tip';
-export { HoverCardContent, type HoverCardContentProps, type HoverCardContentBaseProps, } from './hover-card-content';
-export { HoverCardContext, type HoverCardContextProps, } from './hover-card-context';
-export { HoverCardPositioner, type HoverCardPositionerProps, type HoverCardPositionerBaseProps, } from './hover-card-positioner';
-export { HoverCardRoot, type HoverCardRootProps, type HoverCardRootBaseProps, } from './hover-card-root';
-export { HoverCardRootProvider, type HoverCardRootProviderProps, type HoverCardRootProviderBaseProps, } from './hover-card-root-provider';
-export { HoverCardTrigger, type HoverCardTriggerProps, type HoverCardTriggerBaseProps, } from './hover-card-trigger';
+export { hoverCardAnatomy } from './hover-card.anatomy';
 export { useHoverCard, type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
 export { useHoverCardContext, type UseHoverCardContext } from './use-hover-card-context';
-export { hoverCardAnatomy } from './hover-card.anatomy';
 export * as HoverCard from './hover-card';

package/dist/components/hover-card/index.js

@@ -1,11 +1,3 @@
-export { HoverCardArrow } from './hover-card-arrow.js';
-export { HoverCardArrowTip } from './hover-card-arrow-tip.js';
-export { HoverCardContent } from './hover-card-content.js';
-export { HoverCardContext } from './hover-card-context.js';
-export { HoverCardPositioner } from './hover-card-positioner.js';
-export { HoverCardRoot } from './hover-card-root.js';
-export { HoverCardRootProvider } from './hover-card-root-provider.js';
-export { HoverCardTrigger } from './hover-card-trigger.js';
 export { useHoverCard } from './use-hover-card.js';
 export { useHoverCardContext } from './use-hover-card-context.js';
 import * as hoverCard from './hover-card.js';