@passui/react 0.1.46 → 0.2.0

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,56 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as menu from "@zag-js/menu";
+type Placement = NonNullable<menu.Props["positioning"]>["placement"];
+export interface DropdownMenuProps extends Omit<menu.Props, "id" | "ids" | "positioning"> {
+  /** Where the menu sits against its trigger. Defaults to `bottom-start`. */
+  placement?: Placement;
+  children?: ReactNode;
+}
+/** Owns the open state, highlight and typeahead. Renders no element of its own. */
+export declare function DropdownMenu({ children, placement, ...props }: DropdownMenuProps): import("react").JSX.Element;
+/** A menu that opens at the pointer on right click or long press, instead of on a trigger. */
+export declare function ContextMenu({ children, placement, ...props }: DropdownMenuProps): import("react").JSX.Element;
+/** The region that answers to a right click or long press. Renders a `div` by default. */
+export declare function ContextMenuTrigger({ render, ...props }: PartProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A nested menu. Put a `DropdownMenuSubTrigger` and `DropdownMenuSubContent` inside. */
+export declare function DropdownMenuSub({ children, placement, ...props }: DropdownMenuProps): import("react").JSX.Element;
+type PartProps<T extends "button" | "div"> = ComponentProps<T> & {
+  /** Render your own element instead of the default one. */
+  render?: RenderProp;
+};
+export declare function DropdownMenuTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The floating list. Mounts only while open or leaving. */
+export declare function DropdownMenuContent(props: PartProps<"div">): import("react").JSX.Element;
+export declare function DropdownMenuSubContent(props: PartProps<"div">): import("react").JSX.Element;
+export interface DropdownMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  /** Identifies the item for typeahead and `onSelect` on the menu. Defaults to a generated id. */
+  value?: string;
+  disabled?: boolean;
+  /** Set false to keep the menu open after this item is chosen. */
+  closeOnSelect?: boolean;
+  /** Runs when the item is chosen by pointer or keyboard. */
+  onSelect?: () => void;
+  render?: RenderProp;
+}
+export declare function DropdownMenuItem({ value, disabled, closeOnSelect, onSelect, className, render, ...props }: DropdownMenuItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface DropdownMenuCheckboxItemProps extends Omit<DropdownMenuItemProps, "onSelect"> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+export declare function DropdownMenuCheckboxItem({ value, checked, onCheckedChange, disabled, closeOnSelect, className, render, children, ...props }: DropdownMenuCheckboxItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface DropdownMenuRadioGroupProps extends ComponentProps<"div"> {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+export declare function DropdownMenuRadioGroup({ value, onValueChange, ...props }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ value, disabled, closeOnSelect, className, render, children, ...props }: Omit<DropdownMenuItemProps, "onSelect"> & {
+  value: string;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DropdownMenuGroup({ children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** The item that opens a submenu. Place it inside `DropdownMenuSub`. */
+export declare function DropdownMenuSubTrigger({ className, render, children, ...props }: PartProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/dropdown-menu.js

@@ -0,0 +1,295 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { positionerSide, useAnchorFollow, useTriggerAnchor, useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as menu from "@zag-js/menu";
+// src/components/dropdown-menu.tsx
+const Context = createContext(null);
+/** The menu a submenu opens from, so its trigger can be wired as an item. */
+const ParentContext = createContext(null);
+function useMenu() {
+	const ctx = useContext(Context);
+	if (!ctx) throw new Error("DropdownMenu parts must be used inside <DropdownMenu>.");
+	return ctx;
+}
+const RadioContext = createContext(null);
+function useMenuMachine(props, placement, onTrigger = false) {
+	const id = useId();
+	const point = useRef(null);
+	const anchor = useTriggerAnchor(placement ?? "", 6);
+	const service = useMachine(menu.machine, {
+		id,
+		positioning: {
+			placement,
+			offset: { mainAxis: 6 },
+			...onTrigger && { getAnchorRect: anchor.getAnchorRect }
+		},
+		...props
+	});
+	const api = menu.connect(service, normalizeProps);
+	useAnchorFollow(anchor, onTrigger && api.open, positionerSide(api.getPositionerProps()), api.reposition);
+	return {
+		service,
+		api,
+		point
+	};
+}
+/** Owns the open state, highlight and typeahead. Renders no element of its own. */
+function DropdownMenu({ children, placement = "bottom-start", ...props }) {
+	const ctx = useMenuMachine(props, placement, true);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: ctx,
+		children
+	});
+}
+/** A menu that opens at the pointer on right click or long press, instead of on a trigger. */
+function ContextMenu({ children, placement = "bottom-start", ...props }) {
+	const ctx = useMenuMachine(props, placement);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: ctx,
+		children
+	});
+}
+/** The region that answers to a right click or long press. Renders a `div` by default. */
+function ContextMenuTrigger({ render, ...props }) {
+	const { api, point } = useMenu();
+	const base = api.getContextTriggerProps();
+	const remember = (event) => {
+		point.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	return renderPart("div", mergeProps({
+		...base,
+		"data-slot": "context-menu-trigger",
+		onPointerDown(event) {
+			remember(event);
+			base.onPointerDown?.(event);
+		},
+		onContextMenu(event) {
+			remember(event);
+			base.onContextMenu?.(event);
+		}
+	}, props), render);
+}
+/** A nested menu. Put a `DropdownMenuSubTrigger` and `DropdownMenuSubContent` inside. */
+function DropdownMenuSub({ children, placement = "right-start", ...props }) {
+	const parent = useMenu();
+	const ctx = useMenuMachine(props, placement);
+	const { setParent } = ctx.api;
+	const { setChild } = parent.api;
+	useEffect(() => {
+		setParent(parent.service);
+		setChild(ctx.service);
+	}, [
+		setParent,
+		setChild,
+		parent.service,
+		ctx.service
+	]);
+	return /* @__PURE__ */ jsx(ParentContext.Provider, {
+		value: parent,
+		children: /* @__PURE__ */ jsx(Context.Provider, {
+			value: ctx,
+			children
+		})
+	});
+}
+function DropdownMenuTrigger({ render, ...props }) {
+	const { api } = useMenu();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "dropdown-menu-trigger"
+	}, props), render);
+}
+function Panel({ className, render, slot, ...props }) {
+	const { api, point } = useMenu();
+	const drop = useWaterDrop({
+		sourceId: api.getTriggerProps().id,
+		point: () => point.current,
+		material: "liquid-glass-dense squircle [--squircle-radius:1.25rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		className: "z-[70]",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...attrs,
+			ref,
+			hidden: false,
+			"data-slot": slot,
+			className: cx("min-w-44 max-h-(--available-height,24rem) overflow-y-auto liquid-glass-dense squircle morph-reset [--squircle-radius:1.25rem] p-1 text-label outline-none transition spring-smooth origin-(--transform-origin,center) data-ending-style:scale-[0.88] data-starting-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:origin-top data-[side=top]:origin-bottom motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", className)
+		}, props), render)
+	}) });
+}
+/** The floating list. Mounts only while open or leaving. */
+function DropdownMenuContent(props) {
+	return /* @__PURE__ */ jsx(Panel, {
+		slot: "dropdown-menu-content",
+		...props
+	});
+}
+function DropdownMenuSubContent(props) {
+	return /* @__PURE__ */ jsx(Panel, {
+		slot: "dropdown-menu-sub-content",
+		...props
+	});
+}
+const itemClass = "relative flex cursor-default select-none items-center gap-2 rounded-xl px-2.5 py-1.5 text-footnote outline-none transition-colors duration-(--duration-instant) data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-accent/15";
+/** Calls `onSelect` when Zag selects the element with this id. */
+function useSelect(id, onSelect) {
+	const { api } = useMenu();
+	const latest = useRef(onSelect);
+	latest.current = onSelect;
+	const add = useRef(api.addItemListener);
+	add.current = api.addItemListener;
+	useEffect(() => add.current({
+		id,
+		onSelect: () => latest.current?.()
+	}), [id]);
+}
+function DropdownMenuItem({ value, disabled, closeOnSelect, onSelect, className, render, ...props }) {
+	const { api } = useMenu();
+	const generated = useId();
+	const itemValue = value ?? generated;
+	useSelect(api.getItemState({ value: itemValue }).id, onSelect);
+	return renderPart("div", mergeProps({
+		...api.getItemProps({
+			value: itemValue,
+			disabled,
+			closeOnSelect
+		}),
+		"data-slot": "dropdown-menu-item",
+		className: cx(itemClass, className)
+	}, props), render);
+}
+function OptionBody({ checked, children }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "text-accent-text inline-flex size-4 items-center justify-center",
+		children: checked ? "✓" : null
+	}), children] });
+}
+function DropdownMenuCheckboxItem({ value, checked, onCheckedChange, disabled, closeOnSelect, className, render, children, ...props }) {
+	const { api } = useMenu();
+	const generated = useId();
+	const itemValue = value ?? generated;
+	return renderPart("div", mergeProps({
+		...api.getOptionItemProps({
+			type: "checkbox",
+			value: itemValue,
+			checked,
+			onCheckedChange,
+			disabled,
+			closeOnSelect
+		}),
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: cx(itemClass, className),
+		children: /* @__PURE__ */ jsx(OptionBody, {
+			checked,
+			children
+		})
+	}, props), render);
+}
+function DropdownMenuRadioGroup({ value, onValueChange, ...props }) {
+	const { api } = useMenu();
+	const id = useId();
+	return /* @__PURE__ */ jsx(RadioContext.Provider, {
+		value: {
+			value,
+			onValueChange: onValueChange ?? (() => {})
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getItemGroupProps({ id }),
+			"data-slot": "dropdown-menu-radio-group",
+			...props
+		})
+	});
+}
+function DropdownMenuRadioItem({ value, disabled, closeOnSelect, className, render, children, ...props }) {
+	const { api } = useMenu();
+	const radio = useContext(RadioContext);
+	const checked = radio?.value === value;
+	return renderPart("div", mergeProps({
+		...api.getOptionItemProps({
+			type: "radio",
+			value,
+			checked,
+			onCheckedChange: () => radio?.onValueChange(value),
+			disabled,
+			closeOnSelect
+		}),
+		"data-slot": "dropdown-menu-radio-item",
+		className: cx(itemClass, className),
+		children: /* @__PURE__ */ jsx(OptionBody, {
+			checked,
+			children
+		})
+	}, props), render);
+}
+function DropdownMenuGroup({ children, ...props }) {
+	const { api } = useMenu();
+	const id = useId();
+	return /* @__PURE__ */ jsx(GroupContext.Provider, {
+		value: id,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getItemGroupProps({ id }),
+			"data-slot": "dropdown-menu-group",
+			...props,
+			children
+		})
+	});
+}
+const GroupContext = createContext(void 0);
+function DropdownMenuLabel({ className, ...props }) {
+	const { api } = useMenu();
+	const group = useContext(GroupContext);
+	const label = group ? api.getItemGroupLabelProps({ htmlFor: group }) : {};
+	return /* @__PURE__ */ jsx("div", {
+		...label,
+		"data-slot": "dropdown-menu-label",
+		className: cx("px-2.5 py-1.5 text-footnote font-semibold text-label-secondary", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { api } = useMenu();
+	return /* @__PURE__ */ jsx("div", {
+		...api.getSeparatorProps(),
+		"data-slot": "dropdown-menu-separator",
+		className: cx("-mx-1 my-1 h-px bg-separator", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cx("ms-auto ps-4 text-caption tracking-widest text-label-tertiary", className),
+		...props
+	});
+}
+/** The item that opens a submenu. Place it inside `DropdownMenuSub`. */
+function DropdownMenuSubTrigger({ className, render, children, ...props }) {
+	const parent = useContext(ParentContext);
+	const { api } = useMenu();
+	if (!parent) throw new Error("DropdownMenuSubTrigger must be used inside <DropdownMenuSub>.");
+	return renderPart("div", mergeProps({
+		...parent.api.getTriggerItemProps(api),
+		"data-slot": "dropdown-menu-sub-trigger",
+		className: cx(itemClass, className),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-label-tertiary ms-auto",
+			children: "›"
+		})] })
+	}, props), render);
+}
+export { ContextMenu, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/empty.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+/** A focused empty or unavailable state. Compose it from the parts below. */
+export declare function Empty({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** Groups the media, title and description. */
+export declare function EmptyHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** A decorative glyph above the title. Hidden from assistive technology. */
+export declare function EmptyMedia({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export declare function EmptyTitle({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export declare function EmptyDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** The next actions, such as buttons. */
+export declare function EmptyContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/empty.js

@@ -0,0 +1,51 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/empty.tsx
+/** A focused empty or unavailable state. Compose it from the parts below. */
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		className: cx("flex flex-col items-center gap-3 px-6 py-10 text-center", className),
+		...props
+	});
+}
+/** Groups the media, title and description. */
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cx("flex max-w-sm flex-col items-center gap-1.5", className),
+		...props
+	});
+}
+/** A decorative glyph above the title. Hidden from assistive technology. */
+function EmptyMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "empty-media",
+		"aria-hidden": "true",
+		className: cx("text-label-tertiary mb-1 flex items-center justify-center [&_svg]:size-8", className),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "empty-title",
+		className: cx("text-headline text-label font-semibold", className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "empty-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+/** The next actions, such as buttons. */
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cx("flex flex-wrap justify-center gap-2", className),
+		...props
+	});
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/field.d.ts

