@1771technologies/lytenyte-pro 2.0.0-dev.0 → 2.0.0-dev.1

package/dist/components/headless/menu/checkbox-item.d.ts

@@ -0,0 +1,11 @@
+import { type JSX, type ReactNode } from "react";
+export declare const CheckboxItem: import("react").ForwardRefExoticComponent<Omit<CheckboxItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace CheckboxItem {
+    type Props = Omit<JSX.IntrinsicElements["div"], "children"> & {
+        readonly disabled?: boolean;
+        readonly checked: boolean;
+        readonly onCheckChange?: (b: boolean) => void;
+        readonly children?: ReactNode | ((b: boolean) => ReactNode);
+        readonly closeOnAction?: boolean;
+    };
+}

package/dist/components/headless/menu/checkbox-item.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useMenuItemEvents } from "./item/use-menu-item-events.js";
+import { handleVerticalNavigation } from "./item/handle-vertical-navigation.js";
+import { useDialogRoot } from "../dialog/context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function CheckboxItemImpl({ checked, onCheckChange, closeOnAction, disabled, children, ...props }, ref) {
+    const [item, setItem] = useState(null);
+    const combinedRefs = useCombinedRefs(ref, setItem);
+    const [active, setActive] = useMenuItemEvents(item);
+    const Node = typeof children === "function" ? children(checked) : children;
+    const d = useDialogRoot();
+    return (_jsx("div", { role: "menuitemcheckbox", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-checked": checked, "aria-checked": checked, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onFocus: (ev) => {
+            props.onFocus?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(true);
+        }, onBlur: (ev) => {
+            props.onBlur?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(false);
+        }, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            onCheckChange?.(!checked);
+            if (closeOnAction === false)
+                return;
+            d?.onOpenChange(false);
+        }, onKeyDown: (ev) => {
+            if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+                handleVerticalNavigation(ev);
+            if (ev.key === " " || ev.key === "Enter") {
+                onCheckChange?.(!checked);
+                if (closeOnAction === false)
+                    return;
+                d?.onOpenChange(false);
+            }
+        }, children: Node }));
+}
+export const CheckboxItem = forwardRef(CheckboxItemImpl);

package/dist/components/headless/menu/combo/combo-checkbox.d.ts

@@ -0,0 +1,11 @@
+import { type JSX, type ReactNode } from "react";
+export declare const ComboCheckbox: import("react").ForwardRefExoticComponent<Omit<ComboCheckbox.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace ComboCheckbox {
+    type Props = Omit<JSX.IntrinsicElements["div"], "children"> & {
+        readonly disabled?: boolean;
+        readonly checked: boolean;
+        readonly onCheckChange?: (b: boolean) => void;
+        readonly children?: ReactNode | ((b: boolean) => ReactNode);
+        readonly closeOnAction?: boolean;
+    };
+}

