@lar-works/design-system 0.0.0-stage → 0.1.1

package/dist/overlays/ImageViewer.d.ts

@@ -0,0 +1,21 @@
+interface ImageViewerProps {
+  alt: string;
+  caption?: string;
+  onClose: () => void;
+  open: boolean;
+  /** Pixel size to show beside the caption; omit when unknown rather than guessing. */
+  resolution?: {
+    height: number;
+    width: number;
+  };
+  /** Omit while the image is not ready yet (still loading, authenticating, and so on); shows the
+   * same loading indicator as a slow-loading image rather than a broken one. */
+  src?: string;
+}
+/**
+ * Shows one image at its natural size over the blurred modal backdrop, scaled down only when it would not fit.
+ * Clicking anywhere except the image, the close button, or Escape dismisses it.
+ */
+export declare function ImageViewer({ alt, caption, onClose, open, resolution, src }: ImageViewerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageViewer.d.ts.map

package/dist/overlays/ImageViewer.js

@@ -0,0 +1,82 @@
+import { IconButton } from "../actions/IconButton.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Text } from "../typography/Typography.js";
+import { useModalAutoFocus } from "./useModalAutoFocus.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Loading } from "@ninna-ui/feedback";
+import { Modal } from "@ninna-ui/overlays";
+// src/overlays/ImageViewer.tsx
+/**
+* Shows one image at its natural size over the blurred modal backdrop, scaled down only when it would not fit.
+* Clicking anywhere except the image, the close button, or Escape dismisses it.
+*/
+function ImageViewer({ alt, caption, onClose, open, resolution, src }) {
+	const labels = useDesignSystemLabels();
+	const focusProps = useModalAutoFocus();
+	const captionId = useId();
+	const [loadedSource, setLoadedSource] = useState();
+	const loaded = Boolean(src) && loadedSource === src;
+	const size = resolution ? labels.imageSize(resolution.width, resolution.height) : void 0;
+	return /* @__PURE__ */ jsx(Modal, {
+		open,
+		onOpenChange: (next) => !next && onClose(),
+		children: /* @__PURE__ */ jsxs(Modal.Content, {
+			...focusProps,
+			title: caption ?? alt,
+			size: "full",
+			className: "top-0 left-0 flex h-dvh max-h-none w-screen translate-x-0 translate-y-0 items-center justify-center overflow-hidden rounded-none border-0 bg-transparent p-4 shadow-none sm:top-0 sm:left-0 sm:h-dvh sm:w-screen sm:translate-x-0 sm:translate-y-0 sm:p-8",
+			onClick: (event) => event.target === event.currentTarget && onClose(),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-5 right-5 z-10 [--color-header-icon:#ffffff] sm:top-6 sm:right-6",
+					children: /* @__PURE__ */ jsx(Modal.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": labels.close,
+							icon: /* @__PURE__ */ jsx(XIcon, {}),
+							variant: "header"
+						})
+					})
+				}),
+				loaded ? null : /* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute inset-0 flex items-center justify-center text-white/80",
+					children: /* @__PURE__ */ jsx(Loading, { size: "lg" })
+				}),
+				/* @__PURE__ */ jsxs("figure", {
+					"aria-labelledby": caption ? captionId : void 0,
+					className: "pointer-events-none m-0 flex max-w-full flex-col items-center gap-3",
+					children: [src ? /* @__PURE__ */ jsx("img", {
+						alt,
+						src,
+						decoding: "async",
+						ref: (image) => {
+							if (image?.complete && image.naturalWidth > 0) setLoadedSource(src);
+						},
+						onLoad: () => setLoadedSource(src),
+						onError: () => setLoadedSource(src),
+						className: `pointer-events-auto max-h-[calc(100dvh-7rem)] max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-200 motion-reduce:transition-none sm:max-h-[calc(100dvh-9rem)] ${loaded ? "opacity-100" : "opacity-0"}`
+					}) : null, caption || size ? /* @__PURE__ */ jsxs("figcaption", {
+						className: "flex max-w-prose flex-wrap items-baseline justify-center gap-x-3 gap-y-1 text-center",
+						children: [caption ? /* @__PURE__ */ jsx(Text, {
+							id: captionId,
+							as: "span",
+							className: "wrap-break-word text-white/90",
+							variant: "label",
+							children: caption
+						}) : null, size ? /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: "text-white/60 tabular-nums",
+							variant: "caption",
+							children: size
+						}) : null]
+					}) : null]
+				})
+			]
+		})
+	});
+}
+export { ImageViewer };
+
+//# sourceMappingURL=ImageViewer.js.map

