@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/morph-button/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/morph-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"morph-button\",\n  title: \"Morph Button\",\n  description:\n    \"A button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"morph-button.tsx\"],\n  a11y:\n    'In `toggle` mode the state is exposed with aria-pressed and the accessible name stays the resting label, so \"Mute\" never becomes \"Unmute, pressed\". ' +\n    \"`transient` confirmations (Copied, Submitted) are announced through a polite live region and revert on a timer. \" +\n    '`trigger=\"hover\"` activates on keyboard focus as well as hover. Icons are aria-hidden: an icon-only button must be ' +\n    \"named with aria-label or aria-labelledby, and warns in development when it is not. Motion stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAIJ,CAAC"}

package/dist/components/morph-button/morph-button.d.ts

@@ -0,0 +1,57 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/morph-button/morph-button.d.ts
+/** Icon layers: how the resting icon leaves and the active one arrives. */
+declare const morphButtonVariants: (props?: ({
+  morph?: "scale" | "tilt" | "rise" | null | undefined;
+  layer?: "active" | "rest" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The colour the active icon takes. Semantic tokens only. */
+declare const morphButtonToneVariants: (props?: ({
+  tone?: "current" | "primary" | "success" | "warning" | "destructive" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MorphButtonTrigger = "toggle" | "transient" | "hover" | "manual";
+interface MorphButtonProps extends Omit<ButtonProps, "children" | "asChild">, Omit<VariantProps<typeof morphButtonVariants>, "layer">, VariantProps<typeof morphButtonToneVariants> {
+  /** The resting icon. Decorative: it is hidden from assistive technology. */
+  icon: ReactNode;
+  /** The icon shown while active. Defaults to `icon`, for fill/colour-only morphs. */
+  activeIcon?: ReactNode;
+  /**
+   * Visible text beside the icon. Without it the button is icon-only and
+   * **must** be named with `aria-label` or `aria-labelledby`.
+   */
+  label?: ReactNode;
+  /** Text shown while active, e.g. "Copied". Defaults to `label`. */
+  activeLabel?: ReactNode;
+  /** Controlled active state. */
+  active?: boolean;
+  /** Initial active state when uncontrolled. */
+  defaultActive?: boolean;
+  /** Called whenever the active state changes, from any trigger. */
+  onActiveChange?: (active: boolean) => void;
+  /**
+   * What drives the active state.
+   *
+   * - `toggle` (default): each press flips it; exposed as `aria-pressed`.
+   * - `transient`: a press activates it, and it reverts after `revertAfter`.
+   *   The active label is announced through a polite live region.
+   * - `hover`: active while hovered *or* focused, for parity with the demo.
+   * - `manual`: only the `active` prop changes it.
+   */
+  trigger?: MorphButtonTrigger;
+  /** Milliseconds before a `transient` button reverts. */
+  revertAfter?: number;
+  /** Announced when a `transient` button activates. Defaults to `activeLabel`. */
+  announcement?: string;
+  /** Fills the active icon with its stroke colour — bookmark, like, favourite. */
+  fillOnActive?: boolean;
+  /** Decoration that pops in with the active icon. */
+  adornment?: "none" | "sparkle" | "dot";
+}
+/** A button whose icon, and optionally label, morphs when it becomes active. */
+declare function MorphButton({ className, icon, activeIcon, label, activeLabel, active: activeProp, defaultActive, onActiveChange, trigger, revertAfter, announcement, morph, tone, fillOnActive, adornment, variant, size, onClick, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }: MorphButtonProps): import("react").JSX.Element;
+//#endregion
+export { MorphButton, MorphButtonProps, MorphButtonTrigger, morphButtonToneVariants, morphButtonVariants };
+//# sourceMappingURL=morph-button.d.ts.map

package/dist/components/morph-button/morph-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-button.d.ts","names":[],"sources":["../../../src/components/morph-button/morph-button.tsx"],"mappings":";;;;;;cAgCM,sBAAmB;;;6CA+BxB;;cAGK,0BAAuB;;6CAc3B;KA8BU;UAEK,yBAEb,KAAK,sCACL,KAAK,oBAAoB,gCACzB,oBAAoB;;EAEtB,MAAM;;EAEN,aAAa;;;;;EAKb,QAAQ;;EAER,cAAc;;EAEd;;EAEA;;EAEA,kBAAkB;;;;;;;;;;EAUlB,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;;iBAwBc,cACd,WACA,MACA,YACA,OACA,aACA,QAAQ,YACR,eACA,gBACA,SACA,aACA,cACA,OACA,MACA,cACA,WACA,SACA,MACA,SACA,gBACA,gBACA,eACA,SACA,WACG,SACF,mCAAgB,IAAA"}

package/dist/components/morph-button/morph-button.js

@@ -0,0 +1,220 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/morph-button/morph-button.tsx
+/** Icon layers: how the resting icon leaves and the active one arrives. */
+const morphButtonVariants = cva(cn("col-start-1 row-start-1 flex items-center justify-center", "transition-[opacity,scale,translate,rotate,color,fill] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "data-[state=hidden]:opacity-0"), {
+	variants: {
+		/** `scale` pops (0.5 → 1), `rise` slides vertically, `tilt` rocks ±15°. */
+		morph: {
+			scale: "data-[state=hidden]:scale-50",
+			rise: "data-[state=hidden]:scale-80",
+			tilt: "data-[state=hidden]:scale-80"
+		},
+		layer: {
+			rest: "",
+			active: ""
+		}
+	},
+	compoundVariants: [
+		{
+			morph: "rise",
+			layer: "rest",
+			className: "data-[state=hidden]:-translate-y-[15px]"
+		},
+		{
+			morph: "rise",
+			layer: "active",
+			className: "data-[state=hidden]:translate-y-[15px]"
+		},
+		{
+			morph: "tilt",
+			layer: "rest",
+			className: "data-[state=hidden]:rotate-15"
+		},
+		{
+			morph: "tilt",
+			layer: "active",
+			className: "data-[state=hidden]:-rotate-15"
+		}
+	],
+	defaultVariants: {
+		morph: "scale",
+		layer: "rest"
+	}
+});
+/** The colour the active icon takes. Semantic tokens only. */
+const morphButtonToneVariants = cva("", {
+	variants: { tone: {
+		current: "",
+		primary: "text-primary",
+		success: "text-success",
+		warning: "text-warning",
+		destructive: "text-destructive",
+		info: "text-info"
+	} },
+	defaultVariants: { tone: "current" }
+});
+/** Label layers only crossfade: a scaled or rotated word is harder to read. */
+const labelLayer = cn("col-start-1 row-start-1 transition-[opacity,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=hidden]:translate-y-1 data-[state=hidden]:opacity-0");
+/** A spark or dot that pops in once the active layer is showing. */
+const popIn = cn("pointer-events-none absolute transition-[opacity,scale,rotate,translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "group-data-[state=hidden]/layer:scale-0 group-data-[state=hidden]/layer:opacity-0");
+const SPARK_PATH = "M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z";
+function Spark({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "morph-button-spark",
+		className: cn(popIn, className),
+		children: /* @__PURE__ */ jsx("path", { d: SPARK_PATH })
+	});
+}
+/** A text representation of a node, when it has one. */
+function textOf(node) {
+	return typeof node === "string" || typeof node === "number" ? String(node) : void 0;
+}
+/**
+* Warns, in development only, when an icon-only button has no name. It looks
+* perfect on screen and announces as an unlabelled "button".
+*/
+function useMissingNameWarning(hasLabel, ariaLabel, ariaLabelledBy) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (hasLabel || ariaLabel || ariaLabelledBy) return;
+		console.warn("[MorphButton] An icon-only MorphButton has no accessible name. Pass aria-label or aria-labelledby, or a visible label.");
+	}, [
+		hasLabel,
+		ariaLabel,
+		ariaLabelledBy
+	]);
+}
+/** A button whose icon, and optionally label, morphs when it becomes active. */
+function MorphButton({ className, icon, activeIcon, label, activeLabel, active: activeProp, defaultActive = false, onActiveChange, trigger = "toggle", revertAfter = 2e3, announcement, morph = "scale", tone = "current", fillOnActive = false, adornment = "none", variant = "secondary", size, onClick, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultActive);
+	const controlled = activeProp !== void 0;
+	const active = controlled ? activeProp : uncontrolled;
+	const [announced, setAnnounced] = useState("");
+	const timer = useRef(null);
+	const pressing = useRef(false);
+	const keyboardFocus = useRef(false);
+	const setActive = useCallback((next) => {
+		if (!controlled) setUncontrolled(next);
+		onActiveChange?.(next);
+	}, [controlled, onActiveChange]);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	useMissingNameWarning(label != null, props["aria-label"], props["aria-labelledby"]);
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (trigger === "toggle") setActive(!active);
+		else if (trigger === "transient") {
+			if (!active) setActive(true);
+			setAnnounced(announcement ?? textOf(activeLabel) ?? textOf(label) ?? "Done");
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setActive(false);
+				setAnnounced("");
+			}, revertAfter);
+		}
+	}
+	function handlePointerEnter(event) {
+		onPointerEnter?.(event);
+		if (trigger === "hover" && !active) setActive(true);
+	}
+	function handlePointerLeave(event) {
+		onPointerLeave?.(event);
+		if (trigger === "hover" && active && !keyboardFocus.current) setActive(false);
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		pressing.current = true;
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		keyboardFocus.current = !pressing.current;
+		pressing.current = false;
+		if (trigger === "hover" && !active) setActive(true);
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		keyboardFocus.current = false;
+		if (trigger === "hover" && active) setActive(false);
+	}
+	const nameFollowsState = trigger === "transient" || trigger === "manual";
+	const morphsLabel = activeLabel !== void 0 && activeLabel !== label;
+	const state = (layerActive) => layerActive ? "visible" : "hidden";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		"data-slot": "morph-button",
+		"data-state": active ? "active" : "inactive",
+		"data-trigger": trigger,
+		"aria-pressed": trigger === "toggle" ? active : void 0,
+		variant,
+		size: size ?? (label == null ? "icon" : void 0),
+		className: cn("transition-[background-color,border-color,color,box-shadow,scale] active:scale-[0.97]", className),
+		onClick: handleClick,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onPointerDown: handlePointerDown,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "morph-button-icon",
+			"aria-hidden": "true",
+			className: "relative grid shrink-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "morph-button-rest",
+				"data-state": state(!active),
+				className: morphButtonVariants({
+					morph,
+					layer: "rest"
+				}),
+				children: icon
+			}), /* @__PURE__ */ jsxs("span", {
+				"data-slot": "morph-button-active",
+				"data-state": state(active),
+				className: cn("group/layer relative", morphButtonVariants({
+					morph,
+					layer: "active"
+				}), morphButtonToneVariants({ tone }), fillOnActive && "[&>svg]:fill-current"),
+				children: [
+					activeIcon ?? icon,
+					adornment === "sparkle" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spark, { className: cn("-end-2 -top-3 size-2.5 delay-[var(--duration-instant)]", "group-data-[state=hidden]/layer:translate-y-2.5 group-data-[state=hidden]/layer:-rotate-45") }), /* @__PURE__ */ jsx(Spark, { className: cn("-start-3 -top-1 size-1.5 opacity-70 delay-[var(--duration-fast)]", "group-data-[state=hidden]/layer:translate-x-2.5 group-data-[state=hidden]/layer:rotate-45") })] }) : null,
+					adornment === "dot" ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "morph-button-dot",
+						className: cn(popIn, "end-0 top-0 size-1.5 rounded-full bg-destructive delay-[var(--duration-fast)]")
+					}) : null
+				]
+			})]
+		}), label != null ? /* @__PURE__ */ jsxs("span", {
+			"data-slot": "morph-button-label",
+			className: "grid",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-state": state(!morphsLabel || !active),
+				"aria-hidden": nameFollowsState && morphsLabel && active ? true : void 0,
+				className: labelLayer,
+				children: label
+			}), morphsLabel ? /* @__PURE__ */ jsx("span", {
+				"data-state": state(active),
+				"aria-hidden": !nameFollowsState || !active ? true : void 0,
+				className: labelLayer,
+				children: activeLabel
+			}) : null]
+		}) : null]
+	}), trigger === "transient" ? /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sr-only",
+		children: announced
+	}) : null] });
+}
+//#endregion
+export { MorphButton, morphButtonToneVariants, morphButtonVariants };
+
+//# sourceMappingURL=morph-button.js.map

