@ark-ui/solid/dist/chunk/FKF6FOYL.jsx

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

import {
  PresenceProvider,
  splitPresenceProps,
  usePresence,
  usePresenceContext
} from "./2P5Y3YCK.jsx";
import {
  composeRefs
} from "./PT2CJE3O.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
  useLocaleContext
} from "./JFOWNFC7.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  createContext
} from "./UZJJWJQM.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// src/components/menu/menu-arrow.tsx
import { mergeProps } from "@zag-js/solid";

// src/components/menu/use-menu-context.ts
var [MenuProvider, useMenuContext] = createContext({
  hookName: "useMenuContext",
  providerName: "<MenuProvider />",
  strict: false
});

// src/components/menu/menu-arrow.tsx
var MenuArrow = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps(() => context().getArrowProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-arrow-tip.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var MenuArrowTip = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps2(() => context().getArrowTipProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-checkbox-item.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
import { createMemo } from "solid-js";

// src/components/menu/use-menu-item-context.ts
var [MenuItemProvider, useMenuItemContext] = createContext({
  hookName: "useMenuItemContext",
  providerName: "<MenuItemProvider />"
});

// src/components/menu/use-menu-option-item-props-context.ts
var [MenuItemPropsProvider, useMenuItemPropsContext] = createContext({
  hookName: "useMenuItemPropsContext",
  providerName: "<MenuItemPropsProvider />"
});

// src/components/menu/menu-checkbox-item.tsx
var MenuCheckboxItem = (props) => {
  const [partialOptionItemProps, localProps] = createSplitProps()(props, [
    "checked",
    "closeOnSelect",
    "disabled",
    "onCheckedChange",
    "value",
    "valueText"
  ]);
  const optionItemProps = mergeProps3(partialOptionItemProps, {
    type: "checkbox"
  });
  const context = useMenuContext();
  const mergedProps = mergeProps3(() => context().getOptionItemProps(optionItemProps), localProps);
  const optionItemState = createMemo(() => context().getItemState(optionItemProps));
  return <MenuItemPropsProvider value={optionItemProps}>
      <MenuItemProvider value={optionItemState}>
        <ark.div {...mergedProps} />
      </MenuItemProvider>
    </MenuItemPropsProvider>;
};

// src/components/menu/menu-content.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
import { Show } from "solid-js";
var MenuContent = (props) => {
  const context = useMenuContext();
  const presenceContext = usePresenceContext();
  const mergedProps = mergeProps4(
    () => context().getContentProps(),
    () => presenceContext().presenceProps,
    props
  );
  return <Show when={!presenceContext().unmounted}>
      <ark.div {...mergedProps} ref={composeRefs(presenceContext().ref, props.ref)} />
    </Show>;
};

// src/components/menu/menu-context.tsx
var MenuContext = (props) => props.children(useMenuContext());

// src/components/menu/menu-context-trigger.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var MenuContextTrigger = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps5(() => context().getContextTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/menu/menu-indicator.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var MenuIndicator = (props) => {
  const context = useMenuContext();
  const mergedProps = mergeProps6(() => context().getIndicatorProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-item.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
import { createEffect, createMemo as createMemo2, onCleanup } from "solid-js";
var MenuItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, [
    "closeOnSelect",
    "disabled",
    "value",
    "valueText",
    "onSelect"
  ]);
  const context = useMenuContext();
  const mergedProps = mergeProps7(() => context().getItemProps(itemProps), localProps);
  const itemState = createMemo2(() => context().getItemState(itemProps));
  createEffect(() => {
    const cleanup = context().addItemListener({ id: itemState().id, onSelect: itemProps.onSelect });
    onCleanup(() => cleanup?.());
  });
  return <MenuItemPropsProvider value={itemProps}>
      <MenuItemProvider value={itemState}>
        <ark.div {...mergedProps} />
      </MenuItemProvider>
    </MenuItemPropsProvider>;
};

// src/components/menu/menu-item-context.tsx
var MenuItemContext = (props) => props.children(useMenuItemContext());

// src/components/menu/menu-item-group.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
import { createUniqueId } from "solid-js";

// src/components/menu/use-menu-item-group-context.ts
var [MenuItemGroupProvider, useMenuItemGroupContext] = createContext({
  hookName: "useMenuItemGroupContext",
  providerName: "<MenuItemGroupProvider />"
});

// src/components/menu/menu-item-group.tsx
var MenuItemGroup = (props) => {
  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
  const itemGroupProps = mergeProps8({ id: createUniqueId() }, optionalItemGroupProps);
  const menu2 = useMenuContext();
  const mergedProps = mergeProps8(() => menu2().getItemGroupProps(itemGroupProps), localProps);
  return <MenuItemGroupProvider value={itemGroupProps}>
      <ark.div {...mergedProps} />
    </MenuItemGroupProvider>;
};

// src/components/menu/menu-item-group-label.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var MenuItemGroupLabel = (props) => {
  const context = useMenuContext();
  const itemGroupContext = useMenuItemGroupContext();
  const mergedProps = mergeProps9(context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-item-indicator.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var MenuItemIndicator = (props) => {
  const context = useMenuContext();
  const itemProps = useMenuItemPropsContext();
  const mergedProps = mergeProps10(() => context().getItemIndicatorProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-item-text.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
var MenuItemText = (props) => {
  const context = useMenuContext();
  const itemProps = useMenuItemPropsContext();
  const mergedProps = mergeProps11(() => context().getItemTextProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/menu/menu-positioner.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var MenuPositioner = (props) => {
  const context = useMenuContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps12(() => context().getPositionerProps(), props);
  return <Show2 when={!presence().unmounted}>
      <ark.div {...mergedProps} />
    </Show2>;
};

// src/components/menu/menu-radio-item.tsx
import { mergeProps as mergeProps13 } from "@zag-js/solid";
import { createMemo as createMemo3 } from "solid-js";
var MenuRadioItem = (props) => {
  const [partialItemProps, localProps] = createSplitProps()(props, [
    "closeOnSelect",
    "disabled",
    "value",
    "valueText"
  ]);
  const context = useMenuContext();
  const itemGroup = useMenuItemGroupContext();
  const optionItemProps = mergeProps13(partialItemProps, () => ({
    type: "radio",
    checked: itemGroup.value === partialItemProps.value,
    onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
  }));
  const mergedProps = mergeProps13(() => context().getOptionItemProps(optionItemProps), localProps);
  const optionItemState = createMemo3(() => context().getOptionItemState(optionItemProps));
  return <MenuItemPropsProvider value={optionItemProps}>
      <MenuItemProvider value={optionItemState}>
        <ark.div {...mergedProps} />
      </MenuItemProvider>
    </MenuItemPropsProvider>;
};

// src/components/menu/menu-radio-item-group.tsx
import { mergeProps as mergeProps14 } from "@zag-js/solid";
import { createUniqueId as createUniqueId2 } from "solid-js";
var MenuRadioItemGroup = (props) => {
  const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
    "id",
    "onValueChange",
    "value"
  ]);
  const context = useMenuContext();
  const itemGroupProps = mergeProps14({ id: createUniqueId2() }, optionalItemGroupProps);
  const mergedProps = mergeProps14(() => context().getItemGroupProps(itemGroupProps), localProps);
  return <MenuItemGroupProvider value={itemGroupProps}>
      <ark.div {...mergedProps} />
    </MenuItemGroupProvider>;
};

// src/components/menu/menu-root.tsx
import { mergeProps as mergeProps15 } from "@zag-js/solid";
import { onMount } from "solid-js";

// src/components/menu/use-menu.ts
import * as menu from "@zag-js/menu";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo4, createUniqueId as createUniqueId3 } from "solid-js";
var useMenu = (props) => {
  const id = createUniqueId3();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo4(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(menu.machine, machineProps);
  const api = createMemo4(() => menu.connect(service, normalizeProps));
  return {
    api,
    service
  };
};

// src/components/menu/use-menu-machine-context.ts
var [MenuMachineProvider, useMenuMachineContext] = createContext({
  hookName: "useMenuMachineContext",
  providerName: "<MenuMachineProvider />",
  strict: false
});

// src/components/menu/use-menu-trigger-item-context.ts
var [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
  hookName: "useMenuMachineContext",
  providerName: "<MenuMachineProvider />",
  strict: false
});

// src/components/menu/menu-root.tsx
var MenuRoot = (props) => {
  const [presenceProps, menuProps] = splitPresenceProps(props);
  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
    "anchorPoint",
    "aria-label",
    "closeOnSelect",
    "composite",
    "defaultHighlightedValue",
    "defaultOpen",
    "highlightedValue",
    "id",
    "ids",
    "loopFocus",
    "navigate",
    "onEscapeKeyDown",
    "onFocusOutside",
    "onHighlightChange",
    "onInteractOutside",
    "onOpenChange",
    "onPointerDownOutside",
    "onRequestDismiss",
    "onSelect",
    "open",
    "positioning",
    "typeahead"
  ]);
  const parentApi = useMenuContext();
  const parentMachine = useMenuMachineContext();
  const menu2 = useMenu(useMenuProps);
  const presenceApi = usePresence(mergeProps15(presenceProps, () => ({ present: menu2.api().open })));
  onMount(() => {
    if (!parentMachine) return;
    parentApi?.().setChild(menu2.service);
    menu2.api().setParent(parentMachine);
  });
  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu2.api());
  return <MenuTriggerItemProvider value={triggerItemContext}>
      <MenuMachineProvider value={menu2.service}>
        <MenuProvider value={menu2.api}>
          <PresenceProvider value={presenceApi}>{localProps.children}</PresenceProvider>
        </MenuProvider>
      </MenuMachineProvider>
    </MenuTriggerItemProvider>;
};

