@ark-ui/react 1.0.0-beta.4 → 1.0.0

package/presence/presence-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [PresenceProvider, usePresenceContext] = createContext({
+  name: "PresenceContext",
+  hookName: "usePresenceContext",
+  providerName: "<PresenceProvider />"
+});
+
+export { PresenceProvider, usePresenceContext };

package/presence/presence-props-context.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [PresencePropsProvider, usePresencePropsContext] = createContext.createContext(
+  {
+    name: "PresencePropsContext",
+    hookName: "usePresencePropsContext",
+    providerName: "<PresencePropsProvider />"
+  }
+);
+
+exports.PresencePropsProvider = PresencePropsProvider;
+exports.usePresencePropsContext = usePresencePropsContext;

package/presence/presence-props-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { UsePresenceProps } from './use-presence';
+export interface PresencePropsContext extends UsePresenceProps {
+}
+export declare const PresencePropsProvider: Provider<PresencePropsContext>, usePresencePropsContext: () => PresencePropsContext;

package/presence/presence-props-context.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [PresencePropsProvider, usePresencePropsContext] = createContext(
+  {
+    name: "PresencePropsContext",
+    hookName: "usePresencePropsContext",
+    providerName: "<PresencePropsProvider />"
+  }
+);
+
+export { PresencePropsProvider, usePresencePropsContext };

package/presence/presence.cjs

@@ -3,29 +3,28 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const composeRefs = require('../compose-refs.cjs');
-const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const splitPresenceProps = require('./split-presence-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
-const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps.createSplitProps()(props, ["present", "onExitComplete"]);
+const Presence = react.forwardRef((props, ref) => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = usePresence.usePresence(presenceProps);
-  const wasEverPresent = react.useRef(false);
-  if (api.isPresent) {
-    wasEverPresent.current = true;
+  if (api.isUnmounted) {
+    return null;
   }
-  if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return fallback;
-  }
-  const onlyChild = react.Children.only(children);
-  return react.cloneElement(onlyChild, {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: composeRefs.composeRefs(api.setNode, onlyChild.ref),
-    hidden: !api.isPresent,
-    ["data-state"]: presenceProps.present ? "open" : "closed",
-    ...onlyChild.props
-  });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      ...localProps,
+      ...api.getPresenceProps(ref),
+      "data-scope": "presence",
+      "data-part": "root"
+    }
+  );
+});
+Presence.displayName = "Presence";
 
 exports.Presence = Presence;

package/presence/presence.d.ts

@@ -1,23 +1,8 @@
-import { JSXElementConstructor, type ReactElement } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UsePresenceProps } from './use-presence';
-export interface PresenceProps extends UsePresenceProps {
-    /**
-     * Only a single child is allowed.
-     */
-    children: ReactElement;
-    /**
-     * Whether to enable lazy mounting
-     * @default false
-     */
-    lazyMount?: boolean;
-    /**
-     * Whether to unmount on exit.
-     * @default false
-     */
-    unmountOnExit?: boolean;
-    /**
-     * A fallback to render the component is not present.
-     */
-    fallback?: ReactElement;
+export interface PresenceProps extends Assign<HTMLArkProps<'div'>, UsePresenceProps> {
 }
-export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;
+export declare const Presence: ForwardRefExoticComponent<PresenceProps & RefAttributes<HTMLDivElement>>;

package/presence/presence.mjs

@@ -1,27 +1,26 @@
 'use client';
-import { useRef, Children, cloneElement } from 'react';
-import { composeRefs } from '../compose-refs.mjs';
-import { createSplitProps } from '../create-split-props.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { splitPresenceProps } from './split-presence-props.mjs';
 import { usePresence } from './use-presence.mjs';
 
-const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps()(props, ["present", "onExitComplete"]);
+const Presence = forwardRef((props, ref) => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePresence(presenceProps);
-  const wasEverPresent = useRef(false);
-  if (api.isPresent) {
-    wasEverPresent.current = true;
+  if (api.isUnmounted) {
+    return null;
   }
-  if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return fallback;
-  }
-  const onlyChild = Children.only(children);
-  return cloneElement(onlyChild, {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: composeRefs(api.setNode, onlyChild.ref),
-    hidden: !api.isPresent,
-    ["data-state"]: presenceProps.present ? "open" : "closed",
-    ...onlyChild.props
-  });
-};
+  return /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      ...localProps,
+      ...api.getPresenceProps(ref),
+      "data-scope": "presence",
+      "data-part": "root"
+    }
+  );
+});
+Presence.displayName = "Presence";
 
 export { Presence };

package/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
-import type { PresenceProps } from './presence';
-export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Omit<PresenceProps, "children" | "fallback">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+import type { UsePresenceProps } from './use-presence';
+export declare function splitPresenceProps<T>(props: T & UsePresenceProps): [UsePresenceProps, Omit<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];

