"use client";

import { ShrinkingCapIconButtons } from "./index";

export interface DemoProps {
  accent?: string;
  count?: number;
  size?: number;
  revealMs?: number;
  pressScale?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", count = 5, size = 50, revealMs = 400, pressScale = 0.85 }: DemoProps) {
  return (
    <div className="flex w-full flex-col items-center gap-3 p-8">
      <ShrinkingCapIconButtons accent={accent} count={count} size={size} revealMs={revealMs} pressScale={pressScale} />
      <p className="text-xs text-white/40">Hover a circle to uncover its colour.</p>
    </div>
  );
}

1d:T152e, 1e:T125f8,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    count?: number;
    size?: number;
    revealMs?: number;
    pressScale?: number;
  }>(),
  { accent: "#38BDF8", count: 5, size: 50, revealMs: 400, pressScale: 0.85 },
);

interface IconDef {
  label: string;
  path: string;
}

const ICONS: IconDef[] = [
  { label: "Like", path: "M12 19.4c-.25 0-.5-.1-.68-.28C7.7 15.7 4.75 12.9 4.75 9.6c0-2.36 1.9-4.25 4.25-4.25 1.36 0 2.58.62 3 1.6.42-.98 1.64-1.6 3-1.6 2.35 0 4.25 1.9 4.25 4.25 0 3.3-2.95 6.1-6.57 9.52-.18.18-.43.28-.68.28Z" },
  { label: "Favorite", path: "M12 4.2l2.15 5.4 5.85.42-4.5 3.75 1.48 5.65L12 16.2l-4.98 3.22 1.48-5.65-4.5-3.75 5.85-.42Z" },
  { label: "Save", path: "M6.75 4.5h10.5v15l-5.25-3.75L6.75 19.5Z" },
  { label: "Notifications", path: "M12 4.75c-2.26 0-4.1 1.94-4.1 4.35v2.9c0 1.42-.58 2.46-1.5 3.3h11.2c-.92-.84-1.5-1.88-1.5-3.3v-2.9c0-2.41-1.84-4.35-4.1-4.35Z M10.15 17.55a1.85 1.85 0 0 0 3.7 0" },
  { label: "Share", path: "M12 15.5V5.25 M8.4 8.85 12 5.25l3.6 3.6 M5.5 13v6.25h13V13" },
  { label: "Search", path: "M11 4.75a6.25 6.25 0 1 0 0 12.5 6.25 6.25 0 0 0 0-12.5Z M15.7 15.7 20 20" },
  { label: "Add", path: "M12 5.25v13.5 M5.25 12h13.5" },
  { label: "Message", path: "M4.5 5.5h15v10.5H9.6L6 19.5v-3.5H4.5Z" },
];

const HUE_OFFSETS = [0, -20, 26, -42, 14, -58, 38, -8];

function hexToHsl(hex: string): [number, number, number] {
  const clean = hex.replace("#", "");
  const r = parseInt(clean.slice(0, 2), 16) / 255;
  const g = parseInt(clean.slice(2, 4), 16) / 255;
  const b = parseInt(clean.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  if (max === min) return [0, 0, l * 100];
  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h: number;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;
  return [h, s * 100, l * 100];
}

function hslToHex(h: number, s: number, l: number): string {
  const hue = ((h % 360) + 360) % 360;
  const sat = Math.min(100, Math.max(0, s)) / 100;
  const light = Math.min(100, Math.max(0, l)) / 100;
  const c = (1 - Math.abs(2 * light - 1)) * sat;
  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
  const m = light - c / 2;
  let rgb: [number, number, number];
  if (hue < 60) rgb = [c, x, 0];
  else if (hue < 120) rgb = [x, c, 0];
  else if (hue < 180) rgb = [0, c, x];
  else if (hue < 240) rgb = [0, x, c];
  else if (hue < 300) rgb = [x, 0, c];
  else rgb = [c, 0, x];
  const toHex = (v: number) =>
    Math.round((v + m) * 255)
      .toString(16)
      .padStart(2, "0");
  return `#${toHex(rgb[0])}${toHex(rgb[1])}${toHex(rgb[2])}`;
}

function buildPalette(accent: string, count: number): string[] {
  const [h, s, l] = hexToHsl(accent);
  return Array.from({ length: count }, (_, i) => {
    if (i === 0) return accent;
    const hue = h + HUE_OFFSETS[i % HUE_OFFSETS.length];
    const sat = Math.max(38, s - 16);
    const light = Math.min(66, Math.max(36, l + (i % 2 === 0 ? 6 : -6)));
    return hslToHex(hue, sat, light);
  });
}

const total = computed(() => Math.min(ICONS.length, Math.max(2, Math.round(props.count))));
const icons = computed(() => ICONS.slice(0, total.value));
const colors = computed(() => buildPalette(props.accent, total.value));

const inset = computed(() => Math.max(2, Math.round(props.size * 0.05)));
const capSize = computed(() => props.size - inset.value * 2);
const iconSize = computed(() => Math.round(props.size * 0.46));
</script>

<template>
  <div class="cap-row">
    <button
      v-for="(icon, i) in icons"
      :key="icon.label"
      type="button"
      class="cap-btn"
      :aria-label="icon.label"
      :style="{
        width: size + 'px',
        height: size + 'px',
        background: colors[i],
        '--reveal-ms': revealMs + 'ms',
        '--press-scale': pressScale,
      }"
    >
      <span class="cap-btn__cap" aria-hidden="true" :style="{ width: capSize + 'px', height: capSize + 'px' }" />
      <svg aria-hidden="true" viewBox="0 0 24 24" :width="iconSize" :height="iconSize" class="cap-btn__icon">
        <path :d="icon.path" fill="none" stroke="#fff" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
  </div>
</template>

<style scoped>
.cap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.cap-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 120ms ease-out;
}
.cap-btn:active {
  transform: scale(var(--press-scale));
}
.cap-btn:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px currentColor;
}
.cap-btn__cap {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  background: #0c0f13;
  transform: scale(1);
  transition: transform var(--reveal-ms) cubic-bezier(0.22, 0.8, 0.2, 1);
}
.cap-btn:hover .cap-btn__cap,
.cap-btn:focus-visible .cap-btn__cap {
  transform: scale(0);
}
.cap-btn__icon {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cap-btn__cap {
    transition-duration: 0.01ms;
  }
}
</style>

Nearby