UNPKG

@ark-ui/solid

Version:

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

140 lines (133 loc) 5.1 kB
import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './SIT3D7TL.js'; import { composeRefs } from './ROP6QZQ7.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 hoverCard from '@zag-js/hover-card'; export { anatomy } from '@zag-js/hover-card'; // src/components/hover-card/use-hover-card-context.ts var [HoverCardProvider, useHoverCardContext] = createContext({ hookName: "useHoverCardContext", providerName: "<HoverCardProvider />" }); // src/components/hover-card/hover-card-arrow.tsx var HoverCardArrow = (props) => { const hoverCard2 = useHoverCardContext(); const mergedProps = mergeProps(() => hoverCard2().getArrowProps(), props); return createComponent(ark.div, mergedProps); }; var HoverCardArrowTip = (props) => { const hoverCard2 = useHoverCardContext(); const mergedProps = mergeProps(() => hoverCard2().getArrowTipProps(), props); return createComponent(ark.div, mergedProps); }; var HoverCardContent = (props) => { const api = useHoverCardContext(); 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/hover-card/hover-card-context.tsx var HoverCardContext = (props) => props.children(useHoverCardContext()); var HoverCardPositioner = (props) => { const api = useHoverCardContext(); 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 useHoverCard = (props) => { const locale = useLocaleContext(); const environment = useEnvironmentContext(); const id = createUniqueId(); const machineProps = createMemo(() => ({ id, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(hoverCard.machine, machineProps); return createMemo(() => hoverCard.connect(service, normalizeProps)); }; // src/components/hover-card/hover-card-root.tsx var HoverCardRoot = (props) => { const [presenceProps, hoverCardProps] = splitPresenceProps(props); const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ["closeDelay", "defaultOpen", "id", "ids", "onFocusOutside", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "open", "openDelay", "positioning"]); const api = useHoverCard(useHoverCardProps); const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open }))); return createComponent(HoverCardProvider, { value: api, get children() { return createComponent(PresenceProvider, { value: apiPresence, get children() { return localProps.children; } }); } }); }; var HoverCardRootProvider = (props) => { const [presenceProps, hoverCardProps] = splitPresenceProps(props); const presence = usePresence(mergeProps(presenceProps, () => ({ present: hoverCardProps.value().open }))); return createComponent(HoverCardProvider, { get value() { return hoverCardProps.value; }, get children() { return createComponent(PresenceProvider, { value: presence, get children() { return hoverCardProps.children; } }); } }); }; var HoverCardTrigger = (props) => { const hoverCard2 = useHoverCardContext(); const mergedProps = mergeProps(() => hoverCard2().getTriggerProps(), props); return createComponent(ark.button, mergedProps); }; // src/components/hover-card/hover-card.ts var hover_card_exports = {}; __export(hover_card_exports, { Arrow: () => HoverCardArrow, ArrowTip: () => HoverCardArrowTip, Content: () => HoverCardContent, Context: () => HoverCardContext, Positioner: () => HoverCardPositioner, Root: () => HoverCardRoot, RootProvider: () => HoverCardRootProvider, Trigger: () => HoverCardTrigger }); export { HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardRootProvider, HoverCardTrigger, hover_card_exports, useHoverCard, useHoverCardContext };