"use client";

import { DotFloodButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  dotSize?: number;
  floodMs?: number;
  showDot?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Start a trial", accent = "#FF6A1F", dotSize = 8, floodMs = 300, showDot = true }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8 text-current">
      <DotFloodButton label={label} accent={accent} dotSize={dotSize} floodMs={floodMs} showDot={showDot} />
      <DotFloodButton label="View pricing" accent={accent} dotSize={dotSize} floodMs={floodMs} showDot={showDot} />
    </div>
  );
}

1d:T1714, 1e:T10b01,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    dotSize?: number;
    floodMs?: number;
    showDot?: boolean;
  }>(),
  { label: "Start a trial", accent: "#FF6A1F", dotSize: 8, floodMs: 300, showDot: true },
);

const buttonRef = ref<HTMLButtonElement | null>(null);
const hovered = ref(false);
const focused = ref(false);
const touched = ref(false);
const pressed = ref(false);
const floodScale = ref(24);
const reduced = ref(false);
let observer: ResizeObserver | null = null;

function measure() {
  const node = buttonRef.value;
  if (!node) return;
  const rect = node.getBoundingClientRect();
  const reach = Math.hypot(rect.width, rect.height) / 2;
  floodScale.value = Math.max(18, (reach / (props.dotSize / 2)) * 1.15);
}

onMounted(() => {
  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = query.matches;
  query.addEventListener("change", () => {
    reduced.value = query.matches;
  });
  measure();
  if (buttonRef.value) {
    observer = new ResizeObserver(measure);
    observer.observe(buttonRef.value);
  }
});
onBeforeUnmount(() => observer?.disconnect());

const flooded = computed(() => hovered.value || focused.value || touched.value);
const edgeMs = computed(() => (reduced.value ? 150 : props.floodMs));
/** Scale/x travel is instant under reduced motion; opacity still crossfades. */
const travelMs = computed(() => (reduced.value ? 0 : props.floodMs));
const fadeMs = computed(() => (reduced.value ? 160 : props.floodMs));
const EASE = "cubic-bezier(0.65,0,0.35,1)";
const dotTransition = computed(() => `transform ${travelMs.value}ms ${EASE}, opacity ${fadeMs.value}ms ${EASE}`);
const labelTransition = computed(() => `transform ${travelMs.value}ms ${EASE}, opacity ${fadeMs.value}ms ${EASE}`);

function contrastFor(hex: string): string {
  const clean = hex.replace("#", "");
  const value = clean.length === 3 ? clean.replace(/./g, (c) => c + c) : clean;
  const r = Number.parseInt(value.slice(0, 2), 16) / 255;
  const g = Number.parseInt(value.slice(2, 4), 16) / 255;
  const b = Number.parseInt(value.slice(4, 6), 16) / 255;
  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  const luminance = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
  return luminance > 0.55 ? "#12100C" : "#FBF7F2";
}
const invertedColor = computed(() => contrastFor(props.accent));

function onPointerEnter(event: PointerEvent) {
  if (event.pointerType !== "touch") hovered.value = true;
}
function onPointerLeave(event: PointerEvent) {
  if (event.pointerType === "touch") {
    touched.value = false;
  } else {
    hovered.value = false;
    pressed.value = false;
  }
}
function onPointerDown(event: PointerEvent) {
  pressed.value = true;
  if (event.pointerType === "touch") touched.value = true;
}
function onPointerUp(event: PointerEvent) {
  pressed.value = false;
  if (event.pointerType === "touch") touched.value = false;
}
function onPointerCancel() {
  pressed.value = false;
  touched.value = false;
}
function onFocus() {
  focused.value = true;
}
function onBlur() {
  focused.value = false;
  pressed.value = false;
}
</script>

<template>
  <button
    ref="buttonRef"
    type="button"
    class="dot-flood-button"
    :style="{
      '--dfb-accent': accent,
      '--dfb-border': flooded ? accent : 'color-mix(in srgb, currentColor 24%, transparent)',
      '--dfb-scale': flooded && pressed ? 0.99 : 1,
      '--dfb-edge-ms': edgeMs + 'ms',
    }"
    @pointerenter="onPointerEnter"
    @pointerleave="onPointerLeave"
    @pointerdown="onPointerDown"
    @pointerup="onPointerUp"
    @pointercancel="onPointerCancel"
    @focus="onFocus"
    @blur="onBlur"
  >
    <span
      class="dot-flood-button__dot"
      aria-hidden="true"
      :style="{
        width: dotSize + 'px',
        height: dotSize + 'px',
        background: accent,
        opacity: flooded ? 1 : showDot ? 1 : 0,
        transform: `scale(${flooded ? floodScale : 1})`,
        transition: dotTransition,
      }"
    />
    <span class="dot-flood-button__track">
      <span class="dot-flood-button__label" :style="{ opacity: flooded ? 0 : 1, transform: `translateX(${flooded ? 75 : 0}%)`, transition: labelTransition }">
        {{ label }}
      </span>
      <span
        class="dot-flood-button__label dot-flood-button__label--inverted"
        aria-hidden="true"
        :style="{ color: invertedColor, opacity: flooded ? 1 : 0, transform: `translateX(${flooded ? 0 : 75}%)`, transition: labelTransition }"
      >
        {{ label }}
      </span>
    </span>
  </button>
</template>

<style scoped>
.dot-flood-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  height: 44px;
  padding: 0 26px;
  border: 1px solid var(--dfb-border);
  border-radius: 9999px;
  background: transparent;
  color: currentColor;
  font: 600 15px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transform: scale(var(--dfb-scale));
  transition:
    border-color var(--dfb-edge-ms) cubic-bezier(0.65, 0, 0.35, 1),
    transform 120ms ease-out;
}
.dot-flood-button:focus-visible {
  box-shadow: 0 0 0 2px var(--dfb-accent);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.dot-flood-button__dot {
  position: relative;
  flex-shrink: 0;
  border-radius: 9999px;
  pointer-events: none;
}
.dot-flood-button__track {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dot-flood-button__label {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.dot-flood-button__label--inverted {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>

Nearby