@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/magnify-dock/magnify-dock.js

@@ -0,0 +1,183 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/magnify-dock/magnify-dock.tsx
+const SPRING = "cubic-bezier(.24,1.2,.32,1)";
+const TIP_SPRING = "cubic-bezier(.28,1.3,.36,1)";
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */
+function magnifyFalloff(distance, reach) {
+	const r = Math.round(clamp(reach, 0, 4));
+	if (distance > r) return 0;
+	return Math.cos(Math.PI * distance / (2 * (r + 1))) ** 2;
+}
+const magnifyDockVariants = cva("relative inline-flex items-end gap-2.5 rounded-[1.625rem] px-4 py-3 shadow-sm", {
+	variants: { 
+	/** Dock tone. `light` is the card surface; `dark` inverts it. */
+fill: {
+		light: "bg-card text-card-foreground",
+		dark: "bg-foreground text-background"
+	} },
+	defaultVariants: { fill: "light" }
+});
+/** A dock of icon buttons or links that magnify on hover and keyboard focus. */
+function MagnifyDock({ className, items, value, defaultValue, onValueChange, magnify = 1.32, lift = 8, reach = 2, fill, stroke = false, onKeyDown, onPointerLeave, onBlur, onPointerDown, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const active = value ?? uncontrolled;
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [stop, setStop] = useState(null);
+	const pressing = useRef(false);
+	const direction = Direction.useDirection();
+	const scale = clamp(magnify, 1, 2);
+	const rise = clamp(lift, 0, 22);
+	const dark = fill === "dark";
+	const enabled = items.flatMap((item, index) => item.disabled ? [] : [index]);
+	const activeIndex = items.findIndex((item) => item.value === active && !item.disabled);
+	const tabStop = stop !== null && enabled.includes(stop) ? stop : activeIndex >= 0 ? activeIndex : enabled[0];
+	const lens = hovered ?? focused;
+	function select(item) {
+		if (item.disabled) return;
+		if (value === void 0) setUncontrolled(item.value);
+		onValueChange?.(item.value);
+	}
+	function focusItem(root, index) {
+		root.querySelector(`[data-index="${String(index)}"]`)?.focus();
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || enabled.length === 0) return;
+		const from = Number(event.target.dataset.index);
+		if (Number.isNaN(from)) return;
+		const rtl = direction === "rtl" || event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+		const position = enabled.indexOf(from);
+		const last = enabled.length - 1;
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		let to;
+		if (event.key === forward) to = enabled[position >= last ? 0 : position + 1];
+		else if (event.key === back) to = enabled[position <= 0 ? last : position - 1];
+		else if (event.key === "Home") to = enabled[0];
+		else if (event.key === "End") to = enabled[last];
+		if (to === void 0) return;
+		event.preventDefault();
+		focusItem(event.currentTarget, to);
+	}
+	function handleFocus(index) {
+		setStop(index);
+		setFocused(pressing.current ? null : index);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "toolbar",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Dock",
+		"aria-orientation": "horizontal",
+		"data-slot": "magnify-dock",
+		className: cn(magnifyDockVariants({ fill }), stroke && "ring-1 ring-border ring-inset", className),
+		onKeyDown: handleKeyDown,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			pressing.current = true;
+			setTimeout(() => {
+				pressing.current = false;
+			}, 0);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(null);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (!event.currentTarget.contains(event.relatedTarget)) setFocused(null);
+		},
+		...props,
+		children: items.map((item, index) => {
+			const distance = lens === null ? Infinity : Math.abs(index - lens);
+			const f = magnifyFalloff(distance, reach);
+			const y = Math.round(rise * f * 100) / 100;
+			const s = Math.round((1 + (scale - 1) * f) * 1e3) / 1e3;
+			const isActive = index === activeIndex;
+			const opacity = distance === 0 || isActive ? 1 : distance === 1 && f > 0 ? .66 : .42;
+			const shared = {
+				"data-index": index,
+				"data-slot": "magnify-dock-item",
+				"data-lens": distance === 0 ? "" : void 0,
+				"data-near": distance === 1 && f > 0 ? "" : void 0,
+				"aria-label": item.label,
+				"aria-current": isActive ? "page" : void 0,
+				tabIndex: item.disabled ? -1 : index === tabStop ? 0 : -1,
+				className: cn("relative flex size-11 shrink-0 items-center justify-center rounded-[0.625rem]", focusRing, "disabled:pointer-events-none aria-disabled:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"),
+				style: {
+					opacity: item.disabled ? .2 : opacity,
+					transition: `opacity calc(180ms * var(--motion-scale)) ease`
+				},
+				onPointerEnter: () => setHovered(index),
+				onFocus: () => handleFocus(index)
+			};
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-glyph",
+					className: "flex origin-bottom",
+					style: {
+						transform: `translateY(${String(-y)}px) scale(${String(s)})`,
+						transition: `transform calc(320ms * var(--motion-scale)) ${SPRING}`
+					},
+					children: item.icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-dot",
+					className: "absolute inset-x-0 bottom-[3px] mx-auto size-[3px] rounded-full bg-current",
+					style: {
+						opacity: isActive ? .55 : 0,
+						scale: isActive ? 1 : .4,
+						transition: `opacity calc(360ms * var(--motion-scale)) ${SPRING}, scale calc(360ms * var(--motion-scale)) ${SPRING}`
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "magnify-dock-tip",
+					"data-on": distance === 0 ? "" : void 0,
+					className: cn("pointer-events-none absolute inset-x-0 bottom-full mx-auto mb-2 w-max rounded-full px-[9px] py-[5px]", "font-mono text-[0.5rem] leading-none tracking-[0.06em] whitespace-nowrap uppercase", dark ? "bg-background text-foreground" : "bg-foreground text-background"),
+					style: {
+						opacity: distance === 0 ? 1 : 0,
+						translate: `0 ${distance === 0 ? "0" : "4px"}`,
+						transition: `opacity calc(180ms * var(--motion-scale)) ease, translate calc(260ms * var(--motion-scale)) ${TIP_SPRING}`
+					},
+					children: item.label
+				})
+			] });
+			if (item.href) return /* @__PURE__ */ jsx("a", {
+				...shared,
+				href: item.disabled ? void 0 : item.href,
+				role: item.disabled ? "link" : void 0,
+				"aria-disabled": item.disabled || void 0,
+				onClick: (event) => {
+					if (item.disabled) {
+						event.preventDefault();
+						return;
+					}
+					select(item);
+				},
+				children: content
+			}, item.value);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: item.disabled,
+				...shared,
+				onClick: () => select(item),
+				children: content
+			}, item.value);
+		})
+	});
+}
+//#endregion
+export { MagnifyDock, magnifyDockVariants, magnifyFalloff };
+
+//# sourceMappingURL=magnify-dock.js.map