// src/components/menu/menu-root-provider.tsx
import { mergeProps as mergeProps16 } from "@zag-js/solid";
import { createEffect as createEffect2 } from "solid-js";
var MenuRootProvider = (props) => {
  const parentApi = useMenuContext();
  const parentMachine = useMenuMachineContext();
  const [presenceProps, menuProps] = splitPresenceProps(props);
  const presenceApi = usePresence(mergeProps16(presenceProps, () => ({ present: menuProps.value.api().open })));
  createEffect2(() => {
    if (!parentMachine) return;
    parentApi?.().setChild(menuProps.value.service);
    menuProps.value.api().setParent(parentMachine);
  });
  const triggerItemContext = () => parentApi?.().getTriggerItemProps(menuProps.value.api());
  return <MenuTriggerItemProvider value={triggerItemContext}>
      <MenuMachineProvider value={menuProps.value.service}>
        <MenuProvider value={menuProps.value.api}>
          <PresenceProvider value={presenceApi}>{menuProps.children}</PresenceProvider>
        </MenuProvider>
      </MenuMachineProvider>
    </MenuTriggerItemProvider>;
};

// src/components/menu/menu-separator.tsx
import { mergeProps as mergeProps17 } from "@zag-js/solid";
var MenuSeparator = (props) => {
  const menu2 = useMenuContext();
  const mergedProps = mergeProps17(() => menu2().getSeparatorProps(), props);
  return <ark.hr {...mergedProps} />;
};

