"use client";

import { OutsetRingTiltButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  hoverScale?: number;
  tilt?: number;
  ringOffset?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Share", accent = "#38BDF8", hoverScale = 1.2, tilt = 2, ringOffset = 4 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <OutsetRingTiltButton accent={accent} hoverScale={hoverScale} tilt={tilt} ringOffset={ringOffset}>
        {label}
      </OutsetRingTiltButton>
      <OutsetRingTiltButton accent="#FF6A1F" hoverScale={hoverScale} tilt={tilt} ringOffset={ringOffset}>
        Boost
      </OutsetRingTiltButton>
    </div>
  );
}

1d:T132f, 1e:Ted15,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    hoverScale?: number;
    tilt?: number;
    ringOffset?: number;
  }>(),
  { accent: "#38BDF8", hoverScale: 1.2, tilt: 2, ringOffset: 4 },
);

const SHADOW = "#C7CDD5";
const EASE = "cubic-bezier(0.3, 0.7, 0.3, 1)";

/** Turn a hex color into a darker shade of the same hue by scaling its channels. */
function darken(hex: string, factor = 0.38): string {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
  const int = Number.parseInt(full.slice(0, 6), 16);
  if (Number.isNaN(int)) return hex;
  return (
    "#" +
    [(int >> 16) & 255, (int >> 8) & 255, int & 255]
      .map((c) => Math.round(c * factor).toString(16).padStart(2, "0"))
      .join("")
  );
}

const lifted = ref(false);
const pressed = ref(false);
const reduced = ref(false);
let media: MediaQueryList | null = null;

function onMediaChange(event: MediaQueryListEvent) {
  reduced.value = event.matches;
}

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = media.matches;
  media.addEventListener("change", onMediaChange);
});

onBeforeUnmount(() => {
  media?.removeEventListener("change", onMediaChange);
});

const shade = computed(() => darken(props.accent));
const ringGap = computed(() => (lifted.value ? props.ringOffset + 4 : props.ringOffset));
const scale = computed(() =>
  reduced.value ? 1 : pressed.value ? 0.985 : lifted.value ? props.hoverScale : 1,
);
const rotate = computed(() =>
  reduced.value || pressed.value ? 0 : lifted.value ? props.tilt : 0,
);
const shadow = computed(() =>
  pressed.value
    ? `2px 2px 0 0 ${SHADOW}`
    : lifted.value
      ? `6px 6px 0 0 ${SHADOW}`
      : "0 0 0 0 transparent",
);
// The wrapper reserves the lifted size so the growing badge never overlaps its neighbors.
const pad = computed(() => props.ringOffset + 8);
const wrapperWidth = computed(() => 200 * props.hoverScale + pad.value * 2 + "px");
const wrapperHeight = computed(() => 50 * props.hoverScale + pad.value * 2 + "px");
const transition = computed(() => `transform 450ms ${EASE}, box-shadow 450ms ${EASE}`);

function enter() {
  lifted.value = true;
}
function leave() {
  lifted.value = false;
  pressed.value = false;
}
function down() {
  pressed.value = true;
}
function up() {
  pressed.value = false;
}
function keydown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = true;
}
function keyup(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = false;
}
</script>

<template>
  <span
    class="ort-wrap"
    :style="{ width: wrapperWidth, height: wrapperHeight }"
  >
    <button
      type="button"
      class="ort-button"
      :style="{
        background: accent,
        transform: 'scale(' + scale + ') rotate(' + rotate + 'deg)',
        boxShadow: shadow,
        transition: transition
      }"
      @pointerenter="enter"
      @pointerleave="leave"
      @pointerdown="down"
      @pointerup="up"
      @pointercancel="up"
      @focus="enter"
      @blur="leave"
      @keydown="keydown"
      @keyup="keyup"
    >
      <span
        aria-hidden="true"
        class="ort-ring"
        :style="{
          inset: -ringGap + 'px',
          borderColor: shade,
          borderRadius: 10 + ringGap + 'px',
          transition: 'inset 450ms ' + EASE + ', border-radius 450ms ' + EASE
        }"
      />
      <svg
        viewBox="0 0 24 24"
        width="20"
        height="20"
        fill="none"
        :stroke="shade"
        stroke-width="2.25"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <circle cx="5.5" cy="12" r="2.6" />
        <circle cx="18" cy="5.5" r="2.6" />
        <circle cx="18" cy="18.5" r="2.6" />
        <path d="M7.9 10.8l7.7-4.2" />
        <path d="M7.9 13.2l7.7 4.2" />
      </svg>
      <span class="ort-label"><slot /></span>
    </button>
  </span>
</template>

<style scoped>
.ort-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}
.ort-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 200px;
  height: 50px;
  padding: 0 1.25rem;
  border: none;
  border-radius: 10px;
  color: #f6fbff;
  font: 600 1.125rem/1.4 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.ort-button:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.6);
  outline-offset: 2px;
}
.ort-label {
  position: relative;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ort-ring {
  position: absolute;
  pointer-events: none;
  border: 3px solid;
}
</style>

Nearby