package/dist/components/headless/menu/combo/combo-checkbox.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { useComboContext } from "./combo-context.js";
+import { useDialogRoot } from "../../dialog/context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ComboCheckboxBase({ checked, onCheckChange, disabled, children, closeOnAction, ...props }, ref) {
+    const [item, setItem] = useState(null);
+    const ctx = useComboContext();
+    const d = useDialogRoot();
+    useEffect(() => {
+        if (!item)
+            return;
+        const controller = new AbortController();
+        item.addEventListener("ln-action", () => {
+            onCheckChange?.(!checked);
+            if (closeOnAction === false)
+                return;
+            d.onOpenChange?.(false);
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, [checked, closeOnAction, d, item, onCheckChange]);
+    const active = ctx.activeEl === item;
+    const Node = typeof children === "function" ? children(checked) : children;
+    return (_jsx("div", { ...props, "data-ln-active": active, "data-ln-combomenu-option": true, "data-ln-checked": checked, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            onCheckChange?.(!checked);
+            if (closeOnAction === false)
+                return;
+            d.onOpenChange?.(false);
+        }, onMouseEnter: () => {
+            ctx.setActiveEl(item);
+        }, onMouseLeave: () => {
+            ctx.setActiveEl(null);
+        }, ref: useCombinedRefs(ref, setItem), children: Node }));
+}
+export const ComboCheckbox = forwardRef(ComboCheckboxBase);

package/dist/components/headless/menu/combo/combo-context.d.ts

@@ -0,0 +1,9 @@
+import { type Dispatch, type SetStateAction } from "react";
+interface ComboContext {
+    readonly menu: HTMLDivElement | null;
+    readonly activeEl: HTMLDivElement | null;
+    readonly setActiveEl: Dispatch<SetStateAction<HTMLDivElement | null>>;
+}
+export declare const comboContext: import("react").Context<ComboContext>;
+export declare const useComboContext: () => ComboContext;
+export {};

package/dist/components/headless/menu/combo/combo-context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const comboContext = createContext(null);
+export const useComboContext = () => useContext(comboContext);

package/dist/components/headless/menu/combo/combo-input.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "react";
+export declare const ComboInput: import("react").ForwardRefExoticComponent<Omit<ComboInput.Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare namespace ComboInput {
+    type Props = Omit<JSX.IntrinsicElements["input"], "children"> & {
+        disabled?: boolean;
+    };
+}

package/dist/components/headless/menu/combo/combo-input.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComboContext } from "./combo-context.js";
+import { handleVerticalNavigation } from "../item/handle-vertical-navigation.js";
+const ComboInputImpl = ({ disabled, ...props }, ref) => {
+    const ctx = useComboContext();
+    return (_jsx("input", { ...props, "data-ln-combomenu-input": true, "data-ln-disabled": disabled ? true : undefined, disabled: disabled ? true : undefined, ref: ref, onBlur: (ev) => {
+            props.onBlur?.(ev);
+            ctx.setActiveEl(null);
+        }, onKeyDown: (ev) => {
+            props.onKeyDown?.(ev);
+            if (!ctx.menu || ev.isPropagationStopped())
+                return;
+            const value = ev.currentTarget.value ?? "";
+            if (value && ev.key === "ArrowLeft") {
+                ev.stopPropagation();
+                return;
+            }
+            if (ev.key === "Enter") {
+                if (ctx.activeEl) {
+                    ctx.activeEl.dispatchEvent(new Event("ln-action", { bubbles: false }));
+                }
+                return;
+            }
+            const queryResult = ctx.menu?.querySelectorAll("[data-ln-combomenu-option]");
+            if (!queryResult || queryResult.length === 0) {
+                return handleVerticalNavigation(ev);
+            }
+            const options = Array.from(queryResult);
+            const index = options.indexOf(ctx.activeEl);
+            if (ev.key === "ArrowUp") {
+                if (index === 0) {
+                    handleVerticalNavigation({
+                        ...ev,
+                        currentTarget: ctx.menu,
+                        stopPropagation: ev.stopPropagation,
+                        preventDefault: ev.preventDefault,
+                    });
+                    ctx.setActiveEl(null);
+                }
+                else {
+                    const finalIndex = index === -1 ? options.length - 1 : index - 1;
+                    ctx.setActiveEl(options[finalIndex]);
+                }
+            }
+            else if (ev.key === "ArrowDown") {
+                if (index === options.length - 1) {
+                    handleVerticalNavigation(ev);
+                    ctx.setActiveEl(null);
+                }
+                else {
+                    const finalIndex = index === -1 ? 0 : index + 1;
+                    ctx.setActiveEl(options[finalIndex]);
+                }
+            }
+        } }));
+};
+export const ComboInput = forwardRef(ComboInputImpl);