package/dist/components/morph-button/morph-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-button.js","names":[],"sources":["../../../src/components/morph-button/morph-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One mechanism for the whole amicro morph family (ADR 0014): an icon — and\n * optionally a label — that crossfades into a second one when the button is\n * active. The source swaps on hover; a library button has to reflect *state*,\n * so `active` is a real, controllable value and hover is only one of the ways\n * to drive it.\n *\n * Both layers are always mounted and stacked in one grid cell. Swapping is a\n * CSS transition on data-state, so there is no animation library, no\n * unmount-on-exit, and the global reduced-motion rule stops it outright:\n * this is decoration, never an indicator.\n */\n\n/** Icon layers: how the resting icon leaves and the active one arrives. */\nconst morphButtonVariants = cva(\n  cn(\n    \"col-start-1 row-start-1 flex items-center justify-center\",\n    \"transition-[opacity,scale,translate,rotate,color,fill] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n    \"data-[state=hidden]:opacity-0\",\n  ),\n  {\n    variants: {\n      /** `scale` pops (0.5 → 1), `rise` slides vertically, `tilt` rocks ±15°. */\n      morph: {\n        scale: \"data-[state=hidden]:scale-50\",\n        rise: \"data-[state=hidden]:scale-80\",\n        tilt: \"data-[state=hidden]:scale-80\",\n      },\n      layer: {\n        rest: \"\",\n        active: \"\",\n      },\n    },\n    compoundVariants: [\n      // The resting icon leaves upward while the active one rises from below.\n      { morph: \"rise\", layer: \"rest\", className: \"data-[state=hidden]:-translate-y-[15px]\" },\n      { morph: \"rise\", layer: \"active\", className: \"data-[state=hidden]:translate-y-[15px]\" },\n      { morph: \"tilt\", layer: \"rest\", className: \"data-[state=hidden]:rotate-15\" },\n      { morph: \"tilt\", layer: \"active\", className: \"data-[state=hidden]:-rotate-15\" },\n    ],\n    defaultVariants: {\n      morph: \"scale\",\n      layer: \"rest\",\n    },\n  },\n);\n\n/** The colour the active icon takes. Semantic tokens only. */\nconst morphButtonToneVariants = cva(\"\", {\n  variants: {\n    tone: {\n      current: \"\",\n      primary: \"text-primary\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n      info: \"text-info\",\n    },\n  },\n  defaultVariants: {\n    tone: \"current\",\n  },\n});\n\n/** Label layers only crossfade: a scaled or rotated word is harder to read. */\nconst labelLayer = cn(\n  \"col-start-1 row-start-1 transition-[opacity,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  \"data-[state=hidden]:translate-y-1 data-[state=hidden]:opacity-0\",\n);\n\n/** A spark or dot that pops in once the active layer is showing. */\nconst popIn = cn(\n  \"pointer-events-none absolute transition-[opacity,scale,rotate,translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n  \"group-data-[state=hidden]/layer:scale-0 group-data-[state=hidden]/layer:opacity-0\",\n);\n\nconst SPARK_PATH = \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\";\n\nfunction Spark({ className }: { className: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      data-slot=\"morph-button-spark\"\n      className={cn(popIn, className)}\n    >\n      <path d={SPARK_PATH} />\n    </svg>\n  );\n}\n\nexport type MorphButtonTrigger = \"toggle\" | \"transient\" | \"hover\" | \"manual\";\n\nexport interface MorphButtonProps\n  extends\n    Omit<ButtonProps, \"children\" | \"asChild\">,\n    Omit<VariantProps<typeof morphButtonVariants>, \"layer\">,\n    VariantProps<typeof morphButtonToneVariants> {\n  /** The resting icon. Decorative: it is hidden from assistive technology. */\n  icon: ReactNode;\n  /** The icon shown while active. Defaults to `icon`, for fill/colour-only morphs. */\n  activeIcon?: ReactNode;\n  /**\n   * Visible text beside the icon. Without it the button is icon-only and\n   * **must** be named with `aria-label` or `aria-labelledby`.\n   */\n  label?: ReactNode;\n  /** Text shown while active, e.g. \"Copied\". Defaults to `label`. */\n  activeLabel?: ReactNode;\n  /** Controlled active state. */\n  active?: boolean;\n  /** Initial active state when uncontrolled. */\n  defaultActive?: boolean;\n  /** Called whenever the active state changes, from any trigger. */\n  onActiveChange?: (active: boolean) => void;\n  /**\n   * What drives the active state.\n   *\n   * - `toggle` (default): each press flips it; exposed as `aria-pressed`.\n   * - `transient`: a press activates it, and it reverts after `revertAfter`.\n   *   The active label is announced through a polite live region.\n   * - `hover`: active while hovered *or* focused, for parity with the demo.\n   * - `manual`: only the `active` prop changes it.\n   */\n  trigger?: MorphButtonTrigger;\n  /** Milliseconds before a `transient` button reverts. */\n  revertAfter?: number;\n  /** Announced when a `transient` button activates. Defaults to `activeLabel`. */\n  announcement?: string;\n  /** Fills the active icon with its stroke colour — bookmark, like, favourite. */\n  fillOnActive?: boolean;\n  /** Decoration that pops in with the active icon. */\n  adornment?: \"none\" | \"sparkle\" | \"dot\";\n}\n\n/** A text representation of a node, when it has one. */\nfunction textOf(node: ReactNode): string | undefined {\n  return typeof node === \"string\" || typeof node === \"number\" ? String(node) : undefined;\n}\n\n/**\n * Warns, in development only, when an icon-only button has no name. It looks\n * perfect on screen and announces as an unlabelled \"button\".\n */\nfunction useMissingNameWarning(hasLabel: boolean, ariaLabel?: string, ariaLabelledBy?: string) {\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (hasLabel || ariaLabel || ariaLabelledBy) return;\n    console.warn(\n      \"[MorphButton] An icon-only MorphButton has no accessible name. Pass aria-label or \" +\n        \"aria-labelledby, or a visible label.\",\n    );\n  }, [hasLabel, ariaLabel, ariaLabelledBy]);\n}\n\n/** A button whose icon, and optionally label, morphs when it becomes active. */\nexport function MorphButton({\n  className,\n  icon,\n  activeIcon,\n  label,\n  activeLabel,\n  active: activeProp,\n  defaultActive = false,\n  onActiveChange,\n  trigger = \"toggle\",\n  revertAfter = 2000,\n  announcement,\n  morph = \"scale\",\n  tone = \"current\",\n  fillOnActive = false,\n  adornment = \"none\",\n  variant = \"secondary\",\n  size,\n  onClick,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onFocus,\n  onBlur,\n  ...props\n}: MorphButtonProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultActive);\n  const controlled = activeProp !== undefined;\n  const active = controlled ? activeProp : uncontrolled;\n  const [announced, setAnnounced] = useState(\"\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  // Whether focus arrived from the keyboard rather than a click, tracked by\n  // hand because :focus-visible is not queryable everywhere this runs.\n  const pressing = useRef(false);\n  const keyboardFocus = useRef(false);\n\n  const setActive = useCallback(\n    (next: boolean) => {\n      if (!controlled) setUncontrolled(next);\n      onActiveChange?.(next);\n    },\n    [controlled, onActiveChange],\n  );\n\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  useMissingNameWarning(label != null, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n\n    if (trigger === \"toggle\") {\n      setActive(!active);\n    } else if (trigger === \"transient\") {\n      if (!active) setActive(true);\n      setAnnounced(announcement ?? textOf(activeLabel) ?? textOf(label) ?? \"Done\");\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setActive(false);\n        setAnnounced(\"\");\n      }, revertAfter);\n    }\n  }\n\n  function handlePointerEnter(event: PointerEvent<HTMLButtonElement>) {\n    onPointerEnter?.(event);\n    if (trigger === \"hover\" && !active) setActive(true);\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLButtonElement>) {\n    onPointerLeave?.(event);\n    // Keyboard focus keeps it active: the pointer leaving is not the user\n    // leaving if they are still focused on it.\n    if (trigger === \"hover\" && active && !keyboardFocus.current) setActive(false);\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {\n    onPointerDown?.(event);\n    pressing.current = true;\n  }\n\n  function handleFocus(event: FocusEvent<HTMLButtonElement>) {\n    onFocus?.(event);\n    keyboardFocus.current = !pressing.current;\n    pressing.current = false;\n    if (trigger === \"hover\" && !active) setActive(true);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLButtonElement>) {\n    onBlur?.(event);\n    keyboardFocus.current = false;\n    if (trigger === \"hover\" && active) setActive(false);\n  }\n\n  /*\n   * Which label names the button. A toggle's name must not change with its\n   * state — aria-pressed already says which state it is in, and \"Mute,\n   * pressed\" becoming \"Unmute, pressed\" contradicts itself. Hover is\n   * decoration. So in those modes the resting label stays in the\n   * accessibility tree (merely transparent) and the active one is hidden.\n   * In `transient` and `manual` modes the visible text *is* the news, so the\n   * name follows it.\n   */\n  const nameFollowsState = trigger === \"transient\" || trigger === \"manual\";\n  const morphsLabel = activeLabel !== undefined && activeLabel !== label;\n  const state = (layerActive: boolean) => (layerActive ? \"visible\" : \"hidden\");\n\n  return (\n    <>\n      <Button\n        data-slot=\"morph-button\"\n        data-state={active ? \"active\" : \"inactive\"}\n        data-trigger={trigger}\n        aria-pressed={trigger === \"toggle\" ? active : undefined}\n        variant={variant}\n        size={size ?? (label == null ? \"icon\" : undefined)}\n        className={cn(\n          \"transition-[background-color,border-color,color,box-shadow,scale] active:scale-[0.97]\",\n          className,\n        )}\n        onClick={handleClick}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onPointerDown={handlePointerDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      >\n        <span\n          data-slot=\"morph-button-icon\"\n          aria-hidden=\"true\"\n          className=\"relative grid shrink-0\"\n        >\n          <span\n            data-slot=\"morph-button-rest\"\n            data-state={state(!active)}\n            className={morphButtonVariants({ morph, layer: \"rest\" })}\n          >\n            {icon}\n          </span>\n          <span\n            data-slot=\"morph-button-active\"\n            data-state={state(active)}\n            className={cn(\n              \"group/layer relative\",\n              morphButtonVariants({ morph, layer: \"active\" }),\n              morphButtonToneVariants({ tone }),\n              fillOnActive && \"[&>svg]:fill-current\",\n            )}\n          >\n            {activeIcon ?? icon}\n            {adornment === \"sparkle\" ? (\n              <>\n                <Spark\n                  className={cn(\n                    \"-end-2 -top-3 size-2.5 delay-[var(--duration-instant)]\",\n                    \"group-data-[state=hidden]/layer:translate-y-2.5 group-data-[state=hidden]/layer:-rotate-45\",\n                  )}\n                />\n                <Spark\n                  className={cn(\n                    \"-start-3 -top-1 size-1.5 opacity-70 delay-[var(--duration-fast)]\",\n                    \"group-data-[state=hidden]/layer:translate-x-2.5 group-data-[state=hidden]/layer:rotate-45\",\n                  )}\n                />\n              </>\n            ) : null}\n            {adornment === \"dot\" ? (\n              <span\n                data-slot=\"morph-button-dot\"\n                className={cn(\n                  popIn,\n                  \"end-0 top-0 size-1.5 rounded-full bg-destructive delay-[var(--duration-fast)]\",\n                )}\n              />\n            ) : null}\n          </span>\n        </span>\n        {label != null ? (\n          <span data-slot=\"morph-button-label\" className=\"grid\">\n            <span\n              data-state={state(!morphsLabel || !active)}\n              aria-hidden={nameFollowsState && morphsLabel && active ? true : undefined}\n              className={labelLayer}\n            >\n              {label}\n            </span>\n            {morphsLabel ? (\n              <span\n                data-state={state(active)}\n                aria-hidden={!nameFollowsState || !active ? true : undefined}\n                className={labelLayer}\n              >\n                {activeLabel}\n              </span>\n            ) : null}\n          </span>\n        ) : null}\n      </Button>\n      {trigger === \"transient\" ? (\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announced}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { morphButtonToneVariants, morphButtonVariants };\n"],"mappings":"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"}

