@ark-ui/react 0.14.0 → 0.15.0

package/pin-input/index.d.ts

@@ -1,43 +1,24 @@
-import { Context } from '@zag-js/pin-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { UsePinInputProps } from './use-pin-input';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type PinInputProps } from './pin-input';
-import { usePinInputContext } from './pin-input-context';
+import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
 import { PinInputInput, type PinInputInputProps } from './pin-input-field';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 import { pinInputAnatomy } from './pin-input.anatomy';
-declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string[] | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const PinInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UsePinInputProps> & UsePinInputProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UsePinInputProps> & UsePinInputProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string[] | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "index"> & {
+    Input: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, "index"> & {
         index: number;
     } & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
+    } & RefAttributes<HTMLLabelElement>>;
 };
 export { PinInput, PinInputControl, PinInputInput, PinInputLabel, pinInputAnatomy, usePinInputContext, };
-export type { PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, };

package/pin-input/pin-input-control.cjs

@@ -10,12 +10,9 @@ const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 
 const PinInputControl = react.forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = pinInputContext.usePinInputContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = pinInputContext.usePinInputContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";
 

package/pin-input/pin-input-control.d.ts

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

package/pin-input/pin-input-control.mjs

@@ -1,17 +1,14 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
 const PinInputControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = usePinInputContext();
-  const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = usePinInputContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";
 

package/pin-input/pin-input-field.d.ts