package/dist/components/headless/menu/combo/combo-menu.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const ComboMenu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace ComboMenu {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/headless/menu/combo/combo-menu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useMenuItemEvents } from "../item/use-menu-item-events.js";
+import { comboContext } from "./combo-context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ComboMenuImpl(props, ref) {
+    const [item, setItem] = useState(null);
+    const combinedRefs = useCombinedRefs(ref, setItem);
+    const [active] = useMenuItemEvents(item, undefined, () => {
+        const input = item?.querySelector('[data-ln-combomenu-input="true"]');
+        if (input)
+            input.blur();
+    });
+    const [activeEl, setActiveEl] = useState(null);
+    return (_jsx(comboContext.Provider, { value: { activeEl, setActiveEl, menu: item }, children: _jsx("div", { role: "menuitem", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-combo": true, "data-ln-active": active, onFocus: (ev) => {
+                props.onFocus?.(ev);
+                if (ev.isPropagationStopped())
+                    return;
+                const input = ev.currentTarget.querySelector('[data-ln-combomenu-input="true"]');
+                if (input)
+                    input.focus();
+            } }) }));
+}
+export const ComboMenu = forwardRef(ComboMenuImpl);

package/dist/components/headless/menu/combo/combo-option.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "react";
+export declare const ComboOption: import("react").ForwardRefExoticComponent<Omit<ComboOption.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace ComboOption {
+    type Props = JSX.IntrinsicElements["div"] & {
+        disabled?: boolean;
+        onAction: () => void;
+        closeOnAction?: boolean;
+    };
+}

package/dist/components/headless/menu/combo/combo-option.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { useComboContext } from "./combo-context.js";
+import { useDialogRoot } from "../../dialog/context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ComboOptionImpl({ disabled, onAction, closeOnAction, ...props }, ref) {
+    const [item, setItem] = useState(null);
+    const ctx = useComboContext();
+    const d = useDialogRoot();
+    useEffect(() => {
+        if (!item)
+            return;
+        const controller = new AbortController();
+        item.addEventListener("ln-action", () => {
+            onAction();
+            if (closeOnAction === false)
+                return;
+            d.onOpenChange?.(false);
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, [closeOnAction, d, item, onAction]);
+    const active = ctx.activeEl === item;
+    return (_jsx("div", { ...props, "data-ln-active": active, "data-ln-combomenu-option": true, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            onAction();
+            if (closeOnAction === false)
+                return;
+            d.onOpenChange?.(false);
+        }, onMouseEnter: () => {
+            ctx.setActiveEl(item);
+        }, onMouseLeave: () => {
+            ctx.setActiveEl(null);
+        }, ref: useCombinedRefs(ref, setItem) }));
+}
+export const ComboOption = forwardRef(ComboOptionImpl);

package/dist/components/headless/menu/container.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace Container {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/headless/menu/container.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useMenu } from "./use-menu.js";
+import { useSubmenuContext } from "./submenu/submenu-context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ContainerImpl(props, ref) {
+    const [menuEl, setMenuEl] = useState(null);
+    const combinedRefs = useCombinedRefs(ref, setMenuEl);
+    const sub = useSubmenuContext();
+    const finalRefs = useCombinedRefs(combinedRefs, sub?.submenuRef);
+    useMenu(menuEl);
+    if (sub && !sub.open)
+        return null;
+    return (_jsx("div", { ...props, role: "menu", ref: finalRefs, "data-ln-terminal-menu": !sub, "data-ln-submenu": sub ? true : undefined, "data-ln-menu": true, style: {
+            ...props.style,
+            ...(sub ? { position: "absolute" } : {}),
+        } }));
+}
+export const Container = forwardRef(ContainerImpl);

package/dist/components/headless/menu/dom.d.ts

@@ -0,0 +1,4 @@
+export declare function dispatchActivate(el: HTMLElement): boolean;
+export declare function dispatchDeactivate(el: HTMLElement): boolean;
+export declare function dispatchClose(el: HTMLElement): boolean;
+export declare function getSubmenuRoots(el: HTMLElement): HTMLElement[];

