@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/preset.js

@@ -0,0 +1,124 @@
+// preset.ts
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+var TYPE_ROLES = ["display", "title", "subtitle", "body", "caption", "micro"];
+var WEIGHTS = ["normal", "medium", "semibold", "bold"];
+var TIERS = ["fast", "moderate", "slow"];
+var RADII = ["box", "glyph"];
+var theme = {
+  font: {
+    sans: "'Inter Variable', ui-sans-serif, system-ui, sans-serif",
+    mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace"
+  },
+  colors: {
+    background: "var(--background)",
+    foreground: "var(--foreground)",
+    card: { DEFAULT: "var(--card)", foreground: "var(--card-foreground)" },
+    muted: { DEFAULT: "var(--muted)", foreground: "var(--muted-foreground)" },
+    accent: {
+      DEFAULT: "var(--accent)",
+      foreground: "var(--accent-foreground)",
+      hover: "var(--accent-hover)"
+    },
+    brand: { DEFAULT: "var(--brand)", hover: "var(--brand-hover)" },
+    "focus-ring": "var(--focus-ring)",
+    overlay: "rgb(var(--overlay))",
+    selected: "var(--selected)",
+    thumb: "var(--thumb)",
+    picker: { edge: "var(--picker-edge)", ring: "var(--picker-ring)" },
+    control: "var(--control-border)",
+    scrim: "var(--scrim)",
+    status: {
+      success: "var(--status-success)",
+      loading: "var(--status-loading)",
+      error: "var(--status-error)",
+      warning: "var(--status-warning)",
+      info: "var(--status-info)",
+      action: "var(--status-action)"
+    },
+    border: "var(--border)",
+    ring: "var(--ring)",
+    input: "var(--input)",
+    destructive: { DEFAULT: "var(--destructive)", light: "var(--destructive-light)" },
+    hover: "var(--hover)",
+    active: "var(--active)",
+    syntax: {
+      keyword: "var(--syntax-keyword)",
+      string: "var(--syntax-string)",
+      class: "var(--syntax-class)",
+      entity: "var(--syntax-entity)",
+      property: "var(--syntax-property)",
+      comment: "var(--syntax-comment)",
+      identifier: "var(--syntax-identifier)",
+      jsx: "var(--syntax-jsx)",
+      sign: "var(--syntax-sign)"
+    },
+    surface: {
+      1: "var(--surface-1)",
+      2: "var(--surface-2)",
+      3: "var(--surface-3)",
+      4: "var(--surface-4)",
+      5: "var(--surface-5)",
+      6: "var(--surface-6)",
+      7: "var(--surface-7)",
+      8: "var(--surface-8)"
+    }
+  },
+  property: {
+    "stroke-width": "stroke-width",
+    "font-variation-settings": "font-variation-settings"
+  },
+  shadow: {
+    "surface-1": "var(--shadow-1)",
+    "surface-2": "var(--shadow-2)",
+    "surface-3": "var(--shadow-3)",
+    "surface-4": "var(--shadow-4)",
+    "surface-5": "var(--shadow-5)",
+    "surface-6": "var(--shadow-6)",
+    "surface-7": "var(--shadow-7)",
+    "surface-8": "var(--shadow-8)",
+    thumb: "var(--shadow-thumb)",
+    "picker-thumb": "var(--shadow-picker-thumb)",
+    "picker-cursor": "var(--shadow-picker-cursor)",
+    swatch: "var(--shadow-swatch)",
+    "swatch-hover": "var(--shadow-swatch-hover)",
+    "swatch-selected": "var(--shadow-swatch-selected)"
+  },
+  dropShadow: {
+    "picker-cursor": "var(--drop-shadow-picker-cursor)"
+  }
+};
+var utilities = Object.fromEntries([
+  ...TYPE_ROLES.flatMap((role) => ["", "-compact"].map((step) => [
+    `text-${role}${step}`,
+    { "font-size": `var(--text-${role}${step})`, "line-height": `var(--leading-${role})` }
+  ])),
+  ...WEIGHTS.map((weight) => [`weight-${weight}`, { "font-variation-settings": `var(--weight-${weight})` }]),
+  ...TIERS.flatMap((tier) => ["", "-exit"].flatMap((step) => [
+    [
+      `duration-${tier}${step}`,
+      { "--un-duration": `var(--duration-${tier}${step})`, "transition-duration": `var(--duration-${tier}${step})` }
+    ],
+    [`delay-${tier}${step}`, { "transition-delay": `var(--duration-${tier}${step})` }]
+  ])),
+  ...RADII.map((radius) => [`rounded-${radius}`, { "border-radius": `var(--radius-${radius})` }])
+]);
+var dist = dirname(fileURLToPath(import.meta.url));
+var COMPONENT_DIRS = ["shared", "primitives", "components", "blocks"];
+function modoUiContent() {
+  return COMPONENT_DIRS.map((dir) => join(dist, dir)).filter((dir) => existsSync(dir)).flatMap((dir) => readdirSync(dir, { recursive: true, encoding: "utf8" }).filter((file) => file.endsWith(".js")).map((file) => readFileSync(join(dir, file), "utf8"))).join(`
+`);
+}
+function presetModoUi() {
+  return { name: "@justanarthur/modo-ui", theme, rules: Object.entries(utilities) };
+}
+var preset_default = presetModoUi;
+export {
+  utilities,
+  theme,
+  presetModoUi,
+  modoUiContent,
+  preset_default as default,
+  COMPONENT_DIRS
+};