// src/components/menu/menu-trigger.tsx
import { mergeProps as mergeProps18 } from "@zag-js/solid";
var MenuTrigger = (props) => {
  const api = useMenuContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps18(
    () => api().getTriggerProps(),
    () => ({ "aria-controls": presenceApi().unmounted && null }),
    props
  );
  return <ark.button {...mergedProps} />;
};

// src/components/menu/menu-trigger-item.tsx
import { mergeProps as mergeProps19 } from "@zag-js/solid";
var MenuTriggerItem = (props) => {
  const getTriggerItemProps = useMenuTriggerItemContext();
  const mergedProps = mergeProps19(() => getTriggerItemProps?.(), props);
  return <MenuItemPropsProvider value={{ value: mergedProps["data-value"] }}>
      <ark.div {...mergedProps} />
    </MenuItemPropsProvider>;
};

// src/components/menu/menu.ts
var menu_exports = {};
__export(menu_exports, {
  Arrow: () => MenuArrow,
  ArrowTip: () => MenuArrowTip,
  CheckboxItem: () => MenuCheckboxItem,
  Content: () => MenuContent,
  Context: () => MenuContext,
  ContextTrigger: () => MenuContextTrigger,
  Indicator: () => MenuIndicator,
  Item: () => MenuItem,
  ItemContext: () => MenuItemContext,
  ItemGroup: () => MenuItemGroup,
  ItemGroupLabel: () => MenuItemGroupLabel,
  ItemIndicator: () => MenuItemIndicator,
  ItemText: () => MenuItemText,
  Positioner: () => MenuPositioner,
  RadioItem: () => MenuRadioItem,
  RadioItemGroup: () => MenuRadioItemGroup,
  Root: () => MenuRoot,
  RootProvider: () => MenuRootProvider,
  Separator: () => MenuSeparator,
  Trigger: () => MenuTrigger,
  TriggerItem: () => MenuTriggerItem
});

export {
  useMenuContext,
  MenuArrow,
  MenuArrowTip,
  useMenuItemContext,
  MenuCheckboxItem,
  MenuContent,
  MenuContext,
  MenuContextTrigger,
  MenuIndicator,
  MenuItem,
  MenuItemContext,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuItemIndicator,
  MenuItemText,
  MenuPositioner,
  MenuRadioItem,
  MenuRadioItemGroup,
  useMenu,
  MenuRoot,
  MenuRootProvider,
  MenuSeparator,
  MenuTrigger,
  MenuTriggerItem,
  menu_exports
};