package/dist/components/morph-surface/index.d.ts

@@ -0,0 +1,2 @@
+import { MorphSurface, MorphSurfaceForm, MorphSurfaceFormProps, MorphSurfaceProps, useMorphSurface } from "./morph-surface.js";
+export { MorphSurface, MorphSurfaceForm, type MorphSurfaceFormProps, type MorphSurfaceProps, useMorphSurface };

package/dist/components/morph-surface/index.js

@@ -0,0 +1,2 @@
+import { MorphSurface, MorphSurfaceForm, useMorphSurface } from "./morph-surface.js";
+export { MorphSurface, MorphSurfaceForm, useMorphSurface };

package/dist/components/morph-surface/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/morph-surface/meta.ts
+const meta = defineMeta({
+	name: "morph-surface",
+	title: "Morph Surface",
+	description: "A dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.",
+	category: "overlay",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["morph-surface.tsx"],
+	a11y: "Behaves as a non-modal popover. The trigger is a disclosure button (aria-expanded, aria-controls) and the panel a named role=\"dialog\". Opening moves focus into the panel (the message box in MorphSurfaceForm); Escape collapses it and returns focus to the trigger; pressing or tabbing outside collapses it without moving focus. A collapsed panel is inert and invisible; an expanded surface's dock is inert. MorphSurfaceForm's message box is labelled by the panel label, submits with ⌘/Ctrl + Enter (aria-keyshortcuts) or a named submit button, and a successful send is announced through a polite status region. The resize and fades stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/morph-surface/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/morph-surface/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"morph-surface\",\n  title: \"Morph Surface\",\n  description:\n    \"A dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.\",\n  category: \"overlay\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"morph-surface.tsx\"],\n  a11y:\n    \"Behaves as a non-modal popover. The trigger is a disclosure button (aria-expanded, aria-controls) and the \" +\n    'panel a named role=\"dialog\". Opening moves focus into the panel (the message box in MorphSurfaceForm); ' +\n    \"Escape collapses it and returns focus to the trigger; pressing or tabbing outside collapses it without \" +\n    \"moving focus. A collapsed panel is inert and invisible; an expanded surface's dock is inert. \" +\n    \"MorphSurfaceForm's message box is labelled by the panel label, submits with ⌘/Ctrl + Enter \" +\n    \"(aria-keyshortcuts) or a named submit button, and a successful send is announced through a polite status \" +\n    \"region. The resize and fades stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAOJ,CAAC"}

package/dist/components/morph-surface/morph-surface.d.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
+//#region src/components/morph-surface/morph-surface.d.ts
+type Size = number | string;
+interface MorphSurfaceContextValue {
+  open: boolean;
+  close: (options?: {
+    success?: boolean;
+  }) => void;
+  panelLabel: string;
+  icon: ReactNode;
+}
+/** The surrounding surface, for custom panel content (a close button, say). */
+declare function useMorphSurface(): MorphSurfaceContextValue;
+interface MorphSurfaceProps extends ComponentPropsWithRef<"div"> {
+  /** The trigger's text in the dock, e.g. "Ask AI" or "Feedback". */
+  label: ReactNode;
+  /** The panel's accessible name, also shown by `MorphSurfaceForm`. Defaults to `label`. */
+  panelLabel?: string;
+  /** Decoration beside the label (an orb, a logo). Hidden from assistive technology. */
+  icon?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded panel's width. Numbers are pixels. */
+  panelWidth?: Size;
+  /** The expanded panel's height. Numbers are pixels. */
+  panelHeight?: Size;
+  /** Shown in the dock, and announced, after the panel closes successfully. */
+  successLabel?: string;
+  /** How long the success label stays, in milliseconds. */
+  successDuration?: number;
+}
+/** A dock that morphs into a panel — a feedback form, a quick prompt. */
+declare function MorphSurface({ ref, className, style, children, label, panelLabel, icon, open: openProp, defaultOpen, onOpenChange, panelWidth, panelHeight, successLabel, successDuration, ...props }: MorphSurfaceProps): import("react").JSX.Element;
+interface MorphSurfaceFormProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit"> {
+  /**
+   * Called with the trimmed message. Return `false` to keep the panel open
+   * (a failed request, say); otherwise it closes and shows the success label.
+   */
+  onSubmit?: (value: string, event: FormEvent<HTMLFormElement>) => boolean | void;
+  placeholder?: string;
+  /** The submit button's accessible name. The visible text is the shortcut. */
+  submitLabel?: string;
+  /** The textarea's form field name. */
+  fieldName?: string;
+}
+/** The source's panel: a labelled message box, submitted with ⌘/Ctrl + Enter. */
+declare function MorphSurfaceForm({ className, onSubmit, placeholder, submitLabel, fieldName, ...props }: MorphSurfaceFormProps): import("react").JSX.Element;
+//#endregion
+export { MorphSurface, MorphSurfaceForm, MorphSurfaceFormProps, MorphSurfaceProps, useMorphSurface };
+//# sourceMappingURL=morph-surface.d.ts.map

