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

package/dist/components/headless/dialog/arrow.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from "react";
+import type { LnComponent } from "../../types.js";
+export declare const DialogArrow: import("react").ForwardRefExoticComponent<Omit<DialogArrow.Props, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare namespace DialogArrow {
+    type Props = LnComponent<JSX.IntrinsicElements["svg"], object>;
+}

package/dist/components/headless/dialog/arrow.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDialogRoot } from "./context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+import { useSlot } from "../../../hooks/use-slot/use-slot.js";
+const DialogArrowBase = ({ render, ...props }, ref) => {
+    const ctx = useDialogRoot();
+    const combined = useCombinedRefs(ref, ctx.setArrow);
+    const comp = useSlot({
+        props: [props],
+        ref: combined,
+        slot: render ?? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 8", "aria-hidden": true, height: 8, focusable: "false", ...props, ref: combined, "data-ln-dialog-arrow": true, children: [_jsx("polygon", { points: "0,8 8,0 16,8", "data-ln-dialog-arrow-area": true }), _jsx("path", { "data-ln-dialog-arrow-border": true, d: "M0 8 L8 0 L16 8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
+    });
+    return comp;
+};
+export const DialogArrow = forwardRef(DialogArrowBase);

package/dist/components/headless/dialog/close.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "react";
+import type { LnComponent } from "../../types";
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<DialogClose.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace DialogClose {
+    type Props = LnComponent<JSX.IntrinsicElements["button"], State>;
+    type State = {
+        readonly open: boolean;
+        readonly openChange: (b: boolean) => void;
+    };
+}

package/dist/components/headless/dialog/close.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDialogRoot } from "./context.js";
+import { useSlot } from "../../../hooks/use-slot/index.js";
+function DialogCloseImpl({ render, ...props }, ref) {
+    const ctx = useDialogRoot();
+    const internalProps = {
+        "aria-label": "Close dialog",
+        onClick: () => ctx.onOpenChange(false),
+    };
+    const final = useSlot({
+        props: [internalProps, props, { "data-ln-dialog-close": true }],
+        ref: ref,
+        slot: render ?? _jsx("button", {}),
+        state: {
+            open: ctx.open,
+            openChange: ctx.onOpenChange,
+        },
+    });
+    return final;
+}
+export const DialogClose = forwardRef(DialogCloseImpl);

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

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

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