package/dist/primitives/code/index.d.ts

@@ -0,0 +1,23 @@
+import { JSX as JSX_1kxb } from "react";
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* Source code in the theme's syntax colors, one surface step above whatever
+* it sits on.
+*
+* sugar-high tokenizes; each token type takes a `--syntax-*` token from
+* tokens/colors.css, so code follows light and dark like everything else.
+* Long lines scroll sideways under a fading edge instead of wrapping. It is
+* also the docs chrome's Code slot: every example's source and every fenced
+* block on these pages renders through it.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Code({ children, language, className }: {
+	/** The source to show; surrounding blank lines are trimmed. */
+	children: string;
+	/** Fence name, alias or extension (`tsx`, `css`, `sh`, …). Unknown names render as plain text. Defaults to `'tsx'`. */
+	language?: string;
+	/** Extra classes for the frame. */
+	className?: string;
+}): Element_12xgc;
+export { Code as default, Code };

package/dist/primitives/code/index.js

@@ -0,0 +1,12 @@
+import {
+  Code
+} from "../../shared/components-bkvb6nem.js";
+import"../../shared/components-ed7cmssr.js";
+import"../../shared/components-csxz9f52.js";
+import"../../shared/components-7zp99w5d.js";
+import"../../shared/components-0f0as45n.js";
+import"../../shared/components-kpbcms10.js";
+export {
+  Code as default,
+  Code
+};

