@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/dropdown-menu/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["dropdown-menu.tsx"],
-	a11y: "Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and restores focus, Right/Left open and close submenus. Highlight is driven by data-highlighted so pointer and keyboard focus never diverge. Use it for actions — links belong in a nav, and value selection belongs in Select."
+	a11y: "Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes and restores focus, Right/Left open and close submenus. Highlight is driven by data-highlighted so pointer and keyboard focus never diverge. Use it for actions — links belong in a nav, and value selection belongs in Select. The opening pop and item stagger are decoration and stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/dropdown-menu/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dropdown-menu/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dropdown-menu\",\n  title: \"Dropdown Menu\",\n  description: \"A menu of actions revealed from a trigger, with submenus and selectable items.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dropdown-menu.tsx\"],\n  a11y:\n    \"Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes \" +\n    \"and restores focus, Right/Left open and close submenus. Highlight is driven by \" +\n    \"data-highlighted so pointer and keyboard focus never diverge. Use it for actions — links \" +\n    \"belong in a nav, and value selection belongs in Select.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dropdown-menu/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dropdown-menu\",\n  title: \"Dropdown Menu\",\n  description: \"A menu of actions revealed from a trigger, with submenus and selectable items.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"dropdown-menu.tsx\"],\n  a11y:\n    \"Full menu keyboard model: arrows move, Home/End jump, typeahead searches, Escape closes \" +\n    \"and restores focus, Right/Left open and close submenus. Highlight is driven by \" +\n    \"data-highlighted so pointer and keyboard focus never diverge. Use it for actions — links \" +\n    \"belong in a nav, and value selection belongs in Select. The opening pop and item \" +\n    \"stagger are decoration and stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,28 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { ReactNode } from "react";
+//#region src/components/effect-button/effect-button.d.ts
+declare const effectButtonEffects: readonly ["slide-arrow", "pulse", "rotate", "shake", "glare", "text-reveal", "expand-ring", "clip-corners"];
+type EffectButtonEffect = (typeof effectButtonEffects)[number];
+type EffectButtonTone = "current" | "primary" | "success" | "warning" | "destructive" | "info";
+declare const effectButtonVariants: (props?: ({
+  effect?: "slide-arrow" | "pulse" | "rotate" | "shake" | "glare" | "text-reveal" | "expand-ring" | "clip-corners" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface EffectButtonProps extends ButtonProps {
+  /** The micro-interaction played while the button is hovered or keyboard-focused. */
+  effect?: EffectButtonEffect;
+  /** Leading icon. Decorative: the label (or `aria-label`) names the button. */
+  icon?: ReactNode;
+  /**
+   * Icon that slides in at the end for `effect="slide-arrow"`. It is treated as
+   * directional and mirrored in right-to-left layouts.
+   */
+  trailingIcon?: ReactNode;
+  /** Colour the icon (`pulse`) or icon and label (`shake`) take while active. */
+  tone?: EffectButtonTone;
+}
+/** A Button with a hover and focus micro-interaction on its icon or surface. */
+declare function EffectButton({ effect, icon, trailingIcon, tone, asChild, loading, className, children, ...props }: EffectButtonProps): import("react").JSX.Element;
+//#endregion
+export { EffectButton, EffectButtonEffect, EffectButtonProps, EffectButtonTone, effectButtonEffects, effectButtonVariants };
+//# sourceMappingURL=effect-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"effect-button.d.ts","names":[],"sources":["../../../src/components/effect-button/effect-button.tsx"],"mappings":";;;;cAkDa;KAWD,6BAA6B;KAE7B;cAGN,uBAAoB;;6CAexB;UA2Fe,0BAA0B;;EAEzC,SAAS;;EAET,OAAO;;;;;EAKP,eAAe;;EAEf,OAAO;;;iBAIO,eACd,QACA,MACA,cACA,MACA,SACA,SACA,WACA,aACG,SACF,oCAAiB,IAAA"}

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

@@ -0,0 +1,176 @@
+import { mirrorForDirection } from "../../lib/styles.js";
+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 { cloneElement, isValidElement } from "react";
+//#region src/components/effect-button/effect-button.tsx
+const PREFIX = "dowel-effect-button";
+/** A duration scaled by --motion-scale: decoration stops under reduced motion. */
+function scaled(ms) {
+	return `calc(${String(ms)}ms * var(--motion-scale, 1))`;
+}
+/** A rule that applies while the root is hovered (on hover devices) or focus-visible. */
+function whenActive(effect, part, declarations) {
+	const root = `[data-slot=effect-button][data-effect=${effect}]`;
+	const child = `>[data-slot=effect-button-${part}]`;
+	return `@media (hover:hover){${root}:hover${child}{${declarations}}}${root}:focus-visible${child}{${declarations}}`;
+}
+const STYLES = `
+@keyframes ${PREFIX}-pulse{0%,100%{scale:1}50%{scale:1.25}}
+@keyframes ${PREFIX}-shake{0%,100%{translate:0 0;rotate:0deg}25%,75%{translate:0 -2px;rotate:-10deg}50%{translate:0 0;rotate:10deg}}
+@keyframes ${PREFIX}-glare{0%{translate:-100% 0}46%,100%{translate:100% 0}}
+@keyframes ${PREFIX}-ring{from{opacity:1;scale:1}to{opacity:0;scale:1.15}}
+${whenActive("pulse", "icon", `animation:${PREFIX}-pulse ${scaled(400)} ease-in-out`)}
+${whenActive("shake", "icon", `animation:${PREFIX}-shake ${scaled(400)} ease-in-out`)}
+${whenActive("glare", "glare", `animation:${PREFIX}-glare ${scaled(1850)} ease-in-out infinite`)}
+${whenActive("expand-ring", "ring", `animation:${PREFIX}-ring ${scaled(600)} ease-out`)}
+`;
+const effectButtonEffects = [
+	"slide-arrow",
+	"pulse",
+	"rotate",
+	"shake",
+	"glare",
+	"text-reveal",
+	"expand-ring",
+	"clip-corners"
+];
+const effectButtonVariants = cva("group/effect relative", {
+	variants: { effect: {
+		"slide-arrow": "gap-0",
+		pulse: "",
+		rotate: "",
+		shake: "",
+		glare: "overflow-hidden",
+		"text-reveal": "",
+		"expand-ring": "",
+		"clip-corners": ""
+	} },
+	defaultVariants: { effect: "slide-arrow" }
+});
+/** The colour a toned part takes while the button is active. Literal, so Tailwind can see it. */
+const TONE = {
+	current: "",
+	primary: "group-hover/effect:text-primary group-focus-visible/effect:text-primary",
+	success: "group-hover/effect:text-success group-focus-visible/effect:text-success",
+	warning: "group-hover/effect:text-warning group-focus-visible/effect:text-warning",
+	destructive: "group-hover/effect:text-destructive group-focus-visible/effect:text-destructive",
+	info: "group-hover/effect:text-info group-focus-visible/effect:text-info"
+};
+const settle = "duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]";
+const fade = "duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]";
+/** Classes for the leading icon wrapper, per effect. */
+const ICON = {
+	"slide-arrow": cn("me-2 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity,translate]", settle, "group-hover/effect:me-0 group-hover/effect:-translate-x-2.5 group-hover/effect:grid-cols-[0fr] group-hover/effect:opacity-0 group-hover/effect:rtl:translate-x-2.5", "group-focus-visible/effect:me-0 group-focus-visible/effect:-translate-x-2.5 group-focus-visible/effect:grid-cols-[0fr] group-focus-visible/effect:opacity-0 group-focus-visible/effect:rtl:translate-x-2.5"),
+	pulse: cn("transition-colors [&_svg]:transition-[fill,color]", fade, "group-hover/effect:[&_svg]:fill-current group-focus-visible/effect:[&_svg]:fill-current"),
+	rotate: cn("transition-[rotate]", settle, "group-hover/effect:rotate-180 group-focus-visible/effect:rotate-180"),
+	shake: cn("transition-colors", fade),
+	glare: "",
+	"text-reveal": cn("transition-[rotate]", settle, "group-hover/effect:rotate-45 group-focus-visible/effect:rotate-45"),
+	"expand-ring": cn("transition-[scale]", settle, "group-hover/effect:scale-110 group-focus-visible/effect:scale-110"),
+	"clip-corners": ""
+};
+const TRAILING = cn("ms-0 grid translate-x-2.5 grid-cols-[0fr] opacity-0 transition-[grid-template-columns,margin,opacity,translate] rtl:-translate-x-2.5", settle, "group-hover/effect:ms-2 group-hover/effect:translate-x-0 group-hover/effect:grid-cols-[1fr] group-hover/effect:opacity-100 group-hover/effect:rtl:translate-x-0", "group-focus-visible/effect:ms-2 group-focus-visible/effect:translate-x-0 group-focus-visible/effect:grid-cols-[1fr] group-focus-visible/effect:opacity-100 group-focus-visible/effect:rtl:translate-x-0");
+const REVEAL = cn("block transition-[translate]", settle, "group-hover/effect:-translate-y-full group-focus-visible/effect:-translate-y-full");
+const CORNER_MOVE = cn("transition-[top,bottom,inset-inline-start,inset-inline-end]", settle);
+const CORNERS = [
+	{
+		name: "top-start",
+		className: "top-1.5 start-1.5 [clip-path:polygon(0_0,100%_0,0_100%)] group-hover/effect:top-2.5 group-hover/effect:start-2.5 group-focus-visible/effect:top-2.5 group-focus-visible/effect:start-2.5"
+	},
+	{
+		name: "top-end",
+		className: "top-1.5 end-1.5 [clip-path:polygon(0_0,100%_0,100%_100%)] group-hover/effect:top-2.5 group-hover/effect:end-2.5 group-focus-visible/effect:top-2.5 group-focus-visible/effect:end-2.5"
+	},
+	{
+		name: "bottom-start",
+		className: "bottom-1.5 start-1.5 [clip-path:polygon(0_0,0_100%,100%_100%)] group-hover/effect:bottom-2.5 group-hover/effect:start-2.5 group-focus-visible/effect:bottom-2.5 group-focus-visible/effect:start-2.5"
+	},
+	{
+		name: "bottom-end",
+		className: "bottom-1.5 end-1.5 [clip-path:polygon(100%_0,100%_100%,0_100%)] group-hover/effect:bottom-2.5 group-hover/effect:end-2.5 group-focus-visible/effect:bottom-2.5 group-focus-visible/effect:end-2.5"
+	}
+];
+/** A Button with a hover and focus micro-interaction on its icon or surface. */
+function EffectButton({ effect = "slide-arrow", icon, trailingIcon, tone = "current", asChild = false, loading = false, className, children, ...props }) {
+	const toned = effect === "pulse" || effect === "shake" ? TONE[tone] : "";
+	const labelToned = effect === "shake" ? TONE[tone] : "";
+	function inner(label) {
+		const hasLabel = label !== void 0 && label !== null && label !== false && label !== "";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon && !loading ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-icon",
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0", ICON[effect], toned),
+				children: effect === "slide-arrow" ? /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 overflow-hidden",
+					children: icon
+				}) : icon
+			}) : null,
+			hasLabel ? effect === "text-reveal" ? /* @__PURE__ */ jsxs("span", {
+				"data-slot": "effect-button-label",
+				className: "relative inline-flex overflow-hidden",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: REVEAL,
+					children: label
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn("absolute start-0 top-full", REVEAL),
+					children: label
+				})]
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-label",
+				className: cn("transition-colors", fade, labelToned),
+				children: label
+			}) : null,
+			effect === "slide-arrow" && trailingIcon ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-trailing-icon",
+				"aria-hidden": "true",
+				className: TRAILING,
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("flex min-w-0 overflow-hidden", mirrorForDirection),
+					children: trailingIcon
+				})
+			}) : null,
+			effect === "glare" ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-glare",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 z-10 -translate-x-full bg-[linear-gradient(110deg,transparent_35%,color-mix(in_oklab,currentColor_22%,transparent)_50%,transparent_65%)]"
+			}) : null,
+			effect === "expand-ring" ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-ring",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 rounded-[inherit] border border-current/25 opacity-0"
+			}) : null,
+			effect === "clip-corners" ? CORNERS.map((corner) => /* @__PURE__ */ jsx("span", {
+				"data-slot": "effect-button-corner",
+				"data-corner": corner.name,
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute size-2 bg-current", mirrorForDirection, CORNER_MOVE, corner.className)
+			}, corner.name)) : null
+		] });
+	}
+	let content;
+	if (asChild && isValidElement(children)) {
+		const child = children;
+		content = cloneElement(child, void 0, inner(child.props.children));
+	} else content = inner(children);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsx(Button, {
+		"data-slot": "effect-button",
+		"data-effect": effect,
+		asChild,
+		loading,
+		className: cn(effectButtonVariants({ effect }), className),
+		...props,
+		children: content
+	})] });
+}
+//#endregion
+export { EffectButton, effectButtonEffects, effectButtonVariants };
+
+//# sourceMappingURL=effect-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"effect-button.js","names":[],"sources":["../../../src/components/effect-button/effect-button.tsx"],"sourcesContent":["// Ported from amicro \"Buttons\" (MIT, © 2026 Syed Subhan Uddin) and the SmoothUI Clip Corners Button (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One mechanism, eight effects (ADR 0014). Every effect is a response to the\n * button being hovered OR keyboard-focused — never hover alone, or a keyboard\n * user gets a flatter control than a mouse user.\n *\n * - Transitions are Tailwind `group-hover/effect:` + `group-focus-visible/effect:`\n *   pairs on the parts, so a consumer can restyle any of them.\n * - One-shot and looping motions (pulse, shake, glare, ring) are keyframes in\n *   the hoisted stylesheet, keyed on `[data-slot][data-effect]`. Their\n *   resting state is the \"off\" frame, so when the reduced-motion blanket\n *   collapses an animation to one instant iteration, the part simply rests.\n * - Nothing waits on a JavaScript timer: the effect is the CSS state.\n */\n\nconst PREFIX = \"dowel-effect-button\";\n\n/** A duration scaled by --motion-scale: decoration stops under reduced motion. */\nfunction scaled(ms: number): string {\n  return `calc(${String(ms)}ms * var(--motion-scale, 1))`;\n}\n\n/** A rule that applies while the root is hovered (on hover devices) or focus-visible. */\nfunction whenActive(effect: string, part: string, declarations: string): string {\n  const root = `[data-slot=effect-button][data-effect=${effect}]`;\n  const child = `>[data-slot=effect-button-${part}]`;\n  return (\n    `@media (hover:hover){${root}:hover${child}{${declarations}}}` +\n    `${root}:focus-visible${child}{${declarations}}`\n  );\n}\n\nconst STYLES = `\n@keyframes ${PREFIX}-pulse{0%,100%{scale:1}50%{scale:1.25}}\n@keyframes ${PREFIX}-shake{0%,100%{translate:0 0;rotate:0deg}25%,75%{translate:0 -2px;rotate:-10deg}50%{translate:0 0;rotate:10deg}}\n@keyframes ${PREFIX}-glare{0%{translate:-100% 0}46%,100%{translate:100% 0}}\n@keyframes ${PREFIX}-ring{from{opacity:1;scale:1}to{opacity:0;scale:1.15}}\n${whenActive(\"pulse\", \"icon\", `animation:${PREFIX}-pulse ${scaled(400)} ease-in-out`)}\n${whenActive(\"shake\", \"icon\", `animation:${PREFIX}-shake ${scaled(400)} ease-in-out`)}\n${whenActive(\"glare\", \"glare\", `animation:${PREFIX}-glare ${scaled(1850)} ease-in-out infinite`)}\n${whenActive(\"expand-ring\", \"ring\", `animation:${PREFIX}-ring ${scaled(600)} ease-out`)}\n`;\n\nexport const effectButtonEffects = [\n  \"slide-arrow\",\n  \"pulse\",\n  \"rotate\",\n  \"shake\",\n  \"glare\",\n  \"text-reveal\",\n  \"expand-ring\",\n  \"clip-corners\",\n] as const;\n\nexport type EffectButtonEffect = (typeof effectButtonEffects)[number];\n\nexport type EffectButtonTone =\n  \"current\" | \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\n\nconst effectButtonVariants = cva(\"group/effect relative\", {\n  variants: {\n    effect: {\n      // The icons carry their own spacing so the leaving one can take its gap with it.\n      \"slide-arrow\": \"gap-0\",\n      pulse: \"\",\n      rotate: \"\",\n      shake: \"\",\n      glare: \"overflow-hidden\",\n      \"text-reveal\": \"\",\n      \"expand-ring\": \"\",\n      \"clip-corners\": \"\",\n    },\n  },\n  defaultVariants: { effect: \"slide-arrow\" },\n});\n\n/** The colour a toned part takes while the button is active. Literal, so Tailwind can see it. */\nconst TONE: Record<EffectButtonTone, string> = {\n  current: \"\",\n  primary: \"group-hover/effect:text-primary group-focus-visible/effect:text-primary\",\n  success: \"group-hover/effect:text-success group-focus-visible/effect:text-success\",\n  warning: \"group-hover/effect:text-warning group-focus-visible/effect:text-warning\",\n  destructive:\n    \"group-hover/effect:text-destructive group-focus-visible/effect:text-destructive\",\n  info: \"group-hover/effect:text-info group-focus-visible/effect:text-info\",\n};\n\nconst settle = \"duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\";\nconst fade = \"duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\";\n\n/** Classes for the leading icon wrapper, per effect. */\nconst ICON: Record<EffectButtonEffect, string> = {\n  \"slide-arrow\": cn(\n    \"me-2 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity,translate]\",\n    settle,\n    \"group-hover/effect:me-0 group-hover/effect:-translate-x-2.5 group-hover/effect:grid-cols-[0fr] group-hover/effect:opacity-0 group-hover/effect:rtl:translate-x-2.5\",\n    \"group-focus-visible/effect:me-0 group-focus-visible/effect:-translate-x-2.5 group-focus-visible/effect:grid-cols-[0fr] group-focus-visible/effect:opacity-0 group-focus-visible/effect:rtl:translate-x-2.5\",\n  ),\n  pulse: cn(\n    \"transition-colors [&_svg]:transition-[fill,color]\",\n    fade,\n    \"group-hover/effect:[&_svg]:fill-current group-focus-visible/effect:[&_svg]:fill-current\",\n  ),\n  rotate: cn(\n    \"transition-[rotate]\",\n    settle,\n    \"group-hover/effect:rotate-180 group-focus-visible/effect:rotate-180\",\n  ),\n  shake: cn(\"transition-colors\", fade),\n  glare: \"\",\n  \"text-reveal\": cn(\n    \"transition-[rotate]\",\n    settle,\n    \"group-hover/effect:rotate-45 group-focus-visible/effect:rotate-45\",\n  ),\n  \"expand-ring\": cn(\n    \"transition-[scale]\",\n    settle,\n    \"group-hover/effect:scale-110 group-focus-visible/effect:scale-110\",\n  ),\n  \"clip-corners\": \"\",\n};\n\nconst TRAILING = cn(\n  \"ms-0 grid translate-x-2.5 grid-cols-[0fr] opacity-0 transition-[grid-template-columns,margin,opacity,translate] rtl:-translate-x-2.5\",\n  settle,\n  \"group-hover/effect:ms-2 group-hover/effect:translate-x-0 group-hover/effect:grid-cols-[1fr] group-hover/effect:opacity-100 group-hover/effect:rtl:translate-x-0\",\n  \"group-focus-visible/effect:ms-2 group-focus-visible/effect:translate-x-0 group-focus-visible/effect:grid-cols-[1fr] group-focus-visible/effect:opacity-100 group-focus-visible/effect:rtl:translate-x-0\",\n);\n\nconst REVEAL = cn(\n  \"block transition-[translate]\",\n  settle,\n  \"group-hover/effect:-translate-y-full group-focus-visible/effect:-translate-y-full\",\n);\n\n/*\n * The corners move inward by animating their logical inset, so the travel\n * follows the reading direction without a per-direction translate. Each\n * triangle is drawn for LTR and mirrored in RTL, where start and end swap.\n */\nconst CORNER_MOVE = cn(\"transition-[top,bottom,inset-inline-start,inset-inline-end]\", settle);\nconst CORNERS = [\n  {\n    name: \"top-start\",\n    className:\n      \"top-1.5 start-1.5 [clip-path:polygon(0_0,100%_0,0_100%)] group-hover/effect:top-2.5 group-hover/effect:start-2.5 group-focus-visible/effect:top-2.5 group-focus-visible/effect:start-2.5\",\n  },\n  {\n    name: \"top-end\",\n    className:\n      \"top-1.5 end-1.5 [clip-path:polygon(0_0,100%_0,100%_100%)] group-hover/effect:top-2.5 group-hover/effect:end-2.5 group-focus-visible/effect:top-2.5 group-focus-visible/effect:end-2.5\",\n  },\n  {\n    name: \"bottom-start\",\n    className:\n      \"bottom-1.5 start-1.5 [clip-path:polygon(0_0,0_100%,100%_100%)] group-hover/effect:bottom-2.5 group-hover/effect:start-2.5 group-focus-visible/effect:bottom-2.5 group-focus-visible/effect:start-2.5\",\n  },\n  {\n    name: \"bottom-end\",\n    className:\n      \"bottom-1.5 end-1.5 [clip-path:polygon(100%_0,100%_100%,0_100%)] group-hover/effect:bottom-2.5 group-hover/effect:end-2.5 group-focus-visible/effect:bottom-2.5 group-focus-visible/effect:end-2.5\",\n  },\n] as const;\n\nexport interface EffectButtonProps extends ButtonProps {\n  /** The micro-interaction played while the button is hovered or keyboard-focused. */\n  effect?: EffectButtonEffect;\n  /** Leading icon. Decorative: the label (or `aria-label`) names the button. */\n  icon?: ReactNode;\n  /**\n   * Icon that slides in at the end for `effect=\"slide-arrow\"`. It is treated as\n   * directional and mirrored in right-to-left layouts.\n   */\n  trailingIcon?: ReactNode;\n  /** Colour the icon (`pulse`) or icon and label (`shake`) take while active. */\n  tone?: EffectButtonTone;\n}\n\n/** A Button with a hover and focus micro-interaction on its icon or surface. */\nexport function EffectButton({\n  effect = \"slide-arrow\",\n  icon,\n  trailingIcon,\n  tone = \"current\",\n  asChild = false,\n  loading = false,\n  className,\n  children,\n  ...props\n}: EffectButtonProps) {\n  // Pulse tones its icon; shake tones icon and label, as a warning of what the click does.\n  const toned = effect === \"pulse\" || effect === \"shake\" ? TONE[tone] : \"\";\n  const labelToned = effect === \"shake\" ? TONE[tone] : \"\";\n\n  function inner(label: ReactNode): ReactNode {\n    const hasLabel = label !== undefined && label !== null && label !== false && label !== \"\";\n    return (\n      <>\n        {icon && !loading ? (\n          <span\n            data-slot=\"effect-button-icon\"\n            aria-hidden=\"true\"\n            className={cn(\"inline-flex shrink-0\", ICON[effect], toned)}\n          >\n            {effect === \"slide-arrow\" ? (\n              <span className=\"flex min-w-0 overflow-hidden\">{icon}</span>\n            ) : (\n              icon\n            )}\n          </span>\n        ) : null}\n        {hasLabel ? (\n          effect === \"text-reveal\" ? (\n            <span\n              data-slot=\"effect-button-label\"\n              className=\"relative inline-flex overflow-hidden\"\n            >\n              <span className={REVEAL}>{label}</span>\n              <span aria-hidden=\"true\" className={cn(\"absolute start-0 top-full\", REVEAL)}>\n                {label}\n              </span>\n            </span>\n          ) : (\n            <span\n              data-slot=\"effect-button-label\"\n              className={cn(\"transition-colors\", fade, labelToned)}\n            >\n              {label}\n            </span>\n          )\n        ) : null}\n        {effect === \"slide-arrow\" && trailingIcon ? (\n          <span data-slot=\"effect-button-trailing-icon\" aria-hidden=\"true\" className={TRAILING}>\n            <span className={cn(\"flex min-w-0 overflow-hidden\", mirrorForDirection)}>\n              {trailingIcon}\n            </span>\n          </span>\n        ) : null}\n        {effect === \"glare\" ? (\n          <span\n            data-slot=\"effect-button-glare\"\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 z-10 -translate-x-full bg-[linear-gradient(110deg,transparent_35%,color-mix(in_oklab,currentColor_22%,transparent)_50%,transparent_65%)]\"\n          />\n        ) : null}\n        {effect === \"expand-ring\" ? (\n          <span\n            data-slot=\"effect-button-ring\"\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 rounded-[inherit] border border-current/25 opacity-0\"\n          />\n        ) : null}\n        {effect === \"clip-corners\"\n          ? CORNERS.map((corner) => (\n              <span\n                key={corner.name}\n                data-slot=\"effect-button-corner\"\n                data-corner={corner.name}\n                aria-hidden=\"true\"\n                className={cn(\n                  \"pointer-events-none absolute size-2 bg-current\",\n                  mirrorForDirection,\n                  CORNER_MOVE,\n                  corner.className,\n                )}\n              />\n            ))\n          : null}\n      </>\n    );\n  }\n\n  // With asChild the consumer's element becomes the button, so the parts go\n  // inside it rather than beside it: Slot accepts exactly one child.\n  let content: ReactNode;\n  if (asChild && isValidElement<{ children?: ReactNode }>(children)) {\n    const child = children as ReactElement<{ children?: ReactNode }>;\n    content = cloneElement(child, undefined, inner(child.props.children));\n  } else {\n    content = inner(children);\n  }\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Button\n        data-slot=\"effect-button\"\n        data-effect={effect}\n        asChild={asChild}\n        loading={loading}\n        className={cn(effectButtonVariants({ effect }), className)}\n        {...props}\n      >\n        {content}\n      </Button>\n    </>\n  );\n}\n\nexport { effectButtonVariants };\n"],"mappings":";;;;;;;AAsBA,MAAM,SAAS;;AAGf,SAAS,OAAO,IAAoB;CAClC,OAAO,QAAQ,OAAO,EAAE,EAAE;AAC5B;;AAGA,SAAS,WAAW,QAAgB,MAAc,cAA8B;CAC9E,MAAM,OAAO,yCAAyC,OAAO;CAC7D,MAAM,QAAQ,6BAA6B,KAAK;CAChD,OACE,wBAAwB,KAAK,QAAQ,MAAM,GAAG,aAAa,IACxD,KAAK,gBAAgB,MAAM,GAAG,aAAa;AAElD;AAEA,MAAM,SAAS;aACF,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;EAClB,WAAW,SAAS,QAAQ,aAAa,OAAO,SAAS,OAAO,GAAG,EAAE,aAAa,EAAE;EACpF,WAAW,SAAS,QAAQ,aAAa,OAAO,SAAS,OAAO,GAAG,EAAE,aAAa,EAAE;EACpF,WAAW,SAAS,SAAS,aAAa,OAAO,SAAS,OAAO,IAAI,EAAE,sBAAsB,EAAE;EAC/F,WAAW,eAAe,QAAQ,aAAa,OAAO,QAAQ,OAAO,GAAG,EAAE,UAAU,EAAE;;AAGxF,MAAa,sBAAsB;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAOA,MAAM,uBAAuB,IAAI,yBAAyB;CACxD,UAAU,EACR,QAAQ;EAEN,eAAe;EACf,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,eAAe;EACf,eAAe;EACf,gBAAgB;CAClB,EACF;CACA,iBAAiB,EAAE,QAAQ,cAAc;AAC3C,CAAC;;AAGD,MAAM,OAAyC;CAC7C,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,aACE;CACF,MAAM;AACR;AAEA,MAAM,SAAS;AACf,MAAM,OAAO;;AAGb,MAAM,OAA2C;CAC/C,eAAe,GACb,yFACA,QACA,sKACA,4MACF;CACA,OAAO,GACL,qDACA,MACA,yFACF;CACA,QAAQ,GACN,uBACA,QACA,qEACF;CACA,OAAO,GAAG,qBAAqB,IAAI;CACnC,OAAO;CACP,eAAe,GACb,uBACA,QACA,mEACF;CACA,eAAe,GACb,sBACA,QACA,mEACF;CACA,gBAAgB;AAClB;AAEA,MAAM,WAAW,GACf,wIACA,QACA,mKACA,yMACF;AAEA,MAAM,SAAS,GACb,gCACA,QACA,mFACF;AAOA,MAAM,cAAc,GAAG,+DAA+D,MAAM;AAC5F,MAAM,UAAU;CACd;EACE,MAAM;EACN,WACE;CACJ;CACA;EACE,MAAM;EACN,WACE;CACJ;CACA;EACE,MAAM;EACN,WACE;CACJ;CACA;EACE,MAAM;EACN,WACE;CACJ;AACF;;AAiBA,SAAgB,aAAa,EAC3B,SAAS,eACT,MACA,cACA,OAAO,WACP,UAAU,OACV,UAAU,OACV,WACA,UACA,GAAG,SACiB;CAEpB,MAAM,QAAQ,WAAW,WAAW,WAAW,UAAU,KAAK,QAAQ;CACtE,MAAM,aAAa,WAAW,UAAU,KAAK,QAAQ;CAErD,SAAS,MAAM,OAA6B;EAC1C,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;EACvF,OACE,qBAAA,UAAA,EAAA,UAAA;GACG,QAAQ,CAAC,UACR,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,wBAAwB,KAAK,SAAS,KAAK;IAExD,UAAA,WAAW,gBACV,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAW,CAAA,IAE3D;GAEE,CAAA,IACJ;GACH,WACC,WAAW,gBACT,qBAAC,QAAD;IACE,aAAU;IACV,WAAU;IAFZ,UAAA,CAIE,oBAAC,QAAD;KAAM,WAAW;KAAS,UAAA;IAAY,CAAA,GACtC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAW,GAAG,6BAA6B,MAAM;KACvE,UAAA;IACG,CAAA,CACF;GAEN,CAAA,IAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GAAG,qBAAqB,MAAM,UAAU;IAElD,UAAA;GACG,CAAA,IAEN;GACH,WAAW,iBAAiB,eAC3B,oBAAC,QAAD;IAAM,aAAU;IAA8B,eAAY;IAAO,WAAW;IAC1E,UAAA,oBAAC,QAAD;KAAM,WAAW,GAAG,gCAAgC,kBAAkB;KACnE,UAAA;IACG,CAAA;GACF,CAAA,IACJ;GACH,WAAW,UACV,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAU;GACX,CAAA,IACC;GACH,WAAW,gBACV,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAU;GACX,CAAA,IACC;GACH,WAAW,iBACR,QAAQ,KAAK,WACX,oBAAC,QAAD;IAEE,aAAU;IACV,eAAa,OAAO;IACpB,eAAY;IACZ,WAAW,GACT,kDACA,oBACA,aACA,OAAO,SACT;GACD,GAVM,OAAO,IAUb,CACF,IACD;EACJ,EAAA,CAAA;CAEN;CAIA,IAAI;CACJ,IAAI,WAAW,eAAyC,QAAQ,GAAG;EACjE,MAAM,QAAQ;EACd,UAAU,aAAa,OAAO,KAAA,GAAW,MAAM,MAAM,MAAM,QAAQ,CAAC;CACtE,OACE,UAAU,MAAM,QAAQ;CAG1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,oBAAC,QAAD;EACE,aAAU;EACV,eAAa;EACJ;EACA;EACT,WAAW,GAAG,qBAAqB,EAAE,OAAO,CAAC,GAAG,SAAS;EACzD,GAAI;EAEH,UAAA;CACK,CAAA,CACR,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+import { EffectButton, EffectButtonEffect, EffectButtonProps, EffectButtonTone, effectButtonEffects, effectButtonVariants } from "./effect-button.js";
+export { EffectButton, type EffectButtonEffect, type EffectButtonProps, type EffectButtonTone, effectButtonEffects, effectButtonVariants };

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

