@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/dropdown/index.d.ts

@@ -0,0 +1,222 @@
+import { MenuTriggerProps } from "@base-ui/react/menu";
+import { Menu } from "@base-ui/react/menu";
+import { ComponentProps, ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode3, RefAttributes, RefObject as RefObject2 } from "react";
+type SizeVariant = "default" | "compact";
+import { HTMLAttributes, InputHTMLAttributes } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface DropdownSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "size" | "defaultValue"> {
+	/** The query. Filter the MenuItems you render against it. Optional under `filter`, where the panel holds the query. */
+	value?: string;
+	/** Called on every keystroke, and with `""` on close (see `clearOnClose`). Optional under `filter`. */
+	onValueChange?: (value: string) => void;
+	/** Local addition. Let the surrounding panel hold the query and filter its own `Dropdown.Item` rows by `label`, re-indexing the survivors and showing `Dropdown.Empty` when none match. Defaults to `false`. */
+	filter?: boolean;
+	/** Placeholder text. Defaults to `"Search…"`. */
+	placeholder?: string;
+	/** Reset the query to "" when the popup closes (the field unmounts with
+	*  it), so the menu reopens unfiltered. @default true */
+	clearOnClose?: boolean;
+	/** Take focus when the popup opens. @default true */
+	autoFocus?: boolean;
+}
+declare const DropdownSearch: ForwardRefExoticComponent_tcubfn<DropdownSearchProps & RefAttributes_miuf56<HTMLInputElement>>;
+declare const DropdownEmpty: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLDivElement> & RefAttributes_miuf56<HTMLDivElement>>;
+import { HTMLAttributes as HTMLAttributes2, ReactElement, ReactNode as ReactNode2 } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn2 } from "react";
+import { RefAttributes as RefAttributes_miuf562 } from "react";
+/** What MenuItem hands to the popup's primitive wrapper. `element` is the
+*  styled row div (visuals + fluid hover registration, no children); `children`
+*  is the row content (icon, label, check). The dropdown wraps them in its
+*  own Item / RadioItem primitive, so MenuItem itself stays primitive-free. */
+interface MenuItemRenderOptions {
+	/** Radio-style option (boolean `checked` on MenuItem) vs plain action item. */
+	radio: boolean;
+	/** Checkbox-style option: a boolean `checked` inside a multiple-selection
+	*  dropdown (`checkedIndices`). Takes precedence over `radio`. */
+	checkbox: boolean;
+	/** The item's checked state (radio and checkbox items). */
+	checked?: boolean;
+	/** The item's index — doubles as the radio value. */
+	value: number;
+	disabled?: boolean;
+	label: string;
+	closeOnClick: boolean;
+	/** The row's activation. It goes on the primitive, not on `element`: Base
+	*  UI's Enter/Space activation calls the primitive's own `onClick` prop and
+	*  never sees a handler on the render element. */
+	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+	element: ReactElement;
+	children: ReactNode2;
+}
+interface DropdownContextValue {
+	registerItem: (index: number, element: HTMLElement | null) => void;
+	activeIndex: number | null;
+	checkedIndex?: number;
+	/** Multiple selection (`checkedIndices` on the dropdown): rows are
+	*  checkbox items and activating one keeps the menu open by default. */
+	multiple?: boolean;
+	checkedIndices?: number[];
+	/** True when items render inside a Menu popup (DropdownContent), where the
+	*  primitive's Item / RadioItem own roles, roving highlight, typeahead,
+	*  and activation. MenuItem switches its rendering accordingly. */
+	inMenu?: boolean;
+	/** Popup-only: wraps a MenuItem's styled div in the dropdown's menu-item
+	*  primitive. Absent in the inline Dropdown panel, where MenuItem renders
+	*  its own ARIA menuitem div. */
+	renderMenuItem?: (opts: MenuItemRenderOptions) => ReactElement;
+	/** Local addition. The panel owns its selection (`defaultCheckedIndex` /
+	*  `defaultCheckedIndices`), so a row with no `checked` prop takes its
+	*  checked state from `checkedIndex` / `checkedIndices` and toggles the
+	*  panel on activation. */
+	selfManaged?: boolean;
+	/** Local addition. Toggles the row at an AUTHORED index (see
+	*  `sourceIndex`). Present with `selfManaged`. */
+	toggleIndex?: (sourceIndex: number) => void;
+}
+declare function useDropdown(): DropdownContextValue;
+/** Null-safe context read for callers that render outside a provider. */
+declare function useDropdownMaybe(): DropdownContextValue | null;
+interface MenuItemProps extends HTMLAttributes2<HTMLDivElement> {
+	/** Optional leading icon. When omitted, the row renders text-only with no
+	*  reserved icon column. */
+	icon?: IconComponent;
+	label: string;
+	index: number;
+	/** When a boolean, the item is a radio-style option (role="menuitemradio"
+	*  with aria-checked). When undefined, it is a plain action item
+	*  (role="menuitem"), unless the panel owns the selection — then the row
+	*  reads its checked state off the panel and toggles it on activation. */
+	checked?: boolean;
+	onSelect?: () => void;
+	disabled?: boolean;
+	/** Popup-only (inside DropdownContent): whether activating the item closes
+	*  the menu. Ignored in the inline Dropdown panel. @default true */
+	closeOnClick?: boolean;
+	/** Internal: the row's authored index, stamped by a filtering panel that
+	*  re-indexed the visible rows. Selection is keyed on it. */
+	sourceIndex?: number;
+}
+declare const MenuItem: ForwardRefExoticComponent_tcubfn2<MenuItemProps & RefAttributes_miuf562<HTMLDivElement>>;
+import { JSX as JSX_1kxb2 } from "react";
+interface DropdownProps extends HTMLAttributes3<HTMLDivElement> {
+	/** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
+	children: ReactNode3;
+	/** The checked row: drives the animated selected background and the rows' radio semantics. */
+	checkedIndex?: number;
+	/** Uncontrolled twin of `checkedIndex`: the panel owns the selection, so rows need no `checked` or `onSelect` of their own. */
+	defaultCheckedIndex?: number;
+	/** Called with the newly checked row, or `undefined` when nothing is checked. */
+	onCheckedIndexChange?: (index: number | undefined) => void;
+	/** Multiple selection: the checked rows. Rows become checkbox items and contiguous runs share one merged background (see CheckboxGroup). */
+	checkedIndices?: number[];
+	/** Uncontrolled twin of `checkedIndices`: the panel toggles rows itself. */
+	defaultCheckedIndices?: number[];
+	/** Called with every checked row after a toggle. */
+	onCheckedIndicesChange?: (indices: number[]) => void;
+	/** Pins the panel's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Extra classes for the panel surface — it is 18rem wide by default. */
+	className?: string;
+}
+type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLDivElement>> & {
+	Menu: typeof DropdownMenu;
+	Trigger: typeof DropdownTrigger;
+	Content: typeof DropdownContent;
+	Item: typeof MenuItem;
+	Label: typeof DropdownLabel;
+	Separator: typeof DropdownSeparator;
+	Search: typeof DropdownSearch;
+	Empty: typeof DropdownEmpty;
+};
+/**
+* A menu in two forms: an inline panel that sits in the page, or a popup on
+* any trigger you like.
+*
+* `Dropdown` is the inline panel — an elevated surface with the fluid hover
+* background gliding between rows, a selected background that springs to the
+* picked one, contiguous picks merging into a single block in multiple mode,
+* and an animated focus ring. `Dropdown.Menu` + `Dropdown.Trigger` +
+* `Dropdown.Content` is the same panel as a popup on Base UI's Menu, which
+* brings the positioning, dismissal, roving highlight, typeahead and
+* close-on-select; the popup oozes out of its trigger and back through the
+* shared morph (see Morph), goo by default. Both take `checkedIndex` / `checkedIndices` to be driven
+* from outside, or `defaultCheckedIndex` / `defaultCheckedIndices` to run
+* themselves — and a `Dropdown.Search` marked `filter` makes the panel own
+* the query too, keeping only the rows whose `label` matches and showing
+* `Dropdown.Empty` when none do.
+*
+* Statics: Dropdown.Menu (the popup root: open, defaultOpen, onOpenChange,
+* disabled), Dropdown.Trigger (render), Dropdown.Content (the popup panel:
+* side, align, sideOffset and the morph options from, effect, hideSource, tier),
+* Dropdown.Item (a row: index, label, icon, checked, onSelect, disabled),
+* Dropdown.Label, Dropdown.Separator, Dropdown.Search and Dropdown.Empty.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Dropdown: DropdownComponent;
+interface DropdownMenuProps {
+	/** `Dropdown.Trigger` and `Dropdown.Content`. */
+	children: ReactNode3;
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state — uncontrolled. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called when the menu opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** Disables the menu. Defaults to `false`. */
+	disabled?: boolean;
+	/** Pins trigger-side content and the portalled popup rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
+	size?: SizeVariant;
+}
+type Element_12xgc2 = JSX_1kxb2["Element"];
+declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, disabled, size }: DropdownMenuProps): Element_12xgc2;
+type DropdownTriggerProps = MenuTriggerProps;
+declare const DropdownTrigger: Menu.Trigger;
+type MenuPositionerProps = ComponentProps<typeof Menu.Positioner>;
+interface DropdownContentProps {
+	/** `Dropdown.Item` rows, plus `Dropdown.Label`, `Dropdown.Separator`, `Dropdown.Search`, `Dropdown.Empty`. */
+	children: ReactNode3;
+	/** Extra classes for the popup surface. */
+	className?: string;
+	/** Index of the checked item. Drives the animated selected background and
+	*  the radio-group value announced to assistive tech. */
+	checkedIndex?: number;
+	/** Uncontrolled twin of `checkedIndex`: the popup owns the selection, so rows need no `checked` or `onSelect` of their own. */
+	defaultCheckedIndex?: number;
+	/** Called with the newly checked row, or `undefined` when nothing is checked. */
+	onCheckedIndexChange?: (index: number | undefined) => void;
+	/** Multiple selection: the checked rows. Rows become checkbox items that
+	*  keep the menu open when toggled, and contiguous runs share one merged
+	*  background (see CheckboxGroup). */
+	checkedIndices?: number[];
+	/** Uncontrolled twin of `checkedIndices`: the popup toggles rows itself. */
+	defaultCheckedIndices?: number[];
+	/** Called with every checked row after a toggle. */
+	onCheckedIndicesChange?: (indices: number[]) => void;
+	/** Side of the trigger the popup prefers. Defaults to `"bottom"`. */
+	side?: MenuPositionerProps["side"];
+	/** Alignment against the trigger. Defaults to `"start"`. */
+	align?: MenuPositionerProps["align"];
+	/** Gap to the trigger, in px. Ignored when the menu opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `6`. */
+	sideOffset?: number;
+	/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject2<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
+	tier?: "moderate" | "slow";
+}
+declare const DropdownContent: ForwardRefExoticComponent<DropdownContentProps & RefAttributes<HTMLDivElement>>;
+declare const DropdownLabel: ForwardRefExoticComponent<HTMLAttributes3<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+declare const DropdownSeparator: ForwardRefExoticComponent<HTMLAttributes3<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+export { useDropdownMaybe, useDropdown, Dropdown as default, MenuItemRenderOptions, MenuItem, DropdownTriggerProps, DropdownTrigger, DropdownSeparator, DropdownSearchProps, DropdownSearch, DropdownProps, DropdownMenuProps, DropdownMenu, DropdownLabel, DropdownEmpty, DropdownContextValue, DropdownContentProps, DropdownContent, Dropdown };

