@ark-ui/react 4.0.0-0 → 4.1.0

package/dist/components/toggle/toggle-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { useToggleContext } from './use-toggle-context.js';
+
+const ToggleContext = (props) => props.children(useToggleContext());
+
+export { ToggleContext };

package/dist/components/toggle/toggle-indicator.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useToggleContext = require('./use-toggle-context.cjs');
+
+const ToggleIndicator = react.forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const toggle = useToggleContext.useToggleContext();
+  const mergedProps = react$1.mergeProps(toggle.getIndicatorProps(), restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: toggle.pressed ? children : fallback });
+});
+ToggleIndicator.displayName = "ToggleIndicator";
+
+exports.ToggleIndicator = ToggleIndicator;

package/dist/components/toggle/toggle-indicator.d.cts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleIndicatorBaseProps {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: React.ReactNode;
+}
+export interface ToggleIndicatorProps extends HTMLArkProps<'div'>, ToggleIndicatorBaseProps {
+}
+export declare const ToggleIndicator: ForwardRefExoticComponent<ToggleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/toggle/toggle-indicator.d.ts

@@ -0,0 +1,11 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleIndicatorBaseProps {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: React.ReactNode;
+}
+export interface ToggleIndicatorProps extends HTMLArkProps<'div'>, ToggleIndicatorBaseProps {
+}
+export declare const ToggleIndicator: ForwardRefExoticComponent<ToggleIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/toggle/toggle-indicator.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useToggleContext } from './use-toggle-context.js';
+
+const ToggleIndicator = forwardRef((props, ref) => {
+  const { children, fallback, ...restProps } = props;
+  const toggle = useToggleContext();
+  const mergedProps = mergeProps(toggle.getIndicatorProps(), restProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: toggle.pressed ? children : fallback });
+});
+ToggleIndicator.displayName = "ToggleIndicator";
+
+export { ToggleIndicator };

package/dist/components/toggle/toggle-root.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useToggle = require('./use-toggle.cjs');
+const useToggleContext = require('./use-toggle-context.cjs');
+
+const ToggleRoot = react.forwardRef((props, ref) => {
+  const [useToggleProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "pressed",
+    "defaultPressed",
+    "disabled",
+    "onPressedChange"
+  ]);
+  const toggle = useToggle.useToggle(useToggleProps);
+  const mergedProps = react$1.mergeProps(toggle.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useToggleContext.ToggleProvider, { value: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref }) });
+});
+ToggleRoot.displayName = "ToggleRoot";
+
+exports.ToggleRoot = ToggleRoot;

package/dist/components/toggle/toggle-root.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseToggleProps } from './use-toggle';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps {
+}
+export interface ToggleRootProps extends HTMLProps<'button'>, ToggleRootBaseProps {
+}
+export declare const ToggleRoot: ForwardRefExoticComponent<ToggleRootProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/toggle-root.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseToggleProps } from './use-toggle';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps {
+}
+export interface ToggleRootProps extends HTMLProps<'button'>, ToggleRootBaseProps {
+}
+export declare const ToggleRoot: ForwardRefExoticComponent<ToggleRootProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/toggle-root.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useToggle } from './use-toggle.js';
+import { ToggleProvider } from './use-toggle-context.js';
+
+const ToggleRoot = forwardRef((props, ref) => {
+  const [useToggleProps, localProps] = createSplitProps()(props, [
+    "pressed",
+    "defaultPressed",
+    "disabled",
+    "onPressedChange"
+  ]);
+  const toggle = useToggle(useToggleProps);
+  const mergedProps = mergeProps(toggle.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ToggleProvider, { value: toggle, children: /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref }) });
+});
+ToggleRoot.displayName = "ToggleRoot";
+
+export { ToggleRoot };

package/dist/components/toggle/toggle.anatomy.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy = require('@zag-js/anatomy');
+
+const toggleAnatomy = anatomy.createAnatomy("toggle", ["root", "indicator"]);
+const parts = toggleAnatomy.build();
+
+exports.parts = parts;
+exports.toggleAnatomy = toggleAnatomy;

