@ark-ui/solid 1.0.0-beta.3 → 1.0.0

package/source/popover/popover-trigger.jsx

@@ -1,8 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { usePopoverContext } from './popover-context';
 export const PopoverTrigger = (props) => {
     const api = usePopoverContext();
-    const triggerProps = mergeProps(() => api().triggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
+    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
+    return <ark.button {...mergedProps}/>;
 };

package/source/popover/popover.jsx

@@ -1,8 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
 import { PopoverProvider } from './popover-context';
 import { usePopover } from './use-popover';
 export const Popover = (props) => {
-    const [usePopoverProps, restProps] = createSplitProps()(props, [
+    const [presenceProps, popoverProps] = splitPresenceProps(props);
+    const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
         'autoFocus',
         'closeOnEsc',
         'closeOnInteractOutside',
@@ -22,5 +26,9 @@ export const Popover = (props) => {
         'positioning',
     ]);
     const api = usePopover(usePopoverProps);
-    return <PopoverProvider value={api}>{restProps.children}</PopoverProvider>;
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<PopoverProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </PopoverProvider>);
 };

package/source/presence/index.js

@@ -1,6 +1,9 @@
 import { Presence as PresenceRoot } from './presence';
+import { PresenceProvider, usePresenceContext } from './presence-context';
+import { PresencePropsProvider, usePresencePropsContext, } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
+import { usePresence } from './use-presence';
 const Presence = Object.assign(PresenceRoot, {
     Root: PresenceRoot,
 });
-export { Presence, splitPresenceProps };
+export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };

package/source/presence/presence-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [PresenceProvider, usePresenceContext] = createContext({
+    hookName: 'usePresenceContext',
+    providerName: '<PresenceProvider />',
+});

package/source/presence/presence-props-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [PresencePropsProvider, usePresencePropsContext] = createContext({
+    hookName: 'usePresencePropsContext',
+    providerName: '<PresencePropsProvider />',
+});

package/source/presence/presence.jsx