package/dist/components/overlays/dropdown/index.js

@@ -0,0 +1,47 @@
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownEmpty,
+  DropdownLabel,
+  DropdownMenu,
+  DropdownSearch,
+  DropdownSeparator,
+  DropdownTrigger,
+  MenuItem,
+  dropdown_default,
+  useDropdown,
+  useDropdownMaybe
+} from "../../../shared/components-40j34hdb.js";
+import"../../../shared/components-74c20v2f.js";
+import"../../../shared/components-rc63qsy6.js";
+import"../../../shared/components-vb033rns.js";
+import"../../../shared/components-m5br529r.js";
+import"../../../shared/components-jw16snbn.js";
+import"../../../shared/components-ed7cmssr.js";
+import"../../../shared/components-csxz9f52.js";
+import"../../../shared/components-jxgznftn.js";
+import"../../../shared/components-r22vtgqc.js";
+import"../../../shared/components-e46kf6cp.js";
+import"../../../shared/components-7zp99w5d.js";
+import"../../../shared/components-dg0w8g5p.js";
+import"../../../shared/components-kf2ehztc.js";
+import"../../../shared/components-7nww01w4.js";
+import"../../../shared/components-nnnd2xef.js";
+import"../../../shared/components-vc1k7yv2.js";
+import"../../../shared/components-x3rz4cyn.js";
+import"../../../shared/components-0f0as45n.js";
+import"../../../shared/components-kpbcms10.js";
+export {
+  useDropdownMaybe,
+  useDropdown,
+  dropdown_default as default,
+  MenuItem,
+  DropdownTrigger,
+  DropdownSeparator,
+  DropdownSearch,
+  DropdownMenu,
+  DropdownLabel,
+  DropdownEmpty,
+  DropdownContent,
+  Dropdown
+};