package/presence/use-presence.cjs

@@ -4,7 +4,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const presence = require('@zag-js/presence');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const composeRefs = require('../compose-refs.cjs');
 const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -27,12 +29,28 @@ function _interopNamespaceDefault(e) {
 const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
 
 const usePresence = (props) => {
+  const { lazyMount, unmountOnExit, ...rest } = props;
+  const wasEverPresent = react.useRef(false);
   const context = {
-    ...props,
+    ...rest,
     onExitComplete: useEvent.useEvent(props.onExitComplete)
   };
-  const [state, send] = react.useMachine(presence__namespace.machine(context), { context });
-  return presence__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(presence__namespace.machine(context), { context });
+  const api = presence__namespace.connect(state, send, react$1.normalizeProps);
+  if (api.isPresent) {
+    wasEverPresent.current = true;
+  }
+  const isUnmounted = !api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current;
+  const getPresenceProps = (ref) => ({
+    ref: composeRefs.composeRefs(api.setNode, ref),
+    "data-state": props.present ? "open" : "closed",
+    hidden: !api.isPresent
+  });
+  return {
+    getPresenceProps,
+    isPresent: api.isPresent,
+    isUnmounted
+  };
 };
 
 exports.usePresence = usePresence;

package/presence/use-presence.d.ts

@@ -1,5 +1,25 @@
 import * as presence from '@zag-js/presence';
+import { type ForwardedRef } from 'react';
 import type { Optional } from '../types';
 export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
+    /**
+     * Whether to enable lazy mounting
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit.
+     * @default false
+     */
+    unmountOnExit?: boolean;
 }
-export declare const usePresence: (props: UsePresenceProps) => presence.Api;
+export type UsePresenceReturn = ReturnType<typeof usePresence>;
+export declare const usePresence: (props: UsePresenceProps) => {
+    getPresenceProps: <T extends HTMLElement>(ref: ForwardedRef<T>) => {
+        ref: ForwardedRef<T>;
+        'data-state': string;
+        hidden: boolean;
+    };
+    isPresent: boolean;
+    isUnmounted: boolean | undefined;
+};

package/presence/use-presence.mjs

@@ -1,15 +1,33 @@
 'use client';
 import * as presence from '@zag-js/presence';
 import { useMachine, normalizeProps } from '@zag-js/react';
+import { useRef } from 'react';
+import { composeRefs } from '../compose-refs.mjs';
 import { useEvent } from '../use-event.mjs';
 
 const usePresence = (props) => {
+  const { lazyMount, unmountOnExit, ...rest } = props;
+  const wasEverPresent = useRef(false);
   const context = {
-    ...props,
+    ...rest,
     onExitComplete: useEvent(props.onExitComplete)
   };
   const [state, send] = useMachine(presence.machine(context), { context });
-  return presence.connect(state, send, normalizeProps);
+  const api = presence.connect(state, send, normalizeProps);
+  if (api.isPresent) {
+    wasEverPresent.current = true;
+  }
+  const isUnmounted = !api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current;
+  const getPresenceProps = (ref) => ({
+    ref: composeRefs(api.setNode, ref),
+    "data-state": props.present ? "open" : "closed",
+    hidden: !api.isPresent
+  });
+  return {
+    getPresenceProps,
+    isPresent: api.isPresent,
+    isUnmounted
+  };
 };
 
 export { usePresence };

package/radio-group/radio-group-item.d.ts

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/radio-group';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+    children?: ReactNode | ((state: ItemState) => ReactNode);
 }>, ItemProps {
 }
 export declare const RadioGroupItem: ForwardRefExoticComponent<RadioGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/rating-group/rating-group-control.d.ts

@@ -1,7 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
-import { type RatingGroupContext } from './rating-group-context';
-export interface RatingGroupControlProps extends Omit<HTMLArkProps<'div'>, 'children'> {
-    children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
+import type { Assign } from '../types';
+import type { UseRatingGroupReturn } from './use-rating-group';
+export interface RatingGroupControlProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseRatingGroupReturn) => ReactNode);
+}> {
 }
 export declare const RatingGroupControl: ForwardRefExoticComponent<RatingGroupControlProps & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group-item.d.ts

@@ -1,10 +1,9 @@
-import type { ItemProps } from '@zag-js/rating-group';
+import type { ItemProps, ItemState } from '@zag-js/rating-group';
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { type RatingGroupItemContext } from './rating-group-item-context';
-export interface RatingGroupItemProps extends Assign<HTMLArkProps<'span'>, ItemProps & {
-    children: (state: RatingGroupItemContext) => ReactNode | ReactNode;
-}> {
+export interface RatingGroupItemProps extends Assign<HTMLArkProps<'span'>, {
+    children?: ReactNode | ((state: ItemState) => ReactNode);
+}>, ItemProps {
 }
 export declare const RatingGroupItem: ForwardRefExoticComponent<RatingGroupItemProps & RefAttributes<HTMLSpanElement>>;

package/segment-group/segment-group-item.d.ts

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type ItemState, type SegmentGroupItemContext } from './segment-group-item-context';
 export interface SegmentGroupItemProps extends Assign<HTMLArkProps<'label'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+    children?: ReactNode | ((state: ItemState) => ReactNode);
 }>, SegmentGroupItemContext {
 }
 export declare const SegmentGroupItem: ForwardRefExoticComponent<SegmentGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment-group.anatomy.d.ts