package/dist/components/headless/menu/dom.js

@@ -0,0 +1,20 @@
+export function dispatchActivate(el) {
+    return el.dispatchEvent(new Event("ln-activate-mouse", { bubbles: false }));
+}
+export function dispatchDeactivate(el) {
+    return el.dispatchEvent(new Event("ln-deactivate-mouse", { bubbles: false }));
+}
+export function dispatchClose(el) {
+    return el.dispatchEvent(new Event("ln-close", { bubbles: false }));
+}
+export function getSubmenuRoots(el) {
+    let current = el;
+    const roots = [];
+    while (current && current.getAttribute("data-ln-terminal-menu") !== "true") {
+        if (current.getAttribute("data-ln-submenu-root") === "true") {
+            roots.push(current);
+        }
+        current = current.parentElement;
+    }
+    return roots;
+}

package/dist/components/headless/menu/index.d.ts

@@ -0,0 +1,54 @@
+import { Popover as P } from "../popover/index.js";
+import { MenuPopover } from "./popover.js";
+import type { PropsWithChildren } from "react";
+import { Item } from "./item/item.js";
+import { Container } from "./container.js";
+import { CheckboxItem } from "./checkbox-item.js";
+import { DialogArrow as Arrow } from "../dialog/arrow.js";
+import { RadioGroup } from "./radio-group/context.js";
+import { RadioItem } from "./radio-group/radio-item.js";
+import { MenuDivider as Divider } from "./menu-divider.js";
+import { MenuGroup as Group } from "./menu-group.js";
+import { MenuHeader as Header } from "./menu-header.js";
+import { Submenu } from "./submenu/submenu.js";
+import { SubmenuTrigger } from "./submenu/submenu-trigger.js";
+export declare const Menu: {
+    (props: PropsWithChildren<P.Props>): import("react/jsx-runtime").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<Omit<Item.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<Omit<CheckboxItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<Arrow.Props, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroup.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<Omit<RadioItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Divider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Submenu: import("react").ForwardRefExoticComponent<Omit<Submenu.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    SubmenuTrigger: import("react").ForwardRefExoticComponent<Omit<SubmenuTrigger.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    SubmenuContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popover: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("../dialog/title.js").DialogTitle.Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("../dialog/description.js").DialogDescription.Props, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("../dialog/trigger.js").DialogTrigger.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export declare namespace Menu {
+    type Props = P.Props;
+    namespace Component {
+        type Item = Item.Props;
+        type Container = Container.Props;
+        type CheckboxItem = CheckboxItem.Props;
+        type Arrow = Arrow.Props;
+        type RadioGroup = RadioGroup.Props;
+        type RadioItem = RadioItem.Props;
+        type Divider = Divider.Props;
+        type Group = Group.Props;
+        type Header = Header.Props;
+        type Submenu = Submenu.Props;
+        type SubmenuTrigger = SubmenuTrigger.Props;
+        type SubmenuContainer = Container.Props;
+        type Popover = MenuPopover.Props;
+        type Title = P.Component.Title;
+        type Description = P.Component.Description;
+        type Trigger = P.Component.Trigger;
+    }
+}

package/dist/components/headless/menu/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as P } from "../popover/index.js";
+import { MenuPopover } from "./popover.js";
+import { Item } from "./item/item.js";
+import { Container } from "./container.js";
+import { CheckboxItem } from "./checkbox-item.js";
+import { DialogArrow as Arrow } from "../dialog/arrow.js";
+import { RadioGroup } from "./radio-group/context.js";
+import { RadioItem } from "./radio-group/radio-item.js";
+import { MenuDivider as Divider } from "./menu-divider.js";
+import { MenuGroup as Group } from "./menu-group.js";
+import { MenuHeader as Header } from "./menu-header.js";
+// import { ComboOption } from "./combo/combo-option.js";
+// import { ComboInput } from "./combo/combo-input.js";
+// import { ComboMenu } from "./combo/combo-menu.js";
+// import { ComboCheckbox } from "./combo/combo-checkbox.js";
+import { Submenu } from "./submenu/submenu.js";
+import { SubmenuTrigger } from "./submenu/submenu-trigger.js";
+export const Menu = (props) => _jsx(P, { ...props });
+Menu.Item = Item;
+Menu.Container = Container;
+Menu.CheckboxItem = CheckboxItem;
+Menu.Arrow = Arrow;
+Menu.RadioGroup = RadioGroup;
+Menu.RadioItem = RadioItem;
+Menu.Divider = Divider;
+Menu.Group = Group;
+Menu.Header = Header;
+// Menu.ComboOption = ComboOption;
+// Menu.ComboInput = ComboInput;
+// Menu.ComboMenu = ComboMenu;
+// Menu.ComboCheckbox = ComboCheckbox;
+Menu.Submenu = Submenu;
+Menu.SubmenuTrigger = SubmenuTrigger;
+Menu.SubmenuContainer = Container;
+Menu.Popover = MenuPopover;
+Menu.Title = P.Title;
+Menu.Description = P.Description;
+Menu.Trigger = P.Trigger;