package/dist/components/overlays/popover/index.d.ts

@@ -0,0 +1,87 @@
+import { HTMLAttributes, ReactNode as ReactNode2, RefObject } from "react";
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	/** The element that becomes the control, e.g. a Button. */
+	render?: ReactElement;
+	/** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
+	asChild?: boolean;
+	/** Control content when there is no render element. */
+	children?: ReactNode;
+}
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+import { JSX as JSX_1kxb } from "react";
+interface PopoverTriggerProps extends SlotProps {
+	/** Open on hover as well as on press (a tap still toggles it on touch). Defaults to `false`. */
+	openOnHover?: boolean;
+	/** Hover delay before opening, in ms. Needs `openOnHover`. Defaults to `300`. */
+	delay?: number;
+	/** Delay before closing once the pointer leaves, in ms. Needs `openOnHover`. Defaults to `0`. */
+	closeDelay?: number;
+}
+declare const PopoverTrigger: ForwardRefExoticComponent_tcubfn<PopoverTriggerProps & RefAttributes_miuf56<HTMLButtonElement>>;
+declare const PopoverClose: ForwardRefExoticComponent_tcubfn<SlotProps & RefAttributes_miuf56<HTMLButtonElement>>;
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+	/** Side of the trigger the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
+	side?: "top" | "right" | "bottom" | "left";
+	/** Alignment along that side. Defaults to `'center'`, or `'start'` when the panel opens in place (`effect="morph"` with `hideSource`). */
+	align?: "start" | "center" | "end";
+	/** Gap between trigger and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
+	sideOffset?: number;
+	/** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
+	tier?: "moderate" | "slow";
+	/** Portal target. Defaults to the document body. */
+	container?: HTMLElement | null;
+	/** Classes for the panel's content box: padding, width, layout. */
+	className?: string;
+	/** The panel's content. Everything inside reads the popover's surface level as its substrate. */
+	children?: ReactNode2;
+}
+declare const PopoverContent: ForwardRefExoticComponent_tcubfn<PopoverContentProps & RefAttributes_miuf56<HTMLDivElement>>;
+declare const PopoverTitle: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLHeadingElement> & RefAttributes_miuf56<HTMLHeadingElement>>;
+declare const PopoverDescription: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLParagraphElement> & RefAttributes_miuf56<HTMLParagraphElement>>;
+interface PopoverProps {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state, for an uncontrolled popover. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called when the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** Trap focus and block page interaction while open. Defaults to `false`. */
+	modal?: boolean;
+	/** The trigger and the panel — `Popover.Trigger` plus a `Popover.Content`. */
+	children?: ReactNode2;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* A panel that oozes out of its trigger: the surface melts out of the button
+* through a liquid neck, then lets go and settles beside it.
+*
+* The morph comes from the shared engine (see Morph), so the panel can grow
+* from the trigger (the default), the press point, its own center, a viewport
+* edge or any element, with the goo neck, a plain morph, a slide or a fade.
+* It closes back into wherever it came from. The panel lifts 2 surface levels
+* off its substrate and re-provides that level. Built on Base UI's Popover:
+* it opens on press, or on hover too with `openOnHover`; it flips to the
+* other side when there is no room; Escape and an outside press close it.
+*
+* Statics:
+* - `Popover.Trigger` — the control that opens it: `render={<Button/>}` or
+*   `asChild`; `openOnHover`, `delay`, `closeDelay`.
+* - `Popover.Content` — the panel: `side`, `align` (the trigger's `start`,
+*   `center` or `end`), `sideOffset` and the morph options `from`,
+*   `effect`, `hideSource`, `tier`.
+* - `Popover.Title` / `Popover.Description` — its labelled heading and
+*   supporting line, wired for screen readers.
+* - `Popover.Close` — closes it; same `render` / `asChild` shape.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Popover({ open, defaultOpen, onOpenChange, modal, children }: PopoverProps): Element_12xgc;
+export { Popover as default, PopoverTriggerProps, PopoverTrigger, PopoverTitle, PopoverProps, PopoverDescription, PopoverContentProps, PopoverContent, PopoverClose, Popover };

package/dist/components/overlays/popover/index.js

@@ -0,0 +1,28 @@
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+  popover_default
+} from "../../../shared/components-s3yfvfkr.js";
+import"../../../shared/components-5vxtcp88.js";
+import"../../../shared/components-csxz9f52.js";
+import"../../../shared/components-jxgznftn.js";
+import"../../../shared/components-7zp99w5d.js";
+import"../../../shared/components-dg0w8g5p.js";
+import"../../../shared/components-7nww01w4.js";
+import"../../../shared/components-nnnd2xef.js";
+import"../../../shared/components-vc1k7yv2.js";
+import"../../../shared/components-0f0as45n.js";
+import"../../../shared/components-kpbcms10.js";
+export {
+  popover_default as default,
+  PopoverTrigger,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverContent,
+  PopoverClose,
+  Popover
+};