@@ -0,0 +1,2 @@
+import { type AnatomyPart } from '@ark-ui/anatomy';
+export declare const parts: Record<'root' | 'label' | 'item' | 'itemText' | 'itemControl' | 'indicator', AnatomyPart>;

package/select/select-content.cjs

@@ -7,22 +7,19 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const index = require('../presence/index.cjs');
+require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
 });
 SelectContent.displayName = "SelectContent";
-const SelectInnerContent = react.forwardRef(
-  function SelectInnerContent2(props, ref) {
-    const api = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface SelectContentProps extends HTMLArkProps<'div'> {
 }
 export declare const SelectContent: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;

package/select/select-content.mjs

@@ -3,22 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { Presence } from '../presence/index.mjs';
+import '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const SelectContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
 });
 SelectContent.displayName = "SelectContent";
-const SelectInnerContent = forwardRef(
-  function SelectInnerContent2(props, ref) {
-    const api = useSelectContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { SelectContent };

package/select/select-item.d.ts

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/select';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface SelectItemProps extends Assign<HTMLArkProps<'div'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+    children?: ReactNode | ((state: ItemState) => ReactNode);
 }>, ItemProps {
 }
 export declare const SelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLDivElement>>;

package/select/select-positioner.cjs

@@ -7,11 +7,17 @@ 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 selectContext = require('./select-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectPositioner = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(api.positionerProps, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select-positioner.mjs

@@ -3,11 +3,17 @@ 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 { useSelectContext } from './select-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const SelectPositioner = forwardRef((props, ref) => {
   const api = useSelectContext();
   const mergedProps = mergeProps(api.positionerProps, props);
+  const presenceApi = usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select.cjs

@@ -8,13 +8,18 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectImpl = (props, ref) => {
+  const [presenceProps, selectProps] = splitPresenceProps.splitPresenceProps(props);
   const [useSelectProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
+    selectProps,
     [
       "closeOnSelect",
       "defaultValue",
@@ -47,9 +52,10 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect.useSelect(useSelectProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Select = react.forwardRef(SelectImpl);
 

package/select/select.d.ts

@@ -1,10 +1,11 @@
 import { type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export interface SelectProps<T extends CollectionItem> extends Assign<HTMLArkProps<'div'>, UseSelectProps<T> & {
-    children?: ReactNode | ((state: UseSelectReturn<T>) => ReactNode);
-}> {
+export interface SelectProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSelectReturn<T>) => ReactNode);
+}>, UseSelectProps<T>>, UsePresenceProps {
 }
 export interface SelectComponent {
     <T extends CollectionItem>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;

package/select/select.mjs

@@ -4,13 +4,18 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const SelectImpl = (props, ref) => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
   const [useSelectProps, { children, ...localProps }] = createSplitProps()(
-    props,
+    selectProps,
     [
       "closeOnSelect",
       "defaultValue",
@@ -43,9 +48,10 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect(useSelectProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Select = forwardRef(SelectImpl);
 

package/slider/slider-value-text.cjs

@@ -7,15 +7,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderValueText = react.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = sliderContext.useSliderContext();
   const mergedProps = react$1.mergeProps(api.valueTextProps, rest);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || api.value.join(", ") });
 });
 SliderValueText.displayName = "SliderValueText";
 

package/slider/slider-value-text.d.ts

@@ -1,9 +1,6 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseSliderReturn } from './use-slider';
-export interface SliderValueTextProps extends Assign<HTMLArkProps<'output'>, {
-    children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
-}> {
+export interface SliderValueTextProps extends HTMLArkProps<'span'> {
 }
 export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/slider/slider-value-text.mjs

@@ -3,15 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
 const SliderValueText = forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = useSliderContext();
   const mergedProps = mergeProps(api.valueTextProps, rest);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || api.value.join(", ") });
 });
 SliderValueText.displayName = "SliderValueText";
 

package/slider/slider.d.ts

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSliderProps, type UseSliderReturn } from './use-slider';
-export interface SliderProps extends Assign<HTMLArkProps<'div'>, UseSliderProps & {
-    children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
-}> {
+export interface SliderProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSliderReturn) => ReactNode);
+}>, UseSliderProps> {
 }
 export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;