@@ -1,32 +1,13 @@
-import { children, createEffect, createSignal } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { createSplitProps } from '../create-split-props';
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { splitPresenceProps } from './split-presence-props';
 import { usePresence } from './use-presence';
 export const Presence = (props) => {
-    const [presenceProps, localProps] = createSplitProps()(props, [
-        'onExitComplete',
-        'present',
-    ]);
+    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = usePresence(presenceProps);
-    const [wasEverPresent, setWasEverPresent] = createSignal(false);
-    const getChildren = children(() => props.children);
-    createEffect(() => {
-        const isPresent = api().isPresent;
-        if (isPresent)
-            setWasEverPresent(true);
-        const children = getChildren();
-        if (children instanceof HTMLElement) {
-            api().setNode(children);
-            spread(children, {
-                ['data-state']: presenceProps.present ? 'open' : 'closed',
-                hidden: !api().isPresent,
-            });
-        }
-    });
-    return (<>
-      {(!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
-            (localProps.unmountOnExit && !api().isPresent && wasEverPresent())
-            ? localProps.fallback
-            : getChildren()}
-    </>);
+    const mergedProps = mergeProps(() => api().presenceProps, localProps);
+    return (<Show when={!api().isUnmounted}>
+      <ark.div {...mergedProps} data-scope="presence" data-part="root"/>
+    </Show>);
 };

package/source/presence/split-presence-props.js

@@ -1,7 +1,6 @@
 import { createSplitProps } from '../create-split-props';
 export function splitPresenceProps(props) {
     return createSplitProps()(props, [
-        'fallback',
         'lazyMount',
         'onExitComplete',
         'present',

package/source/presence/use-presence.js

@@ -1,9 +1,26 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo } from 'solid-js';
+import { createEffect, createMemo, createSignal, splitProps } from 'solid-js';
 export const usePresence = (props) => {
-    const [state, send] = useMachine(presence.machine(props), {
-        context: props,
+    const [localProps, machineProps] = splitProps(props, ['lazyMount', 'unmountOnExit']);
+    const [wasEverPresent, setWasEverPresent] = createSignal(false);
+    const [state, send] = useMachine(presence.machine(machineProps), {
+        context: machineProps,
     });
-    return createMemo(() => presence.connect(state, send, normalizeProps));
+    const api = createMemo(() => presence.connect(state, send, normalizeProps));
+    createEffect(() => {
+        const isPresent = api().isPresent;
+        if (isPresent)
+            setWasEverPresent(true);
+    });
+    return createMemo(() => ({
+        isUnmounted: (!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
+            (localProps.unmountOnExit && !api().isPresent && wasEverPresent()),
+        isPresent: api().isPresent,
+        presenceProps: {
+            ref: api().setNode,
+            hidden: !api().isPresent,
+            'data-state': machineProps.present ? 'open' : 'closed',
+        },
+    }));
 };

package/source/rating-group/rating-group-item.jsx

@@ -1,15 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { useRatingGroupContext } from './rating-group-context';
 import { RatingGroupItemProvider } from './rating-group-item-context';
 export const RatingGroupItem = (props) => {
-    const [ratingParams, restProps] = createSplitProps()(props, ['index']);
+    const [itemProps, localProps] = createSplitProps()(props, ['index']);
     const api = useRatingGroupContext();
-    const itemState = api().getItemState(ratingParams);
-    const mergedProps = mergeProps(() => api().getItemProps(ratingParams), restProps);
-    const getChildren = () => runIfFn(restProps.children, itemState);
+    const itemState = createMemo(() => api().getItemState(itemProps));
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     return (<RatingGroupItemProvider value={itemState}>
       <ark.span {...mergedProps}>{getChildren()}</ark.span>
     </RatingGroupItemProvider>);

package/source/select/select-content.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresenceContext } from '../presence';
 import { useSelectContext } from './select-context';
 export const SelectContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
       <ark.div {...mergedProps}/>
-    </Presence>);
+    </Show>);
 };

package/source/select/select-positioner.jsx

@@ -1,8 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useSelectContext } from './select-context';
 export const SelectPositioner = (props) => {
     const api = useSelectContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/select/select.jsx

@@ -1,11 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
 import { runIfFn } from '../run-if-fn';
 import { SelectProvider } from './select-context';
 import { useSelect } from './use-select';
 export const Select = (props) => {
-    const [selectProps, localProps] = createSplitProps()(props, [
+    const [presenceProps, selectProps] = splitPresenceProps(props);
+    const [useSelectProps, localProps] = createSplitProps()(selectProps, [
         'closeOnSelect',
         'dir',
         'disabled',
@@ -34,10 +36,13 @@ export const Select = (props) => {
         'selectOnBlur',
         'value',
     ]);
-    const api = useSelect(selectProps);
+    const api = useSelect(useSelectProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<SelectProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      </PresenceProvider>
     </SelectProvider>);
 };

package/source/slider/slider-thumb.jsx

@@ -5,6 +5,6 @@ import { useSliderContext } from './slider-context';
 export const SliderThumb = (props) => {
     const [thumbProps, localProps] = createSplitProps()(props, ['index']);
     const api = useSliderContext();
-    const mergePdrops = mergeProps(() => api().getThumbProps(thumbProps), localProps);
-    return <ark.div {...mergePdrops}/>;
+    const mergedProps = mergeProps(() => api().getThumbProps(thumbProps), localProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/slider/slider-value-text.jsx

@@ -1,10 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
 import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
 import { useSliderContext } from './slider-context';
 export const SliderValueText = (props) => {
     const api = useSliderContext();
-    const getChildren = () => runIfFn(props.children, api);
     const mergedProps = mergeProps(() => api().valueTextProps, props);
-    return <ark.div {...mergedProps}>{getChildren()}</ark.div>;
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || api().value.join(',')}</ark.div>;
 };

package/source/splitter/splitter-panel.jsx

@@ -5,6 +5,6 @@ import { useSplitterContext } from './splitter-context';
 export const SplitterPanel = (props) => {
     const [panelParams, restProps] = createSplitProps()(props, ['id', 'snapSize']);
     const api = useSplitterContext();
-    const panelProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
-    return <ark.div {...panelProps}/>;
+    const mergedProps = mergeProps(() => api().getPanelProps(panelParams), restProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/splitter/splitter-resize-trigger.jsx

@@ -9,6 +9,6 @@ export const SplitterResizeTrigger = (props) => {
         'id',
         'step',
     ]);
-    const triggerProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().getResizeTriggerProps(triggerParams), restProps);
+    return <ark.button {...mergedProps}/>;
 };

package/source/splitter/splitter.jsx

@@ -18,8 +18,8 @@ export const Splitter = (props) => {
     ]);
     const api = useSplitter(splitterParams);
     const getChildren = () => runIfFn(localProps.children, api);
-    const rootProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<SplitterProvider value={api}>
-      <ark.div {...rootProps}>{getChildren()}</ark.div>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </SplitterProvider>);
 };

package/source/switch/switch-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchLabel = (props) => {
     const checkbox = useSwitchContext();
-    const labelProps = mergeProps(() => checkbox().labelProps, props);
-    return <ark.span {...labelProps}/>;
+    const mergedProps = mergeProps(() => checkbox().labelProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/switch/switch-thumb.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchThumb = (props) => {
     const checkbox = useSwitchContext();
-    const thumbProps = mergeProps(() => checkbox().thumbProps, props);
-    return <ark.span {...thumbProps}/>;
+    const mergedProps = mergeProps(() => checkbox().thumbProps, props);
+    return <ark.span {...mergedProps}/>;
 };

package/source/tabs/tab-content.jsx

@@ -1,15 +1,18 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { splitPresenceProps } from '../presence';
-import { TabPresence } from './tab-presence';
+import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
 import { useTabsContext } from './tabs-context';
 export const TabContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
-    const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
+    const [contentProps, localProps] = createSplitProps()(props, ['value']);
     const api = useTabsContext();
-    const contentProps = mergeProps(() => api().getContentProps(getContentProps), restProps);
-    return (<TabPresence {...presenceProps} {...getContentProps}>
-      <ark.div {...contentProps}/>
-    </TabPresence>);
+    const presenceProps = usePresencePropsContext();
+    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().value === contentProps.value })));
+    const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
+    return (<PresenceProvider value={presenceApi}>
+      <Show when={!presenceApi().isUnmounted}>
+        <ark.div {...mergedProps}/>
+      </Show>
+    </PresenceProvider>);
 };

