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

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

import { usePresence, splitPresenceProps, PresenceProvider, usePresenceContext } from './FW6EZLZL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { tourAnatomy } from './NYBIYPS4.js';
import { useRenderStrategyContext, splitRenderStrategyProps, RenderStrategyProvider } from './GUFIKGZ6.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 tour from '@zag-js/tour';

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

// src/components/tour/tour-action-trigger.tsx
var TourActionTrigger = (props) => {
  const [actionTriggerProps, localProps] = createSplitProps()(props, ["action"]);
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getActionTriggerProps(actionTriggerProps), localProps);
  return createComponent(ark.button, mergeProps$1(mergedProps, {
    get children() {
      return mergedProps.children || actionTriggerProps.action.label;
    }
  }));
};

// src/components/tour/tour-actions.tsx
var TourActions = (props) => {
  const tour2 = useTourContext();
  return props.children(() => tour2().step?.actions ?? []);
};
var TourArrow = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getArrowProps(), props);
  return createComponent(Show, {
    get when() {
      return tour2().step?.arrow;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var TourArrowTip = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getArrowTipProps(), props);
  return createComponent(ark.div, mergedProps);
};
var TourBackdrop = (props) => {
  const tour2 = useTourContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presence = usePresence(mergeProps(renderStrategyProps, () => ({
    present: tour2().open
  })));
  const mergedProps = mergeProps(() => tour2().getBackdropProps(), () => presence().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        get hidden() {
          return !tour2().step?.backdrop;
        },
        ref(r$) {
          var _ref$ = composeRefs(presence().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};
var TourCloseTrigger = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getCloseTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var TourContent = (props) => {
  const tour2 = useTourContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presence = usePresence(mergeProps(renderStrategyProps, () => ({
    present: tour2().open
  })));
  const mergedProps = mergeProps(() => tour2().getContentProps(), () => presence().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presence().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/tour/tour-context.tsx
var TourContext = (props) => props.children(useTourContext());
var TourControl = (props) => {
  const mergedProps = mergeProps(() => tourAnatomy.build().control.attrs, props);
  return createComponent(ark.div, mergedProps);
};
var TourDescription = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getDescriptionProps(), props);
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return mergedProps.children || tour2().step?.description;
    }
  }));
};
var TourPositioner = (props) => {
  const tour2 = useTourContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps(() => tour2().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var TourProgressText = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getProgressTextProps(), props);
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return mergedProps.children || tour2().getProgressText();
    }
  }));
};
var TourRoot = (props) => {
  const [presenceProps, rootProps] = splitPresenceProps(props);
  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
  const presence = usePresence(mergeProps(presenceProps, () => ({
    present: rootProps.tour().open
  })));
  return createComponent(TourProvider, {
    get value() {
      return rootProps.tour;
    },
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(PresenceProvider, {
            value: presence,
            get children() {
              return rootProps.children;
            }
          });
        }
      });
    }
  });
};
var TourSpotlight = (props) => {
  const tour2 = useTourContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: tour2().open
  })));
  const mergedProps = mergeProps(() => tour2().getSpotlightProps(), () => presenceApi().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        get hidden() {
          return !tour2().open || !tour2().step?.target?.();
        },
        ref(r$) {
          var _ref$ = composeRefs(presenceApi().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};
var TourTitle = (props) => {
  const tour2 = useTourContext();
  const mergedProps = mergeProps(() => tour2().getTitleProps(), props);
  return createComponent(ark.h2, mergeProps$1(mergedProps, {
    get children() {
      return mergedProps.children || tour2().step?.title;
    }
  }));
};
var useTour = (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(tour.machine, machineProps);
  return createMemo(() => tour.connect(service, normalizeProps));
};

// src/components/tour/tour.ts
var tour_exports = {};
__export(tour_exports, {
  ActionTrigger: () => TourActionTrigger,
  Actions: () => TourActions,
  Arrow: () => TourArrow,
  ArrowTip: () => TourArrowTip,
  Backdrop: () => TourBackdrop,
  CloseTrigger: () => TourCloseTrigger,
  Content: () => TourContent,
  Context: () => TourContext,
  Control: () => TourControl,
  Description: () => TourDescription,
  Positioner: () => TourPositioner,
  ProgressText: () => TourProgressText,
  Root: () => TourRoot,
  Spotlight: () => TourSpotlight,
  Title: () => TourTitle
});

export { TourActionTrigger, TourActions, TourArrow, TourArrowTip, TourBackdrop, TourCloseTrigger, TourContent, TourContext, TourControl, TourDescription, TourPositioner, TourProgressText, TourRoot, TourSpotlight, TourTitle, tour_exports, useTour, useTourContext };