@@ -0,0 +1,221 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useDialogRoot } from "./context.js";
+import { arrow, autoUpdate, computePosition, flip, hide, inline, offset, shift, } from "../../external/floating-ui.js";
+import { transformOrigin } from "./transform-origin.js";
+import { FocusTrap } from "@1771technologies/lytenyte-shared";
+import { getActiveElement, getTabbables, SCROLL_LOCKER } from "@1771technologies/lytenyte-shared";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+import { useTransitioned } from "../../../hooks/use-transitioned-open.js";
+function DialogContainerBase(props, ref) {
+    const { open, onOpenChange, onOpenChangeComplete, titleId, descriptionId, focusCanReturn, focusCanTrap, focusFallback, focusInitial, focusPreventScroll, focusReturn, focusTrap, lockScroll, lightDismiss, modal = true, anchor, alignOffset, inline: inlineV, placement, shiftPadding, sideOffset, hide: shouldHide, arrow: arrowEl, } = useDialogRoot();
+    const [dialog, setDialog] = useState(null);
+    const [t, shouldMount] = useTransitioned(open, dialog, onOpenChangeComplete);
+    const locked = useRef(false);
+    useEffect(() => {
+        if (!open || !anchor)
+            return;
+        const anchorEl = typeof anchor === "string" ? document.querySelector(anchor) : anchor;
+        if (!anchorEl || !dialog)
+            return;
+        const middleware = [offset({ alignmentAxis: alignOffset, mainAxis: sideOffset })];
+        if (inlineV)
+            middleware.push(inline({ padding: shiftPadding }));
+        const flipMw = flip({
+            crossAxis: "alignment",
+            fallbackAxisSideDirection: "end",
+        });
+        const shiftMw = shift({
+            padding: shiftPadding,
+            mainAxis: true,
+        });
+        const shiftMwX = shift({
+            padding: shiftPadding,
+            crossAxis: true,
+        });
+        if (placement.includes("-"))
+            middleware.push(flipMw, shiftMw, shiftMwX);
+        else
+            middleware.push(shiftMw, flipMw, shiftMwX);
+        middleware.push(transformOrigin({ arrowHeight: 0, arrowWidth: 0 }));
+        if (shouldHide) {
+            middleware.push(hide());
+        }
+        if (arrowEl)
+            middleware.push(arrow({ element: arrowEl, padding: 0 }));
+        const clean = autoUpdate(anchorEl, dialog, async () => {
+            const pos = await computePosition(anchorEl, dialog, {
+                strategy: "fixed",
+                placement: placement,
+                middleware,
+            });
+            const hidden = pos.middlewareData.hide?.referenceHidden;
+            if (hidden && shouldHide) {
+                dialog.style.visibility = "hidden";
+            }
+            else {
+                dialog.style.visibility = "visible";
+            }
+            const x = pos.middlewareData.transformOrigin.x;
+            const y = pos.middlewareData.transformOrigin.y;
+            const anchorBB = anchorEl.getBoundingClientRect();
+            Object.assign(dialog.style, {
+                top: `${pos.y}px`,
+                left: `${pos.x}px`,
+                transformOrigin: `${x} ${y}`,
+            });
+            dialog.style.setProperty("--ln-anchor-width", `${anchorBB.width}px`);
+            dialog.style.setProperty("--ln-anchor-height", `${anchorBB.height}px`);
+            if (arrowEl) {
+                const { x, y } = pos.middlewareData.arrow ?? {};
+                const top = y;
+                const left = x;
+                arrowEl.setAttribute("data-ln-placement", pos.placement.split("-").at(0) ?? "");
+                Object.assign(arrowEl.style, {
+                    left: left != null ? `${left}px` : "",
+                    top: top != null ? `${top}px` : "",
+                });
+            }
+        });
+        return () => clean();
+    }, [
+        alignOffset,
+        anchor,
+        arrowEl,
+        dialog,
+        inlineV,
+        open,
+        placement,
+        shiftPadding,
+        shouldHide,
+        shouldMount,
+        sideOffset,
+    ]);
+    const lockTimeout = useRef(null);
+    useEffect(() => {
+        if (lockScroll == false)
+            return;
+        if (lockTimeout.current)
+            clearTimeout(lockTimeout.current);
+        if (shouldMount && !locked.current) {
+            SCROLL_LOCKER.acquire(null);
+            locked.current = true;
+        }
+        else if (!shouldMount && locked.current) {
+            SCROLL_LOCKER.release();
+            locked.current = false;
+        }
+        return () => {
+            lockTimeout.current = setTimeout(() => {
+                if (locked.current)
+                    SCROLL_LOCKER.release();
+                locked.current = false;
+                lockTimeout.current = null;
+            }, 20);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldMount]);
+    const trapRef = useRef(null);
+    useEffect(() => {
+        if (!dialog)
+            return;
+        const controller = new AbortController();
+        if (shouldMount) {
+            dialog.addEventListener("keydown", (ev) => {
+                if (ev.key === "Escape") {
+                    // Check if the dialog contains another open dialog
+                    const otherDialog = dialog.querySelector('[data-ln-light-dismiss="true"]');
+                    if (otherDialog)
+                        return;
+                    ev.stopPropagation();
+                    if (lightDismiss != false)
+                        onOpenChange(false);
+                    ev.preventDefault();
+                }
+            }, { signal: controller.signal });
+        }
+        if (shouldMount && lightDismiss != false) {
+            document.addEventListener("click", (ev) => {
+                const bb = dialog.getBoundingClientRect();
+                if (ev.button !== 0)
+                    return;
+                if (ev.target != dialog && dialog.contains(ev.target))
+                    return;
+                // Check if the dialog contains another open dialog
+                const otherDialog = dialog.querySelector('[data-ln-light-dismiss="true"]');
+                if (otherDialog)
+                    return;
+                if (ev.clientX < bb.left ||
+                    ev.clientX > bb.right ||
+                    ev.clientY < bb.top ||
+                    ev.clientY > bb.bottom) {
+                    ev.stopPropagation();
+                    ev.stopImmediatePropagation();
+                    if (typeof lightDismiss === "function") {
+                        const res = lightDismiss(ev.target);
+                        if (!res)
+                            return;
+                    }
+                    setTimeout(() => onOpenChange(false));
+                }
+            }, { capture: true, signal: controller.signal });
+        }
+        const options = {
+            preventScroll: focusPreventScroll,
+            checkCanReturnFocus: focusCanReturn,
+            checkCanFocusTrap: focusCanTrap,
+            fallbackFocus: focusFallback,
+            initialFocus: focusInitial,
+            setReturnFocus: focusReturn ?? getActiveElement(document),
+        };
+        Object.keys(options).forEach((c) => {
+            if (options[c] === undefined)
+                delete options[c];
+        });
+        let obsRef = null;
+        if (!options.checkCanFocusTrap) {
+            const checkCanFocusTrap = (dialog) => {
+                const tabbables = getTabbables(dialog[0]);
+                if (tabbables.length)
+                    return Promise.resolve();
+                return new Promise((res) => {
+                    obsRef = new MutationObserver(() => {
+                        if (getTabbables(dialog[0])) {
+                            obsRef?.disconnect();
+                            res();
+                        }
+                    });
+                    obsRef.observe(dialog[0], { childList: true, subtree: true });
+                });
+            };
+            options.checkCanFocusTrap = checkCanFocusTrap;
+        }
+        const trap = new FocusTrap(dialog, options);
+        trapRef.current = trap;
+        if (shouldMount) {
+            if (modal != false)
+                dialog.showModal();
+            else
+                dialog.showPopover();
+            if (focusTrap != false)
+                trap.activate();
+        }
+        return () => {
+            controller.abort();
+            trap.deactivate();
+            obsRef?.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dialog, shouldMount]);
+    // Deactivate and close the dialog if the component will no longer be mounted.
+    if (trapRef.current && !shouldMount) {
+        trapRef.current.deactivate();
+        trapRef.current = null;
+    }
+    const combined = useCombinedRefs(ref, setDialog);
+    const Element = (modal != false ? "dialog" : "div");
+    if (!shouldMount)
+        return null;
+    return (_jsx(Element, { ...props, popover: !modal ? "manual" : undefined, "aria-describedby": descriptionId, "aria-labelledby": titleId, "data-ln-light-dismiss": lightDismiss != false, "data-ln-transition": t, "data-ln-dialog": !props["data-ln-popover"] && !props["data-ln-menu-popover"] ? true : undefined, ref: combined, children: props.children }));
+}
+export const DialogContainer = forwardRef(DialogContainerBase);

package/dist/components/headless/dialog/context.d.ts

@@ -0,0 +1,32 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { Placement, ReferenceElement } from "../../external/floating-ui";
+import type { FocusTrapOptions } from "@1771technologies/lytenyte-shared";
+export interface DialogContext {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly onOpenChangeComplete: (open: boolean) => void;
+    readonly id: string;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    readonly hide?: boolean;
+    readonly lockScroll?: boolean;
+    readonly modal?: boolean;
+    readonly lightDismiss?: boolean | ((el: HTMLElement) => boolean);
+    readonly focusTrap?: boolean;
+    readonly focusInitial?: FocusTrapOptions["initialFocus"];
+    readonly focusReturn?: FocusTrapOptions["setReturnFocus"];
+    readonly focusFallback?: FocusTrapOptions["fallbackFocus"];
+    readonly focusCanReturn?: FocusTrapOptions["checkCanReturnFocus"];
+    readonly focusCanTrap?: FocusTrapOptions["checkCanFocusTrap"];
+    readonly focusPreventScroll?: FocusTrapOptions["preventScroll"];
+    readonly anchor: ReferenceElement | string | null;
+    readonly placement: Placement;
+    readonly shiftPadding: number;
+    readonly inline: boolean;
+    readonly sideOffset: number;
+    readonly alignOffset: number;
+    readonly arrow: HTMLElement | null;
+    readonly setArrow: Dispatch<SetStateAction<HTMLElement | null>>;
+}
+export declare const context: import("react").Context<DialogContext>;
+export declare const useDialogRoot: () => DialogContext;

package/dist/components/headless/dialog/context.js

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

package/dist/components/headless/dialog/description.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "react";
+import type { LnComponent } from "../../types.js";
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogDescription.Props, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare namespace DialogDescription {
+    type Props = LnComponent<Omit<JSX.IntrinsicElements["p"], "id">, State>;
+    interface State {
+        readonly id: string;
+    }
+}

package/dist/components/headless/dialog/description.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDialogRoot } from "./context.js";
+import { useSlot } from "../../../hooks/use-slot/use-slot.js";
+function DialogDescriptionBase({ render, ...props }, ref) {
+    const ctx = useDialogRoot();
+    const internalProps = {
+        id: ctx.descriptionId,
+    };
+    const final = useSlot({
+        props: [internalProps, props, { "data-ln-dialog-description": "true" }],
+        ref: ref,
+        slot: render ?? _jsx("p", {}),
+        state: {
+            id: ctx.descriptionId,
+        },
+    });
+    return final;
+}
+export const DialogDescription = forwardRef(DialogDescriptionBase);

package/dist/components/headless/dialog/index.parts.d.ts

@@ -0,0 +1,30 @@
+import type { PropsWithChildren } from "react";
+import { DialogRoot } from "./root.js";
+import { DialogTrigger } from "./trigger.js";
+import { DialogArrow } from "./arrow.js";
+import { DialogClose } from "./close.js";
+import { DialogContainer } from "./container.js";
+import { DialogDescription } from "./description.js";
+import { DialogTitle } from "./title.js";
+import { useDialog } from "./use-dialog.js";
+export declare const Dialog: {
+    (props: PropsWithChildren<DialogRoot.Props>): import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<DialogTrigger.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<DialogArrow.Props, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DialogClose.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DialogDescription.Props, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogTitle.Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    useControls: typeof useDialog;
+};
+export declare namespace Dialog {
+    type Props = DialogRoot.Props;
+    namespace Component {
+        type Trigger = DialogTrigger.Props;
+        type Arrow = DialogArrow.Props;
+        type Close = DialogClose.Props;
+        type Container = DialogContainer.Props;
+        type Description = DialogDescription.Props;
+        type Title = DialogTitle.Props;
+    }
+}

package/dist/components/headless/dialog/index.parts.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogRoot } from "./root.js";
+import { DialogTrigger } from "./trigger.js";
+import { DialogArrow } from "./arrow.js";
+import { DialogClose } from "./close.js";
+import { DialogContainer } from "./container.js";
+import { DialogDescription } from "./description.js";
+import { DialogTitle } from "./title.js";
+import { useDialog } from "./use-dialog.js";
+export const Dialog = (props) => _jsx(DialogRoot, { ...props });
+Dialog.Trigger = DialogTrigger;
+Dialog.Arrow = DialogArrow;
+Dialog.Close = DialogClose;
+Dialog.Container = DialogContainer;
+Dialog.Description = DialogDescription;
+Dialog.Title = DialogTitle;
+Dialog.useControls = useDialog;