package/source/tabs/tab-indicator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './tabs-context';
 export const TabIndicator = (props) => {
     const api = useTabsContext();
-    const indicatorProps = mergeProps(() => api().indicatorProps, props);
-    return <ark.div {...indicatorProps}/>;
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tabs/tab-list.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTabsContext } from './tabs-context';
 export const TabList = (props) => {
     const api = useTabsContext();
-    const tablistProps = mergeProps(() => api().tablistProps, props);
-    return <ark.div {...tablistProps}/>;
+    const mergedProps = mergeProps(() => api().tablistProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tabs/tab-trigger.jsx

@@ -5,6 +5,6 @@ import { useTabsContext } from './tabs-context';
 export const TabTrigger = (props) => {
     const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
     const api = useTabsContext();
-    const triggerProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
+    return <ark.button {...mergedProps}/>;
 };

package/source/tabs/tabs.jsx

@@ -1,10 +1,12 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { PresencePropsProvider, splitPresenceProps } from '../presence';
 import { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
 export const Tabs = (props) => {
-    const [tabsParams, restProps] = createSplitProps()(props, [
+    const [presenceProps, tabsProps] = splitPresenceProps(props);
+    const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',
         'dir',
         'getRootNode',
@@ -18,8 +20,10 @@ export const Tabs = (props) => {
         'value',
     ]);
     const api = useTabs(tabsParams);
-    const rootProps = mergeProps(() => api().rootProps, restProps);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<TabsProvider value={api}>
-      <ark.div {...rootProps}/>
+      <PresencePropsProvider value={presenceProps}>
+        <ark.div {...mergedProps}/>
+      </PresencePropsProvider>
     </TabsProvider>);
 };

package/source/toggle-group/toggle-group.jsx

@@ -18,8 +18,8 @@ export const ToggleGroup = (props) => {
         'value',
     ]);
     const api = useToggleGroup(groupParams);
-    const rootProps = mergeProps(() => api().rootProps, restProps);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<ToggleGroupProvider value={api}>
-      <ark.div {...rootProps}/>
+      <ark.div {...mergedProps}/>
     </ToggleGroupProvider>);
 };

