"use client";

import * as React from "react";
import { HoldToDeleteButton } from "./index";

export interface DemoProps {
  label?: string;
  holdMs?: number;
  accent?: string;
  showCountdown?: boolean;
  glyph?: "bin" | "archive" | "block" | "none";
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Hold to delete",
  holdMs = 1600,
  accent = "#FF4D8D",
  showCountdown = false,
  glyph = "bin",
}: DemoProps) {
  const [note, setNote] = React.useState("");

  const handleDelete = React.useCallback(() => {
    setNote("Removed “Q3 onboarding deck” from the project.");
    window.setTimeout(() => setNote(""), 2600);
  }, []);

  return (
    <div className="flex flex-col items-center gap-3 p-8">
      <HoldToDeleteButton label={label} holdMs={holdMs} accent={accent} showCountdown={showCountdown} glyph={glyph} onDelete={handleDelete} />
      <p className="h-4 text-xs text-current opacity-60">{note}</p>
    </div>
  );
}

1d:T1afa, 1e:T15158,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    holdMs?: number;
    accent?: string;
    showCountdown?: boolean;
    glyph?: "bin" | "archive" | "block" | "none";
  }>(),
  { label: "Hold to delete", holdMs: 1600, accent: "#FF4D8D", showCountdown: false, glyph: "bin" },
);

const emit = defineEmits<{ delete: [] }>();

const LOCKOUT_MS = 900;
const ABORT_MS = 120;
const GLYPH_TRAVEL = 14;

type Phase = "idle" | "holding" | "complete";

const phase = ref<Phase>("idle");
const percent = ref(0);
const announcement = ref("");
const calm =
  typeof window !== "undefined" && typeof window.matchMedia === "function"
    ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
    : false;

let raf = 0;
let startedAt = 0;
let abortFrom = 0;
let abortStartedAt = 0;
let abortDuration = ABORT_MS;
let resetTimer: number | undefined;

function cancelFrame() {
  if (raf) cancelAnimationFrame(raf);
  raf = 0;
}

function tickHold(now: number) {
  const v = Math.min(1, (now - startedAt) / props.holdMs);
  percent.value = Math.round(v * 100);
  if (v >= 1) {
    complete();
    return;
  }
  raf = requestAnimationFrame(tickHold);
}

function tickAbort(now: number) {
  const t = Math.min(1, (now - abortStartedAt) / abortDuration);
  percent.value = Math.round(abortFrom * (1 - t));
  if (t >= 1) {
    percent.value = 0;
    cancelFrame();
    return;
  }
  raf = requestAnimationFrame(tickAbort);
}

function start() {
  if (phase.value !== "idle") return;
  if (resetTimer !== undefined) {
    window.clearTimeout(resetTimer);
    resetTimer = undefined;
  }
  cancelFrame();
  phase.value = "holding";
  startedAt = performance.now() - (percent.value / 100) * props.holdMs;
  raf = requestAnimationFrame(tickHold);
}

function complete() {
  cancelFrame();
  percent.value = 100;
  phase.value = "complete";
  announcement.value = "Removed.";
  emit("delete");
  resetTimer = window.setTimeout(() => {
    percent.value = 0;
    announcement.value = "";
    phase.value = "idle";
  }, LOCKOUT_MS);
}

function cancel() {
  if (phase.value !== "holding") return;
  cancelFrame();
  abortFrom = percent.value;
  abortStartedAt = performance.now();
  abortDuration = calm ? 10 : ABORT_MS;
  phase.value = "idle";
  raf = requestAnimationFrame(tickAbort);
}

function isSpaceOrEnter(key: string) {
  return key === " " || key === "Spacebar" || key === "Enter";
}

function onKeyDown(event: KeyboardEvent) {
  if (isSpaceOrEnter(event.key) && !event.repeat) {
    event.preventDefault();
    start();
  }
}
function onKeyUp(event: KeyboardEvent) {
  if (isSpaceOrEnter(event.key)) cancel();
}

onBeforeUnmount(() => {
  cancelFrame();
  if (resetTimer !== undefined) window.clearTimeout(resetTimer);
});

const displayLabel = computed(() => {
  if (phase.value === "complete") return "Deleted";
  if (phase.value === "holding") return "Release to cancel";
  return props.label;
});
const remainingMs = computed(() => Math.max(0, Math.round((props.holdMs * (100 - percent.value)) / 100)));
const glyphOffset = computed(() => (percent.value / 100) * (calm ? 0 : GLYPH_TRAVEL));
const surface = computed(() => `color-mix(in srgb, ${props.accent} 12%, transparent)`);
const borderColor = computed(() => `color-mix(in srgb, ${props.accent} 30%, transparent)`);
const fillColor = computed(() => `color-mix(in srgb, ${props.accent} 28%, transparent)`);
</script>

<template>
  <button
    type="button"
    class="hold-to-delete"
    :disabled="phase === 'complete'"
    :style="{ background: surface, borderColor, color: accent, '--htd-ring': accent }"
    @pointerdown="(e: PointerEvent) => { if (e.pointerType === 'mouse' && e.button !== 0) return; start(); }"
    @pointerup="cancel"
    @pointerleave="cancel"
    @pointercancel="cancel"
    @lostpointercapture="cancel"
    @keydown="onKeyDown"
    @keyup="onKeyUp"
    @blur="cancel"
    @contextmenu.prevent
  >
    <span class="fill" :style="{ width: percent + '%', background: fillColor }" aria-hidden="true" />
    <span v-if="glyph !== 'none'" class="glyph" :style="{ transform: `translateX(${glyphOffset}px)` }" aria-hidden="true">
      <svg v-if="glyph === 'bin'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 7h16" />
        <path d="M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7" />
        <path d="M6.5 7 7.3 19.5A1.5 1.5 0 0 0 8.8 21h6.4a1.5 1.5 0 0 0 1.5-1.5L17.5 7" />
        <path d="M10 11v6" />
        <path d="M14 11v6" />
      </svg>
      <svg v-else-if="glyph === 'archive'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3.5" y="4" width="17" height="4" rx="1" />
        <path d="M5 8v10.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V8" />
        <path d="M10 13h4" />
      </svg>
      <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="8.5" />
        <path d="m6.5 17.5 11-11" />
      </svg>
    </span>
    <span class="label">{{ displayLabel }}</span>
    <span v-if="showCountdown" class="countdown" aria-hidden="true">{{ (remainingMs / 1000).toFixed(1) }}s</span>
    <span role="progressbar" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="percent" :aria-label="`${label} hold progress`" class="sr-only" />
    <span aria-live="polite" class="sr-only">{{ announcement }}</span>
  </button>
</template>

<style scoped>
.hold-to-delete {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  height: 2.5rem;
  min-width: 170px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font: 500 0.875rem/1.25rem system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  outline: none;
}
.hold-to-delete:disabled {
  cursor: default;
}
.hold-to-delete:focus-visible {
  box-shadow: 0 0 0 2px rgb(11 13 16), 0 0 0 4px var(--htd-ring, #ff4d8d);
}
.fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  pointer-events: none;
}
.glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}
.label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.countdown {
  position: absolute;
  top: 0.25rem;
  right: 0.625rem;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  pointer-events: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Nearby