package/dist/components/headless/menu/item/handle-vertical-navigation.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent } from "react";
+export declare function handleVerticalNavigation(ev: KeyboardEvent<HTMLElement>): void;

package/dist/components/headless/menu/item/handle-vertical-navigation.js

@@ -0,0 +1,28 @@
+import { getNearestMatching, getTabbables } from "@1771technologies/lytenyte-shared";
+export function handleVerticalNavigation(ev) {
+    const nearestMenu = getNearestMatching(ev.currentTarget, (el) => el.getAttribute("data-ln-menu") === "true");
+    if (!nearestMenu)
+        return;
+    const tabbables = getTabbables(nearestMenu)
+        .filter((x) => {
+        const nearest = getNearestMatching(x, (el) => el.getAttribute("data-ln-menu") === "true");
+        return nearest === nearestMenu;
+    })
+        .filter((x) => x.getAttribute("data-ln-menu-item") === "true");
+    const activeItem = getNearestMatching(ev.currentTarget, (el) => el.getAttribute("data-ln-menu-item") === "true");
+    const index = tabbables.indexOf(activeItem);
+    if (index === -1)
+        return;
+    if (ev.key === "ArrowDown") {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const next = tabbables[index + 1];
+        next?.focus();
+    }
+    else if (ev.key === "ArrowUp") {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const prev = tabbables[index - 1];
+        prev?.focus();
+    }
+}

package/dist/components/headless/menu/item/item.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "react";
+export declare const Item: import("react").ForwardRefExoticComponent<Omit<Item.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace Item {
+    type Props = JSX.IntrinsicElements["div"] & {
+        readonly disabled?: boolean;
+        readonly onAction: () => void;
+        readonly closeOnAction?: boolean;
+    };
+}

package/dist/components/headless/menu/item/item.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useMenuItemEvents } from "./use-menu-item-events.js";
+import { handleVerticalNavigation } from "./handle-vertical-navigation.js";
+import { useDialogRoot } from "../../dialog/context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ItemImpl({ onAction, closeOnAction, disabled, ...props }, ref) {
+    const [item, setItem] = useState(null);
+    const combinedRefs = useCombinedRefs(ref, setItem);
+    const [active, setActive] = useMenuItemEvents(item);
+    const d = useDialogRoot();
+    return (_jsx("div", { role: "menuitem", ...props, ref: combinedRefs, tabIndex: 0, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, onFocus: (ev) => {
+            props.onFocus?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(true);
+        }, onBlur: (ev) => {
+            props.onBlur?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(false);
+        }, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            onAction?.();
+            ev.stopPropagation();
+            ev.preventDefault();
+            if (closeOnAction === false)
+                return;
+            d?.onOpenChange(false);
+        }, onKeyDown: (ev) => {
+            if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+                handleVerticalNavigation(ev);
+            if (ev.key === " " || ev.key === "Enter") {
+                onAction?.();
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (closeOnAction === false)
+                    return;
+                d?.onOpenChange(false);
+            }
+        } }));
+}
+export const Item = forwardRef(ItemImpl);

