"use client";

import { FourEdgeWipeIconButton, type FourEdgeWipeGlyph } from "./index";

export interface DemoProps {
  accent?: string;
  glyph?: FourEdgeWipeGlyph;
  size?: number;
  duration?: number;
  borderWidth?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#9BE15D", glyph = "close", size = 48, duration = 500, borderWidth = 2 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3 p-8">
      <FourEdgeWipeIconButton accent={accent} glyph={glyph} size={size} duration={duration} borderWidth={borderWidth} aria-label="Dismiss notification" autoDemo />
      <FourEdgeWipeIconButton accent="#38BDF8" glyph="plus" size={size} duration={duration} borderWidth={borderWidth} aria-label="Add attachment" />
      <FourEdgeWipeIconButton accent="#F5C542" glyph="check" size={size} duration={duration} borderWidth={borderWidth} aria-label="Confirm order" />
    </div>
  );
}

1d:T17df, 1e:T12d61,

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

type Glyph = "close" | "plus" | "minus" | "check";

const props = withDefaults(
  defineProps<{
    accent?: string;
    glyph?: Glyph;
    size?: number;
    duration?: number;
    borderWidth?: number;
    ariaLabel?: string;
  }>(),
  { accent: "#9BE15D", glyph: "close", size: 48, duration: 500, borderWidth: 2, ariaLabel: undefined },
);

const GLYPH_NAME: Record<Glyph, string> = { close: "Close", plus: "Add", minus: "Remove", check: "Confirm" };
// "minus" renders as a filled capsule (see template) rather than a stroked path.
const GLYPH_PATH: Record<Glyph, string> = {
  close: "M6 6l12 12M18 6L6 18",
  plus: "M12 5v14M5 12h14",
  minus: "",
  check: "M5 12.5l4.5 4.5L19 7.5",
};

/** A single centered copy at this scale reaches every corner of the square once rotated 45deg. */
const PANEL_SCALE = 1.5;

function shade(hex: string, percent: number): string {
  const clean = hex.replace("#", "");
  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
  const num = Number.parseInt(full, 16) || 0;
  const amount = 255 * (percent / 100);
  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)));
  const toHex = (v: number) => clamp(v).toString(16).padStart(2, "0");
  return `#${toHex(((num >> 16) & 255) + amount)}${toHex(((num >> 8) & 255) + amount)}${toHex((num & 255) + amount)}`;
}

const hovered = ref(false);
const focused = ref(false);
const pressed = ref(false);
const reduced = ref(false);

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

const active = computed(() => hovered.value || focused.value);
const durationMs = computed(() => (reduced.value ? 160 : props.duration));
const deepAccent = computed(() => (pressed.value ? shade(props.accent, -18) : props.accent));
const panelSize = computed(() => props.size * PANEL_SCALE);
const restOffset = computed(() => props.size / 2 + panelSize.value * Math.SQRT1_2 + 2);
const panelInset = computed(() => (props.size - panelSize.value) / 2);

const buttonStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
  boxSizing: "border-box" as const,
  borderStyle: "solid" as const,
  borderWidth: `${props.borderWidth}px`,
  borderColor: active.value ? deepAccent.value : "currentColor",
  outlineColor: deepAccent.value,
  transitionDuration: `${durationMs.value}ms`,
}));

function panelStyle(axis: "x" | "y", sign: 1 | -1) {
  const rest = sign * restOffset.value;
  const travel = reduced.value ? 0 : active.value ? 0 : rest;
  const transform = axis === "x" ? `translateX(${travel}px) rotate(45deg)` : `translateY(${travel}px) rotate(45deg)`;
  return {
    width: `${panelSize.value}px`,
    height: `${panelSize.value}px`,
    left: `${panelInset.value}px`,
    top: `${panelInset.value}px`,
    background: deepAccent.value,
    opacity: reduced.value ? (active.value ? 1 : 0) : 1,
    transform,
    transitionDuration: `${durationMs.value}ms`,
  };
}

const glyphStyle = computed(() => ({
  transform: reduced.value ? "scale(1)" : active.value ? "scale(0)" : "scale(1)",
  transitionDuration: `${durationMs.value}ms`,
}));

function onEnter() {
  hovered.value = true;
}
function onLeave() {
  hovered.value = false;
  pressed.value = false;
}
function onDown() {
  pressed.value = true;
}
function onUp() {
  pressed.value = false;
}
function onFocusIn() {
  focused.value = true;
}
function onFocusOut() {
  focused.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>
  <button
    type="button"
    class="fewib"
    :aria-label="ariaLabel ?? GLYPH_NAME[glyph]"
    :style="buttonStyle"
    @pointerenter="onEnter"
    @pointerleave="onLeave"
    @pointerdown="onDown"
    @pointerup="onUp"
    @pointercancel="onUp"
    @focus="onFocusIn"
    @blur="onFocusOut"
    @keydown="onKeyDown"
    @keyup="onKeyUp"
  >
    <span class="fewib__panel" aria-hidden="true" :style="panelStyle('y', -1)"></span>
    <span class="fewib__panel" aria-hidden="true" :style="panelStyle('y', 1)"></span>
    <span class="fewib__panel" aria-hidden="true" :style="panelStyle('x', -1)"></span>
    <span class="fewib__panel" aria-hidden="true" :style="panelStyle('x', 1)"></span>
    <span class="fewib__glyph" :style="glyphStyle">
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect v-if="glyph === 'minus'" x="5" y="10.8" width="14" height="2.4" rx="1.2" fill="currentColor" stroke="none" />
        <path v-else :d="GLYPH_PATH[glyph]" />
      </svg>
    </span>
  </button>
</template>

<style scoped>
.fewib {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  outline: none;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fewib:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.fewib__panel {
  position: absolute;
  pointer-events: none;
  transition-property: transform, opacity, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fewib__glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

Nearby