package/dist/components/magnify-dock/magnify-dock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify-dock.js","names":[],"sources":["../../../src/components/magnify-dock/magnify-dock.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Magnifying dock (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A macOS-style dock: the item under the pointer grows and lifts, its\n * neighbours rise less, and a small label pill appears above it.\n *\n * Magnification is discrete per item, not continuous in x: the lens item is\n * distance 0, its neighbours 1, 2, … and each takes a share of the effect from\n * a cos² falloff. Nothing carries velocity, so this is plain CSS: each glyph\n * transitions its transform on a springy cubic-bezier, and the global\n * reduced-motion rule (via --motion-scale) turns every move into a jump.\n *\n * The lens follows the hovered item *or* the keyboard-focused one, so arrow\n * keys give the same feedback a pointer does. The dock is a toolbar with a\n * roving tab stop; the active item is the current page (aria-current).\n */\n\nconst SPRING = \"cubic-bezier(.24,1.2,.32,1)\";\nconst TIP_SPRING = \"cubic-bezier(.28,1.3,.36,1)\";\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */\nexport function magnifyFalloff(distance: number, reach: number) {\n  const r = Math.round(clamp(reach, 0, 4));\n  if (distance > r) return 0;\n  return Math.cos((Math.PI * distance) / (2 * (r + 1))) ** 2;\n}\n\nexport interface MagnifyDockItem {\n  value: string;\n  /** Names the item and fills its tooltip. */\n  label: string;\n  /** Decorative glyph, hidden from assistive technology. */\n  icon: ReactNode;\n  /** Renders a link instead of a button. */\n  href?: string;\n  disabled?: boolean;\n}\n\nconst magnifyDockVariants = cva(\n  \"relative inline-flex items-end gap-2.5 rounded-[1.625rem] px-4 py-3 shadow-sm\",\n  {\n    variants: {\n      /** Dock tone. `light` is the card surface; `dark` inverts it. */\n      fill: {\n        light: \"bg-card text-card-foreground\",\n        dark: \"bg-foreground text-background\",\n      },\n    },\n    defaultVariants: { fill: \"light\" },\n  },\n);\n\nexport interface MagnifyDockProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"children\">,\n    VariantProps<typeof magnifyDockVariants> {\n  items: MagnifyDockItem[];\n  /** The active item (controlled). */\n  value?: string;\n  /** The active item at first (uncontrolled). */\n  defaultValue?: string;\n  /** Called when an item is activated. */\n  onValueChange?: (value: string) => void;\n  /** Scale of the lens item, 1–2. */\n  magnify?: number;\n  /** How far the lens item rises, 0–22 px. */\n  lift?: number;\n  /** How many neighbours on each side are affected, 0–4. */\n  reach?: number;\n  /** 1px inset hairline around the dock. */\n  stroke?: boolean;\n}\n\n/** A dock of icon buttons or links that magnify on hover and keyboard focus. */\nexport function MagnifyDock({\n  className,\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  magnify = 1.32,\n  lift = 8,\n  reach = 2,\n  fill,\n  stroke = false,\n  onKeyDown,\n  onPointerLeave,\n  onBlur,\n  onPointerDown,\n  ...props\n}: MagnifyDockProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const active = value ?? uncontrolled;\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [focused, setFocused] = useState<number | null>(null);\n  const [stop, setStop] = useState<number | null>(null);\n  const pressing = useRef(false);\n  const direction = Direction.useDirection();\n  const scale = clamp(magnify, 1, 2);\n  const rise = clamp(lift, 0, 22);\n  const dark = fill === \"dark\";\n\n  const enabled = items.flatMap((item, index) => (item.disabled ? [] : [index]));\n  const activeIndex = items.findIndex((item) => item.value === active && !item.disabled);\n  // The roving tab stop: last focused, else the active item, else the first enabled.\n  const tabStop =\n    stop !== null && enabled.includes(stop)\n      ? stop\n      : activeIndex >= 0\n        ? activeIndex\n        : enabled[0];\n  const lens = hovered ?? focused;\n\n  function select(item: MagnifyDockItem) {\n    if (item.disabled) return;\n    if (value === undefined) setUncontrolled(item.value);\n    onValueChange?.(item.value);\n  }\n\n  function focusItem(root: HTMLElement, index: number) {\n    root.querySelector<HTMLElement>(`[data-index=\"${String(index)}\"]`)?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || enabled.length === 0) return;\n    const from = Number((event.target as HTMLElement).dataset.index);\n    if (Number.isNaN(from)) return;\n    const rtl =\n      direction === \"rtl\" ||\n      event.currentTarget.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n    const position = enabled.indexOf(from);\n    const last = enabled.length - 1;\n    const forward = rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const back = rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    let to: number | undefined;\n    if (event.key === forward) to = enabled[position >= last ? 0 : position + 1];\n    else if (event.key === back) to = enabled[position <= 0 ? last : position - 1];\n    else if (event.key === \"Home\") to = enabled[0];\n    else if (event.key === \"End\") to = enabled[last];\n    if (to === undefined) return;\n    event.preventDefault();\n    focusItem(event.currentTarget, to);\n  }\n\n  function handleFocus(index: number) {\n    setStop(index);\n    // Pointer focus is already under the lens (or leaving it); only keyboard\n    // and programmatic focus move the lens, like :focus-visible.\n    setFocused(pressing.current ? null : index);\n  }\n\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Dock\"}\n      aria-orientation=\"horizontal\"\n      data-slot=\"magnify-dock\"\n      className={cn(\n        magnifyDockVariants({ fill }),\n        stroke && \"ring-1 ring-border ring-inset\",\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      onPointerDown={(event) => {\n        onPointerDown?.(event);\n        pressing.current = true;\n        // Focus lands between pointerdown and the next task.\n        setTimeout(() => {\n          pressing.current = false;\n        }, 0);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setHovered(null);\n      }}\n      onBlur={(event) => {\n        onBlur?.(event);\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(null);\n      }}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const distance = lens === null ? Infinity : Math.abs(index - lens);\n        const f = magnifyFalloff(distance, reach);\n        const y = Math.round(rise * f * 100) / 100;\n        const s = Math.round((1 + (scale - 1) * f) * 1000) / 1000;\n        const isActive = index === activeIndex;\n        const opacity = distance === 0 || isActive ? 1 : distance === 1 && f > 0 ? 0.66 : 0.42;\n        const shared = {\n          \"data-index\": index,\n          \"data-slot\": \"magnify-dock-item\",\n          \"data-lens\": distance === 0 ? \"\" : undefined,\n          \"data-near\": distance === 1 && f > 0 ? \"\" : undefined,\n          \"aria-label\": item.label,\n          \"aria-current\": isActive ? (\"page\" as const) : undefined,\n          tabIndex: item.disabled ? -1 : index === tabStop ? 0 : -1,\n          className: cn(\n            \"relative flex size-11 shrink-0 items-center justify-center rounded-[0.625rem]\",\n            focusRing,\n            \"disabled:pointer-events-none aria-disabled:pointer-events-none\",\n            \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6\",\n          ),\n          style: {\n            opacity: item.disabled ? 0.2 : opacity,\n            transition: `opacity calc(180ms * var(--motion-scale)) ease`,\n          },\n          onPointerEnter: () => setHovered(index),\n          onFocus: () => handleFocus(index),\n        };\n        const content = (\n          <>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-glyph\"\n              className=\"flex origin-bottom\"\n              style={{\n                transform: `translateY(${String(-y)}px) scale(${String(s)})`,\n                transition: `transform calc(320ms * var(--motion-scale)) ${SPRING}`,\n              }}\n            >\n              {item.icon}\n            </span>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-dot\"\n              className=\"absolute inset-x-0 bottom-[3px] mx-auto size-[3px] rounded-full bg-current\"\n              style={{\n                opacity: isActive ? 0.55 : 0,\n                scale: isActive ? 1 : 0.4,\n                transition: `opacity calc(360ms * var(--motion-scale)) ${SPRING}, scale calc(360ms * var(--motion-scale)) ${SPRING}`,\n              }}\n            />\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"magnify-dock-tip\"\n              data-on={distance === 0 ? \"\" : undefined}\n              className={cn(\n                \"pointer-events-none absolute inset-x-0 bottom-full mx-auto mb-2 w-max rounded-full px-[9px] py-[5px]\",\n                \"font-mono text-[0.5rem] leading-none tracking-[0.06em] whitespace-nowrap uppercase\",\n                dark ? \"bg-background text-foreground\" : \"bg-foreground text-background\",\n              )}\n              style={{\n                opacity: distance === 0 ? 1 : 0,\n                translate: `0 ${distance === 0 ? \"0\" : \"4px\"}`,\n                transition: `opacity calc(180ms * var(--motion-scale)) ease, translate calc(260ms * var(--motion-scale)) ${TIP_SPRING}`,\n              }}\n            >\n              {item.label}\n            </span>\n          </>\n        );\n\n        if (item.href) {\n          return (\n            <a\n              key={item.value}\n              {...shared}\n              href={item.disabled ? undefined : item.href}\n              role={item.disabled ? \"link\" : undefined}\n              aria-disabled={item.disabled || undefined}\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  return;\n                }\n                select(item);\n              }}\n            >\n              {content}\n            </a>\n          );\n        }\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            disabled={item.disabled}\n            {...shared}\n            onClick={() => select(item)}\n          >\n            {content}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { magnifyDockVariants };\n"],"mappings":"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"}