package/dist/components/overlays/preview-card/index.d.ts

@@ -0,0 +1,75 @@
+import { AnchorHTMLAttributes, HTMLAttributes, ReactElement, ReactNode, RefObject } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+import { JSX as JSX_1kxb } from "react";
+interface PreviewCardTriggerProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	/** Hover delay before the card opens, in ms. Defaults to `600`. */
+	delay?: number;
+	/** Delay before the card closes once the pointer leaves, in ms. Defaults to `300`. */
+	closeDelay?: number;
+	/** The element that becomes the trigger instead of the default link, e.g. an avatar; it brings its own styling. */
+	render?: ReactElement;
+	/** Extra classes for the link. */
+	className?: string;
+	/** The link's content. */
+	children?: ReactNode;
+}
+declare const PreviewCardTrigger: ForwardRefExoticComponent_tcubfn<PreviewCardTriggerProps & RefAttributes_miuf56<HTMLAnchorElement>>;
+interface PreviewCardContentProps extends HTMLAttributes<HTMLDivElement> {
+	/** Side of the link the card opens on; it flips when there is no room. Defaults to `'bottom'`. */
+	side?: "top" | "right" | "bottom" | "left";
+	/** Alignment along that side. Defaults to `'center'`, or `'start'` when the card opens in place (`effect="morph"` with `hideSource`). */
+	align?: "start" | "center" | "end";
+	/** Gap between link and card in px — the length of the goo neck. Ignored when the card opens in place over its link (`effect="morph"` with `hideSource`). Defaults to `12`. */
+	sideOffset?: number;
+	/** Where the card grows from (see Morph): the hovered link, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "center" | "top" | "right" | "bottom" | "left" | RefObject<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Hide the link while open, so it reads as turning into the card. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
+	tier?: "moderate" | "slow";
+	/** Portal target. Defaults to the document body. */
+	container?: HTMLElement | null;
+	/** Classes for the card's content box: padding, width, layout. */
+	className?: string;
+	/** The card's content. Everything inside reads the card's surface level as its substrate. */
+	children?: ReactNode;
+}
+declare const PreviewCardContent: ForwardRefExoticComponent_tcubfn<PreviewCardContentProps & RefAttributes_miuf56<HTMLDivElement>>;
+interface PreviewCardProps {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state, for an uncontrolled card. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called when the card opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** The link and the card — `PreviewCard.Trigger` plus a `PreviewCard.Content`. */
+	children?: ReactNode;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* A card that oozes out of a link on hover: a preview of what is behind it,
+* melting out of the link through a liquid neck.
+*
+* The morph comes from the shared engine (see Morph), so the card can grow
+* from the link (the default), its own center, a viewport edge or any
+* element, with the goo neck, a plain morph, a slide or a fade, and closes
+* back into wherever it came from. The card lifts 2 surface levels off its
+* substrate and re-provides that level. Built on Base UI's PreviewCard: it
+* opens after a hover or focus delay, stays open while the pointer travels
+* into it, flips to the other side when there is no room, and closes on
+* leave, Escape or an outside press. The card is a visual extra that touch
+* and screen-reader users never get, so the link must make sense on its own.
+*
+* Statics:
+* - `PreviewCard.Trigger` — the link: `href`, `delay`, `closeDelay`, or
+*   `render` for another element.
+* - `PreviewCard.Content` — the card: `side`, `align`, `sideOffset` and the
+*   morph options `from`, `effect`, `hideSource`, `tier`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function PreviewCard({ open, defaultOpen, onOpenChange, children }: PreviewCardProps): Element_12xgc;
+export { PreviewCard as default, PreviewCardTriggerProps, PreviewCardTrigger, PreviewCardProps, PreviewCardContentProps, PreviewCardContent, PreviewCard };

package/dist/components/overlays/preview-card/index.js

@@ -0,0 +1,21 @@
+import {
+  PreviewCard,
+  PreviewCardContent,
+  PreviewCardTrigger,
+  preview_card_default
+} from "../../../shared/components-6y1th6k4.js";
+import"../../../shared/components-csxz9f52.js";
+import"../../../shared/components-jxgznftn.js";
+import"../../../shared/components-7zp99w5d.js";
+import"../../../shared/components-dg0w8g5p.js";
+import"../../../shared/components-7nww01w4.js";
+import"../../../shared/components-nnnd2xef.js";
+import"../../../shared/components-vc1k7yv2.js";
+import"../../../shared/components-0f0as45n.js";
+import"../../../shared/components-kpbcms10.js";
+export {
+  preview_card_default as default,
+  PreviewCardTrigger,
+  PreviewCardContent,
+  PreviewCard
+};

package/dist/components/overlays/sheet/index.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes as HTMLAttributes2, ReactNode as ReactNode3, RefObject as RefObject3 } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn2 } from "react";
+import { RefAttributes as RefAttributes_miuf562 } from "react";
+import { JSX as JSX_1kxb2 } from "react";
+type SheetSide = "top" | "right" | "bottom" | "left";
+interface SheetContentProps extends HTMLAttributes2<HTMLDivElement> {
+	/** Where the sheet grows from (see Morph): its own edge, the pressed trigger, the press point, its center, another edge, or a ref to any element. Defaults to the sheet's `side`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject3<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Hide the trigger while open, so it reads as turning into the sheet. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
+	tier?: "moderate" | "slow";
+	/** Portal target. Defaults to the document body. */
+	container?: HTMLElement | null;
+	/** Classes for the sheet's content box: padding, layout. */
+	className?: string;
+	/** The sheet's content. Everything inside reads the sheet's surface level as its substrate. */
+	children?: ReactNode3;
+}
+declare const SheetContent: ForwardRefExoticComponent_tcubfn2<SheetContentProps & RefAttributes_miuf562<HTMLDivElement>>;
+declare const SheetIndent: ForwardRefExoticComponent_tcubfn2<HTMLAttributes2<HTMLDivElement> & RefAttributes_miuf562<HTMLDivElement>>;
+interface SheetProps {
+	/** Controlled open state. */
+	open?: boolean;
+	/** Initial open state, for an uncontrolled sheet. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called when the sheet opens or closes, including by a swipe. */
+	onOpenChange?: (open: boolean) => void;
+	/** The edge the sheet is attached to; a swipe back toward it dismisses it. Defaults to `'bottom'`. */
+	side?: "top" | "right" | "bottom" | "left";
+	/** Snap points for a top or bottom sheet: fractions of the viewport height (0–1), pixels, or `px` / `rem` strings. */
+	snapPoints?: (number | string)[];
+	/** The snap point an uncontrolled sheet opens at. Defaults to the first one. */
+	defaultSnapPoint?: number | string;
+	/** Traps focus and locks page scroll while open. Defaults to `true`. */
+	modal?: boolean;
+	/** The trigger and the content — `Sheet.Trigger` plus a `Sheet.Content`. */
+	children?: ReactNode3;
+}
+type Element_12xgc2 = JSX_1kxb2["Element"];
+/**
+* A panel attached to an edge of the window, swiped away to dismiss.
+*
+* The sheet grows out of its own edge with the goo neck by default (see
+* Morph), or from its trigger, the press point or any element, and closes
+* back the same way. Base UI's Drawer does the rest: a swipe back toward the
+* edge dismisses it (it slides on off the edge from where the finger let
+* go), top and bottom sheets can rest at `snapPoints`, and
+* focus and scroll are held while it is open. It floats a spacing step off
+* its edge and lifts 4 surface levels off its substrate, like a dialog; top
+* and bottom sheets show a handle.
+*
+* Statics:
+* - `Sheet.Trigger`, `Sheet.Header`, `Sheet.Footer`, `Sheet.Title`,
+*   `Sheet.Description`, `Sheet.Close` — Dialog's parts, which work the same
+*   here.
+* - `Sheet.Content` — the panel, with the morph options `from`, `effect`,
+*   `hideSource`, `tier`.
+* - `Sheet.Provider` / `Sheet.Indent` — wrap the page in an `Indent` under a
+*   `Provider` and it eases back while any sheet inside is open.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Sheet({ children, open, defaultOpen, onOpenChange, side, snapPoints, defaultSnapPoint, modal }: SheetProps): Element_12xgc2;
+export { Sheet as default, SheetSide, SheetProps, SheetIndent, SheetContentProps, SheetContent, Sheet };

package/dist/components/overlays/sheet/index.js

@@ -0,0 +1,26 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetIndent,
+  sheet_default
+} from "../../../shared/components-r43mqnd6.js";
+import"../../../shared/components-61ckf42z.js";
+import"../../../shared/components-5vxtcp88.js";
+import"../../../shared/components-5pkcfprd.js";
+import"../../../shared/components-m5br529r.js";
+import"../../../shared/components-csxz9f52.js";
+import"../../../shared/components-jxgznftn.js";
+import"../../../shared/components-7zp99w5d.js";
+import"../../../shared/components-dg0w8g5p.js";
+import"../../../shared/components-7nww01w4.js";
+import"../../../shared/components-nnnd2xef.js";
+import"../../../shared/components-vc1k7yv2.js";
+import"../../../shared/components-x3rz4cyn.js";
+import"../../../shared/components-0f0as45n.js";
+import"../../../shared/components-kpbcms10.js";
+export {
+  sheet_default as default,
+  SheetIndent,
+  SheetContent,
+  Sheet
+};