"use client";

import { RippleTapButton, type RippleTapButtonSize } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  rippleSeconds?: number;
  pressScale?: number;
  size?: RippleTapButtonSize;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Deploy build",
  accent = "#FF6A1F",
  rippleSeconds = 0.6,
  pressScale = 0.95,
  size = "md",
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <RippleTapButton accent={accent} rippleSeconds={rippleSeconds} pressScale={pressScale} size={size}>
        {label}
      </RippleTapButton>
      <RippleTapButton accent="#20242B" rippleSeconds={rippleSeconds} pressScale={pressScale} size={size} className="border border-white/15">
        Cancel
      </RippleTapButton>
    </div>
  );
}

1d:T1281, 1e:Tebc5,

<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from "vue";

const props = withDefaults(
  defineProps<{
    accent?: string;
    rippleSeconds?: number;
    pressScale?: number;
    size?: "sm" | "md" | "lg";
  }>(),
  { accent: "#FF6A1F", rippleSeconds: 0.6, pressScale: 0.95, size: "md" },
);

interface Wave {
  id: number;
  x: number;
  y: number;
  diameter: number;
}

const buttonEl = ref<HTMLButtonElement | null>(null);
const waves = ref<Wave[]>([]);
const pressed = ref(false);
const hovered = ref(false);
let nextId = 0;
const timers = new Set<number>();

/** Relative luminance of a #rrggbb color, used to pick a black or white label that stays readable. */
function luminance(hex: string): number {
  const clean = hex.replace("#", "");
  const channel = (start: number) => {
    const v = parseInt(clean.slice(start, start + 2), 16) / 255;
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4);
}

const foreground = computed(() => (luminance(props.accent) > 0.5 ? "#15130F" : "#FFFFFF"));

function reducedMotion(): boolean {
  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
}

function spawn(x: number, y: number) {
  const rect = buttonEl.value?.getBoundingClientRect();
  if (!rect) return;
  const reachX = Math.max(x, rect.width - x);
  const reachY = Math.max(y, rect.height - y);
  const diameter = Math.hypot(reachX, reachY) * 2;
  const id = nextId++;
  waves.value = [...waves.value, { id, x, y, diameter }];
  const life = reducedMotion() ? 160 : props.rippleSeconds * 1000;
  const timer = window.setTimeout(() => {
    waves.value = waves.value.filter((wave) => wave.id !== id);
    timers.delete(timer);
  }, life);
  timers.add(timer);
}

function onPointerDown(event: PointerEvent) {
  if (event.button !== 0) return;
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
  pressed.value = true;
  spawn(event.clientX - rect.left, event.clientY - rect.top);
}

function onKeyDown(event: KeyboardEvent) {
  if (event.repeat || (event.key !== "Enter" && event.key !== " ")) return;
  const rect = buttonEl.value?.getBoundingClientRect();
  pressed.value = true;
  if (rect) spawn(rect.width / 2, rect.height / 2);
}

function release() {
  pressed.value = false;
}

onBeforeUnmount(() => {
  timers.forEach((timer) => window.clearTimeout(timer));
});
</script>

<template>
  <button
    ref="buttonEl"
    type="button"
    class="rtb"
    :class="[`rtb--${size}`, { 'rtb--pressed': pressed, 'rtb--hovered': hovered }]"
    :style="{ background: accent, color: foreground, '--rtb-ring': foreground, '--rtb-press-scale': pressScale }"
    @pointerdown="onPointerDown"
    @pointerup="release"
    @pointerleave="release"
    @keydown="onKeyDown"
    @keyup="release"
    @mouseenter="hovered = true"
    @mouseleave="hovered = false"
  >
    <span class="rtb__label"><slot /></span>
    <span
      v-for="wave in waves"
      :key="wave.id"
      aria-hidden="true"
      class="rtb__wave"
      :style="{
        left: wave.x - wave.diameter / 2 + 'px',
        top: wave.y - wave.diameter / 2 + 'px',
        width: wave.diameter + 'px',
        height: wave.diameter + 'px',
        background: foreground,
        animationDuration: rippleSeconds + 's',
      }"
    />
  </button>
</template>

<style scoped>
.rtb {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  font: 500 0.875rem/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transform: scale(1);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rtb:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px var(--rtb-ring);
}
.rtb--hovered {
  transform: scale(1.025);
}
.rtb--pressed {
  transform: scale(var(--rtb-press-scale));
}
.rtb--sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
}
.rtb--md {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}
.rtb--lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
}
.rtb__label {
  position: relative;
  z-index: 1;
}
.rtb__wave {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  opacity: 0.32;
  animation: rtb-wave linear forwards;
}
@keyframes rtb-wave {
  from {
    opacity: 0.32;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rtb__wave {
    animation-duration: 160ms !important;
    transform: scale(1) !important;
  }
  .rtb--hovered,
  .rtb--pressed {
    transform: none;
  }
}
</style>

Nearby