@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -1,7 +1,8 @@
 "use client";
+import { mirrorForDirection } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { DropdownMenu } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dropdown-menu/dropdown-menu.tsx
 /**
 * A menu of actions revealed from a trigger.
@@ -9,6 +10,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Actions, not navigation and not form state: a menu item does something. For a
 * list of links use a nav, and for a value the user picks from use Select
 * (Phase 3) — the roles differ and assistive technology treats them differently.
+*
+* Opens with the same motion as ContextMenu, so the two menus feel like one
+* system: the surface pops from its anchor with a slight overshoot and the items
+* drop in with a 20ms stagger. Both are decoration and stop under reduced
+* motion; closing keeps the shared quick float-out.
 */
 const DropdownMenu$1 = DropdownMenu.Root;
 const DropdownMenuTrigger = DropdownMenu.Trigger;
@@ -16,24 +22,39 @@ const DropdownMenuGroup = DropdownMenu.Group;
 const DropdownMenuPortal = DropdownMenu.Portal;
 const DropdownMenuSub = DropdownMenu.Sub;
 const DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
-/** Shared surface styling for the root menu and every submenu. */
-const menuSurface = cn("z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border", "bg-popover p-1 text-popover-foreground shadow-lg outline-none", "max-h-[var(--radix-dropdown-menu-content-available-height)]", "origin-[var(--radix-dropdown-menu-content-transform-origin)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in");
+const PREFIX = "dowel-dropdown-menu";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}
+${Array.from({ length: 11 }, (_, i) => `[data-slot$=dropdown-menu-content]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`).join("\n")}
+[data-slot$=dropdown-menu-content]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}
+`;
+/** Shared surface styling for the root menu and every submenu. The keyframe
+* names are spelled out because Tailwind reads class names from the source. */
+const menuSurface = cn("z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border", "bg-popover p-1 text-popover-foreground shadow-lg outline-none", "max-h-[var(--radix-dropdown-menu-content-available-height)]", "origin-[var(--radix-dropdown-menu-content-transform-origin)]", "data-[state=closed]:animate-float-out", "data-[state=open]:animate-[dowel-dropdown-menu-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", "data-[state=open]:[&>*]:animate-[dowel-dropdown-menu-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]");
+function Styles() {
+	return /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	});
+}
 /** Shared item styling. Highlight follows data-highlighted, which the primitive
 * drives from both pointer and keyboard, so the two never disagree. */
 const menuItem = cn("relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4");
 function DropdownMenuContent({ className, sideOffset = 6, ...props }) {
-	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
 		className: cn(menuSurface, className),
 		...props
-	}) });
+	}) })] });
 }
 function DropdownMenuItem({ className, variant = "default", inset, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
 		"data-slot": "dropdown-menu-item",
 		"data-variant": variant,
-		className: cn(menuItem, inset && "pl-8", variant === "destructive" && "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive", className),
+		className: cn(menuItem, inset && "ps-8", variant === "destructive" && "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive", className),
 		...props
 	});
 }
@@ -41,7 +62,7 @@ function DropdownMenuItem({ className, variant = "default", inset, ...props }) {
 * aria-checked, so announcing it twice would be noise. */
 function ItemIndicator({ radio = false }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: "pointer-events-none absolute left-2 grid size-4 place-items-center",
+		className: "pointer-events-none absolute start-2 grid size-4 place-items-center",
 		children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: radio ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" }) : /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -60,7 +81,7 @@ function ItemIndicator({ radio = false }) {
 function DropdownMenuCheckboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
-		className: cn(menuItem, "pl-8", className),
+		className: cn(menuItem, "ps-8", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(ItemIndicator, {}), children]
 	});
@@ -68,7 +89,7 @@ function DropdownMenuCheckboxItem({ className, children, ...props }) {
 function DropdownMenuRadioItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
-		className: cn(menuItem, "pl-8", className),
+		className: cn(menuItem, "ps-8", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(ItemIndicator, { radio: true }), children]
 	});
@@ -76,7 +97,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
 function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
 		"data-slot": "dropdown-menu-label",
-		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", inset && "pl-8", className),
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", inset && "ps-8", className),
 		...props
 	});
 }
@@ -93,20 +114,20 @@ function DropdownMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "dropdown-menu-shortcut",
 		"aria-hidden": "true",
-		className: cn("ml-auto text-2xs tracking-wide text-muted-foreground", className),
+		className: cn("ms-auto text-2xs tracking-wide text-muted-foreground", className),
 		...props
 	});
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
-		className: cn(menuItem, "data-[state=open]:bg-accent", inset && "pl-8", className),
+		className: cn(menuItem, "data-[state=open]:bg-accent", inset && "ps-8", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
 			"aria-hidden": "true",
-			className: "ml-auto size-3.5",
+			className: cn("ms-auto size-3.5", mirrorForDirection),
 			children: /* @__PURE__ */ jsx("path", {
 				d: "m9 18 6-6-6-6",
 				stroke: "currentColor",

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A menu of actions revealed from a trigger.\n *\n * Actions, not navigation and not form state: a menu item does something. For a\n * list of links use a nav, and for a value the user picks from use Select\n * (Phase 3) — the roles differ and assistive technology treats them differently.\n */\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/** Shared surface styling for the root menu and every submenu. */\nconst menuSurface = cn(\n  \"z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border\",\n  \"bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\n  \"max-h-[var(--radix-dropdown-menu-content-available-height)]\",\n  \"origin-[var(--radix-dropdown-menu-content-transform-origin)]\",\n  \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n);\n\n/** Shared item styling. Highlight follows data-highlighted, which the primitive\n * drives from both pointer and keyboard, so the two never disagree. */\nconst menuItem = cn(\n  \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none\",\n  \"transition-colors duration-[var(--duration-instant)]\",\n  \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Content\n>;\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(menuSurface, className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nexport interface DropdownMenuItemProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Item\n> {\n  /** Styles the item as destructive. Pair with a label that says what is destroyed. */\n  variant?: \"default\" | \"destructive\";\n  /** Indents the item to align with items that have a leading indicator. */\n  inset?: boolean;\n}\n\nexport function DropdownMenuItem({\n  className,\n  variant = \"default\",\n  inset,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-variant={variant}\n      className={cn(\n        menuItem,\n        inset && \"pl-8\",\n        variant === \"destructive\" &&\n          \"text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Tick shown by checkbox and radio items. Decorative: the state is already in\n * aria-checked, so announcing it twice would be noise. */\nfunction ItemIndicator({ radio = false }: { radio?: boolean }) {\n  return (\n    <span className=\"pointer-events-none absolute left-2 grid size-4 place-items-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        {radio ? (\n          <span className=\"size-2 rounded-full bg-current\" />\n        ) : (\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        )}\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(menuItem, \"pl-8\", className)}\n      {...props}\n    >\n      <ItemIndicator />\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(menuItem, \"pl-8\", className)}\n      {...props}\n    >\n      <ItemIndicator radio />\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nexport interface DropdownMenuLabelProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Label\n> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it\n * for real at the application level. */\nexport function DropdownMenuShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ml-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuSubTriggerProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.SubTrigger\n> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      className={cn(menuItem, \"data-[state=open]:bg-accent\", inset && \"pl-8\", className)}\n      {...props}\n    >\n      {children}\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"ml-auto size-3.5\">\n        <path\n          d=\"m9 18 6-6-6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nexport function DropdownMenuSubContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        data-slot=\"dropdown-menu-sub-content\"\n        className={cn(menuSurface, className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI DropdownMenu (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A menu of actions revealed from a trigger.\n *\n * Actions, not navigation and not form state: a menu item does something. For a\n * list of links use a nav, and for a value the user picks from use Select\n * (Phase 3) — the roles differ and assistive technology treats them differently.\n *\n * Opens with the same motion as ContextMenu, so the two menus feel like one\n * system: the surface pops from its anchor with a slight overshoot and the items\n * drop in with a 20ms stagger. Both are decoration and stop under reduced\n * motion; closing keeps the shared quick float-out.\n */\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst PREFIX = \"dowel-dropdown-menu\";\n\n/** Stagger delays for the first dozen entries; later ones arrive with the twelfth.\n * Identical to ContextMenu's, so the two menus open with the same rhythm. */\nconst STAGGER = Array.from(\n  { length: 11 },\n  (_, i) =>\n    `[data-slot$=dropdown-menu-content]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`,\n).join(\"\\n\");\n\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}\n@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}\n${STAGGER}\n[data-slot$=dropdown-menu-content]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}\n`;\n\n/** Shared surface styling for the root menu and every submenu. The keyframe\n * names are spelled out because Tailwind reads class names from the source. */\nconst menuSurface = cn(\n  \"z-[var(--z-popover)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border border-border\",\n  \"bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\n  \"max-h-[var(--radix-dropdown-menu-content-available-height)]\",\n  \"origin-[var(--radix-dropdown-menu-content-transform-origin)]\",\n  \"data-[state=closed]:animate-float-out\",\n  \"data-[state=open]:animate-[dowel-dropdown-menu-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n  \"data-[state=open]:[&>*]:animate-[dowel-dropdown-menu-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]\",\n);\n\nfunction Styles() {\n  return (\n    <style href={PREFIX} precedence=\"dowel\">\n      {STYLES}\n    </style>\n  );\n}\n\n/** Shared item styling. Highlight follows data-highlighted, which the primitive\n * drives from both pointer and keyboard, so the two never disagree. */\nconst menuItem = cn(\n  \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none\",\n  \"transition-colors duration-[var(--duration-instant)]\",\n  \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Content\n>;\n\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <>\n      <Styles />\n      <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-content\"\n          sideOffset={sideOffset}\n          className={cn(menuSurface, className)}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Portal>\n    </>\n  );\n}\n\nexport interface DropdownMenuItemProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Item\n> {\n  /** Styles the item as destructive. Pair with a label that says what is destroyed. */\n  variant?: \"default\" | \"destructive\";\n  /** Indents the item to align with items that have a leading indicator. */\n  inset?: boolean;\n}\n\nexport function DropdownMenuItem({\n  className,\n  variant = \"default\",\n  inset,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-variant={variant}\n      className={cn(\n        menuItem,\n        inset && \"ps-8\",\n        variant === \"destructive\" &&\n          \"text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Tick shown by checkbox and radio items. Decorative: the state is already in\n * aria-checked, so announcing it twice would be noise. */\nfunction ItemIndicator({ radio = false }: { radio?: boolean }) {\n  return (\n    <span className=\"pointer-events-none absolute start-2 grid size-4 place-items-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        {radio ? (\n          <span className=\"size-2 rounded-full bg-current\" />\n        ) : (\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        )}\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(menuItem, \"ps-8\", className)}\n      {...props}\n    >\n      <ItemIndicator />\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(menuItem, \"ps-8\", className)}\n      {...props}\n    >\n      <ItemIndicator radio />\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nexport interface DropdownMenuLabelProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.Label\n> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n        inset && \"ps-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it\n * for real at the application level. */\nexport function DropdownMenuShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ms-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuSubTriggerProps extends ComponentPropsWithRef<\n  typeof DropdownMenuPrimitive.SubTrigger\n> {\n  inset?: boolean;\n}\n\nexport function DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      className={cn(menuItem, \"data-[state=open]:bg-accent\", inset && \"ps-8\", className)}\n      {...props}\n    >\n      {children}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(\"ms-auto size-3.5\", mirrorForDirection)}\n      >\n        <path\n          d=\"m9 18 6-6-6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nexport function DropdownMenuSubContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        data-slot=\"dropdown-menu-sub-content\"\n        className={cn(menuSurface, className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n"],"mappings":"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"}

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

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