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

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

import { usePresenceContext, splitPresenceProps, usePresence, PresenceProvider } from './SIT3D7TL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './QFAL6GWC.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.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 dialog from '@zag-js/dialog';
export { anatomy } from '@zag-js/dialog';

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

// src/components/dialog/dialog-backdrop.tsx
var DialogBackdrop = (props) => {
  const api = useDialogContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: api().open
  })));
  const mergedProps = mergeProps(() => api().getBackdropProps(), () => 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$);
        }
      }));
    }
  });
};
var DialogCloseTrigger = (props) => {
  const dialog2 = useDialogContext();
  const mergedProps = mergeProps(() => dialog2().getCloseTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var DialogContent = (props) => {
  const api = useDialogContext();
  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/dialog/dialog-context.tsx
var DialogContext = (props) => props.children(useDialogContext());
var DialogDescription = (props) => {
  const dialog2 = useDialogContext();
  const mergedProps = mergeProps(() => dialog2().getDescriptionProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DialogPositioner = (props) => {
  const api = useDialogContext();
  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 useDialog = (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(dialog.machine, machineProps);
  return createMemo(() => dialog.connect(service, normalizeProps));
};

// src/components/dialog/dialog-root.tsx
var DialogRoot = (props) => {
  const [presenceProps, dialogProps] = splitPresenceProps(props);
  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ["aria-label", "closeOnEscape", "closeOnInteractOutside", "defaultOpen", "finalFocusEl", "id", "ids", "initialFocusEl", "modal", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "open", "persistentElements", "preventScroll", "restoreFocus", "role", "trapFocus"]);
  const api = useDialog(useDialogProps);
  const apiPresence = usePresence(mergeProps(presenceProps, () => ({
    present: api().open
  })));
  return createComponent(DialogProvider, {
    value: api,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(PresenceProvider, {
            value: apiPresence,
            get children() {
              return localProps.children;
            }
          });
        }
      });
    }
  });
};
var DialogRootProvider = (props) => {
  const [presenceProps, dialogProps] = splitPresenceProps(props);
  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
  const apiPresence = usePresence(mergeProps(presenceProps, () => ({
    present: dialogProps.value().open
  })));
  return createComponent(DialogProvider, {
    get value() {
      return dialogProps.value;
    },
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(PresenceProvider, {
            value: apiPresence,
            get children() {
              return dialogProps.children;
            }
          });
        }
      });
    }
  });
};
var DialogTitle = (props) => {
  const dialog2 = useDialogContext();
  const mergedProps = mergeProps(() => dialog2().getTitleProps(), props);
  return createComponent(ark.h2, mergedProps);
};
var DialogTrigger = (props) => {
  const api = useDialogContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), () => ({
    "aria-controls": presenceApi().unmounted && null
  }), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/dialog/dialog.ts
var dialog_exports = {};
__export(dialog_exports, {
  Backdrop: () => DialogBackdrop,
  CloseTrigger: () => DialogCloseTrigger,
  Content: () => DialogContent,
  Context: () => DialogContext,
  Description: () => DialogDescription,
  Positioner: () => DialogPositioner,
  Root: () => DialogRoot,
  RootProvider: () => DialogRootProvider,
  Title: () => DialogTitle,
  Trigger: () => DialogTrigger
});

export { DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogRootProvider, DialogTitle, DialogTrigger, dialog_exports, useDialog, useDialogContext };