package/dist/components/magnify-dock/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/magnify-dock/meta.ts
+const meta = defineMeta({
+	name: "magnify-dock",
+	title: "Magnify Dock",
+	description: "A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["magnify-dock.tsx"],
+	a11y: "A toolbar (role=\"toolbar\", named \"Dock\" by default, aria-orientation horizontal) with one roving tab stop: ArrowLeft/ArrowRight move between items (mirrored in right-to-left layouts, wrapping), Home/End jump to the ends, and disabled items are skipped. Items are real buttons, or links when given an href, named by their label; icons and the tooltip pill are aria-hidden. The active item carries aria-current=\"page\" rather than aria-pressed: the dock marks where you are, like a nav bar, and only one item is ever current, so it is not a set of toggles. Magnification and the tooltip follow keyboard focus as well as hover, so keyboard users get the same feedback. Under reduced motion items still magnify, without animating."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/magnify-dock/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/magnify-dock/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"magnify-dock\",\n  title: \"Magnify Dock\",\n  description:\n    \"A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"magnify-dock.tsx\"],\n  a11y:\n    'A toolbar (role=\"toolbar\", named \"Dock\" by default, aria-orientation horizontal) with one roving tab stop: ' +\n    \"ArrowLeft/ArrowRight move between items (mirrored in right-to-left layouts, wrapping), Home/End jump to the \" +\n    \"ends, and disabled items are skipped. Items are real buttons, or links when given an href, named by their \" +\n    'label; icons and the tooltip pill are aria-hidden. The active item carries aria-current=\"page\" rather than ' +\n    \"aria-pressed: the dock marks where you are, like a nav bar, and only one item is ever current, so it is not a \" +\n    \"set of toggles. Magnification and the tooltip follow keyboard focus as well as hover, so keyboard users get \" +\n    \"the same feedback. Under reduced motion items still magnify, without animating.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAOJ,CAAC"}

package/dist/components/marquee/index.d.ts

@@ -0,0 +1,2 @@
+import { Marquee, MarqueeProps, marqueeVariants } from "./marquee.js";
+export { Marquee, type MarqueeProps, marqueeVariants };

package/dist/components/marquee/index.js

@@ -0,0 +1,2 @@
+import { Marquee, marqueeVariants } from "./marquee.js";
+export { Marquee, marqueeVariants };

package/dist/components/marquee/marquee.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/marquee/marquee.d.ts
+/** The root. The track and its halves follow the same orientation. */
+declare const marqueeVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MarqueeProps extends ComponentPropsWithRef<"div">, VariantProps<typeof marqueeVariants> {
+  children?: ReactNode;
+  /** Space between items, and between the last item and the first again. Numbers are px. */
+  gap?: number | string;
+  /** Pixels per second. Converted to a duration from the measured length of the content. */
+  speed?: number;
+  /** Runs toward the inline end (or downward) instead of toward the start (or upward). */
+  reverse?: boolean;
+  /** Pauses while the pointer is over the marquee or focus is inside it. */
+  pauseOnHover?: boolean;
+  /** Pauses it outright — wire this to a visible pause control. */
+  paused?: boolean;
+  /**
+   * How many times to repeat the content inside each half, for content shorter
+   * than the viewport. Repeats are hidden from assistive technology.
+   */
+  repeat?: number;
+}
+/** Scrolls its children in a seamless, endless loop. */
+declare function Marquee({ className, children, orientation, gap, speed, reverse, pauseOnHover, paused, repeat, style, ...props }: MarqueeProps): import("react").JSX.Element;
+//#endregion
+export { Marquee, MarqueeProps, marqueeVariants };
+//# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee/marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.d.ts","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"mappings":";;;;cAqEM,kBAAe;;6CAUnB;UAKe,qBACP,8BAA8B,oBAAoB;EAC1D,WAAW;;EAEX;;EAEA;;EAEA;;EAEA;;EAEA;;;;;EAKA;;;iBAIc,UACd,WACA,UACA,aACA,KACA,OACA,SACA,cACA,QACA,QACA,UACG,SACF,+BAAY,IAAA"}

package/dist/components/marquee/marquee.js

@@ -0,0 +1,117 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/marquee/marquee.tsx
+const PREFIX = "dowel-marquee";
+const STYLES = `
+@keyframes ${PREFIX}-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% * var(--${PREFIX}-sign,1)),0,0)}}
+@keyframes ${PREFIX}-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
+[data-slot=marquee]:dir(rtl){--${PREFIX}-sign:-1}
+[data-slot=marquee]>[data-slot=marquee-track]{animation:var(--${PREFIX}-name) var(--${PREFIX}-duration) linear infinite}
+[data-slot=marquee][data-reverse]>[data-slot=marquee-track]{animation-direction:reverse}
+[data-slot=marquee][data-paused]>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:hover>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:focus-within>[data-slot=marquee-track]{animation-play-state:paused}
+@media (prefers-reduced-motion: reduce){[data-slot=marquee]>[data-slot=marquee-track]{animation:none}}
+`;
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+function subscribeReducedMotion(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+}
+/** The root. The track and its halves follow the same orientation. */
+const marqueeVariants = cva("relative flex", {
+	variants: { orientation: {
+		horizontal: "flex-row overflow-x-hidden",
+		vertical: "flex-col overflow-y-hidden"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** Seconds a loop takes when nothing has been measured yet (server, first paint). */
+const FALLBACK_SECONDS = 20;
+/** Scrolls its children in a seamless, endless loop. */
+function Marquee({ className, children, orientation = "horizontal", gap = 16, speed = 50, reverse = false, pauseOnHover = true, paused = false, repeat = 1, style, ...props }) {
+	const vertical = orientation === "vertical";
+	const reduced = useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+	const firstHalf = useRef(null);
+	const [length, setLength] = useState(0);
+	useEffect(() => {
+		const element = firstHalf.current;
+		if (!element || reduced) return;
+		const measure = () => {
+			setLength(vertical ? element.offsetHeight : element.offsetWidth);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [vertical, reduced]);
+	const seconds = length > 0 && speed > 0 ? length / speed : FALLBACK_SECONDS;
+	const gapValue = typeof gap === "number" ? `${String(gap)}px` : gap;
+	const copies = Math.max(1, Math.floor(repeat));
+	const rootStyle = {
+		[`--${PREFIX}-name`]: `${PREFIX}-${vertical ? "y" : "x"}`,
+		[`--${PREFIX}-duration`]: `calc(${String(Math.round(seconds * 1e3))}ms * var(--motion-scale, 1))`,
+		...style
+	};
+	const half = (index) => /* @__PURE__ */ jsx("div", {
+		ref: index === 0 ? firstHalf : void 0,
+		"data-slot": "marquee-group",
+		"aria-hidden": index > 0 ? true : void 0,
+		inert: index > 0 ? true : void 0,
+		className: cn("flex shrink-0", vertical ? "flex-col" : "flex-row"),
+		style: vertical ? {
+			gap: gapValue,
+			paddingBlockEnd: gapValue
+		} : {
+			gap: gapValue,
+			paddingInlineEnd: gapValue
+		},
+		children: Array.from({ length: copies }, (_, copy) => index === 0 && copy === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			children
+		}, copy) : /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			"aria-hidden": "true",
+			inert: true,
+			children
+		}, copy))
+	}, index);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "marquee",
+		"data-orientation": orientation,
+		"data-reverse": reverse || void 0,
+		"data-paused": paused || void 0,
+		"data-pause-on-hover": pauseOnHover || void 0,
+		"data-reduced-motion": reduced || void 0,
+		role: reduced ? "region" : void 0,
+		"aria-label": reduced && !props["aria-labelledby"] ? "Scrolling content" : void 0,
+		tabIndex: reduced ? 0 : void 0,
+		className: cn(marqueeVariants({ orientation }), reduced && ["outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background", vertical ? "overflow-y-auto" : "overflow-x-auto"], className),
+		style: rootStyle,
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "marquee-track",
+			className: cn("flex shrink-0", vertical ? "h-max flex-col" : "w-max flex-row"),
+			children: reduced ? half(0) : [half(0), half(1)]
+		})]
+	});
+}
+//#endregion
+export { Marquee, marqueeVariants };
+
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Infinite Slider (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The source drives a motion value from JavaScript and re-measures on every\n * resize. A marquee is a constant-velocity loop, which is exactly what a CSS\n * keyframe is: the track holds two identical halves and slides by -50%, so\n * the second half lands where the first started and the loop has no seam.\n *\n * JavaScript only measures one half, to turn `speed` (px/s) into a duration.\n * Everything else — pausing on hover and focus, reversing, mirroring for\n * right-to-left text, stopping under reduced motion — is CSS, so it holds even\n * before hydration.\n */\n\nconst PREFIX = \"dowel-marquee\";\n\n/*\n * Unlayered, so it outranks utilities: it is limited to the keyframes and to\n * data-slot selectors a consumer has no reason to override. The animation is\n * never set inline, because an inline animation would beat the reduced-motion\n * rule below.\n */\nconst STYLES = `\n@keyframes ${PREFIX}-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% * var(--${PREFIX}-sign,1)),0,0)}}\n@keyframes ${PREFIX}-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}\n[data-slot=marquee]:dir(rtl){--${PREFIX}-sign:-1}\n[data-slot=marquee]>[data-slot=marquee-track]{animation:var(--${PREFIX}-name) var(--${PREFIX}-duration) linear infinite}\n[data-slot=marquee][data-reverse]>[data-slot=marquee-track]{animation-direction:reverse}\n[data-slot=marquee][data-paused]>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:hover>[data-slot=marquee-track],[data-slot=marquee][data-pause-on-hover]:focus-within>[data-slot=marquee-track]{animation-play-state:paused}\n@media (prefers-reduced-motion: reduce){[data-slot=marquee]>[data-slot=marquee-track]{animation:none}}\n`;\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION).matches\n  );\n}\n\nfunction subscribeReducedMotion(onChange: () => void): () => void {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => {};\n  }\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => {\n    query.removeEventListener(\"change\", onChange);\n  };\n}\n\n/** The root. The track and its halves follow the same orientation. */\nconst marqueeVariants = cva(\"relative flex\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row overflow-x-hidden\",\n      vertical: \"flex-col overflow-y-hidden\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\n/** Seconds a loop takes when nothing has been measured yet (server, first paint). */\nconst FALLBACK_SECONDS = 20;\n\nexport interface MarqueeProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof marqueeVariants> {\n  children?: ReactNode;\n  /** Space between items, and between the last item and the first again. Numbers are px. */\n  gap?: number | string;\n  /** Pixels per second. Converted to a duration from the measured length of the content. */\n  speed?: number;\n  /** Runs toward the inline end (or downward) instead of toward the start (or upward). */\n  reverse?: boolean;\n  /** Pauses while the pointer is over the marquee or focus is inside it. */\n  pauseOnHover?: boolean;\n  /** Pauses it outright — wire this to a visible pause control. */\n  paused?: boolean;\n  /**\n   * How many times to repeat the content inside each half, for content shorter\n   * than the viewport. Repeats are hidden from assistive technology.\n   */\n  repeat?: number;\n}\n\n/** Scrolls its children in a seamless, endless loop. */\nexport function Marquee({\n  className,\n  children,\n  orientation = \"horizontal\",\n  gap = 16,\n  speed = 50,\n  reverse = false,\n  pauseOnHover = true,\n  paused = false,\n  repeat = 1,\n  style,\n  ...props\n}: MarqueeProps) {\n  const vertical = orientation === \"vertical\";\n  const reduced = useSyncExternalStore(\n    subscribeReducedMotion,\n    prefersReducedMotion,\n    () => false,\n  );\n  const firstHalf = useRef<HTMLDivElement>(null);\n  const [length, setLength] = useState(0);\n\n  useEffect(() => {\n    const element = firstHalf.current;\n    if (!element || reduced) return;\n    const measure = () => {\n      setLength(vertical ? element.offsetHeight : element.offsetWidth);\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [vertical, reduced]);\n\n  const seconds = length > 0 && speed > 0 ? length / speed : FALLBACK_SECONDS;\n  const gapValue = typeof gap === \"number\" ? `${String(gap)}px` : gap;\n  const copies = Math.max(1, Math.floor(repeat));\n\n  const rootStyle: CSSProperties & Record<`--${string}`, string> = {\n    [`--${PREFIX}-name`]: `${PREFIX}-${vertical ? \"y\" : \"x\"}`,\n    // Through the motion scale like every other duration in the system.\n    [`--${PREFIX}-duration`]: `calc(${String(Math.round(seconds * 1000))}ms * var(--motion-scale, 1))`,\n    ...style,\n  };\n\n  const half = (index: number) => (\n    <div\n      key={index}\n      ref={index === 0 ? firstHalf : undefined}\n      data-slot=\"marquee-group\"\n      aria-hidden={index > 0 ? true : undefined}\n      inert={index > 0 ? true : undefined}\n      className={cn(\"flex shrink-0\", vertical ? \"flex-col\" : \"flex-row\")}\n      style={\n        vertical\n          ? { gap: gapValue, paddingBlockEnd: gapValue }\n          : { gap: gapValue, paddingInlineEnd: gapValue }\n      }\n    >\n      {Array.from({ length: copies }, (_, copy) =>\n        index === 0 && copy === 0 ? (\n          <div key={copy} className=\"contents\">\n            {children}\n          </div>\n        ) : (\n          <div key={copy} className=\"contents\" aria-hidden=\"true\" inert>\n            {children}\n          </div>\n        ),\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      data-slot=\"marquee\"\n      data-orientation={orientation}\n      data-reverse={reverse || undefined}\n      data-paused={paused || undefined}\n      data-pause-on-hover={pauseOnHover || undefined}\n      data-reduced-motion={reduced || undefined}\n      // Under reduced motion it stops and becomes an ordinary scroller: a named,\n      // focusable region, so a keyboard user can reach it to scroll.\n      role={reduced ? \"region\" : undefined}\n      aria-label={reduced && !props[\"aria-labelledby\"] ? \"Scrolling content\" : undefined}\n      tabIndex={reduced ? 0 : undefined}\n      className={cn(\n        marqueeVariants({ orientation }),\n        reduced && [focusRing, vertical ? \"overflow-y-auto\" : \"overflow-x-auto\"],\n        className,\n      )}\n      style={rootStyle}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"marquee-track\"\n        className={cn(\"flex shrink-0\", vertical ? \"h-max flex-col\" : \"w-max flex-row\")}\n      >\n        {reduced ? half(0) : [half(0), half(1)]}\n      </div>\n    </div>\n  );\n}\n\nexport { marqueeVariants };\n"],"mappings":"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"}