package/dist/components/headless/dialog/root.d.ts

@@ -0,0 +1,32 @@
+import { type PropsWithChildren } from "react";
+import type { Placement, ReferenceElement } from "../../external/floating-ui.js";
+import type { FocusTrapOptions } from "@1771technologies/lytenyte-shared";
+export declare const DialogRoot: ({ open: openProp, onOpenChange: onOpenChangeProp, onOpenChangeComplete, openInitial, id: idProvided, descriptionId: descIdProvider, titleId: titleIdProvided, children, focusCanReturn, focusCanTrap, focusFallback, focusInitial, focusPreventScroll, focusReturn, focusTrap, lightDismiss, modal, hide, lockScroll, anchor, placement, shiftPadding, inline, sideOffset, alignOffset, }: PropsWithChildren<DialogRoot.Props>) => import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogRoot {
+    interface Props {
+        readonly open?: boolean;
+        readonly openInitial?: boolean;
+        readonly onOpenChange?: (open: boolean) => void;
+        readonly onOpenChangeComplete?: (open: boolean) => void;
+        readonly id?: string;
+        readonly titleId?: string;
+        readonly descriptionId?: string;
+        readonly hide?: boolean;
+        readonly lockScroll?: boolean;
+        readonly lightDismiss?: boolean | ((el: HTMLElement) => boolean);
+        readonly modal?: boolean;
+        readonly focusTrap?: boolean;
+        readonly focusInitial?: FocusTrapOptions["initialFocus"];
+        readonly focusReturn?: FocusTrapOptions["setReturnFocus"];
+        readonly focusFallback?: FocusTrapOptions["fallbackFocus"];
+        readonly focusCanReturn?: FocusTrapOptions["checkCanReturnFocus"];
+        readonly focusCanTrap?: FocusTrapOptions["checkCanFocusTrap"];
+        readonly focusPreventScroll?: FocusTrapOptions["preventScroll"];
+        readonly anchor?: ReferenceElement | string | null;
+        readonly placement?: Placement;
+        readonly shiftPadding?: number;
+        readonly inline?: boolean;
+        readonly sideOffset?: number;
+        readonly alignOffset?: number;
+    }
+}