@@ -0,0 +1,16 @@
+import { Label } from "./label.js";
+import { ComponentProps } from "react";
+/** Groups several fields, such as a form section. */
+export declare function FieldGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export type FieldProps = ComponentProps<"div"> & {
+  /** Lay the label and control out in a row, as for a switch. @default "vertical" */
+  orientation?: "vertical" | "horizontal";
+  /** Mark the field invalid so its text turns to the danger colour. */
+  invalid?: boolean;
+};
+/** One labelled control with optional description and error. */
+export declare function Field({ orientation, invalid, className, ...props }: FieldProps): import("react").JSX.Element;
+export declare function FieldLabel({ className, ...props }: ComponentProps<typeof Label>): import("react").JSX.Element;
+export declare function FieldDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** An error message. Render it only when there is an error. */
+export declare function FieldError({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;

package/dist/field.js

@@ -0,0 +1,47 @@
+import { cx } from "./lib/cx.js";
+import { Label } from "./label.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/field.tsx
+/** Groups several fields, such as a form section. */
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cx("flex w-full flex-col gap-5", className),
+		...props
+	});
+}
+/** One labelled control with optional description and error. */
+function Field({ orientation = "vertical", invalid, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		"data-invalid": invalid ? "" : void 0,
+		className: cx("group flex w-full gap-2 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cx("group-data-[invalid]:text-danger", className),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+/** An error message. Render it only when there is an error. */
+function FieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cx("text-footnote font-medium text-danger", className),
+		...props
+	});
+}
+export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };

