"use client";

import { SwellingPillAddButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  growth?: number;
  easeMs?: number;
  pulse?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Add to project", accent = "#38BDF8", growth = 1.1, easeMs = 500, pulse = true }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <SwellingPillAddButton label={label} accent={accent} growth={growth} easeMs={easeMs} pulse={pulse} />
      <SwellingPillAddButton label="Already added" accent="#9BE15D" growth={growth} easeMs={easeMs} pulse={pulse} disabled />
    </div>
  );
}

1d:T154a, 1e:T11f34,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    growth?: number;
    easeMs?: number;
    pulse?: boolean;
    disabled?: boolean;
  }>(),
  { label: "Add to project", accent: "#38BDF8", growth: 1.1, easeMs: 500, pulse: true, disabled: false },
);

const PRESS_MS = 140;
const HOVER_DARKEN = 0.16;
const PRESS_DARKEN = 0.32;

function parseHex(hex: string): [number, number, number] {
  const stripped = hex.replace("#", "");
  const full = stripped.length === 3 ? stripped.split("").map((c) => c + c).join("") : stripped;
  const value = Number.parseInt(full, 16) || 0x38bdf8;
  return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
}
function darken(hex: string, amount: number): string {
  const [r, g, b] = parseHex(hex);
  const mix = (c: number) => Math.round(c * (1 - amount));
  return `rgb(${mix(r)} ${mix(g)} ${mix(b)})`;
}

const hovered = ref(false);
const pressed = ref(false);
const reducedMotion = ref(false);

let mediaQuery: MediaQueryList | undefined;
function syncReducedMotion() {
  reducedMotion.value = !!mediaQuery?.matches;
}
if (typeof window !== "undefined" && window.matchMedia) {
  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  syncReducedMotion();
  mediaQuery.addEventListener("change", syncReducedMotion);
}
onBeforeUnmount(() => {
  mediaQuery?.removeEventListener("change", syncReducedMotion);
});

const holding = computed(() => pressed.value && !props.disabled);
const swelling = computed(() => hovered.value && !pressed.value && !props.disabled && !reducedMotion.value);
const scale = computed(() => (swelling.value ? Math.min(1.25, Math.max(1, props.growth)) : 1));
const transitionMs = computed(() => (reducedMotion.value ? 1 : holding.value ? PRESS_MS : Math.min(1200, Math.max(150, props.easeMs))));
const overlay = computed(() => (props.disabled ? 0 : holding.value ? PRESS_DARKEN : hovered.value ? HOVER_DARKEN : 0));
const breathing = computed(() => props.pulse && !props.disabled && !reducedMotion.value);

const mid = computed(() => props.accent);
const deep = computed(() => darken(props.accent, 0.22));
const ring = computed(() => {
  const [r, g, b] = parseHex(props.accent);
  return `rgba(${r}, ${g}, ${b}, 0.4)`;
});

function onEnter() {
  if (!props.disabled) hovered.value = true;
}
function onLeave() {
  hovered.value = false;
  pressed.value = false;
}
function onDown() {
  if (!props.disabled) pressed.value = true;
}
function onUp() {
  pressed.value = false;
}
function onKeydown(event: KeyboardEvent) {
  if ((event.key === "Enter" || event.key === " ") && !event.repeat && !props.disabled) pressed.value = true;
}
function onKeyup(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = false;
}
function onBlur() {
  hovered.value = false;
  pressed.value = false;
}
</script>

<template>
  <button
    type="button"
    class="spab"
    :class="{ 'spab--pressed': holding }"
    :disabled="disabled"
    :style="{
      background: `linear-gradient(90deg, ${mid} 0%, ${deep} 50%, ${mid} 100%)`,
      transform: `scale(${scale})`,
      '--spab-duration': transitionMs + 'ms',
      '--spab-overlay': overlay,
      '--spab-ring': ring,
    }"
    @pointerenter="onEnter"
    @pointerleave="onLeave"
    @pointerdown="onDown"
    @pointerup="onUp"
    @pointercancel="onUp"
    @keydown="onKeydown"
    @keyup="onKeyup"
    @blur="onBlur"
  >
    <span class="spab__overlay" aria-hidden="true"></span>
    <svg class="spab__icon" :class="{ 'spab__icon--breathing': breathing }" aria-hidden="true" viewBox="0 0 24 24" width="30" height="30">
      <path d="M12 5.4v13.2M5.4 12h13.2" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" />
    </svg>
    <span class="spab__label">{{ label }}</span>
  </button>
</template>

<style scoped>
.spab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  border: none;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem 0.75rem 1.25rem;
  color: #fff;
  font: 800 17px/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  box-shadow:
    0 14px 28px -12px rgb(0 0 0 / 0.55),
    0 2px 6px rgb(0 0 0 / 0.35);
  transition:
    transform var(--spab-duration) cubic-bezier(0.45, 0, 0.2, 1),
    box-shadow var(--spab-duration) cubic-bezier(0.45, 0, 0.2, 1);
}
.spab:focus-visible {
  outline: 8px solid var(--spab-ring);
  outline-offset: 6px;
}
.spab:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}
.spab--pressed {
  box-shadow:
    inset 0 3px 10px rgb(0 0 0 / 0.5),
    inset 0 1px 3px rgb(0 0 0 / 0.6);
}
.spab__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: var(--spab-overlay);
  transition: opacity var(--spab-duration) cubic-bezier(0.45, 0, 0.2, 1);
  pointer-events: none;
}
.spab__icon,
.spab__label {
  position: relative;
  z-index: 1;
}
.spab__icon {
  flex-shrink: 0;
}
.spab__icon--breathing {
  animation: spab-breathe 2s ease-in-out infinite;
}
.spab__label {
  white-space: nowrap;
}
@keyframes spab-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spab {
    transition-duration: 1ms;
  }
  .spab__icon--breathing {
    animation: none;
    opacity: 1;
  }
}
</style>

Nearby