package/dist/components/toggle/toggle.anatomy.d.cts

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const toggleAnatomy: Anatomy<"root" | "indicator">;
+export declare const parts: Record<"root" | "indicator", AnatomyPart>;

package/dist/components/toggle/toggle.anatomy.d.ts

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const toggleAnatomy: Anatomy<"root" | "indicator">;
+export declare const parts: Record<"root" | "indicator", AnatomyPart>;

package/dist/components/toggle/toggle.anatomy.js

@@ -0,0 +1,7 @@
+'use client';
+import { createAnatomy } from '@zag-js/anatomy';
+
+const toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
+const parts = toggleAnatomy.build();
+
+export { parts, toggleAnatomy };

package/dist/components/toggle/toggle.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toggleContext = require('./toggle-context.cjs');
+const toggleIndicator = require('./toggle-indicator.cjs');
+const toggleRoot = require('./toggle-root.cjs');
+const toggle_anatomy = require('./toggle.anatomy.cjs');
+
+
+
+exports.Context = toggleContext.ToggleContext;
+exports.Indicator = toggleIndicator.ToggleIndicator;
+exports.Root = toggleRoot.ToggleRoot;
+exports.toggleAnatomy = toggle_anatomy.toggleAnatomy;

package/dist/components/toggle/toggle.d.cts

@@ -0,0 +1,4 @@
+export { ToggleContext as Context, type ToggleContextProps as ContextProps } from './toggle-context';
+export { ToggleIndicator as Indicator, type ToggleIndicatorProps as IndicatorProps, type ToggleIndicatorBaseProps as IndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,4 @@
+export { ToggleContext as Context, type ToggleContextProps as ContextProps } from './toggle-context';
+export { ToggleIndicator as Indicator, type ToggleIndicatorProps as IndicatorProps, type ToggleIndicatorBaseProps as IndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/components/toggle/toggle.js

@@ -0,0 +1,4 @@
+export { ToggleContext as Context } from './toggle-context.js';
+export { ToggleIndicator as Indicator } from './toggle-indicator.js';
+export { ToggleRoot as Root } from './toggle-root.js';
+export { toggleAnatomy } from './toggle.anatomy.js';

package/dist/components/toggle/use-toggle-context.cjs

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

package/dist/components/toggle/use-toggle-context.d.cts

@@ -0,0 +1,5 @@
+import { UseToggleReturn } from './use-toggle';
+import { Provider } from 'react';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: Provider<UseToggleContext>, useToggleContext: () => UseToggleContext;

package/dist/components/toggle/use-toggle-context.d.ts

@@ -0,0 +1,5 @@
+import { UseToggleReturn } from './use-toggle';
+import { Provider } from 'react';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: Provider<UseToggleContext>, useToggleContext: () => UseToggleContext;

package/dist/components/toggle/use-toggle-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ToggleProvider, useToggleContext] = createContext({
+  name: "ToggleContext",
+  hookName: "useToggleContext",
+  providerName: "<ToggleProvider />"
+});
+
+export { ToggleProvider, useToggleContext };

package/dist/components/toggle/use-toggle.cjs

@@ -0,0 +1,48 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+const useControllableState = require('../../utils/use-controllable-state.cjs');
+const toggle_anatomy = require('./toggle.anatomy.cjs');
+
+function useToggle(props) {
+  const { defaultPressed, pressed, onPressedChange, disabled } = props;
+  const [pressedState, setPressedState] = useControllableState.useControllableState({
+    defaultValue: !!defaultPressed,
+    value: pressed,
+    onChange: onPressedChange
+  });
+  return {
+    pressed: pressedState,
+    disabled: !!disabled,
+    setPressed: setPressedState,
+    getRootProps() {
+      return {
+        ...toggle_anatomy.parts.root.attrs,
+        type: "button",
+        disabled,
+        "aria-pressed": pressedState,
+        "data-state": pressedState ? "on" : "off",
+        "data-pressed": domQuery.dataAttr(pressedState),
+        "data-disabled": domQuery.dataAttr(disabled),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          setPressedState(!pressedState);
+        }
+      };
+    },
+    getIndicatorProps() {
+      return {
+        ...toggle_anatomy.parts.indicator.attrs,
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-pressed": domQuery.dataAttr(pressedState),
+        "data-state": pressedState ? "on" : "off"
+      };
+    }
+  };
+}
+
+exports.useToggle = useToggle;