package/{src/hooks/scroll/minimize-decision.ts → dist/hooks/scroll/minimize-decision.js}

@@ -1,9 +1,6 @@
+// src/hooks/scroll/minimize-decision.ts
 /** Programmatic restoration does not collapse chrome; reaching the top always restores it. */
-export function minimizeDecision(
-	top: number,
-	anchor: number,
-	userDriven: boolean,
-): boolean | null {
+function minimizeDecision(top, anchor, userDriven) {
 	if (top < 24) return false;
 	if (!userDriven) return null;
 	const delta = top - anchor;
@@ -11,3 +8,4 @@ export function minimizeDecision(
 	if (delta > 12) return true;
 	return null;
 }
+export { minimizeDecision };

package/dist/{types/src/hooks → hooks}/use-anchored-placement.d.ts

@@ -1,7 +1,7 @@
-import { type AnchoredPlacement } from "../lib/anchored-placement";
+import { AnchoredPlacement } from "../lib/anchored-placement.js";
 /**
  * Places a panel of `width` and `needed` height under its anchor and
  * keeps it there: re-places while the viewport resizes or anything
  * scrolls, so it never hangs off the screen.
  */
-export declare function useAnchoredPlacement(anchor: HTMLElement, width: number, needed: number, overlap?: boolean): AnchoredPlacement;
+export declare function useAnchoredPlacement(anchor: HTMLElement, width: number, needed: number, overlap?: boolean): AnchoredPlacement;

package/dist/hooks/use-anchored-placement.js

@@ -0,0 +1,33 @@
+import { placeAnchored } from "../lib/anchored-placement.js";
+import { useLayoutEffect, useState } from "react";
+// src/hooks/use-anchored-placement.ts
+/**
+* Places a panel of `width` and `needed` height under its anchor and
+* keeps it there: re-places while the viewport resizes or anything
+* scrolls, so it never hangs off the screen.
+*/
+function useAnchoredPlacement(anchor, width, needed, overlap = false) {
+	const [placement, setPlacement] = useState(() => placeAnchored(anchor, width, needed, 6, overlap));
+	useLayoutEffect(() => {
+		const replace = () => setPlacement(placeAnchored(anchor, width, needed, 6, overlap));
+		replace();
+		const viewport = window.visualViewport;
+		viewport?.addEventListener("resize", replace);
+		viewport?.addEventListener("scroll", replace);
+		window.addEventListener("resize", replace);
+		window.addEventListener("scroll", replace, true);
+		return () => {
+			viewport?.removeEventListener("resize", replace);
+			viewport?.removeEventListener("scroll", replace);
+			window.removeEventListener("resize", replace);
+			window.removeEventListener("scroll", replace, true);
+		};
+	}, [
+		anchor,
+		width,
+		needed,
+		overlap
+	]);
+	return placement;
+}
+export { useAnchoredPlacement };

package/dist/{types/src/hooks → hooks}/use-minimize-on-scroll.d.ts

@@ -3,4 +3,4 @@
  * back up or reach the top: iOS 26's `tabBarMinimizeBehavior(.onScrollDown)`.
  * Listens to every scroll container, since each screen scrolls its own pane.
  */
-export declare function useMinimizeOnScroll(): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];
+export declare function useMinimizeOnScroll(): readonly [boolean, import("react").Dispatch<import("react").SetStateAction<boolean>>];

package/dist/hooks/use-minimize-on-scroll.js

@@ -0,0 +1,59 @@
+import { minimizeDecision } from "./scroll/minimize-decision.js";
+import { useEffect, useState } from "react";
+// src/hooks/use-minimize-on-scroll.ts
+/**
+* Minimized while you scroll down through content, restored when you scroll
+* back up or reach the top: iOS 26's `tabBarMinimizeBehavior(.onScrollDown)`.
+* Listens to every scroll container, since each screen scrolls its own pane.
+*/
+function useMinimizeOnScroll() {
+	const [minimized, setMinimized] = useState(false);
+	useEffect(() => {
+		const anchors = /* @__PURE__ */ new WeakMap();
+		let intent = null;
+		const onIntent = () => {
+			intent = performance.now();
+		};
+		const onKey = (event) => {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"PageDown",
+				"PageUp",
+				"Home",
+				"End",
+				" "
+			].includes(event.key)) onIntent();
+		};
+		const onPointer = (event) => {
+			if (event.buttons === 1) onIntent();
+		};
+		const onScroll = (event) => {
+			const pane = event.target instanceof Element ? event.target : document.scrollingElement;
+			if (!pane || pane.closest("[role=dialog], [data-floating-layer]") || pane.scrollHeight <= pane.clientHeight + 1) return;
+			const top = pane.scrollTop;
+			const userDriven = intent !== null && performance.now() - intent < 2e3;
+			const anchor = anchors.get(pane) ?? 0;
+			const next = minimizeDecision(top, anchor, userDriven);
+			if (next !== null) setMinimized(next);
+			if (next !== null || !userDriven) anchors.set(pane, top);
+		};
+		document.addEventListener("touchmove", onIntent, { passive: true });
+		document.addEventListener("wheel", onIntent, { passive: true });
+		document.addEventListener("pointermove", onPointer, { passive: true });
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			document.removeEventListener("scroll", onScroll, { capture: true });
+			document.removeEventListener("touchmove", onIntent);
+			document.removeEventListener("wheel", onIntent);
+			document.removeEventListener("pointermove", onPointer);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, []);
+	return [minimized, setMinimized];
+}
+export { useMinimizeOnScroll };

package/dist/{types/src/hooks → hooks}/use-visual-viewport.d.ts

@@ -1,4 +1,4 @@
-import type { ViewportMetrics } from "./viewport/types";
-export type { ViewportMetrics } from "./viewport/types";
+import { ViewportMetrics } from "./viewport/types.js";
 /** Measures once per frame, including Android resize and Safari viewport panning. */
 export declare function useVisualViewport(): ViewportMetrics | null;
+export type { ViewportMetrics };