package/source/tooltip/tooltip-arrow-tip.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTooltipContext } from './tooltip-context';
 export const TooltipArrowTip = (props) => {
     const api = useTooltipContext();
-    const arrowTipProps = mergeProps(() => api().arrowTipProps, props);
-    return <ark.div {...arrowTipProps}/>;
+    const mergedProps = mergeProps(() => api().arrowTipProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tooltip/tooltip-arrow.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTooltipContext } from './tooltip-context';
 export const TooltipArrow = (props) => {
     const tooltip = useTooltipContext();
-    const arrowProps = mergeProps(() => tooltip().arrowProps, props);
-    return <ark.div {...arrowProps}/>;
+    const mergedProps = mergeProps(() => tooltip().arrowProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/source/tooltip/tooltip-content.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { Presence, splitPresenceProps } from '../presence';
+import { usePresenceContext } from '../presence';
 import { useTooltipContext } from './tooltip-context';
 export const TooltipContent = (props) => {
-    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useTooltipContext();
-    const contentProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
-      <ark.div {...contentProps}/>
-    </Presence>);
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/tooltip/tooltip-positioner.jsx

@@ -1,8 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
 import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
 import { useTooltipContext } from './tooltip-context';
 export const TooltipPositioner = (props) => {
     const api = useTooltipContext();
-    const positionerProps = mergeProps(() => api().positionerProps, props);
-    return <ark.div {...positionerProps}/>;
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
 };

package/source/tooltip/tooltip-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useTooltipContext } from './tooltip-context';
 export const TooltipTrigger = (props) => {
     const api = useTooltipContext();
-    const triggerProps = mergeProps(() => api().triggerProps, props);
-    return <ark.button {...triggerProps}/>;
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
 };

package/source/tooltip/tooltip.jsx

@@ -1,8 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
 import { TooltipProvider } from './tooltip-context';
 import { useTooltip } from './use-tooltip';
 export const Tooltip = (props) => {
-    const [useTooltipProps, restProps] = createSplitProps()(props, [
+    const [presenceProps, tooltipProps] = splitPresenceProps(props);
+    const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, [
         'aria-label',
         'closeDelay',
         'closeOnEsc',
@@ -19,5 +23,9 @@ export const Tooltip = (props) => {
         'positioning',
     ]);
     const api = useTooltip(useTooltipProps);
-    return <TooltipProvider value={api} {...restProps}/>;
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<TooltipProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </TooltipProvider>);
 };

package/types/accordion/accordion-context.d.ts

@@ -1,3 +1,4 @@
 import { type UseAccordionReturn } from './use-accordion';
-export type AccordionContext = UseAccordionReturn;
-export declare const AccordionProvider: import("solid-js").ContextProviderComponent<UseAccordionReturn>, useAccordionContext: () => UseAccordionReturn;
+export interface AccordionContext extends UseAccordionReturn {
+}
+export declare const AccordionProvider: import("solid-js").ContextProviderComponent<AccordionContext>, useAccordionContext: () => AccordionContext;

package/types/accordion/accordion-item-content.d.ts

@@ -1,6 +1,4 @@
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+export interface AccordionItemContentProps extends HTMLArkProps<'div'> {
 }
 export declare const AccordionItemContent: (props: AccordionItemContentProps) => import("solid-js").JSX.Element;

package/types/accordion/accordion-item-context.d.ts

@@ -1,3 +1,4 @@
-import type { ItemProps, ItemState } from '@zag-js/accordion';
-export type AccordionItemContext = ItemProps & ItemState;
+import type { ItemProps } from '@zag-js/accordion';
+export interface AccordionItemContext extends ItemProps {
+}
 export declare const AccordionItemProvider: import("solid-js").ContextProviderComponent<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;

package/types/accordion/accordion-item-indicator.d.ts

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

package/types/accordion/accordion-item-trigger.d.ts

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

package/types/accordion/accordion-item.d.ts

@@ -1,8 +1,9 @@
 import { type ItemProps, type ItemState } from '@zag-js/accordion';
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type AccordionItemProps = Assign<HTMLArkProps<'div'>, ItemProps & {
-    children?: JSX.Element | ((state: () => ItemState) => JSX.Element);
-}>;
+export interface AccordionItemProps extends Assign<HTMLArkProps<'div'>, {
+    children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
+}>, ItemProps {
+}
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;

package/types/accordion/accordion.d.ts

@@ -1,5 +1,7 @@
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
+export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
+}
 export declare const Accordion: (props: AccordionProps) => import("solid-js").JSX.Element;

package/types/accordion/use-accordion.d.ts

@@ -2,6 +2,8 @@ import * as accordion from '@zag-js/accordion';
 import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
-export type UseAccordionProps = Optional<accordion.Context, 'id'>;
-export type UseAccordionReturn = Accessor<accordion.Api<PropTypes>>;
+export interface UseAccordionProps extends Optional<accordion.Context, 'id'> {
+}
+export interface UseAccordionReturn extends Accessor<accordion.Api<PropTypes>> {
+}
 export declare const useAccordion: (props: UseAccordionProps) => UseAccordionReturn;

package/types/avatar/avatar-context.d.ts

@@ -1,3 +1,4 @@
 import { type UseAvatarReturn } from './use-avatar';
-export type AvatarContext = UseAvatarReturn;
-export declare const AvatarProvider: import("solid-js").ContextProviderComponent<UseAvatarReturn>, useAvatarContext: () => UseAvatarReturn;
+export interface AvatarContext extends UseAvatarReturn {
+}
+export declare const AvatarProvider: import("solid-js").ContextProviderComponent<AvatarContext>, useAvatarContext: () => AvatarContext;

package/types/avatar/avatar-fallback.d.ts

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

package/types/avatar/avatar-image.d.ts

@@ -1,3 +1,4 @@
 import { type HTMLArkProps } from '../factory';
-export type AvatarImageProps = HTMLArkProps<'img'>;
+export interface AvatarImageProps extends HTMLArkProps<'img'> {
+}
 export declare const AvatarImage: (props: AvatarImageProps) => import("solid-js").JSX.Element;