package/dist/components/headless/dialog/root.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { context } from "./context.js";
+import { useControlled } from "@1771technologies/lytenyte-core/internal";
+export const DialogRoot = ({ open: openProp, onOpenChange: onOpenChangeProp, onOpenChangeComplete, openInitial, id: idProvided, descriptionId: descIdProvider, titleId: titleIdProvided, children, focusCanReturn, focusCanTrap, focusFallback, focusInitial, focusPreventScroll, focusReturn, focusTrap, lightDismiss, modal, hide, lockScroll = modal ?? true, anchor = null, placement = "bottom", shiftPadding = 8, inline = false, sideOffset = 8, alignOffset = 0, }) => {
+    const [open, onOpenChange] = useControlled({ controlled: openProp, default: openInitial });
+    const [arrow, setArrow] = useState(null);
+    const id = useId();
+    const descriptionId = useId();
+    const titleId = useId();
+    const value = useMemo(() => {
+        return {
+            open,
+            onOpenChange: (b) => {
+                onOpenChange(b);
+                onOpenChangeProp?.(b);
+            },
+            onOpenChangeComplete: (b) => {
+                onOpenChangeComplete?.(b);
+            },
+            id: idProvided ?? id,
+            descriptionId: descIdProvider ?? descriptionId,
+            titleId: titleIdProvided ?? titleId,
+            hide,
+            lightDismiss,
+            focusCanReturn,
+            focusCanTrap,
+            focusFallback,
+            focusInitial,
+            focusPreventScroll,
+            focusReturn,
+            focusTrap,
+            lockScroll,
+            modal,
+            anchor,
+            placement,
+            shiftPadding,
+            inline,
+            sideOffset,
+            alignOffset,
+            arrow,
+            setArrow,
+        };
+    }, [
+        alignOffset,
+        anchor,
+        arrow,
+        descIdProvider,
+        descriptionId,
+        focusCanReturn,
+        focusCanTrap,
+        focusFallback,
+        focusInitial,
+        focusPreventScroll,
+        focusReturn,
+        focusTrap,
+        hide,
+        id,
+        idProvided,
+        inline,
+        lightDismiss,
+        lockScroll,
+        modal,
+        onOpenChange,
+        onOpenChangeComplete,
+        onOpenChangeProp,
+        open,
+        placement,
+        shiftPadding,
+        sideOffset,
+        titleId,
+        titleIdProvided,
+    ]);
+    return _jsx(context.Provider, { value: value, children: children });
+};