package/dist/primitives/craft/index.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+interface CraftProps {
+	/** The naive version: the same interface with the detail missing. */
+	bad: ReactNode;
+	/** The system's version, with the detail in place. */
+	good: ReactNode;
+	/** What goes wrong on the bad side, in one line. */
+	badNote?: string;
+	/** What the good side does instead, in one line. */
+	goodNote?: string;
+	/** Classes for the root grid. */
+	className?: string;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+/**
+* The details that make an interface feel finished, each one shown without
+* and with it.
+*
+* Every pair below isolates one rule of the system: the bad side is the
+* version most component libraries ship, the good side is this design
+* system's own item. Try both: press, hover between rows, click and then tab,
+* open and close. The rules themselves are on the Motion, FluidHover,
+* Morph, Elevated and SizeProvider pages; this one is where they can be felt.
+* `Craft` is the frame: the two versions side by side, each with a one-line
+* verdict, stacked on narrow screens.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Craft({ bad, good, badNote, goodNote, className }: CraftProps): Element_12xgc;
+export { Craft as default, CraftProps };

package/dist/primitives/craft/index.js

@@ -0,0 +1,13 @@
+import {
+  Craft
+} from "../../shared/components-6hzwfmfd.js";
+import"../../shared/components-9p8s8n5q.js";
+import"../../shared/components-7zp99w5d.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 {
+  Craft as default
+};

package/dist/primitives/fluid-hover/index.d.ts

@@ -0,0 +1,233 @@
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import { Transition } from "motion/react";
+import { Dispatch, MutableRefObject, RefObject, SetStateAction } from "react";
+interface ItemRect {
+	top: number;
+	height: number;
+	left: number;
+	width: number;
+}
+interface UseFluidHoverOptions {
+	/**
+	* Which direction to resolve the nearest item along.
+	*   "y"  — vertical lists (default): closest by top/height
+	*   "x"  — horizontal strips: closest by left/width
+	*   "xy" — 2-D grids: closest card across both rows AND columns,
+	*          measured by Euclidean distance to each item's center
+	*/
+	axis?: "x" | "y" | "xy";
+	/**
+	* Makes an item invisible to hit-testing without unregistering it — for
+	* rows that stay mounted while clipped away (a collapsed sub-tree).
+	* Unregistering would invalidate every measurement; a skipped item keeps
+	* the set stable. Consulted per mouse move, so keep it cheap.
+	*/
+	isItemDisabled?: (element: HTMLElement) => boolean;
+	/**
+	* Whether a click that lands between items (a gap, the padding, past the
+	* last row) is routed to the highlighted item, so what is lit is what a
+	* click hits. On by default: in a menu or a list the highlight is a
+	* promise about the click. Pass `false` where empty space should stay
+	* inert (rows with destructive actions, generous whitespace), or
+	* `{ maxDistance }` to route only clicks within that many pixels of the
+	* highlighted item's edge.
+	*/
+	gapClick?: boolean | {
+		maxDistance?: number;
+	};
+}
+interface UseFluidHoverReturn {
+	activeIndex: number | null;
+	setActiveIndex: Dispatch<SetStateAction<number | null>>;
+	itemRects: ItemRect[];
+	/**
+	* True once every registered item has been measured and no remeasure is
+	* pending, i.e. `itemRects` describes the current item set. Gate absolutely
+	* positioned overlays on it: an overlay that mounts against a rect a later
+	* pass still corrects animates from the wrong place to the right one, which
+	* reads as the highlight sliding in from another row.
+	*/
+	isMeasured: boolean;
+	sessionRef: MutableRefObject<number>;
+	handlers: {
+		onMouseMove: (e: React.MouseEvent) => void;
+		onMouseEnter: () => void;
+		onMouseLeave: () => void;
+		/**
+		* Routes a click that lands between items (a gap, the padding, past the
+		* last row) to the highlighted item, so the highlight and the click agree:
+		* what is lit is what a click hits. A click inside an item is left to the
+		* item. Disabled items (`isItemDisabled`) are never activated.
+		*/
+		onClick: (e: React.MouseEvent) => void;
+	};
+	registerItem: (index: number, element: HTMLElement | null) => void;
+	/**
+	* Invalidates the published rects and runs the hook's coalesced measurement
+	* pass again, holding `isMeasured` false until it settles. Reach for it when
+	* the rects may be wrong and showing an overlay against them would misplace
+	* it: a popup that stays mounted between opens keeps its items registered,
+	* so nothing else would notice that its rects were taken while it was
+	* hidden. Registration, item resize, and container resize already trigger
+	* a pass; do not call this on `children` changes.
+	*/
+	remeasure: () => void;
+	/**
+	* Re-reads the rects synchronously, keeping `isMeasured` as it is. Only for
+	* layout that moves the rows under a visible overlay frame by frame (the
+	* accordion re-measures inside its height animation). Everything else
+	* wants `remeasure`, or nothing.
+	*/
+	measureItems: () => void;
+}
+declare function useFluidHover<T extends HTMLElement>(containerRef: RefObject<T | null>, options?: UseFluidHoverOptions): UseFluidHoverReturn;
+/**
+* Registers an item's element with its list for as long as it is mounted.
+* The one way rows join a list: pass the hook's `registerItem` (or the copy
+* a context hands down), the row's index, and its ref. Either may be
+* missing for a row rendered outside a list (a standalone card, an accordion
+* item that is not grouped); then nothing is registered.
+*/
+declare function useRegisterFluidHoverItem(registerItem: ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref: RefObject<HTMLElement | null>): void;
+import { JSX as JSX_1kxb } from "react";
+/** What the highlight reads off the hook: the highlighted index, the
+*  measured rects, whether they are current, and the pointer session. */
+type FluidHoverSource = Pick<UseFluidHoverReturn, "activeIndex" | "itemRects" | "isMeasured" | "sessionRef">;
+interface HighlightFromHook {
+	/** The hook's return value. The highlight sits on
+	*  `itemRects[activeIndex]` once `isMeasured`, and re-keys on the session. */
+	hover: FluidHoverSource;
+	/** Keep the list's state but show nothing (a closed popup, hover switched
+	*  off). Runs the exit fade. */
+	hidden?: boolean;
+	rect?: never;
+	session?: never;
+}
+interface HighlightFromRect {
+	/** For lists that resolve their own rect (the sidebar's unified scope):
+	*  the rect to sit on, in the container's coordinate space. `null` hides
+	*  the highlight (it fades out on `spring.fast.exit`). */
+	rect: ItemRect | null;
+	/** `sessionRef.current` from `useFluidHover`. It increments when the
+	*  cursor enters the container, which re-keys the highlight so it fades in
+	*  at `from ?? rect` instead of sliding over from wherever it was last. */
+	session: number;
+	hover?: never;
+	hidden?: never;
+}
+type FluidHoverHighlightProps = (HighlightFromHook | HighlightFromRect) & {
+	/** Where a fresh session fades in from. A dropdown passes its checked row,
+	*  a nav menu its active route. Defaults to the rect itself. */
+	from?: ItemRect | null;
+	/** Radius, z-index, anything else. Merged onto
+	*  `absolute bg-hover pointer-events-none`. */
+	className?: string;
+	/** The positional spring. Defaults to `spring.fast`. Pass `false` to snap
+	*  to the new rect with no travel (a layout reflow that moved the rows
+	*  underneath, not a hover change). The opacity fade is always 0.08s. */
+	transition?: Transition | false;
+};
+type Element_12xgc = JSX_1kxb["Element"];
+declare function FluidHoverHighlight(props: FluidHoverHighlightProps): Element_12xgc;
+type FluidHoverAxis = "x" | "y" | "xy";
+interface FluidHoverItemProps extends HTMLAttributes<HTMLButtonElement> {
+	/** Position in the list. Assigned automatically to direct children of `FluidHover`; pass it by hand for rows rendered inside a wrapper of your own. */
+	index?: number;
+	/** Skips the row: never lit, never the target of a gap click. It stays registered, so its neighbours keep their indices. Defaults to `false`. */
+	disabled?: boolean;
+	/** The row's content — a label, or an icon plus text, or (on `xy`) a title over a description. */
+	children?: ReactNode;
+	/** Classes for the row, merged over the per-axis defaults. */
+	className?: string;
+}
+/**
+* One row of a fluid hover list: a real button, focusable and activatable from
+* the keyboard, announced by its label. It registers itself with the
+* surrounding `FluidHover` for as long as it is mounted; outside one it is
+* just a button.
+*/
+declare const FluidHoverItem: ForwardRefExoticComponent<FluidHoverItemProps & RefAttributes<HTMLButtonElement>>;
+interface FluidHoverProps extends HTMLAttributes<HTMLDivElement> {
+	/** Which way the list runs: `'y'` for lists, `'x'` for strips, `'xy'` for grids. Defaults to `'y'`, or `'xy'` when `columns` is above 1. */
+	axis?: FluidHoverAxis;
+	/** Grid columns. Above 1 the container becomes a grid and resolves the nearest item across rows and columns. Defaults to `1`, or `2` when `axis` is `'xy'`. */
+	columns?: number;
+	/** Shorthand rows: one `FluidHover.Item` per string, indexed in order. Omit it and pass `FluidHover.Item` children instead. */
+	items?: string[];
+	/** Renders the content of a shorthand row. Defaults to the string itself. */
+	renderItem?: (item: string, index: number) => ReactNode;
+	/** Rows to skip: never lit, never the target of a gap click. They stay registered, so their neighbours keep their indices. */
+	disabledIndices?: number[];
+	/** Whether a click that lands between rows goes to the lit one, so what is lit is what a click hits. `false` leaves empty space inert; `{ maxDistance }` routes only clicks within that many pixels of the lit row. Defaults to `true`. */
+	gapClick?: boolean | {
+		maxDistance?: number;
+	};
+	/** Classes for the highlight itself — radius and z-index. Merged over `absolute bg-hover` and the shape system's radius. */
+	highlightClassName?: string;
+	/** Classes for the list container. Padding here is part of the list: a click in it still lands on the lit row. */
+	className?: string;
+	/** `FluidHover.Item` rows, when `items` is not enough. Direct Item children are indexed in order. */
+	children?: ReactNode;
+}
+type FluidHoverComponent = ForwardRefExoticComponent<FluidHoverProps & RefAttributes<HTMLDivElement>> & {
+	Item: typeof FluidHoverItem;
+};
+/**
+* Hover that never blinks and always follows your cursor to the nearest item.
+*
+* One rule, no dead zones: an item the pointer is inside wins, and otherwise
+* the item whose center is nearest does — so a cursor in a gap, in the
+* padding, or past the last row still lands on something, and a click there
+* lands on what is lit (`gapClick`). One list is one FluidHover: it owns the
+* container's mouse handlers, hands every row its index, and draws the single
+* highlight that melts between the measured rectangles, stretching toward the
+* next row and letting go (the liquid indicators in Morph).
+*
+* Three axes, one feel. `y` is for lists — menus, tables, radio rows — and
+* measures the vertical center; `x` is for strips — tabs, segmented controls —
+* and measures the horizontal one; `xy` is for card grids, where the nearest
+* card is the shortest straight line to a center across both rows and columns.
+* Pass `columns` and the container becomes that grid and picks `xy` on its own.
+*
+* Split a list at the divider. Rows that are alternatives to each other share
+* one list — children ride with their parent — and the highlight never crosses
+* into a different kind of thing: that is a second FluidHover. A disabled row
+* is skipped rather than unregistered (`disabledIndices`, or `disabled` on the
+* row), so the rows around it keep their indices and their measurements.
+*
+* It costs 1 transform and 1 loop per move: the pick is one pass
+* over cached rectangles per animation frame, with no DOM reads per row, and
+* the highlight travels on a transform. While it melts, a shrinking blob and
+* the goo filter join it, and both are gone once it settles, so a resting
+* highlight is filtered by nothing. Reduced motion is honoured on its own,
+* read straight off the OS media query with no MotionConfig wrapper needed:
+* the highlight still fades in on the nearest row, it just stops travelling
+* between rows.
+*
+* Use it when everything in the list can be clicked (a menu, a list, tabs, a
+* grid of links), when the items sit close together, and when they stay where
+* they are while you look at them. Skip it when a wrong click would hurt, when
+* only some of the cards can be clicked, when there is a lot of empty space
+* around the items, or when rows change place as you scroll.
+*
+* Statics: FluidHover.Item — one row, rendered as a real button (focusable,
+* activatable from the keyboard, announced by its label); the hook only lights
+* it, it never moves focus.
+*
+* For a list this container cannot express, the machinery is re-exported
+* unchanged. `useFluidHover(containerRef, { axis, isItemDisabled, gapClick })`
+* returns `{ handlers, registerItem, activeIndex, setActiveIndex, itemRects,
+* isMeasured, remeasure, sessionRef }`: spread `handlers` on the container,
+* give each row `useRegisterFluidHoverItem(registerItem, index, ref)`, light a
+* row yourself with `setActiveIndex` for keyboard focus, and call `remeasure`
+* when the rects may be stale (a popup opening on rows that never unmounted).
+* `FluidHoverHighlight` then draws the fill: `hover` is the hook's return
+* value, `hidden` keeps the state but shows nothing, `from` is where a fresh
+* entry fades in (a dropdown passes its checked row), `className` carries
+* radius and z-index, and `transition` is the travel — `false` snaps into
+* place after a reflow instead of sliding.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const FluidHover: FluidHoverComponent;
+export { useRegisterFluidHoverItem, useFluidHover, FluidHover as default, UseFluidHoverReturn, UseFluidHoverOptions, ItemRect, FluidHoverProps, FluidHoverItemProps, FluidHoverItem, FluidHoverHighlightProps, FluidHoverHighlight, FluidHoverAxis, FluidHover };

package/dist/primitives/fluid-hover/index.js

@@ -0,0 +1,27 @@
+import {
+  FluidHover,
+  FluidHoverItem,
+  fluid_hover_default
+} from "../../shared/components-ess3ch6w.js";
+import {
+  FluidHoverHighlight
+} from "../../shared/components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "../../shared/components-e46kf6cp.js";
+import"../../shared/components-7zp99w5d.js";
+import"../../shared/components-kf2ehztc.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 {
+  useRegisterFluidHoverItem,
+  useFluidHover,
+  fluid_hover_default as default,
+  FluidHoverItem,
+  FluidHoverHighlight,
+  FluidHover
+};

package/dist/primitives/morph/index.d.ts

@@ -0,0 +1,127 @@
+import { ReactNode as ReactNode2 } from "react";
+import { ReactNode } from "react";
+import { JSX as JSX_1kxb } from "react";
+interface MorphPartProps {
+	/** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
+	id: string;
+	/** Classes for the part's box. */
+	className?: string;
+	/** The part's content: an image, a title. */
+	children?: ReactNode;
+}
+type Element_12xgc = JSX_1kxb["Element"];
+declare function MorphPart({ id, className, children }: MorphPartProps): Element_12xgc;
+import { JSX as JSX_1kxb2 } from "react";
+interface MorphProps {
+	/** Where the panel grows from: the pressed `'trigger'`, the press `'pointer'` (a circle; keyboard opens use the trigger's center), the panel's own `'center'`, or a viewport edge (`'top'`, `'right'`, `'bottom'`, `'left'`). Defaults to `'trigger'`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left";
+	/** How it gets there: `'goo'` grows the surface with a liquid neck to its source, `'morph'` grows it without one, `'slide'` moves the finished panel in, `'fade'` only fades (what every effect becomes under reduced motion). Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Spring tier of a plain morph, slide or fade, which closes on the tier's faster exit tween; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
+	tier?: "moderate" | "slow";
+	/** Hide the trigger while the panel is open, so the trigger reads as becoming the panel. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Uncontrolled initial open state, toggled by the built-in trigger. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called with the next open state when the trigger is pressed. */
+	onOpenChange?: (open: boolean) => void;
+	/** Label of the built-in trigger. Defaults to `'Open'`. */
+	label?: string;
+	/** Extra classes for the stage (trigger + panel). */
+	className?: string;
+	/** The panel's content. */
+	children?: ReactNode2;
+}
+type Element_12xgc2 = JSX_1kxb2["Element"];
+/**
+* Overlays grow out of whatever opened them. One progress value on a spring
+* tier carries the surface from its source to its own box, and every
+* morphing overlay in this system runs on that one engine.
+*
+* The overlay's popup keeps its final size the whole time, so Base UI's
+* positioning, collision flipping and focus handling never see the animation.
+* Inside it, three layers move: the surface's background and its shadow (the
+* `Elevated` level, as `SURFACE_BG` / `SURFACE_SHADOW`), the goo layer that
+* melts the surface into its source, and the content, revealed by a clip
+* from the same rect. The surface moves its real box rather than being
+* clipped, so its shadow is never cut off and nothing scales.
+*
+* ## Options
+*
+* Every morphing overlay takes the same `from`, `effect` and `hideSource`
+* options, and a spring `tier` for the effects other than goo (see Motion).
+*
+* - `from` — where the surface grows from. `'trigger'` is the trigger that
+*   was pressed; it is measured again on close, and when it has gone or
+*   scrolled away the surface grows from its `'center'` instead.
+*   `'pointer'` is the press point, `'center'` the panel's own center, and an
+*   edge (`'top'`, `'right'`, `'bottom'`, `'left'`) the side of the viewport.
+*   Components also take a ref to any element, such as a card that
+*   expands.
+* - `effect` — `'goo'` (the default) grows the surface with a liquid neck to
+*   its source, like two drops of water merging; `'morph'` grows it without
+*   one; `'slide'` moves the finished panel in; `'fade'` only fades.
+* - `hideSource` — hides the source while open, so it reads as turning into
+*   the overlay. Focus can still return to it. With `effect="morph"` an
+*   anchored overlay also opens in place: the panel lays over its trigger,
+*   corner to corner, instead of beside it, so the trigger's own box is where
+*   it starts and where it shrinks back to.
+*
+* ## Motion
+*
+* Goo runs on its own tier, `spring.goo`: it lands in about 200ms with a
+* little bounce and springs back in about as long, slow enough for the neck
+* to stretch. Its blur eases away over the last stretch, so the neck pinches
+* off as the surface lands, and while it melts a hairline in the shadow's
+* color follows the liquid shape, so a surface the color of the page still
+* shows it; the surface's own shadow takes over as it lets go. The other
+* effects open on a spring tier (`slow` by default) and close on that tier's
+* faster exit tween, like every other animation here (see Motion).
+* Reduced motion, the OS setting or a `MotionConfig` asking for it, turns every
+* effect into a fade.
+*
+* ## Liquid indicators
+*
+* The same goo moves everything that travels between items: the active tab
+* of Tabs and TabsSubtle, the Switch thumb, RadioGroup's selection and the
+* fluid hover highlight of every list (Select, Dropdown, Combobox, Card,
+* Accordion, FluidHover). The indicator springs to its new item and leaves
+* a blob behind. The blob lingers for a third of the spring, then follows
+* to the back of the new item while it shrinks, so the two melt into one
+* stretched drop that lets go. A long move tears it into a drop and a
+* droplet that catches up and is absorbed.
+*
+* Merged selections (CheckboxGroup, a multiple Dropdown) melt the same way:
+* a checked row grows out of its center and flows into its checked
+* neighbours, and an unchecked one pinches off and shrinks away.
+*
+* - The goo filter runs only while a blob is alive; at rest an indicator is
+*   one plain element.
+* - The melted shape is filled with the indicator's own token, so
+*   translucent fills such as `bg-hover` and `bg-active` melt like opaque
+*   surfaces. Shadows are drawn again beneath the goo while it moves.
+* - A short move or a resize in place springs without a blob, and a square
+*   indicator, with no radius to melt, only slides.
+* - Reduced motion snaps the indicator into place.
+*
+* ## Shared parts
+*
+* `Morph.Part` pairs an element in the trigger with its twin in the overlay
+* (same `id`), so the part flies from one to the other while the surface
+* morphs, and back on close: a card's image or title moving into a Dialog.
+*
+* ## The `Morph` stage
+*
+* `Morph` itself is a docs stage, not a building block: a trigger and a small
+* panel below it that plays one `from` × `effect` pair.
+*
+* Statics:
+* - `Morph.Part` — a shared part (`id`, `className`), for overlays that scope
+*   parts (Dialog).
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Morph({ from, effect, tier, hideSource, open, defaultOpen, onOpenChange, label, className, children }: MorphProps): Element_12xgc2;
+export { Morph as default, MorphProps, MorphPart, Morph };

package/dist/primitives/morph/index.js

@@ -0,0 +1,21 @@
+import {
+  Morph
+} from "../../shared/components-6t6nr33r.js";
+import"../../shared/components-5pkcfprd.js";
+import"../../shared/components-csxz9f52.js";
+import {
+  MorphPart
+} from "../../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 {
+  Morph as default,
+  MorphPart,
+  Morph
+};