package/dist/components/toggle/use-toggle.d.cts

@@ -0,0 +1,35 @@
+export interface UseToggleProps {
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The default pressed state of the toggle.
+     */
+    defaultPressed?: boolean;
+    /**
+     * The pressed state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * Event handler called when the pressed state of the toggle changes.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export interface UseToggleReturn {
+    /**
+     * Whether the toggle is pressed.
+     */
+    pressed: boolean;
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Sets the pressed state of the toggle.
+     */
+    setPressed(pressed: boolean): void;
+    getRootProps(): React.ComponentProps<'button'>;
+    getIndicatorProps(): React.ComponentProps<'div'>;
+}
+export declare function useToggle(props: UseToggleProps): UseToggleReturn;

package/dist/components/toggle/use-toggle.d.ts

@@ -0,0 +1,35 @@
+export interface UseToggleProps {
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The default pressed state of the toggle.
+     */
+    defaultPressed?: boolean;
+    /**
+     * The pressed state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * Event handler called when the pressed state of the toggle changes.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export interface UseToggleReturn {
+    /**
+     * Whether the toggle is pressed.
+     */
+    pressed: boolean;
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Sets the pressed state of the toggle.
+     */
+    setPressed(pressed: boolean): void;
+    getRootProps(): React.ComponentProps<'button'>;
+    getIndicatorProps(): React.ComponentProps<'div'>;
+}
+export declare function useToggle(props: UseToggleProps): UseToggleReturn;

package/dist/components/toggle/use-toggle.js

@@ -0,0 +1,44 @@
+'use client';
+import { dataAttr } from '@zag-js/dom-query';
+import { useControllableState } from '../../utils/use-controllable-state.js';
+import { parts } from './toggle.anatomy.js';
+
+function useToggle(props) {
+  const { defaultPressed, pressed, onPressedChange, disabled } = props;
+  const [pressedState, setPressedState] = useControllableState({
+    defaultValue: !!defaultPressed,
+    value: pressed,
+    onChange: onPressedChange
+  });
+  return {
+    pressed: pressedState,
+    disabled: !!disabled,
+    setPressed: setPressedState,
+    getRootProps() {
+      return {
+        ...parts.root.attrs,
+        type: "button",
+        disabled,
+        "aria-pressed": pressedState,
+        "data-state": pressedState ? "on" : "off",
+        "data-pressed": dataAttr(pressedState),
+        "data-disabled": dataAttr(disabled),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          setPressedState(!pressedState);
+        }
+      };
+    },
+    getIndicatorProps() {
+      return {
+        ...parts.indicator.attrs,
+        "data-disabled": dataAttr(disabled),
+        "data-pressed": dataAttr(pressedState),
+        "data-state": pressedState ? "on" : "off"
+      };
+    }
+  };
+}
+
+export { useToggle };

package/dist/components/toggle-group/index.cjs

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const toggleGroupContext = require('./toggle-group-context.cjs');
+const toggleGroupItem = require('./toggle-group-item.cjs');
+const toggleGroupRoot = require('./toggle-group-root.cjs');
+const toggleGroupRootProvider = require('./toggle-group-root-provider.cjs');
 const useToggleGroup = require('./use-toggle-group.cjs');
 const useToggleGroupContext = require('./use-toggle-group-context.cjs');
 const toggleGroup$1 = require('./toggle-group.cjs');
@@ -9,6 +13,10 @@ const toggleGroup = require('@zag-js/toggle-group');
 
 
 
+exports.ToggleGroupContext = toggleGroupContext.ToggleGroupContext;
+exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;
+exports.ToggleGroupRootProvider = toggleGroupRootProvider.ToggleGroupRootProvider;
 exports.useToggleGroup = useToggleGroup.useToggleGroup;
 exports.useToggleGroupContext = useToggleGroupContext.useToggleGroupContext;
 exports.ToggleGroup = toggleGroup$1;