package/dist/components/headless/dialog/title.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "react";
+import type { LnComponent } from "../../types.js";
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogTitle.Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare namespace DialogTitle {
+    type Props = LnComponent<Omit<JSX.IntrinsicElements["h2"], "id">, State>;
+    interface State {
+        readonly id: string;
+    }
+}

package/dist/components/headless/dialog/title.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDialogRoot } from "./context.js";
+import { useSlot } from "../../../hooks/use-slot/use-slot.js";
+function DialogTitleBase({ render, ...props }, ref) {
+    const ctx = useDialogRoot();
+    const internalProps = {
+        id: ctx.titleId,
+    };
+    const final = useSlot({
+        props: [internalProps, props, { "data-ln-dialog-title": "true" }],
+        ref: ref,
+        slot: render ?? _jsx("h2", {}),
+        state: {
+            id: ctx.titleId,
+        },
+    });
+    return final;
+}
+export const DialogTitle = forwardRef(DialogTitleBase);

package/dist/components/headless/dialog/transform-origin.d.ts

@@ -0,0 +1,5 @@
+import type { Middleware } from "../../external/floating-ui.js";
+export declare const transformOrigin: (options: {
+    arrowWidth: number;
+    arrowHeight: number;
+}) => Middleware;

package/dist/components/headless/dialog/transform-origin.js

