@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.2

package/source/dialog/use-dialog.js

@@ -0,0 +1,10 @@
+import * as dialog from '@zag-js/dialog';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useDialog = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(dialog.machine(context), { context });
+    return createMemo(() => dialog.connect(state, send, normalizeProps));
+};

package/source/editable/editable-area.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableArea = (props) => {
+    const editable = useEditableContext();
+    const areaProps = mergeProps(() => editable().areaProps, props);
+    return <ark.div {...areaProps}/>;
+};

package/source/editable/editable-cancel-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableCancelTrigger = (props) => {
+    const editable = useEditableContext();
+    const triggerProps = mergeProps(() => editable().cancelTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/editable/editable-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [EditableProvider, useEditableContext] = createContext({
+    hookName: 'useEditableContext',
+    providerName: '<EditableProvider />',
+});

package/source/editable/editable-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableControl = (props) => {
+    const editable = useEditableContext();
+    const controlProps = mergeProps(() => editable().controlProps, props);
+    return <ark.div {...controlProps}/>;
+};

package/source/editable/editable-edit-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableEditTrigger = (props) => {
+    const editable = useEditableContext();
+    const triggerProps = mergeProps(() => editable().editTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/editable/editable-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableInput = (props) => {
+    const editable = useEditableContext();
+    const inputProps = mergeProps(() => editable().inputProps, props);
+    return <ark.input {...inputProps}/>;
+};

package/source/editable/editable-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableLabel = (props) => {
+    const editable = useEditableContext();
+    const labelProps = mergeProps(() => editable().labelProps, props);
+    return <ark.label {...labelProps}/>;
+};

package/source/editable/editable-preview.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditablePreview = (props) => {
+    const editable = useEditableContext();
+    const previewProps = mergeProps(() => editable().previewProps, props);
+    return <ark.span {...previewProps}/>;
+};

package/source/editable/editable-submit-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useEditableContext } from './editable-context';
+export const EditableSubmitTrigger = (props) => {
+    const dialog = useEditableContext();
+    const triggerProps = mergeProps(() => dialog().submitTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/editable/editable.jsx

@@ -0,0 +1,44 @@
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { EditableProvider } from './editable-context';
+import { useEditable } from './use-editable';
+export const Editable = (props) => {
+    const [useEditableProps, restProps] = createSplitProps()(props, [
+        'activationMode',
+        'autoResize',
+        'dir',
+        'disabled',
+        'finalFocusEl',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'maxLength',
+        'name',
+        'onEdit',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueCommit',
+        'onValueRevert',
+        'placeholder',
+        'readOnly',
+        'selectOnFocus',
+        'startWithEditView',
+        'submitMode',
+        'translations',
+        'value',
+    ]);
+    const editable = useEditable(useEditableProps);
+    const [childrenProps, localProps] = splitProps(restProps, ['children']);
+    const rootProps = mergeProps(() => editable().rootProps, localProps);
+    const getChildren = () => runIfFn(childrenProps.children, editable);
+    return (<EditableProvider value={editable}>
+      <ark.div {...rootProps}>{getChildren()}</ark.div>
+    </EditableProvider>);
+};

package/source/editable/index.js

@@ -0,0 +1,22 @@
+import { Editable as EditableRoot } from './editable';
+import { EditableArea } from './editable-area';
+import { EditableCancelTrigger } from './editable-cancel-trigger';
+import { useEditableContext } from './editable-context';
+import { EditableControl } from './editable-control';
+import { EditableEditTrigger } from './editable-edit-trigger';
+import { EditableInput } from './editable-input';
+import { EditableLabel } from './editable-label';
+import { EditablePreview } from './editable-preview';
+import { EditableSubmitTrigger } from './editable-submit-trigger';
+const Editable = Object.assign(EditableRoot, {
+    Root: EditableRoot,
+    Area: EditableArea,
+    CancelTrigger: EditableCancelTrigger,
+    Control: EditableControl,
+    EditTrigger: EditableEditTrigger,
+    Input: EditableInput,
+    Label: EditableLabel,
+    Preview: EditablePreview,
+    SubmitTrigger: EditableSubmitTrigger,
+});
+export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };

package/source/editable/use-editable.js

@@ -0,0 +1,10 @@
+import * as editable from '@zag-js/editable';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useEditable = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(editable.machine(context), { context });
+    return createMemo(() => editable.connect(state, send, normalizeProps));
+};

package/source/environment/environment-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../create-context';
+export const [EnvironmentProvider, useEnvironmentContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+});

package/source/environment/environment.jsx

@@ -0,0 +1,11 @@
+import { createMemo } from 'solid-js';
+import { EnvironmentProvider } from './environment-context';
+export const Environment = (props) => {
+    // eslint-disable-next-line prefer-const
+    let spanRef = undefined;
+    const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+    return (<EnvironmentProvider value={currentEnv()}>
+      {props.children}
+      {!props.value && <span hidden ref={spanRef}/>}
+    </EnvironmentProvider>);
+};

package/source/environment/index.js

@@ -0,0 +1,6 @@
+import { Environment as EnvironmentRoot } from './environment';
+import { useEnvironmentContext } from './environment-context';
+const Environment = Object.assign(EnvironmentRoot, {
+    Root: EnvironmentRoot,
+});
+export { Environment, useEnvironmentContext };

package/source/factory.jsx

@@ -0,0 +1,38 @@
+import { children, createEffect, splitProps, } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { spread } from './spread';
+import { ssrSpread } from './ssr-spread';
+function withAsChild(Component) {
+    return function jsx(props) {
+        const [localProps, restProps] = splitProps(props, ['asChild', 'children']);
+        if (!localProps.asChild) {
+            return (<Dynamic component={Component} {...restProps}>
+          {localProps.children}
+        </Dynamic>);
+        }
+        const getChildren = children(() => ssrSpread(localProps.children, restProps));
+        createEffect(() => {
+            const children = getChildren();
+            if (children instanceof HTMLElement) {
+                spread(children, restProps);
+            }
+        });
+        return getChildren;
+    };
+}
+function jsxFactory() {
+    const cache = new Map();
+    return new Proxy(withAsChild, {
+        apply(target, thisArg, argArray) {
+            return withAsChild(argArray[0]);
+        },
+        get(_, element) {
+            const asElement = element;
+            if (!cache.has(asElement)) {
+                cache.set(asElement, withAsChild(asElement));
+            }
+            return cache.get(asElement);
+        },
+    });
+}
+export const ark = jsxFactory();

package/source/filter-object.js

@@ -0,0 +1,7 @@
+import { BooleanAttributes } from './constants';
+import { isEmpty } from './is-empty';
+import { isFunction } from './is-function';
+export const filterObject = (obj, fn) => Object.fromEntries(Object.entries(obj).filter(fn));
+export const filterEmptyValues = (obj) => filterObject(obj, ([, v]) => !isEmpty(v));
+export const filterFunctionValues = (obj) => filterObject(obj, ([, v]) => !isFunction(v));
+export const filterBooleanAttributeValues = (obj) => filterObject(obj, ([k, v]) => !(BooleanAttributes.has(k) && !v));

package/source/hover-card/hover-card-arrow-tip.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './hover-card-context';
+export const HoverCardArrowTip = (props) => {
+    const hoverCard = useHoverCardContext();
+    const tipProps = mergeProps(() => hoverCard().arrowTipProps, props);
+    return <ark.div {...tipProps}/>;
+};

package/source/hover-card/hover-card-arrow.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './hover-card-context';
+export const HoverCardArrow = (props) => {
+    const hoverCard = useHoverCardContext();
+    const arrowProps = mergeProps(() => hoverCard().arrowProps, props);
+    return <ark.div {...arrowProps}/>;
+};

package/source/hover-card/hover-card-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useHoverCardContext } from './hover-card-context';
+export const HoverCardContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useHoverCardContext();
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/hover-card/hover-card-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [HoverCardProvider, useHoverCardContext] = createContext({
+    hookName: 'useHoverCardContext',
+    providerName: '<HoverCardProvider />',
+});

package/source/hover-card/hover-card-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './hover-card-context';
+export const HoverCardPositioner = (props) => {
+    const hoverCard = useHoverCardContext();
+    const positionerProps = mergeProps(() => hoverCard().positionerProps, props);
+    return <ark.div {...positionerProps}/>;
+};

package/source/hover-card/hover-card-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useHoverCardContext } from './hover-card-context';
+export const HoverCardTrigger = (props) => {
+    const hoverCard = useHoverCardContext();
+    const triggerProps = mergeProps(() => hoverCard().triggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/hover-card/hover-card.jsx

@@ -0,0 +1,20 @@
+import { createSplitProps } from '../create-split-props';
+import { runIfFn } from '../run-if-fn';
+import { HoverCardProvider } from './hover-card-context';
+import { useHoverCard } from './use-hover-card';
+export const HoverCard = (props) => {
+    const [hoverCardProps, localProps] = createSplitProps()(props, [
+        'closeDelay',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onOpenChange',
+        'open',
+        'openDelay',
+        'positioning',
+    ]);
+    const api = useHoverCard(hoverCardProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return <HoverCardProvider value={api}>{getChildren()}</HoverCardProvider>;
+};

package/source/hover-card/index.js

@@ -0,0 +1,16 @@
+import { HoverCard as HoverCardRoot } from './hover-card';
+import { HoverCardArrow } from './hover-card-arrow';
+import { HoverCardArrowTip } from './hover-card-arrow-tip';
+import { HoverCardContent } from './hover-card-content';
+import { useHoverCardContext } from './hover-card-context';
+import { HoverCardPositioner } from './hover-card-positioner';
+import { HoverCardTrigger } from './hover-card-trigger';
+const HoverCard = Object.assign(HoverCardRoot, {
+    Root: HoverCardRoot,
+    Arrow: HoverCardArrow,
+    ArrowTip: HoverCardArrowTip,
+    Content: HoverCardContent,
+    Positioner: HoverCardPositioner,
+    Trigger: HoverCardTrigger,
+});
+export { HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, useHoverCardContext, };

package/source/hover-card/use-hover-card.js

@@ -0,0 +1,10 @@
+import * as hoverCard from '@zag-js/hover-card';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useHoverCard = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(hoverCard.machine(context), { context });
+    return createMemo(() => hoverCard.connect(state, send, normalizeProps));
+};

package/source/is-empty.js

@@ -0,0 +1,4 @@
+export const isEmpty = (value) => value == null ||
+    value == undefined ||
+    (typeof value === 'object' && Object.keys(value).length === 0) ||
+    (typeof value === 'string' && value.trim().length === 0);

package/source/is-function.js

@@ -0,0 +1 @@
+export const isFunction = (value) => typeof value === 'function';

package/source/menu/index.js

@@ -0,0 +1,30 @@
+import { Menu as MenuRoot } from './menu';
+import { MenuArrow } from './menu-arrow';
+import { MenuArrowTip } from './menu-arrow-tip';
+import { MenuContent } from './menu-content';
+import { useMenuContext } from './menu-context';
+import { MenuContextTrigger } from './menu-context-trigger';
+import { MenuItem } from './menu-item';
+import { MenuItemGroup } from './menu-item-group';
+import { MenuItemGroupLabel } from './menu-item-group-label';
+import { MenuOptionItem } from './menu-option-item';
+import { MenuPositioner } from './menu-positioner';
+import { MenuSeparator } from './menu-separator';
+import { MenuTrigger } from './menu-trigger';
+import { MenuTriggerItem } from './menu-trigger-item';
+const Menu = Object.assign(MenuRoot, {
+    Root: MenuRoot,
+    Arrow: MenuArrow,
+    ArrowTip: MenuArrowTip,
+    Content: MenuContent,
+    ContextTrigger: MenuContextTrigger,
+    Item: MenuItem,
+    ItemGroup: MenuItemGroup,
+    ItemGroupLabel: MenuItemGroupLabel,
+    OptionItem: MenuOptionItem,
+    Positioner: MenuPositioner,
+    Separator: MenuSeparator,
+    Trigger: MenuTrigger,
+    TriggerItem: MenuTriggerItem,
+});
+export { Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };

package/source/menu/menu-arrow-tip.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuArrowTip = (props) => {
+    const menu = useMenuContext();
+    const arrowTipProps = mergeProps(() => menu?.().arrowTipProps, props);
+    return <ark.div {...arrowTipProps}/>;
+};

package/source/menu/menu-arrow.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuArrow = (props) => {
+    const menu = useMenuContext();
+    const arrowProps = mergeProps(() => menu?.().arrowProps, props);
+    return <ark.div {...arrowProps}/>;
+};

package/source/menu/menu-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useMenuContext } from './menu-context';
+export const MenuContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useMenuContext();
+    const mergedProps = mergeProps(() => api?.().contentProps, localProps);
+    return (<Presence present={api?.().isOpen} {...presenceProps}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/menu/menu-context-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuContextTrigger = (props) => {
+    const menu = useMenuContext();
+    const triggerProps = mergeProps(() => menu?.().contextTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/menu/menu-context.js

@@ -0,0 +1,16 @@
+import { createContext } from '../create-context';
+export const [MenuProvider, useMenuContext] = createContext({
+    hookName: 'useMenuContext',
+    providerName: '<MenuProvider />',
+    strict: false,
+});
+export const [MenuMachineProvider, useMenuMachineContext] = createContext({
+    hookName: 'useMenuMachineContext',
+    providerName: '<MenuMachineProvider />',
+    strict: false,
+});
+export const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
+    hookName: 'useMenuMachineContext',
+    providerName: '<MenuMachineProvider />',
+    strict: false,
+});

package/source/menu/menu-item-group-label.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuItemGroupLabel = (props) => {
+    const menu = useMenuContext();
+    const [itemGroupLabelProps, localProps] = createSplitProps()(props, [
+        'htmlFor',
+    ]);
+    const labelProps = mergeProps(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
+    return <ark.label {...labelProps}/>;
+};

package/source/menu/menu-item-group.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuItemGroup = (props) => {
+    const menu = useMenuContext();
+    const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+    const groupProps = mergeProps(() => menu?.().getItemGroupProps(itemGroupProps), localProps);
+    return <ark.div {...groupProps}/>;
+};

package/source/menu/menu-item.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuItem = (props) => {
+    const menu = useMenuContext();
+    const [itemParams, restProps] = createSplitProps()(props, [
+        'id',
+        'disabled',
+        'valueText',
+        'closeOnSelect',
+    ]);
+    const itemProps = mergeProps(() => menu?.().getItemProps(itemParams), restProps);
+    return <ark.div {...itemProps}/>;
+};

package/source/menu/menu-option-item.jsx

@@ -0,0 +1,23 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useMenuContext } from './menu-context';
+export const MenuOptionItem = (props) => {
+    const menu = useMenuContext();
+    const [optionProps, localProps] = createSplitProps()(props, [
+        'id',
+        'disabled',
+        'valueText',
+        'closeOnSelect',
+        'name',
+        'type',
+        'value',
+        'onCheckedChange',
+    ]);
+    const itemProps = mergeProps(() => menu().getOptionItemProps(optionProps), localProps);
+    const itemState = createMemo(() => menu().getOptionItemState(optionProps));
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    return <ark.div {...itemProps}>{getChildren()}</ark.div>;
+};

package/source/menu/menu-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuPositioner = (props) => {
+    const menu = useMenuContext();
+    const positionerProps = mergeProps(() => menu?.().positionerProps, props);
+    return <ark.div {...positionerProps}/>;
+};

package/source/menu/menu-separator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuSeparator = (props) => {
+    const menu = useMenuContext();
+    const separatorProps = mergeProps(() => menu?.().separatorProps, props);
+    return <ark.hr {...separatorProps}/>;
+};

package/source/menu/menu-trigger-item.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuTriggerItemContext } from './menu-context';
+export const MenuTriggerItem = (props) => {
+    const getTriggerItemProps = useMenuTriggerItemContext();
+    const triggerProps = mergeProps(() => getTriggerItemProps?.(), props);
+    return <ark.div {...triggerProps}/>;
+};

package/source/menu/menu-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuTrigger = (props) => {
+    const menu = useMenuContext();
+    const triggerProps = mergeProps(() => menu?.().triggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/menu/menu.jsx

@@ -0,0 +1,51 @@
+import { createEffect, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { runIfFn } from '../run-if-fn';
+import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
+import { useMenu } from './use-menu';
+export const Menu = (props) => {
+    const [menuParams, restProps] = createSplitProps()(props, [
+        'anchorPoint',
+        'aria-label',
+        'closeOnSelect',
+        'dir',
+        'getRootNode',
+        'highlightedId',
+        'id',
+        'ids',
+        'loop',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onSelect',
+        'onValueChange',
+        'positioning',
+        'value',
+    ]);
+    const parentMenu = useMenuContext();
+    const parentMachine = useMenuMachineContext();
+    const menu = useMenu(menuParams);
+    createEffect(() => {
+        if (!parentMachine)
+            return;
+        parentMenu?.().setChild(menu().machine);
+        menu().api().setParent(parentMachine());
+    });
+    createEffect(() => {
+        if (!restProps.isOpen)
+            return;
+        restProps.isOpen?.() ? menu().api().open() : menu().api().close();
+    });
+    const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+    const machineContext = () => menu().machine;
+    const getChildren = () => runIfFn(restProps.children, () => ({
+        isOpen: menu?.().api().isOpen,
+        onClose: menu?.().api().close,
+    }));
+    return (<MenuTriggerItemProvider value={triggerItemContext}>
+      <MenuMachineProvider value={machineContext}>
+        <MenuProvider value={menu().api}>{getChildren()}</MenuProvider>
+      </MenuMachineProvider>
+    </MenuTriggerItemProvider>);
+};

package/source/menu/use-menu.js

@@ -0,0 +1,13 @@
+import * as menu from '@zag-js/menu';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useMenu = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send, machine] = useMachine(menu.machine(context), { context });
+    return createMemo(() => ({
+        api: () => menu.connect(state, send, normalizeProps),
+        machine: machine,
+    }));
+};