package/dist/components/toggle-group/index.d.cts

@@ -1,3 +1,8 @@
+export type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
+export { ToggleGroupContext, type ToggleGroupContextProps, } from './toggle-group-context';
+export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps, } from './toggle-group-item';
+export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps, } from './toggle-group-root';
+export { ToggleGroupRootProvider, type ToggleGroupRootProviderBaseProps, type ToggleGroupRootProviderProps, } from './toggle-group-root-provider';
 export { toggleGroupAnatomy } from './toggle-group.anatomy';
 export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn, } from './use-toggle-group';
 export { useToggleGroupContext, type UseToggleGroupContext } from './use-toggle-group-context';

package/dist/components/toggle-group/index.d.ts

@@ -1,3 +1,8 @@
+export type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
+export { ToggleGroupContext, type ToggleGroupContextProps, } from './toggle-group-context';
+export { ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps, } from './toggle-group-item';
+export { ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps, } from './toggle-group-root';
+export { ToggleGroupRootProvider, type ToggleGroupRootProviderBaseProps, type ToggleGroupRootProviderProps, } from './toggle-group-root-provider';
 export { toggleGroupAnatomy } from './toggle-group.anatomy';
 export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn, } from './use-toggle-group';
 export { useToggleGroupContext, type UseToggleGroupContext } from './use-toggle-group-context';

package/dist/components/toggle-group/index.js

@@ -1,3 +1,7 @@
+export { ToggleGroupContext } from './toggle-group-context.js';
+export { ToggleGroupItem } from './toggle-group-item.js';
+export { ToggleGroupRoot } from './toggle-group-root.js';
+export { ToggleGroupRootProvider } from './toggle-group-root-provider.js';
 export { useToggleGroup } from './use-toggle-group.js';
 export { useToggleGroupContext } from './use-toggle-group-context.js';
 import * as toggleGroup from './toggle-group.js';

package/dist/components/tooltip/index.cjs

@@ -2,6 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const tooltipArrow = require('./tooltip-arrow.cjs');
+const tooltipArrowTip = require('./tooltip-arrow-tip.cjs');
+const tooltipContent = require('./tooltip-content.cjs');
+const tooltipContext = require('./tooltip-context.cjs');
+const tooltipPositioner = require('./tooltip-positioner.cjs');
+const tooltipRoot = require('./tooltip-root.cjs');
+const tooltipRootProvider = require('./tooltip-root-provider.cjs');
+const tooltipTrigger = require('./tooltip-trigger.cjs');
 const useTooltip = require('./use-tooltip.cjs');
 const useTooltipContext = require('./use-tooltip-context.cjs');
 const tooltip$1 = require('./tooltip.cjs');
@@ -9,10 +17,18 @@ const tooltip = require('@zag-js/tooltip');
 
 
 
+exports.TooltipArrow = tooltipArrow.TooltipArrow;
+exports.TooltipArrowTip = tooltipArrowTip.TooltipArrowTip;
+exports.TooltipContent = tooltipContent.TooltipContent;
+exports.TooltipContext = tooltipContext.TooltipContext;
+exports.TooltipPositioner = tooltipPositioner.TooltipPositioner;
+exports.TooltipRoot = tooltipRoot.TooltipRoot;
+exports.TooltipRootProvider = tooltipRootProvider.TooltipRootProvider;
+exports.TooltipTrigger = tooltipTrigger.TooltipTrigger;
 exports.useTooltip = useTooltip.useTooltip;
 exports.useTooltipContext = useTooltipContext.useTooltipContext;
 exports.Tooltip = tooltip$1;
 Object.defineProperty(exports, "tooltipAnatomy", {
-	enumerable: true,
-	get: () => tooltip.anatomy
+  enumerable: true,
+  get: () => tooltip.anatomy
 });

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