@@ -0,0 +1,38 @@
+export const transformOrigin = (options) => ({
+    name: "transformOrigin",
+    options,
+    fn(data) {
+        const { placement, rects, middlewareData } = data;
+        const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+        const isArrowHidden = cannotCenterArrow;
+        const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+        const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+        const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+        const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+        const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+        const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+        let x = "";
+        let y = "";
+        if (placedSide === "bottom") {
+            x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+            y = `${-arrowHeight}px`;
+        }
+        else if (placedSide === "top") {
+            x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+            y = `${rects.floating.height + arrowHeight}px`;
+        }
+        else if (placedSide === "right") {
+            x = `${-arrowHeight}px`;
+            y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+        }
+        else if (placedSide === "left") {
+            x = `${rects.floating.width + arrowHeight}px`;
+            y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+        }
+        return { data: { x, y } };
+    },
+});
+function getSideAndAlignFromPlacement(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return [side, align];
+}

package/dist/components/headless/dialog/trigger.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "react";
+import type { LnComponent } from "../../types.js";
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Omit<DialogTrigger.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace DialogTrigger {
+    type Props = LnComponent<JSX.IntrinsicElements["button"], State>;
+    interface State {
+        readonly open: boolean;
+        readonly openChange: (b: boolean) => void;
+    }
+}

package/dist/components/headless/dialog/trigger.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDialogRoot } from "./context.js";
+import { useSlot } from "../../../hooks/use-slot/use-slot.js";
+function DialogTriggerBase({ render, ...props }, ref) {
+    const ctx = useDialogRoot();
+    const internalProps = {
+        onClick: () => ctx.onOpenChange(!ctx.open),
+        "data-ln-dialog-open": ctx.open,
+        "aria-haspopup": "dialog",
+        "aria-controls": ctx.open ? ctx.id : undefined,
+    };
+    const final = useSlot({
+        props: [internalProps, props, { "data-ln-dialog-trigger": "true" }],
+        ref: ref,
+        slot: render ?? _jsx("button", {}),
+        state: {
+            open: ctx.open,
+            openChange: ctx.onOpenChange,
+        },
+    });
+    return final;
+}
+export const DialogTrigger = forwardRef(DialogTriggerBase);

package/dist/components/headless/dialog/use-dialog.d.ts

@@ -0,0 +1,4 @@
+export declare function useDialog(): {
+    open: boolean;
+    openChange: (b: boolean) => void;
+};

package/dist/components/headless/dialog/use-dialog.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { useDialogRoot } from "./context.js";
+export function useDialog() {
+    const { open, onOpenChange } = useDialogRoot();
+    const api = useMemo(() => {
+        return {
+            open,
+            openChange: (b) => onOpenChange(b),
+        };
+    }, [onOpenChange, open]);
+    return api;
+}