package/dist/components/headless/menu/item/use-menu-item-events.d.ts

@@ -0,0 +1 @@
+export declare function useMenuItemEvents(el: HTMLElement | null, onActivate?: () => void, onDeactivate?: () => void): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/components/headless/menu/item/use-menu-item-events.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+export function useMenuItemEvents(el, onActivate, onDeactivate) {
+    const [active, setActive] = useState(false);
+    useEffect(() => {
+        if (!el)
+            return;
+        const controller = new AbortController();
+        const signal = controller.signal;
+        el.addEventListener("ln-activate-mouse", () => {
+            const elementToFocus = el.getAttribute("data-ln-combo") === "true"
+                ? (el.querySelector('[data-ln-combomenu-input="true"]') ?? el)
+                : el;
+            if (elementToFocus === document.activeElement)
+                return;
+            elementToFocus.focus();
+            onActivate?.();
+        }, { signal });
+        el.addEventListener("ln-deactivate-mouse", () => {
+            el.blur();
+            onDeactivate?.();
+        }, { signal });
+        return () => controller.abort();
+    }, [el, onActivate, onDeactivate]);
+    return [active, setActive];
+}

package/dist/components/headless/menu/menu-divider.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const MenuDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace MenuDivider {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/headless/menu/menu-divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const MenuDividerImpl = (props, ref) => {
+    return _jsx("div", { ...props, role: "separator", "data-ln-menu-separator": true, ref: ref });
+};
+export const MenuDivider = forwardRef(MenuDividerImpl);

package/dist/components/headless/menu/menu-group.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const MenuGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace MenuGroup {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/headless/menu/menu-group.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const MenuGroupBase = (props, ref) => {
+    return _jsx("div", { ...props, role: "group", ref: ref });
+};
+export const MenuGroup = forwardRef(MenuGroupBase);

package/dist/components/headless/menu/menu-header.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const MenuHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace MenuHeader {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/headless/menu/menu-header.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const MenuHeaderBase = (props, ref) => {
+    return _jsx("div", { ...props, ref: ref });
+};
+export const MenuHeader = forwardRef(MenuHeaderBase);

package/dist/components/headless/menu/popover.d.ts

@@ -0,0 +1,5 @@
+import { PopoverContainer as Container } from "../popover/container.js";
+export declare const MenuPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare namespace MenuPopover {
+    type Props = Container.Props;
+}

package/dist/components/headless/menu/popover.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { PopoverContainer as Container } from "../popover/container.js";
+const MenuPopoverBase = (props, ref) => {
+    return _jsx(Container, { ...props, ref: ref, "data-ln-menu-popover": true });
+};
+export const MenuPopover = forwardRef(MenuPopoverBase);

package/dist/components/headless/menu/radio-group/context.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+interface RadioGroupContext {
+    readonly value: string;
+    readonly onChange?: (v: string) => void;
+}
+export declare const context: import("react").Context<RadioGroupContext>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroup.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace RadioGroup {
+    type Props = Omit<JSX.IntrinsicElements["div"], "onChange"> & RadioGroupContext;
+}
+export {};

package/dist/components/headless/menu/radio-group/context.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef } from "react";
+export const context = createContext({});
+const RadioGroupBase = ({ value, onChange, ...props }, ref) => {
+    return (_jsx(context.Provider, { value: { value: value, onChange: onChange }, children: _jsx("div", { ...props, ref: ref, role: "group", children: props.children }) }));
+};
+export const RadioGroup = forwardRef(RadioGroupBase);