@@ -1,4 +1,13 @@
+export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
+export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps, } from './tooltip-arrow';
+export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps, } from './tooltip-arrow-tip';
+export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps, } from './tooltip-content';
+export { TooltipContext, type TooltipContextProps, } from './tooltip-context';
+export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps, } from './tooltip-positioner';
+export { TooltipRoot, type TooltipRootBaseProps, type TooltipRootProps, } from './tooltip-root';
+export { TooltipRootProvider, type TooltipRootProviderBaseProps, type TooltipRootProviderProps, } from './tooltip-root-provider';
+export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps, } from './tooltip-trigger';
+export { tooltipAnatomy } from './tooltip.anatomy';
 export { useTooltip, type UseTooltipProps, type UseTooltipReturn } from './use-tooltip';
 export { useTooltipContext, type UseTooltipContext } from './use-tooltip-context';
-export { tooltipAnatomy } from './tooltip.anatomy';
 export * as Tooltip from './tooltip';

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

@@ -1,4 +1,13 @@
+export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
+export { TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps, } from './tooltip-arrow';
+export { TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps, } from './tooltip-arrow-tip';
+export { TooltipContent, type TooltipContentBaseProps, type TooltipContentProps, } from './tooltip-content';
+export { TooltipContext, type TooltipContextProps, } from './tooltip-context';
+export { TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps, } from './tooltip-positioner';
+export { TooltipRoot, type TooltipRootBaseProps, type TooltipRootProps, } from './tooltip-root';
+export { TooltipRootProvider, type TooltipRootProviderBaseProps, type TooltipRootProviderProps, } from './tooltip-root-provider';
+export { TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps, } from './tooltip-trigger';
+export { tooltipAnatomy } from './tooltip.anatomy';
 export { useTooltip, type UseTooltipProps, type UseTooltipReturn } from './use-tooltip';
 export { useTooltipContext, type UseTooltipContext } from './use-tooltip-context';
-export { tooltipAnatomy } from './tooltip.anatomy';
 export * as Tooltip from './tooltip';

package/dist/components/tooltip/index.js

@@ -1,3 +1,11 @@
+export { TooltipArrow } from './tooltip-arrow.js';
+export { TooltipArrowTip } from './tooltip-arrow-tip.js';
+export { TooltipContent } from './tooltip-content.js';
+export { TooltipContext } from './tooltip-context.js';
+export { TooltipPositioner } from './tooltip-positioner.js';
+export { TooltipRoot } from './tooltip-root.js';
+export { TooltipRootProvider } from './tooltip-root-provider.js';
+export { TooltipTrigger } from './tooltip-trigger.js';
 export { useTooltip } from './use-tooltip.js';
 export { useTooltipContext } from './use-tooltip-context.js';
 import * as tooltip from './tooltip.js';

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const composeRefs = require('../../utils/compose-refs.cjs');
 const factory = require('../factory.cjs');
 const usePresenceContext = require('../presence/use-presence-context.cjs');
 const useTooltipContext = require('./use-tooltip-context.cjs');
@@ -13,11 +14,11 @@ const useTooltipContext = require('./use-tooltip-context.cjs');
 const TooltipContent = react.forwardRef((props, ref) => {
   const tooltip = useTooltipContext.useTooltipContext();
   const presence = usePresenceContext.usePresenceContext();
-  const mergedProps = react$1.mergeProps(tooltip.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = react$1.mergeProps(tooltip.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(presence.ref, ref) });
 });
 TooltipContent.displayName = "TooltipContent";
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
 import { ark } from '../factory.js';
 import { usePresenceContext } from '../presence/use-presence-context.js';
 import { useTooltipContext } from './use-tooltip-context.js';
@@ -9,11 +10,11 @@ import { useTooltipContext } from './use-tooltip-context.js';
 const TooltipContent = forwardRef((props, ref) => {
   const tooltip = useTooltipContext();
   const presence = usePresenceContext();
-  const mergedProps = mergeProps(tooltip.getContentProps(), presence.getPresenceProps(ref), props);
+  const mergedProps = mergeProps(tooltip.getContentProps(), presence.getPresenceProps(), props);
   if (presence.unmounted) {
     return null;
   }
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 TooltipContent.displayName = "TooltipContent";