"use client";

import { StackedShadowOutlineButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  shadowLayers?: number;
  settleDepth?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "to infinity",
  accent = "#FF4F00",
  shadowLayers = 5,
  settleDepth = 3,
}: DemoProps) {
  return (
    <div className="flex min-h-40 w-full items-center justify-center p-8">
      {/* The shadow ladder only reads against a ground of its own, so the demo carries a pale panel. */}
      <div className="flex flex-wrap items-center justify-center gap-8 rounded-2xl bg-[#E9EDF4] px-10 py-9">
        <StackedShadowOutlineButton accent={accent} shadowLayers={shadowLayers} settleDepth={settleDepth}>
          {label}
        </StackedShadowOutlineButton>
        <StackedShadowOutlineButton accent={accent} shadowLayers={shadowLayers} settleDepth={settleDepth}>
          ship it
        </StackedShadowOutlineButton>
      </div>
    </div>
  );
}

1e:T1568, 1f:T11146,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    shadowLayers?: number;
    settleDepth?: number;
  }>(),
  { accent: "#FF4F00", shadowLayers: 5, settleDepth: 3 },
);

// Fixed pale plate the shadow ladder casts onto, and its ink, so the ladder reads on either stage.
const PLATE = "#F5F6F8";
const PLATE_INK = "#0B0D10";

function clampLayers(value: number): number {
  if (!Number.isFinite(value)) return 5;
  return Math.max(1, Math.min(6, Math.round(value)));
}

function shadowStack(layers: number, active: number): string {
  const parts: string[] = [];
  for (let i = 1; i <= layers; i++) {
    const visible = i <= active;
    parts.push(`0 ${i * 2}px ${2 ** (i + 1)}px rgba(9, 11, 15, ${visible ? 0.22 : 0})`);
  }
  return parts.join(", ");
}

function inkFor(accent: string): string {
  const match = /^#([0-9a-fA-F]{6})$/.exec(accent);
  if (!match) return "#0B0D10";
  const hex = parseInt(match[1], 16);
  const linear = (value: number) => {
    const channel = value / 255;
    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
  };
  const luminance =
    0.2126 * linear((hex >> 16) & 255) + 0.7152 * linear((hex >> 8) & 255) + 0.0722 * linear(hex & 255);
  return luminance > 0.2 ? "#0B0D10" : "#FFFFFF";
}

const pressed = ref(false);
const flooded = ref(false);
const active = ref(props.shadowLayers);
const reduced = ref(false);
let timers: number[] = [];

const mediaQuery =
  typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
if (mediaQuery) {
  reduced.value = mediaQuery.matches;
  const onChange = () => {
    reduced.value = mediaQuery.matches;
  };
  mediaQuery.addEventListener("change", onChange);
  onBeforeUnmount(() => mediaQuery.removeEventListener("change", onChange));
}

function clearTimers() {
  for (const timer of timers) window.clearTimeout(timer);
  timers = [];
}

function staggerTo(target: number) {
  clearTimers();
  if (target <= 0) {
    active.value = 0;
    return;
  }
  if (reduced.value) {
    active.value = target;
    return;
  }
  for (let step = 1; step <= target; step++) {
    timers.push(window.setTimeout(() => (active.value = step), 60 * (step - 1)));
  }
}

function press() {
  clearTimers();
  pressed.value = true;
  active.value = 0;
}

function release() {
  if (!pressed.value) return;
  pressed.value = false;
  staggerTo(props.shadowLayers);
}

function enter() {
  clearTimers();
  flooded.value = true;
  if (!pressed.value) active.value = 1;
}

function leave() {
  flooded.value = false;
  pressed.value = false;
  staggerTo(props.shadowLayers);
}

function focusIn(event: FocusEvent) {
  if (!(event.currentTarget as HTMLElement).matches(":focus-visible")) return;
  clearTimers();
  flooded.value = true;
  if (!pressed.value) active.value = 1;
}

function focusOut() {
  flooded.value = false;
  pressed.value = false;
  staggerTo(props.shadowLayers);
}

function keyDown(event: KeyboardEvent) {
  if ((event.key === " " || event.key === "Enter") && !event.repeat && !pressed.value) press();
}

function keyUp(event: KeyboardEvent) {
  if ((event.key === " " || event.key === "Enter") && pressed.value) release();
}

onBeforeUnmount(clearTimers);

const layers = computed(() => clampLayers(props.shadowLayers));
const effectiveActive = computed(() => (reduced.value ? layers.value : Math.min(active.value, layers.value)));
const ink = computed(() => inkFor(props.accent));
const lift = computed(() =>
  reduced.value ? 0 : pressed.value ? props.settleDepth + 1 : flooded.value ? props.settleDepth : 0,
);
const buttonStyle = computed(() => ({
  "--sso-accent": props.accent,
  "--sso-ink": ink.value,
  backgroundColor: flooded.value ? props.accent : PLATE,
  color: flooded.value ? ink.value : PLATE_INK,
  boxShadow: shadowStack(layers.value, effectiveActive.value),
  transform: `translateY(${lift.value}px)`,
}));
</script>

<template>
  <button
    type="button"
    class="sso-button"
    :style="buttonStyle"
    @pointerenter="enter"
    @pointerleave="leave"
    @pointerdown="press"
    @pointerup="release"
    @pointercancel="release"
    @keydown="keyDown"
    @keyup="keyUp"
    @focus="focusIn"
    @blur="focusOut"
  >
    <span class="sso-button__glyph" aria-hidden="true">
      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round">
        <path d="M4.5 4.75h7" />
        <path d="M3.5 8h9" />
        <path d="M4.5 11.25h7" />
      </svg>
    </span>
    <span class="sso-button__label"><slot /></span>
  </button>
</template>

<style scoped>
.sso-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--sso-accent, #ff4f00);
  border-radius: 4px;
  font: 700 1rem/1.25 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  transition: background-color 170ms ease, color 170ms ease, box-shadow 110ms ease, transform 110ms ease;
}
.sso-button:focus {
  outline: none;
}
.sso-button:focus-visible {
  outline: 2px solid var(--sso-accent, #ff4f00);
  outline-offset: 3px;
}
.sso-button__glyph {
  display: inline-flex;
}
.sso-button__label {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .sso-button {
    transform: none !important;
  }
}
</style>

Nearby