package/dist/components/morph-surface/morph-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-surface.d.ts","names":[],"sources":["../../../src/components/morph-surface/morph-surface.tsx"],"mappings":";;KAiCK;UAEK;EACR;EACA,QAAQ;IAAY;;EACpB;EACA,MAAM;;;iBAMQ,mBAAmB;UASlB,0BAA0B;;EAEzC,OAAO;;EAEP;;EAEA,OAAO;EACP;EACA;EACA,gBAAgB;;EAEhB,aAAa;;EAEb,cAAc;;EAEd;;EAEA;;;iBAIc,eACd,KACA,WACA,OACA,UACA,OACA,YACA,MACA,MAAM,UACN,aACA,cACA,YACA,aACA,cACA,oBACG,SACF,oCAAiB,IAAA;UA4LH,8BAA8B,KAAK;;;;;EAKlD,YAAY,eAAe,OAAO,UAAU;EAC5C;;EAEA;;EAEA;;;iBAIc,mBACd,WACA,UACA,aACA,aACA,cACG,SACF,wCAAqB,IAAA"}

package/dist/components/morph-surface/morph-surface.js

@@ -0,0 +1,228 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/morph-surface/morph-surface.tsx
+const MorphSurfaceContext = createContext(null);
+/** The surrounding surface, for custom panel content (a close button, say). */
+function useMorphSurface() {
+	const context = useContext(MorphSurfaceContext);
+	if (!context) throw new Error("useMorphSurface must be used inside <MorphSurface>.");
+	return context;
+}
+const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** A dock that morphs into a panel — a feedback form, a quick prompt. */
+function MorphSurface({ ref, className, style, children, label, panelLabel, icon, open: openProp, defaultOpen = false, onOpenChange, panelWidth = "22.5rem", panelHeight = "12.5rem", successLabel = "Sent", successDuration = 1500, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const [success, setSuccess] = useState(false);
+	const rootRef = useRef(null);
+	const dockRef = useRef(null);
+	const panelRef = useRef(null);
+	const triggerRef = useRef(null);
+	const restoreFocus = useRef(false);
+	const successTimer = useRef(void 0);
+	const [dock, setDock] = useState(null);
+	const panelId = useId();
+	const name = panelLabel ?? (typeof label === "string" ? label : "Panel");
+	const setRootRef = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const setOpen = useCallback((next) => {
+		if (openProp === void 0) setUncontrolled(next);
+		onOpenChange?.(next);
+	}, [openProp, onOpenChange]);
+	const close = useCallback((options = {}) => {
+		restoreFocus.current = options.restore ?? true;
+		setOpen(false);
+		if (options.success) {
+			clearTimeout(successTimer.current);
+			setSuccess(true);
+			successTimer.current = setTimeout(() => setSuccess(false), successDuration);
+		}
+	}, [setOpen, successDuration]);
+	useEffect(() => () => clearTimeout(successTimer.current), []);
+	useLayoutEffect(() => {
+		const element = dockRef.current;
+		if (!element) return;
+		const measure = () => {
+			const width = element.offsetWidth;
+			const height = element.offsetHeight;
+			if (width && height) setDock((d) => d?.width === width && d.height === height ? d : {
+				width,
+				height
+			});
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (open) {
+			const panel = panelRef.current;
+			(panel?.querySelector("[data-autofocus]") ?? panel?.querySelector(FOCUSABLE) ?? panel)?.focus();
+		} else if (restoreFocus.current) {
+			restoreFocus.current = false;
+			triggerRef.current?.focus();
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) close({ restore: false });
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	}, [open, close]);
+	function handleKeyDown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		close();
+	}
+	function handleBlur(event) {
+		const next = event.relatedTarget;
+		if (next && !rootRef.current?.contains(next)) close({ restore: false });
+	}
+	const state = open ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRootRef,
+		"data-slot": "morph-surface",
+		"data-state": state,
+		className: cn("relative flex flex-col items-start justify-end overflow-hidden bg-popover text-popover-foreground shadow-lg ring-1 ring-border", "max-w-full transition-[width,height,border-radius] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "rounded-[1.25rem] data-[state=closed]:delay-[var(--duration-instant)] data-[state=open]:rounded-[0.875rem]", className),
+		style: {
+			width: open ? panelWidth : dock?.width,
+			height: open ? panelHeight : dock?.height,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: dockRef,
+				"data-slot": "morph-surface-dock",
+				"data-state": state,
+				inert: open,
+				className: cn("flex h-11 w-max shrink-0 items-center gap-2 px-3 whitespace-nowrap select-none", "transition-[opacity,visibility] duration-[var(--duration-fast)]", "data-[state=open]:invisible data-[state=open]:opacity-0"),
+				children: [icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex size-6 items-center justify-center",
+					children: icon
+				}) : null, /* @__PURE__ */ jsx("button", {
+					ref: triggerRef,
+					type: "button",
+					"data-slot": "morph-surface-trigger",
+					"aria-expanded": open,
+					"aria-controls": panelId,
+					onClick: () => setOpen(true),
+					className: cn("rounded-full px-2 py-0.5 text-sm font-medium transition-colors duration-[var(--duration-fast)] hover:bg-accent", focusRing),
+					children: success ? successLabel : label
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: panelRef,
+				id: panelId,
+				role: "dialog",
+				"aria-label": name,
+				tabIndex: -1,
+				"data-slot": "morph-surface-panel",
+				"data-state": state,
+				inert: !open,
+				onKeyDown: handleKeyDown,
+				onBlur: handleBlur,
+				className: cn("absolute start-0 bottom-0 flex flex-col p-1 outline-none", "transition-[opacity,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:duration-[var(--duration-instant)]"),
+				style: {
+					width: panelWidth,
+					height: panelHeight,
+					maxWidth: "100%"
+				},
+				children: /* @__PURE__ */ jsx(MorphSurfaceContext.Provider, {
+					value: {
+						open,
+						close,
+						panelLabel: name,
+						icon
+					},
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: success ? successLabel : ""
+			})
+		]
+	});
+}
+function Kbd({ children }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: "flex h-6 min-w-6 items-center justify-center rounded-sm border border-border bg-muted px-1.5 font-sans text-xs text-foreground",
+		children
+	});
+}
+/** The source's panel: a labelled message box, submitted with ⌘/Ctrl + Enter. */
+function MorphSurfaceForm({ className, onSubmit, placeholder = "Ask me anything…", submitLabel = "Send", fieldName = "message", ...props }) {
+	const { close, panelLabel, icon } = useMorphSurface();
+	const fieldId = useId();
+	function handleSubmit(event) {
+		event.preventDefault();
+		const field = event.currentTarget.elements.namedItem(fieldName);
+		const value = field.value.trim();
+		if (!value) return;
+		if (onSubmit?.(value, event) === false) return;
+		field.value = "";
+		close({ success: true });
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			event.currentTarget.form?.requestSubmit();
+		}
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "morph-surface-form",
+		className: cn("flex h-full flex-col", className),
+		onSubmit: handleSubmit,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 py-1 ps-2 pe-1",
+			children: [/* @__PURE__ */ jsxs("label", {
+				htmlFor: fieldId,
+				className: "flex items-center gap-1.5 text-sm font-medium",
+				children: [icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex size-6 items-center justify-center",
+					children: icon
+				}) : null, panelLabel]
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "submit",
+				"data-slot": "morph-surface-submit",
+				className: cn("flex items-center gap-1 rounded-md p-0.5", focusRing),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: submitLabel
+				}), /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					className: "flex gap-1",
+					children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("textarea", {
+			id: fieldId,
+			name: fieldName,
+			required: true,
+			"data-autofocus": true,
+			spellCheck: false,
+			placeholder,
+			"aria-keyshortcuts": "Meta+Enter Control+Enter",
+			onKeyDown: handleKeyDown,
+			className: cn("w-full flex-1 resize-none rounded-md bg-muted p-3 text-sm text-foreground placeholder:text-muted-foreground", focusRing)
+		})]
+	});
+}
+//#endregion
+export { MorphSurface, MorphSurfaceForm, useMorphSurface };
+
+//# sourceMappingURL=morph-surface.js.map