@ark-ui/solid/dist/chunk/S7F5ETXJ.js

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

import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './FW6EZLZL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './5QLLQM7E.js';
import { useLocaleContext } from './RVOPDSQY.js';
import { runIfFn } from './DT73WLR4.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createUniqueId, createMemo } from 'solid-js';
import * as popover from '@zag-js/popover';

// src/components/popover/use-popover-context.ts
var [PopoverProvider, usePopoverContext] = createContext({
  hookName: "usePopoverContext",
  providerName: "<PopoverProvider />"
});

// src/components/popover/popover-anchor.tsx
var PopoverAnchor = (props) => {
  const api = usePopoverContext();
  const mergedProps = mergeProps(() => api().getAnchorProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverArrow = (props) => {
  const popover2 = usePopoverContext();
  const mergedProps = mergeProps(() => popover2().getArrowProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverArrowTip = (props) => {
  const popover2 = usePopoverContext();
  const mergedProps = mergeProps(() => popover2().getArrowTipProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverCloseTrigger = (props) => {
  const api = usePopoverContext();
  const mergedProps = mergeProps(() => api().getCloseTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var PopoverContent = (props) => {
  const api = usePopoverContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presenceApi().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/popover/popover-context.tsx
var PopoverContext = (props) => props.children(usePopoverContext());
var PopoverDescription = (props) => {
  const api = usePopoverContext();
  const mergedProps = mergeProps(() => api().getDescriptionProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverIndicator = (props) => {
  const popover2 = usePopoverContext();
  const mergedProps = mergeProps(() => popover2().getIndicatorProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverPositioner = (props) => {
  const api = usePopoverContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var usePopover = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(popover.machine, machineProps);
  return createMemo(() => popover.connect(service, normalizeProps));
};

// src/components/popover/popover-root.tsx
var PopoverRoot = (props) => {
  const [presenceProps, popoverProps] = splitPresenceProps(props);
  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ["autoFocus", "closeOnEscape", "closeOnInteractOutside", "defaultOpen", "id", "ids", "initialFocusEl", "modal", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onRequestDismiss", "open", "persistentElements", "portalled", "positioning"]);
  const api = usePopover(usePopoverProps);
  const apiPresence = usePresence(mergeProps(presenceProps, () => ({
    present: api().open
  })));
  return createComponent(PopoverProvider, {
    value: api,
    get children() {
      return createComponent(PresenceProvider, {
        value: apiPresence,
        get children() {
          return localProps.children;
        }
      });
    }
  });
};
var PopoverRootProvider = (props) => {
  const [presenceProps, popoverProps] = splitPresenceProps(props);
  const presence = usePresence(mergeProps(presenceProps, () => ({
    present: popoverProps.value().open
  })));
  return createComponent(PopoverProvider, {
    get value() {
      return popoverProps.value;
    },
    get children() {
      return createComponent(PresenceProvider, {
        value: presence,
        get children() {
          return popoverProps.children;
        }
      });
    }
  });
};
var PopoverTitle = (props) => {
  const api = usePopoverContext();
  const mergedProps = mergeProps(() => api().getTitleProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PopoverTrigger = (props) => {
  const api = usePopoverContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), () => ({
    "aria-controls": presenceApi().unmounted && null
  }), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/popover/popover.ts
var popover_exports = {};
__export(popover_exports, {
  Anchor: () => PopoverAnchor,
  Arrow: () => PopoverArrow,
  ArrowTip: () => PopoverArrowTip,
  CloseTrigger: () => PopoverCloseTrigger,
  Content: () => PopoverContent,
  Context: () => PopoverContext,
  Description: () => PopoverDescription,
  Indicator: () => PopoverIndicator,
  Positioner: () => PopoverPositioner,
  Root: () => PopoverRoot,
  RootProvider: () => PopoverRootProvider,
  Title: () => PopoverTitle,
  Trigger: () => PopoverTrigger
});

export { PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverRootProvider, PopoverTitle, PopoverTrigger, popover_exports, usePopover, usePopoverContext };