@@ -0,0 +1,2 @@
+import { EffectButton, effectButtonEffects, effectButtonVariants } from "./effect-button.js";
+export { EffectButton, effectButtonEffects, effectButtonVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/effect-button/meta.ts
+const meta = defineMeta({
+	name: "effect-button",
+	title: "Effect Button",
+	description: "A Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["effect-button.tsx"],
+	a11y: "Every effect plays on keyboard focus-visible as well as hover. Icons and decorative layers are aria-hidden, and text-reveal's duplicate label is hidden so the name is read once. Colour (tone) never carries meaning on its own: the label does. Effects stop under reduced motion. Inherits Button's loading and disabled behaviour."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/effect-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"effect-button\",\n  title: \"Effect Button\",\n  description:\n    \"A Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"effect-button.tsx\"],\n  a11y:\n    \"Every effect plays on keyboard focus-visible as well as hover. Icons and decorative \" +\n    \"layers are aria-hidden, and text-reveal's duplicate label is hidden so the name is read \" +\n    \"once. Colour (tone) never carries meaning on its own: the label does. Effects stop under \" +\n    \"reduced motion. Inherits Button's loading and disabled behaviour.\",\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,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}

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

@@ -0,0 +1,25 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/escape-button/escape-button.d.ts
+declare const escapeButtonVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface EscapeButtonProps extends Omit<ButtonProps, "asChild" | "variant">, VariantProps<typeof escapeButtonVariants> {
+  /** Escapes before it gives up and stays put. */
+  patience?: number;
+  /** How close, in pixels, the pointer gets before it flees. */
+  radius?: number;
+  /** Flee strength, 0–100. 0 turns the game off. */
+  skittishness?: number;
+  /** The label once it has given up. */
+  caughtLabel?: ReactNode;
+  /** Milliseconds the pressed state shows before the game resets. */
+  resetAfter?: number;
+}
+/** A button that dodges an approaching mouse — until it gives up. */
+declare function EscapeButton({ className, stroke, patience, radius, skittishness, caughtLabel, resetAfter, disabled, children, onClick, onFocus, onBlur, ref, ...props }: EscapeButtonProps): import("react").JSX.Element;
+//#endregion
+export { EscapeButton, EscapeButtonProps, escapeButtonVariants };
+//# sourceMappingURL=escape-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"escape-button.d.ts","names":[],"sources":["../../../src/components/escape-button/escape-button.tsx"],"mappings":";;;;;cAkCM,uBAAoB;;6CAqBzB;UAgBgB,0BACP,KAAK,qCAAqC,oBAAoB;;EAEtE;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;;iBAIc,eACd,WACA,QACA,UACA,QACA,cACA,aACA,YACA,UACA,UACA,SACA,SACA,QACA,QACG,SACF,oCAAiB,IAAA"}

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

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/escape-button/escape-button.tsx
+const escapeButtonVariants = cva(cn("h-14 rounded-full px-7.5 text-xl font-normal tracking-[-0.012em]", "bg-foreground/6 text-foreground/72 hover:bg-foreground/6 hover:text-foreground/90", "data-[caught]:text-foreground", "data-[done]:bg-foreground data-[done]:text-background data-[done]:hover:bg-foreground data-[done]:hover:text-background", "transition-[transform,background-color,color,scale]", "duration-[var(--duration-slower),var(--duration-fast),var(--duration-fast),var(--duration-fast)]", "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint)]", "data-[escape=flee]:duration-[var(--duration-fast)] data-[escape=flee]:ease-[var(--ease-out-quint)]"), {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: false }
+});
+/** Pointers the game never runs for. */
+function dodgeAllowed(pointerType) {
+	if (pointerType === "touch") return false;
+	if (typeof window.matchMedia !== "function") return true;
+	return !(window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(pointer: coarse)").matches);
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/** A button that dodges an approaching mouse — until it gives up. */
+function EscapeButton({ className, stroke, patience = 4, radius = 120, skittishness = 55, caughtLabel = "Fine.", resetAfter = 600, disabled, children = "Touch me", onClick, onFocus, onBlur, ref, ...props }) {
+	const buttonRef = useRef(null);
+	const offset = useRef({
+		x: 0,
+		y: 0
+	});
+	const near = useRef(false);
+	const escapes = useRef(0);
+	const focused = useRef(false);
+	const [caught, setCaught] = useState(false);
+	const [done, setDone] = useState(false);
+	const inert = Boolean(disabled) || caught || done || skittishness <= 0;
+	const place = useCallback((x, y, fleeing) => {
+		const element = buttonRef.current;
+		if (!element) return;
+		offset.current = {
+			x,
+			y
+		};
+		element.dataset.escape = fleeing ? "flee" : "rest";
+		element.style.transform = x === 0 && y === 0 ? "" : `translate(${String(x)}px, ${String(y)}px)`;
+	}, []);
+	const goHome = useCallback(() => {
+		if (offset.current.x !== 0 || offset.current.y !== 0) place(0, 0, false);
+	}, [place]);
+	useEffect(() => {
+		if (inert) {
+			near.current = false;
+			goHome();
+			return;
+		}
+		function handleMove(event) {
+			const element = buttonRef.current;
+			if (!element || focused.current || !dodgeAllowed(event.pointerType)) return;
+			const rect = element.getBoundingClientRect();
+			const restLeft = rect.left - offset.current.x;
+			const restTop = rect.top - offset.current.y;
+			const dx = restLeft + rect.width / 2 - event.clientX;
+			const dy = restTop + rect.height / 2 - event.clientY;
+			const distance = Math.hypot(dx, dy);
+			if (distance >= radius) {
+				if (near.current) {
+					near.current = false;
+					escapes.current += 1;
+					if (escapes.current >= patience) setCaught(true);
+				}
+				goHome();
+				return;
+			}
+			near.current = true;
+			const push = (1 - distance / radius) ** 2.5 * radius * skittishness * .012;
+			const unit = distance === 0 ? {
+				x: 0,
+				y: -1
+			} : {
+				x: dx / distance,
+				y: dy / distance
+			};
+			let x = unit.x * push;
+			let y = unit.y * push;
+			const field = element.parentElement?.getBoundingClientRect();
+			if (field && field.width > 0 && field.height > 0) {
+				x = clamp(x, field.left - restLeft, field.right - (restLeft + rect.width));
+				y = clamp(y, field.top - restTop, field.bottom - (restTop + rect.height));
+			}
+			place(x, y, true);
+		}
+		window.addEventListener("pointermove", handleMove, { passive: true });
+		return () => {
+			window.removeEventListener("pointermove", handleMove);
+		};
+	}, [
+		inert,
+		radius,
+		patience,
+		skittishness,
+		place,
+		goHome
+	]);
+	useEffect(() => {
+		if (!done) return;
+		const timer = setTimeout(() => {
+			escapes.current = 0;
+			setDone(false);
+			setCaught(false);
+		}, resetAfter);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [done, resetAfter]);
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		setDone(true);
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		focused.current = true;
+		goHome();
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		focused.current = false;
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		ref: (node) => {
+			buttonRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		variant: "ghost",
+		"data-slot": "escape-button",
+		"data-escape": "rest",
+		"data-caught": caught || void 0,
+		"data-done": done || void 0,
+		disabled,
+		className: cn(escapeButtonVariants({ stroke }), className),
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		...props,
+		children: caught ? caughtLabel : children
+	});
+}
+//#endregion
+export { EscapeButton, escapeButtonVariants };
+
+//# sourceMappingURL=escape-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"escape-button.js","names":[],"sources":["../../../src/components/escape-button/escape-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Escape button (MIT, © 2026 Lorenzo Cabra). 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 ReactNode,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A novelty button that scoots away from an approaching mouse, and gives up\n * after a few escapes.\n *\n * The game is for a mouse or pen only, and it is never in the way:\n *\n * - It never moves for touch, a coarse pointer, reduced motion, or while it has\n *   focus — so a keyboard user can always Tab to it and press it at once.\n * - It gives up after `patience` escapes: it returns home, reads \"Fine.\" and\n *   stays put until it has been pressed.\n * - A press always goes through, in every state; the dodging is visual only.\n *\n * Like MagneticButton, the offset is written to the element's style from\n * pointermove (no re-render per move) and CSS transitions do the easing: a\n * quick ease-out while fleeing, a soft overshoot drifting home.\n */\n\nconst escapeButtonVariants = cva(\n  cn(\n    \"h-14 rounded-full px-7.5 text-xl font-normal tracking-[-0.012em]\",\n    \"bg-foreground/6 text-foreground/72 hover:bg-foreground/6 hover:text-foreground/90\",\n    \"data-[caught]:text-foreground\",\n    \"data-[done]:bg-foreground data-[done]:text-background data-[done]:hover:bg-foreground data-[done]:hover:text-background\",\n    \"transition-[transform,background-color,color,scale]\",\n    \"duration-[var(--duration-slower),var(--duration-fast),var(--duration-fast),var(--duration-fast)]\",\n    \"ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint)]\",\n    \"data-[escape=flee]:duration-[var(--duration-fast)] data-[escape=flee]:ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: false },\n  },\n);\n\n/** Pointers the game never runs for. */\nfunction dodgeAllowed(pointerType: string): boolean {\n  if (pointerType === \"touch\") return false;\n  if (typeof window.matchMedia !== \"function\") return true;\n  return !(\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n    window.matchMedia(\"(pointer: coarse)\").matches\n  );\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport interface EscapeButtonProps\n  extends Omit<ButtonProps, \"asChild\" | \"variant\">, VariantProps<typeof escapeButtonVariants> {\n  /** Escapes before it gives up and stays put. */\n  patience?: number;\n  /** How close, in pixels, the pointer gets before it flees. */\n  radius?: number;\n  /** Flee strength, 0–100. 0 turns the game off. */\n  skittishness?: number;\n  /** The label once it has given up. */\n  caughtLabel?: ReactNode;\n  /** Milliseconds the pressed state shows before the game resets. */\n  resetAfter?: number;\n}\n\n/** A button that dodges an approaching mouse — until it gives up. */\nexport function EscapeButton({\n  className,\n  stroke,\n  patience = 4,\n  radius = 120,\n  skittishness = 55,\n  caughtLabel = \"Fine.\",\n  resetAfter = 600,\n  disabled,\n  children = \"Touch me\",\n  onClick,\n  onFocus,\n  onBlur,\n  ref,\n  ...props\n}: EscapeButtonProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const offset = useRef({ x: 0, y: 0 });\n  const near = useRef(false);\n  const escapes = useRef(0);\n  const focused = useRef(false);\n  const [caught, setCaught] = useState(false);\n  const [done, setDone] = useState(false);\n  const inert = Boolean(disabled) || caught || done || skittishness <= 0;\n\n  const place = useCallback((x: number, y: number, fleeing: boolean) => {\n    const element = buttonRef.current;\n    if (!element) return;\n    offset.current = { x, y };\n    element.dataset.escape = fleeing ? \"flee\" : \"rest\";\n    element.style.transform =\n      x === 0 && y === 0 ? \"\" : `translate(${String(x)}px, ${String(y)}px)`;\n  }, []);\n\n  const goHome = useCallback(() => {\n    if (offset.current.x !== 0 || offset.current.y !== 0) place(0, 0, false);\n  }, [place]);\n\n  useEffect(() => {\n    if (inert) {\n      near.current = false;\n      goHome();\n      return;\n    }\n\n    function handleMove(event: PointerEvent) {\n      const element = buttonRef.current;\n      if (!element || focused.current || !dodgeAllowed(event.pointerType)) return;\n\n      // Measure where it sits at rest, not where it has fled to, or it would\n      // chase its own displacement.\n      const rect = element.getBoundingClientRect();\n      const restLeft = rect.left - offset.current.x;\n      const restTop = rect.top - offset.current.y;\n      const dx = restLeft + rect.width / 2 - event.clientX;\n      const dy = restTop + rect.height / 2 - event.clientY;\n      const distance = Math.hypot(dx, dy);\n\n      if (distance >= radius) {\n        if (near.current) {\n          near.current = false;\n          escapes.current += 1;\n          if (escapes.current >= patience) setCaught(true);\n        }\n        goHome();\n        return;\n      }\n\n      near.current = true;\n      // The push grows steeply as the pointer closes in: ~14px at half the\n      // radius, ~37px at a quarter, at the default strength.\n      const closeness = 1 - distance / radius;\n      const push = closeness ** 2.5 * radius * skittishness * 0.012;\n      const unit = distance === 0 ? { x: 0, y: -1 } : { x: dx / distance, y: dy / distance };\n      let x = unit.x * push;\n      let y = unit.y * push;\n\n      const field = element.parentElement?.getBoundingClientRect();\n      if (field && field.width > 0 && field.height > 0) {\n        x = clamp(x, field.left - restLeft, field.right - (restLeft + rect.width));\n        y = clamp(y, field.top - restTop, field.bottom - (restTop + rect.height));\n      }\n      place(x, y, true);\n    }\n\n    window.addEventListener(\"pointermove\", handleMove, { passive: true });\n    return () => {\n      window.removeEventListener(\"pointermove\", handleMove);\n    };\n  }, [inert, radius, patience, skittishness, place, goHome]);\n\n  useEffect(() => {\n    if (!done) return;\n    const timer = setTimeout(() => {\n      escapes.current = 0;\n      setDone(false);\n      setCaught(false);\n    }, resetAfter);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [done, resetAfter]);\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    setDone(true);\n  }\n\n  function handleFocus(event: FocusEvent<HTMLButtonElement>) {\n    onFocus?.(event);\n    // Focus pins it in place: whatever is focused must stay where it is.\n    focused.current = true;\n    goHome();\n  }\n\n  function handleBlur(event: FocusEvent<HTMLButtonElement>) {\n    onBlur?.(event);\n    focused.current = false;\n  }\n\n  return (\n    <Button\n      ref={(node) => {\n        buttonRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      variant=\"ghost\"\n      data-slot=\"escape-button\"\n      data-escape=\"rest\"\n      data-caught={caught || undefined}\n      data-done={done || undefined}\n      disabled={disabled}\n      className={cn(escapeButtonVariants({ stroke }), className)}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      {...props}\n    >\n      {caught ? caughtLabel : children}\n    </Button>\n  );\n}\n\nexport { escapeButtonVariants };\n"],"mappings":";;;;;;;AAkCA,MAAM,uBAAuB,IAC3B,GACE,oEACA,qFACA,iCACA,2HACA,uDACA,oGACA,kGACA,oGACF,GACA;CACE,UAAU;;AAER,QAAQ;EACN,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,QAAQ,MAAM;AACnC,CACF;;AAGA,SAAS,aAAa,aAA8B;CAClD,IAAI,gBAAgB,SAAS,OAAO;CACpC,IAAI,OAAO,OAAO,eAAe,YAAY,OAAO;CACpD,OAAO,EACL,OAAO,WAAW,kCAAkC,CAAC,CAAC,WACtD,OAAO,WAAW,mBAAmB,CAAC,CAAC;AAE3C;AAEA,SAAS,MAAM,OAAe,KAAa,KAAa;CACtD,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;;AAiBA,SAAgB,aAAa,EAC3B,WACA,QACA,WAAW,GACX,SAAS,KACT,eAAe,IACf,cAAc,SACd,aAAa,KACb,UACA,WAAW,YACX,SACA,SACA,QACA,KACA,GAAG,SACiB;CACpB,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,SAAS,OAAO;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CACpC,MAAM,OAAO,OAAO,KAAK;CACzB,MAAM,UAAU,OAAO,CAAC;CACxB,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,QAAQ,QAAQ,KAAK,UAAU,QAAQ,gBAAgB;CAErE,MAAM,QAAQ,aAAa,GAAW,GAAW,YAAqB;EACpE,MAAM,UAAU,UAAU;EAC1B,IAAI,CAAC,SAAS;EACd,OAAO,UAAU;GAAE;GAAG;EAAE;EACxB,QAAQ,QAAQ,SAAS,UAAU,SAAS;EAC5C,QAAQ,MAAM,YACZ,MAAM,KAAK,MAAM,IAAI,KAAK,aAAa,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE;CACrE,GAAG,CAAC,CAAC;CAEL,MAAM,SAAS,kBAAkB;EAC/B,IAAI,OAAO,QAAQ,MAAM,KAAK,OAAO,QAAQ,MAAM,GAAG,MAAM,GAAG,GAAG,KAAK;CACzE,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,IAAI,OAAO;GACT,KAAK,UAAU;GACf,OAAO;GACP;EACF;EAEA,SAAS,WAAW,OAAqB;GACvC,MAAM,UAAU,UAAU;GAC1B,IAAI,CAAC,WAAW,QAAQ,WAAW,CAAC,aAAa,MAAM,WAAW,GAAG;GAIrE,MAAM,OAAO,QAAQ,sBAAsB;GAC3C,MAAM,WAAW,KAAK,OAAO,OAAO,QAAQ;GAC5C,MAAM,UAAU,KAAK,MAAM,OAAO,QAAQ;GAC1C,MAAM,KAAK,WAAW,KAAK,QAAQ,IAAI,MAAM;GAC7C,MAAM,KAAK,UAAU,KAAK,SAAS,IAAI,MAAM;GAC7C,MAAM,WAAW,KAAK,MAAM,IAAI,EAAE;GAElC,IAAI,YAAY,QAAQ;IACtB,IAAI,KAAK,SAAS;KAChB,KAAK,UAAU;KACf,QAAQ,WAAW;KACnB,IAAI,QAAQ,WAAW,UAAU,UAAU,IAAI;IACjD;IACA,OAAO;IACP;GACF;GAEA,KAAK,UAAU;GAIf,MAAM,QADY,IAAI,WAAW,WACP,MAAM,SAAS,eAAe;GACxD,MAAM,OAAO,aAAa,IAAI;IAAE,GAAG;IAAG,GAAG;GAAG,IAAI;IAAE,GAAG,KAAK;IAAU,GAAG,KAAK;GAAS;GACrF,IAAI,IAAI,KAAK,IAAI;GACjB,IAAI,IAAI,KAAK,IAAI;GAEjB,MAAM,QAAQ,QAAQ,eAAe,sBAAsB;GAC3D,IAAI,SAAS,MAAM,QAAQ,KAAK,MAAM,SAAS,GAAG;IAChD,IAAI,MAAM,GAAG,MAAM,OAAO,UAAU,MAAM,SAAS,WAAW,KAAK,MAAM;IACzE,IAAI,MAAM,GAAG,MAAM,MAAM,SAAS,MAAM,UAAU,UAAU,KAAK,OAAO;GAC1E;GACA,MAAM,GAAG,GAAG,IAAI;EAClB;EAEA,OAAO,iBAAiB,eAAe,YAAY,EAAE,SAAS,KAAK,CAAC;EACpE,aAAa;GACX,OAAO,oBAAoB,eAAe,UAAU;EACtD;CACF,GAAG;EAAC;EAAO;EAAQ;EAAU;EAAc;EAAO;CAAM,CAAC;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM;EACX,MAAM,QAAQ,iBAAiB;GAC7B,QAAQ,UAAU;GAClB,QAAQ,KAAK;GACb,UAAU,KAAK;EACjB,GAAG,UAAU;EACb,aAAa;GACX,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,MAAM,UAAU,CAAC;CAErB,SAAS,YAAY,OAAsC;EACzD,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,QAAQ,IAAI;CACd;CAEA,SAAS,YAAY,OAAsC;EACzD,UAAU,KAAK;EAEf,QAAQ,UAAU;EAClB,OAAO;CACT;CAEA,SAAS,WAAW,OAAsC;EACxD,SAAS,KAAK;EACd,QAAQ,UAAU;CACpB;CAEA,OACE,oBAAC,QAAD;EACE,MAAM,SAAS;GACb,UAAU,UAAU;GACpB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;QAClC,IAAI,KAAK,IAAI,UAAU;EAC9B;EACA,SAAQ;EACR,aAAU;EACV,eAAY;EACZ,eAAa,UAAU,KAAA;EACvB,aAAW,QAAQ,KAAA;EACT;EACV,WAAW,GAAG,qBAAqB,EAAE,OAAO,CAAC,GAAG,SAAS;EACzD,SAAS;EACT,SAAS;EACT,QAAQ;EACR,GAAI;EAEH,UAAA,SAAS,cAAc;CAClB,CAAA;AAEZ"}

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

@@ -0,0 +1,2 @@
+import { EscapeButton, EscapeButtonProps, escapeButtonVariants } from "./escape-button.js";
+export { EscapeButton, type EscapeButtonProps, escapeButtonVariants };

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

@@ -0,0 +1,2 @@
+import { EscapeButton, escapeButtonVariants } from "./escape-button.js";
+export { EscapeButton, escapeButtonVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/escape-button/meta.ts
+const meta = defineMeta({
+	name: "escape-button",
+	title: "Escape Button",
+	description: "A novelty button that scoots away from an approaching mouse, then gives up after a few escapes.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["escape-button.tsx"],
+	a11y: "The dodging is a mouse-and-pen game only: it never moves for touch, a coarse pointer, reduced motion, or while the button has focus, so keyboard users can Tab to it and press it at once. It gives up after `patience` escapes (4 by default) and stays put, and a press always goes through in every state — the movement is visual, never a lock. It is a real button with its visible label as its name."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/escape-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"escape-button\",\n  title: \"Escape Button\",\n  description:\n    \"A novelty button that scoots away from an approaching mouse, then gives up after a few escapes.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"escape-button.tsx\"],\n  a11y:\n    \"The dodging is a mouse-and-pen game only: it never moves for touch, a coarse pointer, reduced motion, \" +\n    \"or while the button has focus, so keyboard users can Tab to it and press it at once. It gives up after \" +\n    \"`patience` escapes (4 by default) and stays put, and a press always goes through in every state — the \" +\n    \"movement is visual, never a lock. It is a real button with its visible label as its name.\",\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,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}

package/dist/components/expandable-cards/expandable-cards.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/expandable-cards/expandable-cards.d.ts
+interface ExpandableCardAuthor {
+  name: string;
+  /** A line under the name — a job title, say. */
+  subtitle?: string;
+  /** Avatar URL. */
+  image?: string;
+}
+interface ExpandableCardItem {
+  id: string;
+  title: string;
+  /** Cover image URL. */
+  image: string;
+  /** Alt text. Empty by default, since the title names the card. */
+  imageAlt?: string;
+  /** The detail text. */
+  content: ReactNode;
+  author?: ExpandableCardAuthor;
+  /** Controls shown in the detail view — a play or read-more button. */
+  actions?: ReactNode;
+}
+interface ExpandableCardsProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue"> {
+  items: ExpandableCardItem[];
+  /**
+   * `inline` widens the chosen card in its row (the SmoothUI original);
+   * `dialog` grows it out of a grid into a modal detail view.
+   */
+  presentation?: "inline" | "dialog";
+  /** The open card's id, or null (controlled). */
+  value?: string | null;
+  /** The open card's id at first (uncontrolled). */
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Classes for every card. */
+  cardClassName?: string;
+}
+/** Cards that expand into a detail view, inline or as a dialog. */
+declare function ExpandableCards({ className, items, presentation, value, defaultValue, onValueChange, cardClassName, ...props }: ExpandableCardsProps): import("react").JSX.Element;
+//#endregion
+export { ExpandableCardAuthor, ExpandableCardItem, ExpandableCards, ExpandableCardsProps };
+//# sourceMappingURL=expandable-cards.d.ts.map

package/dist/components/expandable-cards/expandable-cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-cards.d.ts","names":[],"sources":["../../../src/components/expandable-cards/expandable-cards.tsx"],"mappings":";;UAqCiB;EACf;;EAEA;;EAEA;;UAGe;EACf;EACA;;EAEA;;EAEA;;EAEA,SAAS;EACT,SAAS;;EAET,UAAU;;UAGK,6BAA6B,KAC5C;EAGA,OAAO;;;;;EAKP;;EAEA;;EAEA;EACA,iBAAiB;;EAEjB;;;iBAiCc,kBACd,WACA,OACA,cACA,OACA,cACA,eACA,kBACG,SACF,uCAAoB,IAAA"}