@@ -1,13 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type PinInputInputProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, {
+export type PinInputInputProps = Assign<HTMLArkProps<'input'>, {
     index: number;
 }>;
-export declare const PinInputInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "index"> & {
+export declare const PinInputInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, "index"> & {
     index: number;
 } & RefAttributes<HTMLInputElement>>;

package/pin-input/pin-input-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PinInputLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const PinInputLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PinInputLabelProps = HTMLArkProps<'label'>;
+export declare const PinInputLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/pin-input/pin-input.cjs

@@ -36,9 +36,12 @@ const PinInput = react.forwardRef((props, ref) => {
     "type",
     "value"
   ]);
-  const pinInput = usePinInput.usePinInput(usePinInputProps);
-  const mergedProps = react$1.mergeProps(pinInput.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(pinInputContext.PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = usePinInput.usePinInput(usePinInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(pinInputContext.PinInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 PinInput.displayName = "PinInput";
 

package/pin-input/pin-input.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/pin-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UsePinInputProps } from './use-pin-input';
-export type PinInputProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UsePinInputProps>;
-export declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string[] | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type PinInputProps = Assign<HTMLArkProps<'div'>, UsePinInputProps>;
+export declare const PinInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UsePinInputProps> & UsePinInputProps & RefAttributes<HTMLDivElement>>;

package/pin-input/pin-input.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -32,9 +32,12 @@ const PinInput = forwardRef((props, ref) => {
     "type",
     "value"
   ]);
-  const pinInput = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps(pinInput.rootProps, divProps);
-  return /* @__PURE__ */ jsx(PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const api = usePinInput(usePinInputProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxs(PinInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 PinInput.displayName = "PinInput";
 

package/pin-input/use-pin-input.d.ts

@@ -1,7 +1,7 @@
 import * as pinInput from '@zag-js/pin-input';
 import { type Optional } from '../types';
-export type UsePinInputProps = Optional<pinInput.Context, 'id'> & {
+export interface UsePinInputProps extends Optional<pinInput.Context, 'id'> {
     defaultValue?: pinInput.Context['value'];
-};
+}
 export type UsePinInputReturn = pinInput.Api;
 export declare const usePinInput: (props: UsePinInputProps) => UsePinInputReturn;

package/popover/index.d.ts

@@ -1,5 +1,5 @@
-import { PresenceProps } from '..';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes, ButtonHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
 import { type PopoverProps } from './popover';
@@ -16,51 +16,31 @@ import { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
 import { popoverAnatomy } from './popover.anatomy';
 declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     Root: (props: PopoverProps) => JSX.Element;
-    Anchor: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Anchor: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Arrow: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Arrow: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ArrowTip: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    ArrowTip: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    CloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    CloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Description: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLParagraphElement>>;
+    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLParagraphElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Title: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
 };
 export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverPositioner, PopoverTitle, PopoverTrigger, popoverAnatomy, usePopoverContext, };
 export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverDescriptionProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };

package/popover/popover-anchor.d.ts

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

package/popover/popover-arrow-tip.d.ts

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

package/popover/popover-arrow.d.ts

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

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

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

package/popover/popover-content.cjs

@@ -7,23 +7,22 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const index = require('../presence/index.cjs');
 const popoverContext = require('./popover-context.cjs');
-const popoverPresence = require('./popover-presence.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const PopoverContent = react.forwardRef((props, ref) => {
-  const [presenceProps, popoverContentProps] = splitPresenceProps.splitPresenceProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(popoverPresence.PopoverPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerPopoverContent, { ref, ...popoverContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = popoverContext.usePopoverContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
-const InnerPopoverContent = react.forwardRef(
-  (props, ref) => {
-    const { contentProps } = popoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(contentProps, props);
+const PopoverInnerContent = react.forwardRef(
+  function PopoverInnerContent2(props, ref) {
+    const api = popoverContext.usePopoverContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-InnerPopoverContent.displayName = "InnerPopoverContent";
 
 exports.PopoverContent = PopoverContent;

package/popover/popover-content.d.ts

@@ -1,10 +1,7 @@
-import { PresenceProps } from '../presence';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-import { type PopoverPresenceProps } from './popover-presence';
-export type PopoverContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<PopoverPresenceProps, 'children'>;
-export declare const PopoverContent: 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>>;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export type PopoverContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
+export declare const PopoverContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/popover/popover-content.mjs

@@ -3,23 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { Presence } from '../presence/index.mjs';
 import { usePopoverContext } from './popover-context.mjs';
-import { PopoverPresence } from './popover-presence.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const PopoverContent = forwardRef((props, ref) => {
-  const [presenceProps, popoverContentProps] = splitPresenceProps(props);
-  return /* @__PURE__ */ jsx(PopoverPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerPopoverContent, { ref, ...popoverContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = usePopoverContext();
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
-const InnerPopoverContent = forwardRef(
-  (props, ref) => {
-    const { contentProps } = usePopoverContext();
-    const mergedProps = mergeProps(contentProps, props);
+const PopoverInnerContent = forwardRef(
+  function PopoverInnerContent2(props, ref) {
+    const api = usePopoverContext();
+    const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-InnerPopoverContent.displayName = "InnerPopoverContent";
 
 export { PopoverContent };

package/popover/popover-description.d.ts

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

package/popover/popover-positioner.d.ts

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

package/popover/popover-title.d.ts

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

package/popover/popover-trigger.d.ts

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

package/popover/use-popover.d.ts

@@ -1,5 +1,6 @@
 import * as popover from '@zag-js/popover';
 import { type Optional } from '../types';
-export type UsePopoverProps = Optional<popover.Context, 'id'>;
+export interface UsePopoverProps extends Optional<popover.Context, 'id'> {
+}
 export type UsePopoverReturn = popover.Api;
 export declare const usePopover: (props: UsePopoverProps) => UsePopoverReturn;

package/presence/presence.d.ts

@@ -1,6 +1,6 @@
 import { JSXElementConstructor, type ReactElement } from 'react';
 import { type UsePresenceProps } from './use-presence';
-export type PresenceProps = UsePresenceProps & {
+export interface PresenceProps extends UsePresenceProps {
     /**
      * Only a single child is allowed.
      */
@@ -13,5 +13,5 @@ export type PresenceProps = UsePresenceProps & {
      * Whether to unmount on exit. Defaults to `false`.
      */
     unmountOnExit?: boolean;
-};
+}
 export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null;

package/presence/use-presence.d.ts

@@ -1,4 +1,5 @@
 import * as presence from '@zag-js/presence';
 import type { Optional } from '../types';
-export type UsePresenceProps = Optional<presence.Context, 'present'>;
+export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
+}
 export declare const usePresence: (props: UsePresenceProps) => presence.Api;