"use client";

import { PulseHaloButton, type PulseHaloVariant } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  variant?: PulseHaloVariant;
  cycleMs?: number;
  distance?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Join the waitlist",
  accent = "#7C5CFF",
  variant = "breathe",
  cycleMs = 1500,
  distance = 8,
}: DemoProps) {
  return (
    <div className="flex min-h-[200px] items-center justify-center p-12">
      <PulseHaloButton accent={accent} variant={variant} cycleMs={cycleMs} distance={distance}>
        {label}
      </PulseHaloButton>
    </div>
  );
}

1d:T17a2, 1e:T122d8,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    variant?: "breathe" | "ring";
    cycleMs?: number;
    distance?: number;
  }>(),
  { accent: undefined, variant: "breathe", cycleMs: 1500, distance: 8 },
);

const buttonEl = ref<HTMLButtonElement | null>(null);
const resolved = ref(props.accent ?? "#7C5CFF");
const hovered = ref(false);
const pressed = ref(false);
const reduced = ref(false);

let mediaMotion: MediaQueryList | null = null;
let mediaTheme: MediaQueryList | null = null;
let observer: MutationObserver | null = null;

function syncMotion() {
  reduced.value = mediaMotion?.matches ?? false;
}

function readBackground() {
  if (buttonEl.value) resolved.value = getComputedStyle(buttonEl.value).backgroundColor;
}

onMounted(() => {
  mediaMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
  syncMotion();
  mediaMotion.addEventListener("change", syncMotion);

  if (props.accent) {
    resolved.value = props.accent;
    return;
  }
  readBackground();
  observer = new MutationObserver(readBackground);
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
  mediaTheme = window.matchMedia("(prefers-color-scheme: dark)");
  mediaTheme.addEventListener("change", readBackground);
});

onUnmounted(() => {
  mediaMotion?.removeEventListener("change", syncMotion);
  mediaTheme?.removeEventListener("change", readBackground);
  observer?.disconnect();
});

const seconds = computed(() => Math.max(0.2, props.cycleMs / 1000));
const reach = computed(() => Math.min(28, Math.max(2, props.distance)));
const grow = computed(() => Math.min(10, Math.max(2, Math.round(reach.value * 0.4))));
const holding = computed(() => hovered.value || pressed.value);
const luminance = computed(() => {
  const match = /^#?([0-9a-f]{6})$/i.exec((props.accent ?? "").trim());
  if (!match) return null;
  const value = Number.parseInt(match[1], 16);
  const r = (value >> 16) & 255;
  const g = (value >> 8) & 255;
  const b = value & 255;
  return (r * 299 + g * 587 + b * 114) / 1000;
});
const labelColor = computed(() => (props.accent ? (luminance.value! > 150 ? "#0B0D10" : "#F5F6F8") : undefined));

const haloVars = computed(() => ({
  "--phb-reach": `${reach.value}px`,
  "--phb-grow": `${grow.value}px`,
  "--phb-color": resolved.value,
}));

const buttonStyle = computed(() => ({
  background: props.accent,
  color: labelColor.value,
  filter: hovered.value && !pressed.value ? "brightness(1.14)" : pressed.value ? "brightness(0.94)" : "none",
  "--tw-ring-color": resolved.value,
  "--phb-ring-offset": `${reach.value + 8}px`,
}));

function press() {
  pressed.value = true;
}
function release() {
  pressed.value = false;
}
function enter() {
  hovered.value = true;
}
function leave() {
  hovered.value = false;
  pressed.value = false;
}
function onKeydown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = true;
}
function onKeyup(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = false;
}
</script>

<template>
  <span class="phb-wrap">
    <span
      v-if="reduced"
      aria-hidden="true"
      class="phb-halo phb-rest"
      :style="haloVars"
    ></span>
    <span
      v-else-if="variant === 'breathe'"
      aria-hidden="true"
      class="phb-halo phb-breathe"
      :style="{ ...haloVars, animationDuration: seconds + 's', animationPlayState: holding ? 'paused' : 'running' }"
    ></span>
    <template v-else>
      <span
        v-for="lap in [0, 1]"
        :key="lap"
        aria-hidden="true"
        class="phb-halo phb-ring"
        :style="{
          ...haloVars,
          animationPlayState: holding ? 'paused' : 'running',
          animationDelay: (lap * seconds) / 2 + 's',
          animationDuration: seconds + 's',
        }"
      ></span>
    </template>
    <button
      ref="buttonEl"
      type="button"
      class="phb-button"
      :class="{ 'phb-button--auto': !accent }"
      :style="buttonStyle"
      @pointerenter="enter"
      @pointerleave="leave"
      @pointerdown="press"
      @pointerup="release"
      @pointercancel="release"
      @keydown="onKeydown"
      @keyup="onKeyup"
      @blur="leave"
    >
      <slot />
    </button>
  </span>
</template>

<style scoped>
.phb-wrap {
  position: relative;
  display: inline-flex;
}
.phb-halo {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: var(--phb-color);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.phb-rest {
  inset: calc(-1 * var(--phb-grow));
  opacity: 0.34;
}
.phb-breathe {
  animation-name: phb-breathe;
}
.phb-ring {
  animation-name: phb-ring;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes phb-breathe {
  0%,
  100% {
    inset: 0;
    opacity: 1;
  }
  50% {
    inset: calc(-1 * var(--phb-grow));
    opacity: 0.34;
  }
}
@keyframes phb-ring {
  0% {
    inset: 0;
    opacity: 0.92;
  }
  100% {
    inset: calc(-1 * var(--phb-reach));
    opacity: 0;
  }
}
.phb-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  font: 500 14px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: filter 150ms ease-out, transform 120ms ease-out;
}
.phb-button--auto {
  background: #edeff2;
  color: #0b0d10;
}
@media (prefers-color-scheme: dark) {
  .phb-button--auto {
    background: #242832;
    color: #f5f6f8;
  }
}
.phb-button:active {
  transform: scale(0.98);
}
.phb-button:focus-visible {
  box-shadow: 0 0 0 var(--phb-ring-offset, 8px) transparent, 0 0 0 calc(var(--phb-ring-offset, 8px) + 2px) var(--tw-ring-color, #7c5cff);
}
@media (prefers-reduced-motion: reduce) {
  .phb-breathe,
  .phb-ring {
    animation: none;
  }
}
</style>

Nearby