package/dist/components/marquee/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/marquee/meta.ts
+const meta = defineMeta({
+	name: "marquee",
+	title: "Marquee",
+	description: "Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["marquee.tsx"],
+	a11y: "The content is rendered once for assistive technology: the copy that closes the loop, and any `repeat` copies, are aria-hidden and inert, so nothing is announced or focused twice. It pauses while hovered or while focus is inside it, and `paused` stops it outright for a visible pause control (WCAG 2.2.2). Under prefers-reduced-motion it stops and becomes an ordinary, keyboard-focusable scroller. The loop runs toward the inline start, so it mirrors under dir=\"rtl\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/marquee/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/marquee/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"marquee\",\n  title: \"Marquee\",\n  description:\n    \"Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"marquee.tsx\"],\n  a11y:\n    \"The content is rendered once for assistive technology: the copy that closes the loop, and any \" +\n    \"`repeat` copies, are aria-hidden and inert, so nothing is announced or focused twice. It pauses \" +\n    \"while hovered or while focus is inside it, and `paused` stops it outright for a visible pause \" +\n    \"control (WCAG 2.2.2). Under prefers-reduced-motion it stops and becomes an ordinary, \" +\n    'keyboard-focusable scroller. The loop runs toward the inline start, so it mirrors under dir=\"rtl\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,2 @@
+import { MorphButton, MorphButtonProps, MorphButtonTrigger, morphButtonToneVariants, morphButtonVariants } from "./morph-button.js";
+export { MorphButton, type MorphButtonProps, type MorphButtonTrigger, morphButtonToneVariants, morphButtonVariants };

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

@@ -0,0 +1,2 @@
+import { MorphButton, morphButtonToneVariants, morphButtonVariants } from "./morph-button.js";
+export { MorphButton, morphButtonToneVariants, morphButtonVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/morph-button/meta.ts
+const meta = defineMeta({
+	name: "morph-button",
+	title: "Morph Button",
+	description: "A button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["morph-button.tsx"],
+	a11y: "In `toggle` mode the state is exposed with aria-pressed and the accessible name stays the resting label, so \"Mute\" never becomes \"Unmute, pressed\". `transient` confirmations (Copied, Submitted) are announced through a polite live region and revert on a timer. `trigger=\"hover\"` activates on keyboard focus as well as hover. Icons are aria-hidden: an icon-only button must be named with aria-label or aria-labelledby, and warns in development when it is not. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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"}