@ark-ui/react/dist/components/swap/use-swap.js

A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.

'use client';
import { usePresence } from '../presence/use-presence.js';
import { parts } from './swap.anatomy.js';

const useSwap = (props = {}) => {
  const { swap = false, lazyMount, unmountOnExit } = props;
  const presenceProps = { lazyMount, unmountOnExit };
  const onPresence = usePresence({ present: swap, ...presenceProps, skipAnimationOnMount: true });
  const offPresence = usePresence({ present: !swap, ...presenceProps, skipAnimationOnMount: true });
  return {
    swap,
    onPresence,
    offPresence,
    getRootProps() {
      return {
        ...parts.root.attrs,
        "data-swap": swap ? "on" : "off",
        style: { display: "inline-grid" }
      };
    },
    getIndicatorProps({ type }) {
      const presence = type === "on" ? onPresence : offPresence;
      return {
        ...parts.indicator.attrs,
        ...presence.getPresenceProps(),
        "data-type": type,
        style: { gridArea: "1 / 1", display: "inline-flex" }
      };
    }
  };
};

export { useSwap };