package/dist/overlays/ImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.js","names":["NinnaModal"],"sources":["../../src/overlays/ImageViewer.tsx"],"sourcesContent":["import { Loading } from '@ninna-ui/feedback';\nimport { Modal as NinnaModal } from '@ninna-ui/overlays';\nimport { XIcon } from 'lucide-react';\nimport { useId, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\n\ninterface ImageViewerProps {\n    alt: string;\n    caption?: string;\n    onClose: () => void;\n    open: boolean;\n    /** Pixel size to show beside the caption; omit when unknown rather than guessing. */\n    resolution?: { height: number; width: number };\n    /** Omit while the image is not ready yet (still loading, authenticating, and so on); shows the\n     * same loading indicator as a slow-loading image rather than a broken one. */\n    src?: string;\n}\n\n/**\n * Shows one image at its natural size over the blurred modal backdrop, scaled down only when it would not fit.\n * Clicking anywhere except the image, the close button, or Escape dismisses it.\n */\nexport function ImageViewer({ alt, caption, onClose, open, resolution, src }: ImageViewerProps) {\n    const labels = useDesignSystemLabels();\n    const focusProps = useModalAutoFocus();\n    const captionId = useId();\n    const [loadedSource, setLoadedSource] = useState<string>();\n    const loaded = Boolean(src) && loadedSource === src;\n    const size = resolution ? labels.imageSize(resolution.width, resolution.height) : undefined;\n\n    return (\n        <NinnaModal open={open} onOpenChange={(next) => !next && onClose()}>\n            <NinnaModal.Content\n                {...focusProps}\n                title={caption ?? alt}\n                size=\"full\"\n                className=\"top-0 left-0 flex h-dvh max-h-none w-screen translate-x-0 translate-y-0 items-center justify-center overflow-hidden rounded-none border-0 bg-transparent p-4 shadow-none sm:top-0 sm:left-0 sm:h-dvh sm:w-screen sm:translate-x-0 sm:translate-y-0 sm:p-8\"\n                onClick={(event) => event.target === event.currentTarget && onClose()}\n            >\n                {/* The standard header close button, lightened because it always sits on the dark backdrop. */}\n                <div className=\"absolute top-5 right-5 z-10 [--color-header-icon:#ffffff] sm:top-6 sm:right-6\">\n                    <NinnaModal.Close asChild>\n                        <IconButton aria-label={labels.close} icon={<XIcon />} variant=\"header\" />\n                    </NinnaModal.Close>\n                </div>\n                {loaded ? null : (\n                    <span className=\"pointer-events-none absolute inset-0 flex items-center justify-center text-white/80\">\n                        <Loading size=\"lg\" />\n                    </span>\n                )}\n                {/* Only the image itself catches clicks; the space around it and the caption fall through to close. */}\n                <figure\n                    aria-labelledby={caption ? captionId : undefined}\n                    className=\"pointer-events-none m-0 flex max-w-full flex-col items-center gap-3\"\n                >\n                    {src ? (\n                        <img\n                            alt={alt}\n                            src={src}\n                            decoding=\"async\"\n                            ref={(image) => {\n                                if (image?.complete && image.naturalWidth > 0) setLoadedSource(src);\n                            }}\n                            onLoad={() => setLoadedSource(src)}\n                            onError={() => setLoadedSource(src)}\n                            className={`pointer-events-auto max-h-[calc(100dvh-7rem)] max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-200 motion-reduce:transition-none sm:max-h-[calc(100dvh-9rem)] ${loaded ? 'opacity-100' : 'opacity-0'}`}\n                        />\n                    ) : null}\n                    {caption || size ? (\n                        <figcaption className=\"flex max-w-prose flex-wrap items-baseline justify-center gap-x-3 gap-y-1 text-center\">\n                            {caption ? (\n                                <Text\n                                    id={captionId}\n                                    as=\"span\"\n                                    className=\"wrap-break-word text-white/90\"\n                                    variant=\"label\"\n                                >\n                                    {caption}\n                                </Text>\n                            ) : null}\n                            {size ? (\n                                <Text as=\"span\" className=\"text-white/60 tabular-nums\" variant=\"caption\">\n                                    {size}\n                                </Text>\n                            ) : null}\n                        </figcaption>\n                    ) : null}\n                </figure>\n            </NinnaModal.Content>\n        </NinnaModal>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BA,SAAgB,YAAY,EAAE,KAAK,SAAS,SAAS,MAAM,YAAY,OAAyB;CAC5F,MAAM,SAAS,sBAAsB;CACrC,MAAM,aAAa,kBAAkB;CACrC,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,cAAc,mBAAmB,SAAiB;CACzD,MAAM,SAAS,QAAQ,GAAG,KAAK,iBAAiB;CAChD,MAAM,OAAO,aAAa,OAAO,UAAU,WAAW,OAAO,WAAW,MAAM,IAAI,KAAA;CAElF,OACI,oBAACA,OAAD;EAAkB;EAAM,eAAe,SAAS,CAAC,QAAQ,QAAQ;EAC7D,UAAA,qBAACA,MAAW,SAAZ;GACI,GAAI;GACJ,OAAO,WAAW;GAClB,MAAK;GACL,WAAU;GACV,UAAU,UAAU,MAAM,WAAW,MAAM,iBAAiB,QAAQ;GALxE,UAAA;IAQI,oBAAC,OAAD;KAAK,WAAU;KACX,UAAA,oBAACA,MAAW,OAAZ;MAAkB,SAAA;MACd,UAAA,oBAAC,YAAD;OAAY,cAAY,OAAO;OAAO,MAAM,oBAAC,OAAD,CAAQ,CAAA;OAAG,SAAQ;MAAU,CAAA;KAC3D,CAAA;IACjB,CAAA;IACJ,SAAS,OACN,oBAAC,QAAD;KAAM,WAAU;KACZ,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAM,CAAA;IAClB,CAAA;IAGV,qBAAC,UAAD;KACI,mBAAiB,UAAU,YAAY,KAAA;KACvC,WAAU;KAFd,UAAA,CAIK,MACG,oBAAC,OAAD;MACS;MACA;MACL,UAAS;MACT,MAAM,UAAU;OACZ,IAAI,OAAO,YAAY,MAAM,eAAe,GAAG,gBAAgB,GAAG;MACtE;MACA,cAAc,gBAAgB,GAAG;MACjC,eAAe,gBAAgB,GAAG;MAClC,WAAW,4LAA4L,SAAS,gBAAgB;KACnO,CAAA,IACD,MACH,WAAW,OACR,qBAAC,cAAD;MAAY,WAAU;MAAtB,UAAA,CACK,UACG,oBAAC,MAAD;OACI,IAAI;OACJ,IAAG;OACH,WAAU;OACV,SAAQ;OAEP,UAAA;MACC,CAAA,IACN,MACH,OACG,oBAAC,MAAD;OAAM,IAAG;OAAO,WAAU;OAA6B,SAAQ;OAC1D,UAAA;MACC,CAAA,IACN,IACI;KACZ,CAAA,IAAA,IACA;;GACQ;;CACZ,CAAA;AAEpB"}

package/dist/overlays/Modal.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps, ReactNode } from "react";
+import { ModalBodyProps, ModalContentProps, ModalFooterProps } from "@ninna-ui/overlays";
+interface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' | 'size' | 'title'> {
+  accessibleTitle?: string;
+  /** Whether opening focuses the first editable field; off while the caller focuses something else. */
+  focusFirstField?: boolean;
+  headerActions?: ReactNode;
+  sidebar?: ReactNode;
+  /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */
+  presentation?: 'default' | 'paned' | 'workspace';
+  title: string;
+}
+declare function ModalForm(props: Omit<ComponentProps<'form'>, 'className'>): import("react").JSX.Element;
+declare function ModalPane({ active, children }: {
+  active: boolean;
+  children: ReactNode;
+}): import("react").JSX.Element;
+interface ModalRootPolicyProps {
+  children: ReactNode;
+  loading?: boolean;
+  onClose: () => void;
+}
+declare function ModalRoot({ children, loading, onClose }: ModalRootPolicyProps): import("react").JSX.Element;
+declare const Modal$1: typeof ModalRoot & {
+  Body: import("react").ForwardRefExoticComponent<Omit<ModalBodyProps, "className"> & {
+    layout?: 'scroll' | 'fill';
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  Form: typeof ModalForm;
+  Pane: typeof ModalPane;
+  Content: import("react").ForwardRefExoticComponent<ModalContentPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<ModalFooterProps, "className"> & {
+    leading?: ReactNode;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Modal$1 as Modal };
+//# sourceMappingURL=Modal.d.ts.map

package/dist/overlays/Modal.js

@@ -0,0 +1,149 @@
+import { IconButton } from "../actions/IconButton.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { useModalAutoFocus } from "./useModalAutoFocus.js";
+import { useScrollFade } from "./useScrollFade.js";
+import { createContext, forwardRef, useCallback, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Modal } from "@ninna-ui/overlays";
+// src/overlays/Modal.tsx
+const ModalLoadingContext = createContext(false);
+const ModalContent = forwardRef(({ accessibleTitle, children, closeOnEscape, closeOnOverlayClick, description, focusFirstField, headerActions, onPointerDownOutside, sidebar, presentation = sidebar ? "paned" : "default", title, ...props }, ref) => {
+	const loading = useContext(ModalLoadingContext);
+	const focusProps = useModalAutoFocus(focusFirstField);
+	return /* @__PURE__ */ jsxs(Modal.Content, {
+		ref,
+		...props,
+		...focusProps,
+		title: accessibleTitle ?? title,
+		description,
+		closeOnEscape: loading ? false : closeOnEscape,
+		closeOnOverlayClick: loading ? false : closeOnOverlayClick,
+		onPointerDownOutside: (event) => {
+			if (event.target instanceof Element && event.target.closest("[data-slot=\"toaster\"]")) event.preventDefault();
+			onPointerDownOutside?.(event);
+		},
+		size: presentation === "workspace" ? "full" : void 0,
+		className: `flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] flex-col overflow-hidden sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] ${sidebar ? "md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:grid-rows-[auto_minmax(0,1fr)]" : ""} ${presentation === "workspace" ? "h-[calc(100dvh-1rem)] max-w-6xl sm:h-[calc(100dvh-2rem)] sm:max-w-6xl" : presentation === "paned" ? "h-[calc(100dvh-1rem)] max-w-4xl sm:h-[min(44rem,calc(100dvh-2rem))] sm:max-w-4xl" : "max-w-160 sm:max-w-160"}`,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				"data-slot": "modal-header",
+				className: `@container min-w-0 shrink-0 px-5 pt-5 sm:px-6 sm:pt-6 ${description ? sidebar ? "pb-4 md:pb-0" : "" : "pb-4"} ${sidebar ? "md:col-start-2 md:row-start-1" : ""}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3",
+					children: [
+						/* @__PURE__ */ jsx(Heading, {
+							as: "h2",
+							className: "min-w-0 flex-1 wrap-break-word",
+							variant: "section",
+							children: title
+						}),
+						headerActions ? /* @__PURE__ */ jsx("div", {
+							className: "order-3 flex basis-full items-center justify-end gap-2 @min-[32rem]:order-0 @min-[32rem]:ml-auto @min-[32rem]:basis-auto",
+							children: headerActions
+						}) : null,
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0",
+							children: /* @__PURE__ */ jsx(ModalClose, {})
+						})
+					]
+				})
+			}),
+			sidebar ? /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 min-w-0 shrink-0 md:col-start-1 md:row-span-2 md:row-start-1",
+				children: sidebar
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: `flex min-h-0 min-w-0 flex-1 flex-col ${sidebar ? "md:col-start-2 md:row-start-2" : ""}`,
+				children: [description ? /* @__PURE__ */ jsx(Text, {
+					className: `shrink-0 px-5 pb-4 sm:px-6 ${sidebar ? "pt-4 md:pt-2" : "pt-2"}`,
+					tone: "muted",
+					children: description
+				}) : null, children]
+			})
+		]
+	});
+});
+ModalContent.displayName = "Modal.Content";
+const ModalBody = forwardRef(({ layout = "scroll", children, ...props }, ref) => {
+	const { setViewport, setContent, className } = useScrollFade();
+	const bodyRef = useCallback((element) => {
+		setViewport(element);
+		const cleanup = typeof ref === "function" ? ref(element) : void 0;
+		if (ref && typeof ref !== "function") ref.current = element;
+		return () => {
+			setViewport(null);
+			if (typeof cleanup === "function") cleanup();
+			else if (typeof ref === "function") ref(null);
+			else if (ref) ref.current = null;
+		};
+	}, [ref, setViewport]);
+	return /* @__PURE__ */ jsx(Modal.Body, {
+		ref: bodyRef,
+		...props,
+		className: `min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-6 sm:px-6 ${layout === "fill" ? "flex flex-col" : ""} ${className}`,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setContent,
+			className: layout === "fill" ? "flex min-h-0 flex-1 flex-col gap-3" : "flow-root",
+			children
+		})
+	});
+});
+ModalBody.displayName = "Modal.Body";
+function ModalForm(props) {
+	return /* @__PURE__ */ jsx("form", {
+		...props,
+		className: "flex min-h-0 flex-1 flex-col"
+	});
+}
+function ModalPane({ active, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		hidden: !active,
+		className: active ? "flex min-h-0 flex-1 flex-col" : "hidden",
+		children
+	});
+}
+const ModalFooter = forwardRef(({ leading, children, ...props }, ref) => /* @__PURE__ */ jsxs(Modal.Footer, {
+	ref,
+	...props,
+	className: "border-base-300 bg-base-50/60 shrink-0 border-t px-5 py-4 sm:px-6 sm:pb-4",
+	children: [leading ? /* @__PURE__ */ jsx("div", {
+		className: "mr-auto min-w-0 basis-full pb-2 sm:basis-auto sm:pb-0",
+		children: leading
+	}) : null, children]
+}));
+ModalFooter.displayName = "Modal.Footer";
+function ModalClose() {
+	const labels = useDesignSystemLabels();
+	const loading = useContext(ModalLoadingContext);
+	return /* @__PURE__ */ jsx(Modal.Close, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": labels.close,
+			disabled: loading,
+			icon: /* @__PURE__ */ jsx(XIcon, {}),
+			variant: "header"
+		})
+	});
+}
+function ModalRoot({ children, loading = false, onClose }) {
+	return /* @__PURE__ */ jsx(ModalLoadingContext.Provider, {
+		value: loading,
+		children: /* @__PURE__ */ jsx(Modal, {
+			open: true,
+			onOpenChange: (open) => !open && !loading && onClose(),
+			children
+		})
+	});
+}
+const Modal$1 = Object.assign(ModalRoot, {
+	Body: ModalBody,
+	Form: ModalForm,
+	Pane: ModalPane,
+	Content: ModalContent,
+	Footer: ModalFooter
+});
+export { Modal$1 as Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/overlays/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":["NinnaModal","Modal"],"sources":["../../src/overlays/Modal.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Modal. */\n\nimport {\n    Modal as NinnaModal,\n    type ModalBodyProps,\n    type ModalContentProps,\n    type ModalFooterProps,\n} from '@ninna-ui/overlays';\nimport { XIcon } from 'lucide-react';\nimport {\n    type ComponentProps,\n    createContext,\n    forwardRef,\n    type ReactNode,\n    type Ref,\n    useCallback,\n    useContext,\n} from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Heading, Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\nconst ModalLoadingContext = createContext(false);\n\ninterface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' | 'size' | 'title'> {\n    accessibleTitle?: string;\n    /** Whether opening focuses the first editable field; off while the caller focuses something else. */\n    focusFirstField?: boolean;\n    headerActions?: ReactNode;\n    sidebar?: ReactNode;\n    /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */\n    presentation?: 'default' | 'paned' | 'workspace';\n    title: string;\n}\n\nconst ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(\n    (\n        {\n            accessibleTitle,\n            children,\n            closeOnEscape,\n            closeOnOverlayClick,\n            description,\n            focusFirstField,\n            headerActions,\n            onPointerDownOutside,\n            sidebar,\n            presentation = sidebar ? 'paned' : 'default',\n            title,\n            ...props\n        },\n        ref,\n    ) => {\n        const loading = useContext(ModalLoadingContext);\n        const focusProps = useModalAutoFocus(focusFirstField);\n\n        return (\n            <NinnaModal.Content\n                ref={ref}\n                {...props}\n                {...focusProps}\n                title={accessibleTitle ?? title}\n                description={description}\n                closeOnEscape={loading ? false : closeOnEscape}\n                closeOnOverlayClick={loading ? false : closeOnOverlayClick}\n                onPointerDownOutside={(event) => {\n                    if (event.target instanceof Element && event.target.closest('[data-slot=\"toaster\"]')) {\n                        event.preventDefault();\n                    }\n\n                    onPointerDownOutside?.(event);\n                }}\n                size={presentation === 'workspace' ? 'full' : undefined}\n                className={`flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] flex-col overflow-hidden sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] ${\n                    sidebar ? 'md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:grid-rows-[auto_minmax(0,1fr)]' : ''\n                } ${\n                    presentation === 'workspace'\n                        ? 'h-[calc(100dvh-1rem)] max-w-6xl sm:h-[calc(100dvh-2rem)] sm:max-w-6xl'\n                        : presentation === 'paned'\n                          ? // Paned dialogs keep one height across panes; the body scrolls instead of the dialog resizing.\n                            'h-[calc(100dvh-1rem)] max-w-4xl sm:h-[min(44rem,calc(100dvh-2rem))] sm:max-w-4xl'\n                          : 'max-w-160 sm:max-w-160'\n                }`}\n            >\n                <header\n                    data-slot=\"modal-header\"\n                    className={`@container min-w-0 shrink-0 px-5 pt-5 sm:px-6 sm:pt-6 ${\n                        description ? (sidebar ? 'pb-4 md:pb-0' : '') : 'pb-4'\n                    } ${sidebar ? 'md:col-start-2 md:row-start-1' : ''}`}\n                >\n                    <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3\">\n                        <Heading as=\"h2\" className=\"min-w-0 flex-1 wrap-break-word\" variant=\"section\">\n                            {title}\n                        </Heading>\n                        {headerActions ? (\n                            <div className=\"order-3 flex basis-full items-center justify-end gap-2 @min-[32rem]:order-0 @min-[32rem]:ml-auto @min-[32rem]:basis-auto\">\n                                {headerActions}\n                            </div>\n                        ) : null}\n                        <div className=\"shrink-0\">\n                            <ModalClose />\n                        </div>\n                    </div>\n                </header>\n                {sidebar ? (\n                    <div className=\"min-h-0 min-w-0 shrink-0 md:col-start-1 md:row-span-2 md:row-start-1\">\n                        {sidebar}\n                    </div>\n                ) : null}\n                <div\n                    className={`flex min-h-0 min-w-0 flex-1 flex-col ${sidebar ? 'md:col-start-2 md:row-start-2' : ''}`}\n                >\n                    {description ? (\n                        <Text\n                            className={`shrink-0 px-5 pb-4 sm:px-6 ${sidebar ? 'pt-4 md:pt-2' : 'pt-2'}`}\n                            tone=\"muted\"\n                        >\n                            {description}\n                        </Text>\n                    ) : null}\n                    {children}\n                </div>\n            </NinnaModal.Content>\n        );\n    },\n);\n\nModalContent.displayName = 'Modal.Content';\n\nconst ModalBody = forwardRef<HTMLDivElement, Omit<ModalBodyProps, 'className'> & { layout?: 'scroll' | 'fill' }>(\n    ({ layout = 'scroll', children, ...props }, ref: Ref<HTMLDivElement>) => {\n        const { setViewport, setContent, className } = useScrollFade();\n        const bodyRef = useCallback(\n            (element: HTMLDivElement) => {\n                setViewport(element);\n\n                const cleanup = typeof ref === 'function' ? ref(element) : undefined;\n\n                if (ref && typeof ref !== 'function') ref.current = element;\n\n                return () => {\n                    setViewport(null);\n\n                    if (typeof cleanup === 'function') cleanup();\n                    else if (typeof ref === 'function') ref(null);\n                    else if (ref) ref.current = null;\n                };\n            },\n            [ref, setViewport],\n        );\n\n        return (\n            <NinnaModal.Body\n                ref={bodyRef}\n                {...props}\n                className={`min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-6 sm:px-6 ${layout === 'fill' ? 'flex flex-col' : ''} ${className}`}\n            >\n                <div\n                    ref={setContent}\n                    className={layout === 'fill' ? 'flex min-h-0 flex-1 flex-col gap-3' : 'flow-root'}\n                >\n                    {children}\n                </div>\n            </NinnaModal.Body>\n        );\n    },\n);\n\nModalBody.displayName = 'Modal.Body';\n\nfunction ModalForm(props: Omit<ComponentProps<'form'>, 'className'>) {\n    return <form {...props} className=\"flex min-h-0 flex-1 flex-col\" />;\n}\n\nfunction ModalPane({ active, children }: { active: boolean; children: ReactNode }) {\n    return (\n        <div hidden={!active} className={active ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>\n            {children}\n        </div>\n    );\n}\n\nconst ModalFooter = forwardRef<HTMLDivElement, Omit<ModalFooterProps, 'className'> & { leading?: ReactNode }>(\n    ({ leading, children, ...props }, ref) => (\n        <NinnaModal.Footer\n            ref={ref}\n            {...props}\n            className=\"border-base-300 bg-base-50/60 shrink-0 border-t px-5 py-4 sm:px-6 sm:pb-4\"\n        >\n            {leading ? <div className=\"mr-auto min-w-0 basis-full pb-2 sm:basis-auto sm:pb-0\">{leading}</div> : null}\n            {children}\n        </NinnaModal.Footer>\n    ),\n);\n\nModalFooter.displayName = 'Modal.Footer';\n\nfunction ModalClose() {\n    const labels = useDesignSystemLabels();\n    const loading = useContext(ModalLoadingContext);\n\n    return (\n        <NinnaModal.Close asChild>\n            <IconButton aria-label={labels.close} disabled={loading} icon={<XIcon />} variant=\"header\" />\n        </NinnaModal.Close>\n    );\n}\n\ninterface ModalRootPolicyProps {\n    children: ReactNode;\n    loading?: boolean;\n    onClose: () => void;\n}\n\nfunction ModalRoot({ children, loading = false, onClose }: ModalRootPolicyProps) {\n    return (\n        <ModalLoadingContext.Provider value={loading}>\n            <NinnaModal open onOpenChange={(open) => !open && !loading && onClose()}>\n                {children}\n            </NinnaModal>\n        </ModalLoadingContext.Provider>\n    );\n}\n\nexport const Modal = Object.assign(ModalRoot, {\n    Body: ModalBody,\n    Form: ModalForm,\n    Pane: ModalPane,\n    Content: ModalContent,\n    Footer: ModalFooter,\n});\n"],"mappings":"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"}

package/dist/overlays/Popover.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { Popover, PopoverContentProps } from "@ninna-ui/overlays";
+interface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className'> {
+  layout?: 'fill' | 'scroll';
+  onOpenAutoFocus?: (event: Event) => void;
+  onCloseAutoFocus?: (event: Event) => void;
+  presentation?: 'default' | 'menu';
+  width?: 'content' | 'sm' | 'trigger';
+}
+declare function PopoverRoot(props: ComponentProps<typeof Popover>): import("react").JSX.Element;
+declare const Popover$1: typeof PopoverRoot & {
+  displayName: string;
+  Trigger: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Arrow: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>;
+  Close: import("react").ForwardRefExoticComponent<import("@ninna-ui/overlays").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Content: import("react").ForwardRefExoticComponent<PopoverContentPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Popover$1 as Popover };
+//# sourceMappingURL=Popover.d.ts.map

package/dist/overlays/Popover.js

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@ninna-ui/overlays";
+// src/overlays/Popover.tsx
+const popoverWidthClasses = {
+	content: void 0,
+	sm: "w-64",
+	trigger: "w-(--radix-popover-trigger-width)"
+};
+const PopoverContent = forwardRef(({ layout = "scroll", presentation = "default", width = "content", ...props }, ref) => /* @__PURE__ */ jsx(Popover.Content, {
+	ref,
+	...props,
+	"data-layout": layout,
+	className: `${popoverWidthClasses[width] ?? ""} ${presentation === "menu" ? "p-1" : ""}`
+}));
+PopoverContent.displayName = "Popover.Content";
+function PopoverRoot(props) {
+	return /* @__PURE__ */ jsx(Popover, { ...props });
+}
+const Popover$1 = Object.assign(PopoverRoot, {
+	...Popover,
+	Content: PopoverContent
+});
+export { Popover$1 as Popover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/overlays/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["NinnaPopover","Popover"],"sources":["../../src/overlays/Popover.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Popover. */\n\nimport { Popover as NinnaPopover, type PopoverContentProps } from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef } from 'react';\n\ninterface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className'> {\n    layout?: 'fill' | 'scroll';\n    onOpenAutoFocus?: (event: Event) => void;\n    onCloseAutoFocus?: (event: Event) => void;\n    presentation?: 'default' | 'menu';\n    width?: 'content' | 'sm' | 'trigger';\n}\n\nconst popoverWidthClasses: Record<NonNullable<PopoverContentPolicyProps['width']>, string | undefined> = {\n    content: undefined,\n    sm: 'w-64',\n    trigger: 'w-(--radix-popover-trigger-width)',\n};\n\nconst PopoverContent = forwardRef<HTMLDivElement, PopoverContentPolicyProps>(\n    ({ layout = 'scroll', presentation = 'default', width = 'content', ...props }, ref) => (\n        <NinnaPopover.Content\n            ref={ref}\n            {...props}\n            data-layout={layout}\n            className={`${popoverWidthClasses[width] ?? ''} ${presentation === 'menu' ? 'p-1' : ''}`}\n        />\n    ),\n);\n\nPopoverContent.displayName = 'Popover.Content';\n\nfunction PopoverRoot(props: ComponentProps<typeof NinnaPopover>) {\n    return <NinnaPopover {...props} />;\n}\n\nexport const Popover = Object.assign(PopoverRoot, {\n    ...NinnaPopover,\n    Content: PopoverContent,\n});\n"],"mappings":";;;;AAaA,MAAM,sBAAmG;CACrG,SAAS,KAAA;CACT,IAAI;CACJ,SAAS;AACb;AAEA,MAAM,iBAAiB,YAClB,EAAE,SAAS,UAAU,eAAe,WAAW,QAAQ,WAAW,GAAG,SAAS,QAC3E,oBAACA,QAAa,SAAd;CACS;CACL,GAAI;CACJ,eAAa;CACb,WAAW,GAAG,oBAAoB,UAAU,GAAG,GAAG,iBAAiB,SAAS,QAAQ;AACvF,CAAA,CAET;AAEA,eAAe,cAAc;AAE7B,SAAS,YAAY,OAA4C;CAC7D,OAAO,oBAACA,SAAD,EAAc,GAAI,MAAQ,CAAA;AACrC;AAEA,MAAaC,YAAU,OAAO,OAAO,aAAa;CAC9C,GAAGD;CACH,SAAS;AACb,CAAC"}

package/dist/overlays/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { TooltipContentProps, TooltipTriggerProps } from "@ninna-ui/overlays";
+import { TooltipEngine } from "@ninna-ui/react-internal";
+/** Shares one open delay across the tooltips inside it. */
+export declare function TooltipProvider(props: ComponentProps<typeof TooltipEngine.Provider>): import("react").JSX.Element;
+declare function Tooltip$1({ disabled, ...props }: ComponentProps<typeof TooltipEngine.Root> & {
+  disabled?: boolean;
+}): import("react").JSX.Element;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TooltipPopup: import("react").ForwardRefExoticComponent<Omit<TooltipContentProps, "color" | "hasArrow"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Tooltip$1 as Tooltip };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/overlays/Tooltip.js

@@ -0,0 +1,54 @@
+import { forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@ninna-ui/overlays";
+import { Slot, TooltipEngine } from "@ninna-ui/react-internal";
+// src/overlays/Tooltip.tsx
+/** Shares one open delay across the tooltips inside it. */
+function TooltipProvider(props) {
+	return /* @__PURE__ */ jsx(TooltipEngine.Provider, { ...props });
+}
+function Tooltip$1({ disabled, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipEngine.Root, {
+		...props,
+		open: disabled ? false : props.open
+	});
+}
+const TooltipTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+	const childProps = asChild && isValidElement(children) ? children.props : void 0;
+	if (props.disabled || childProps?.disabled) {
+		const Trigger = asChild ? Slot : "button";
+		return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				tabIndex: 0,
+				role: "button",
+				"aria-disabled": "true",
+				"aria-label": props["aria-label"] ?? childProps?.["aria-label"],
+				"aria-labelledby": props["aria-labelledby"] ?? childProps?.["aria-labelledby"],
+				className: "inline-flex [&>*]:pointer-events-none",
+				children: /* @__PURE__ */ jsx(Trigger, {
+					type: "button",
+					...props,
+					ref,
+					children
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		...props,
+		ref,
+		asChild,
+		children
+	});
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipPopup = forwardRef((props, ref) => /* @__PURE__ */ jsx(Tooltip.Content, {
+	...props,
+	ref,
+	role: void 0
+}));
+TooltipPopup.displayName = "TooltipPopup";
+export { Tooltip$1 as Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/overlays/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["Tooltip","NinnaTooltip"],"sources":["../../src/overlays/Tooltip.tsx"],"sourcesContent":["import { Tooltip as NinnaTooltip, type TooltipContentProps, type TooltipTriggerProps } from '@ninna-ui/overlays';\nimport { Slot, TooltipEngine } from '@ninna-ui/react-internal';\nimport { type ComponentProps, forwardRef, isValidElement } from 'react';\n\n/** Shares one open delay across the tooltips inside it. */\nexport function TooltipProvider(props: ComponentProps<typeof TooltipEngine.Provider>) {\n    return <TooltipEngine.Provider {...props} />;\n}\n\nexport function Tooltip({ disabled, ...props }: ComponentProps<typeof TooltipEngine.Root> & { disabled?: boolean }) {\n    return <TooltipEngine.Root {...props} open={disabled ? false : props.open} />;\n}\n\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n    ({ asChild, children, ...props }, ref) => {\n        const childProps = asChild && isValidElement<TooltipTriggerProps>(children) ? children.props : undefined;\n\n        if (props.disabled || childProps?.disabled) {\n            const Trigger = asChild ? Slot : 'button';\n\n            return (\n                <NinnaTooltip.Trigger asChild>\n                    <span\n                        tabIndex={0}\n                        role=\"button\"\n                        aria-disabled=\"true\"\n                        aria-label={props['aria-label'] ?? childProps?.['aria-label']}\n                        aria-labelledby={props['aria-labelledby'] ?? childProps?.['aria-labelledby']}\n                        className=\"inline-flex [&>*]:pointer-events-none\"\n                    >\n                        <Trigger type=\"button\" {...props} ref={ref}>\n                            {children}\n                        </Trigger>\n                    </span>\n                </NinnaTooltip.Trigger>\n            );\n        }\n\n        return (\n            <NinnaTooltip.Trigger {...props} ref={ref} asChild={asChild}>\n                {children}\n            </NinnaTooltip.Trigger>\n        );\n    },\n);\n\nTooltipTrigger.displayName = 'TooltipTrigger';\n\nexport const TooltipPopup = forwardRef<HTMLDivElement, Omit<TooltipContentProps, 'color' | 'hasArrow'>>(\n    (props, ref) => (\n        // Radix supplies the tooltip role on its visually hidden accessible description.\n        <NinnaTooltip.Content {...props} ref={ref} role={undefined} />\n    ),\n);\n\nTooltipPopup.displayName = 'TooltipPopup';\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB,OAAsD;CAClF,OAAO,oBAAC,cAAc,UAAf,EAAwB,GAAI,MAAQ,CAAA;AAC/C;AAEA,SAAgBA,UAAQ,EAAE,UAAU,GAAG,SAA6E;CAChH,OAAO,oBAAC,cAAc,MAAf;EAAoB,GAAI;EAAO,MAAM,WAAW,QAAQ,MAAM;CAAO,CAAA;AAChF;AAEA,MAAa,iBAAiB,YACzB,EAAE,SAAS,UAAU,GAAG,SAAS,QAAQ;CACtC,MAAM,aAAa,WAAW,eAAoC,QAAQ,IAAI,SAAS,QAAQ,KAAA;CAE/F,IAAI,MAAM,YAAY,YAAY,UAAU;EACxC,MAAM,UAAU,UAAU,OAAO;EAEjC,OACI,oBAACC,QAAa,SAAd;GAAsB,SAAA;GAClB,UAAA,oBAAC,QAAD;IACI,UAAU;IACV,MAAK;IACL,iBAAc;IACd,cAAY,MAAM,iBAAiB,aAAa;IAChD,mBAAiB,MAAM,sBAAsB,aAAa;IAC1D,WAAU;IAEV,UAAA,oBAAC,SAAD;KAAS,MAAK;KAAS,GAAI;KAAY;KAClC;IACI,CAAA;GACP,CAAA;EACY,CAAA;CAE9B;CAEA,OACI,oBAACA,QAAa,SAAd;EAAsB,GAAI;EAAY;EAAc;EAC/C;CACiB,CAAA;AAE9B,CACJ;AAEA,eAAe,cAAc;AAE7B,MAAa,eAAe,YACvB,OAAO,QAEJ,oBAACA,QAAa,SAAd;CAAsB,GAAI;CAAY;CAAK,MAAM,KAAA;AAAY,CAAA,CAErE;AAEA,aAAa,cAAc"}

package/dist/overlays/index.d.ts

@@ -0,0 +1,9 @@
+import { ActionModal } from "./ActionModal.js";
+import { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from "./CommandPalette.js";
+import { Drawer } from "./Drawer.js";
+import { DropdownMenu } from "./DropdownMenu.js";
+import { ImageViewer } from "./ImageViewer.js";
+import { Modal } from "./Modal.js";
+import { Popover } from "./Popover.js";
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./Tooltip.js";
+export { ActionModal, CommandPalette, CommandPaletteGroup, Drawer, DropdownMenu, ImageViewer, Modal, Popover, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, useCommandPaletteOption };

package/dist/overlays/useModalAutoFocus.js

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+// src/overlays/useModalAutoFocus.ts
+/** Focuses a dialog's first editable field when it opens, or once one appears, unless `focusFirstField` is
+*  false, such as while the caller focuses something else; turning it off stops a pending wait. */
+function useModalAutoFocus(focusFirstField = true) {
+	const cleanup = useRef(void 0);
+	const returnFocus = useRef(null);
+	useEffect(() => () => cleanup.current?.(), []);
+	useEffect(() => {
+		if (!focusFirstField) cleanup.current?.();
+	}, [focusFirstField]);
+	const onOpenAutoFocus = (event) => {
+		cleanup.current?.();
+		const dialog = event.target;
+		if (!(dialog instanceof HTMLElement)) return;
+		returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (!focusFirstField) return;
+		if (focusFirstEditable(dialog)) {
+			event.preventDefault();
+			return;
+		}
+		const observer = new MutationObserver(() => {
+			if (focusFirstEditable(dialog)) stop();
+		});
+		const stop = () => {
+			observer.disconnect();
+			dialog.removeEventListener("pointerdown", stop, true);
+			dialog.removeEventListener("keydown", stop, true);
+			cleanup.current = void 0;
+		};
+		cleanup.current = stop;
+		observer.observe(dialog, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"readonly",
+				"hidden",
+				"inert",
+				"class",
+				"style",
+				"aria-disabled",
+				"aria-readonly",
+				"aria-hidden"
+			]
+		});
+		dialog.addEventListener("pointerdown", stop, true);
+		dialog.addEventListener("keydown", stop, true);
+	};
+	const onCloseAutoFocus = (event) => {
+		cleanup.current?.();
+		if (returnFocus.current?.isConnected) {
+			event.preventDefault();
+			returnFocus.current.focus({ preventScroll: true });
+		}
+	};
+	return {
+		onOpenAutoFocus,
+		onCloseAutoFocus
+	};
+}
+function focusFirstEditable(dialog) {
+	const candidates = dialog.querySelectorAll("input, textarea, select, [role=\"combobox\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"radio\"], [contenteditable=\"true\"], [data-slot=\"field\"] button[aria-haspopup=\"dialog\"]");
+	for (const field of candidates) {
+		if (field.tabIndex < 0 || field.matches(":disabled, [readonly], [aria-disabled=\"true\"], [aria-readonly=\"true\"], input[type=\"hidden\"], input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"], input[type=\"image\"]") || field.closest("[hidden], [inert], [aria-hidden=\"true\"], details:not([open])") || field.closest("[role=\"dialog\"]") !== dialog || !isVisible(field, dialog)) continue;
+		field.focus({ preventScroll: true });
+		if (document.activeElement !== field) continue;
+		if (field instanceof HTMLTextAreaElement || field instanceof HTMLInputElement && field.selectionStart !== null) field.select();
+		return true;
+	}
+	return false;
+}
+function isVisible(field, dialog) {
+	if (getComputedStyle(field).visibility !== "visible") return false;
+	for (let element = field; element; element = element.parentElement) {
+		if (getComputedStyle(element).display === "none") return false;
+		if (element === dialog) return true;
+	}
+	return false;
+}
+export { useModalAutoFocus };
+
+//# sourceMappingURL=useModalAutoFocus.js.map

package/dist/overlays/useModalAutoFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalAutoFocus.js","names":[],"sources":["../../src/overlays/useModalAutoFocus.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** Focuses a dialog's first editable field when it opens, or once one appears, unless `focusFirstField` is\n *  false, such as while the caller focuses something else; turning it off stops a pending wait. */\nexport function useModalAutoFocus(focusFirstField = true) {\n    const cleanup = useRef<(() => void) | undefined>(undefined);\n    const returnFocus = useRef<HTMLElement | null>(null);\n\n    useEffect(() => () => cleanup.current?.(), []);\n    useEffect(() => {\n        if (!focusFirstField) cleanup.current?.();\n    }, [focusFirstField]);\n\n    const onOpenAutoFocus = (event: Event) => {\n        cleanup.current?.();\n\n        const dialog = event.target;\n\n        if (!(dialog instanceof HTMLElement)) return;\n\n        returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n\n        if (!focusFirstField) return;\n\n        if (focusFirstEditable(dialog)) {\n            event.preventDefault();\n\n            return;\n        }\n\n        const observer = new MutationObserver(() => {\n            if (focusFirstEditable(dialog)) stop();\n        });\n\n        const stop = () => {\n            observer.disconnect();\n            dialog.removeEventListener('pointerdown', stop, true);\n            dialog.removeEventListener('keydown', stop, true);\n            cleanup.current = undefined;\n        };\n\n        cleanup.current = stop;\n        observer.observe(dialog, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: [\n                'disabled',\n                'readonly',\n                'hidden',\n                'inert',\n                'class',\n                'style',\n                'aria-disabled',\n                'aria-readonly',\n                'aria-hidden',\n            ],\n        });\n        dialog.addEventListener('pointerdown', stop, true);\n        dialog.addEventListener('keydown', stop, true);\n    };\n\n    const onCloseAutoFocus = (event: Event) => {\n        cleanup.current?.();\n\n        if (returnFocus.current?.isConnected) {\n            event.preventDefault();\n            returnFocus.current.focus({ preventScroll: true });\n        }\n    };\n\n    return { onOpenAutoFocus, onCloseAutoFocus };\n}\n\nfunction focusFirstEditable(dialog: HTMLElement): boolean {\n    const candidates = dialog.querySelectorAll<HTMLElement>(\n        'input, textarea, select, [role=\"combobox\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"radio\"], [contenteditable=\"true\"], [data-slot=\"field\"] button[aria-haspopup=\"dialog\"]',\n    );\n\n    for (const field of candidates) {\n        if (\n            field.tabIndex < 0 ||\n            field.matches(\n                ':disabled, [readonly], [aria-disabled=\"true\"], [aria-readonly=\"true\"], input[type=\"hidden\"], input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"], input[type=\"image\"]',\n            ) ||\n            field.closest('[hidden], [inert], [aria-hidden=\"true\"], details:not([open])') ||\n            field.closest('[role=\"dialog\"]') !== dialog ||\n            !isVisible(field, dialog)\n        )\n            continue;\n\n        field.focus({ preventScroll: true });\n\n        if (document.activeElement !== field) continue;\n\n        if (\n            field instanceof HTMLTextAreaElement ||\n            (field instanceof HTMLInputElement && field.selectionStart !== null)\n        ) {\n            field.select();\n        }\n\n        return true;\n    }\n\n    return false;\n}\n\nfunction isVisible(field: HTMLElement, dialog: HTMLElement): boolean {\n    if (getComputedStyle(field).visibility !== 'visible') return false;\n\n    for (let element: HTMLElement | null = field; element; element = element.parentElement) {\n        if (getComputedStyle(element).display === 'none') return false;\n\n        if (element === dialog) return true;\n    }\n\n    return false;\n}\n"],"mappings":";;;;AAIA,SAAgB,kBAAkB,kBAAkB,MAAM;CACtD,MAAM,UAAU,OAAiC,KAAA,CAAS;CAC1D,MAAM,cAAc,OAA2B,IAAI;CAEnD,sBAAsB,QAAQ,UAAU,GAAG,CAAC,CAAC;CAC7C,gBAAgB;EACZ,IAAI,CAAC,iBAAiB,QAAQ,UAAU;CAC5C,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,mBAAmB,UAAiB;EACtC,QAAQ,UAAU;EAElB,MAAM,SAAS,MAAM;EAErB,IAAI,EAAE,kBAAkB,cAAc;EAEtC,YAAY,UAAU,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;EAE/F,IAAI,CAAC,iBAAiB;EAEtB,IAAI,mBAAmB,MAAM,GAAG;GAC5B,MAAM,eAAe;GAErB;EACJ;EAEA,MAAM,WAAW,IAAI,uBAAuB;GACxC,IAAI,mBAAmB,MAAM,GAAG,KAAK;EACzC,CAAC;EAED,MAAM,aAAa;GACf,SAAS,WAAW;GACpB,OAAO,oBAAoB,eAAe,MAAM,IAAI;GACpD,OAAO,oBAAoB,WAAW,MAAM,IAAI;GAChD,QAAQ,UAAU,KAAA;EACtB;EAEA,QAAQ,UAAU;EAClB,SAAS,QAAQ,QAAQ;GACrB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IACb;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACJ;EACJ,CAAC;EACD,OAAO,iBAAiB,eAAe,MAAM,IAAI;EACjD,OAAO,iBAAiB,WAAW,MAAM,IAAI;CACjD;CAEA,MAAM,oBAAoB,UAAiB;EACvC,QAAQ,UAAU;EAElB,IAAI,YAAY,SAAS,aAAa;GAClC,MAAM,eAAe;GACrB,YAAY,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;EACrD;CACJ;CAEA,OAAO;EAAE;EAAiB;CAAiB;AAC/C;AAEA,SAAS,mBAAmB,QAA8B;CACtD,MAAM,aAAa,OAAO,iBACtB,4LACJ;CAEA,KAAK,MAAM,SAAS,YAAY;EAC5B,IACI,MAAM,WAAW,KACjB,MAAM,QACF,iMACJ,KACA,MAAM,QAAQ,gEAA8D,KAC5E,MAAM,QAAQ,mBAAiB,MAAM,UACrC,CAAC,UAAU,OAAO,MAAM,GAExB;EAEJ,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;EAEnC,IAAI,SAAS,kBAAkB,OAAO;EAEtC,IACI,iBAAiB,uBAChB,iBAAiB,oBAAoB,MAAM,mBAAmB,MAE/D,MAAM,OAAO;EAGjB,OAAO;CACX;CAEA,OAAO;AACX;AAEA,SAAS,UAAU,OAAoB,QAA8B;CACjE,IAAI,iBAAiB,KAAK,CAAC,CAAC,eAAe,WAAW,OAAO;CAE7D,KAAK,IAAI,UAA8B,OAAO,SAAS,UAAU,QAAQ,eAAe;EACpF,IAAI,iBAAiB,OAAO,CAAC,CAAC,YAAY,QAAQ,OAAO;EAEzD,IAAI,YAAY,QAAQ,OAAO;CACnC;CAEA,OAAO;AACX"}

package/dist/overlays/useScrollFade.js

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useState } from "react";
+// src/overlays/useScrollFade.ts
+/** Attach to the scroll owner and its content so async content and viewport changes update the mask. */
+function useScrollFade() {
+	const [viewport, setViewport] = useState(null);
+	const [content, setContent] = useState(null);
+	useLayoutEffect(() => {
+		if (!viewport || !content) return;
+		const measure = () => {
+			const { scrollTop, scrollHeight, clientHeight } = viewport;
+			viewport.style.setProperty("--scroll-fade-top", `${Math.max(0, scrollTop)}px`);
+			viewport.style.setProperty("--scroll-fade-bottom", `${Math.max(0, scrollHeight - clientHeight - scrollTop)}px`);
+		};
+		const observer = new ResizeObserver(measure);
+		const observeContent = () => {
+			observer.disconnect();
+			observer.observe(viewport);
+			observer.observe(content);
+			content.querySelectorAll("*").forEach((element) => observer.observe(element));
+			measure();
+		};
+		const mutations = new MutationObserver(observeContent);
+		mutations.observe(content, {
+			childList: true,
+			subtree: true
+		});
+		viewport.addEventListener("scroll", measure, { passive: true });
+		observeContent();
+		return () => {
+			mutations.disconnect();
+			observer.disconnect();
+			viewport.removeEventListener("scroll", measure);
+		};
+	}, [viewport, content]);
+	return {
+		setViewport,
+		setContent,
+		className: "[mask-image:linear-gradient(to_bottom,transparent,black_min(1.5rem,var(--scroll-fade-top,0px)),black_calc(100%_-_min(1.5rem,var(--scroll-fade-bottom,0px))),transparent)] focus-visible:[mask-image:none] has-[:focus-visible]:[mask-image:none]"
+	};
+}
+export { useScrollFade };
+
+//# sourceMappingURL=useScrollFade.js.map

package/dist/overlays/useScrollFade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollFade.js","names":[],"sources":["../../src/overlays/useScrollFade.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\n/** Attach to the scroll owner and its content so async content and viewport changes update the mask. */\nexport function useScrollFade() {\n    const [viewport, setViewport] = useState<HTMLDivElement | null>(null);\n    const [content, setContent] = useState<HTMLDivElement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!viewport || !content) return;\n\n        const measure = () => {\n            const { scrollTop, scrollHeight, clientHeight } = viewport;\n\n            viewport.style.setProperty('--scroll-fade-top', `${Math.max(0, scrollTop)}px`);\n            viewport.style.setProperty(\n                '--scroll-fade-bottom',\n                `${Math.max(0, scrollHeight - clientHeight - scrollTop)}px`,\n            );\n        };\n        const observer = new ResizeObserver(measure);\n\n        const observeContent = () => {\n            observer.disconnect();\n            observer.observe(viewport);\n            observer.observe(content);\n            // Fill layouts can keep ancestors fixed while descendants change the scroll extent.\n            content.querySelectorAll('*').forEach((element) => observer.observe(element));\n            measure();\n        };\n        const mutations = new MutationObserver(observeContent);\n\n        mutations.observe(content, { childList: true, subtree: true });\n        viewport.addEventListener('scroll', measure, { passive: true });\n        observeContent();\n\n        return () => {\n            mutations.disconnect();\n            observer.disconnect();\n            viewport.removeEventListener('scroll', measure);\n        };\n    }, [viewport, content]);\n\n    return {\n        setViewport,\n        setContent,\n        className:\n            '[mask-image:linear-gradient(to_bottom,transparent,black_min(1.5rem,var(--scroll-fade-top,0px)),black_calc(100%_-_min(1.5rem,var(--scroll-fade-bottom,0px))),transparent)] focus-visible:[mask-image:none] has-[:focus-visible]:[mask-image:none]',\n    };\n}\n"],"mappings":";;;AAGA,SAAgB,gBAAgB;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAgC,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAAgC,IAAI;CAElE,sBAAsB;EAClB,IAAI,CAAC,YAAY,CAAC,SAAS;EAE3B,MAAM,gBAAgB;GAClB,MAAM,EAAE,WAAW,cAAc,iBAAiB;GAElD,SAAS,MAAM,YAAY,qBAAqB,GAAG,KAAK,IAAI,GAAG,SAAS,EAAE,GAAG;GAC7E,SAAS,MAAM,YACX,wBACA,GAAG,KAAK,IAAI,GAAG,eAAe,eAAe,SAAS,EAAE,GAC5D;EACJ;EACA,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,MAAM,uBAAuB;GACzB,SAAS,WAAW;GACpB,SAAS,QAAQ,QAAQ;GACzB,SAAS,QAAQ,OAAO;GAExB,QAAQ,iBAAiB,GAAG,CAAC,CAAC,SAAS,YAAY,SAAS,QAAQ,OAAO,CAAC;GAC5E,QAAQ;EACZ;EACA,MAAM,YAAY,IAAI,iBAAiB,cAAc;EAErD,UAAU,QAAQ,SAAS;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAC7D,SAAS,iBAAiB,UAAU,SAAS,EAAE,SAAS,KAAK,CAAC;EAC9D,eAAe;EAEf,aAAa;GACT,UAAU,WAAW;GACrB,SAAS,WAAW;GACpB,SAAS,oBAAoB,UAAU,OAAO;EAClD;CACJ,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,OAAO;EACH;EACA;EACA,WACI;CACR;AACJ"}