"use client";

import { TintedShadowButtons } from "./index";

export interface DemoProps {
  accent?: string;
  count?: number;
  hueSpread?: number;
  shadowStrength?: number;
  radius?: number;
}

const LABELS = ["Save draft", "Publish", "Duplicate", "Archive", "Share", "Delete"];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", count = 4, hueSpread = 40, shadowStrength = 0.5, radius = 8 }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <TintedShadowButtons labels={LABELS} accent={accent} count={count} hueSpread={hueSpread} shadowStrength={shadowStrength} radius={radius} />
    </div>
  );
}

1d:Td9e, 1e:Td7b9,

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

const props = withDefaults(
  defineProps<{
    labels?: string[];
    accent?: string;
    count?: number;
    hueSpread?: number;
    shadowStrength?: number;
    radius?: number;
  }>(),
  {
    labels: () => ["Save draft", "Publish", "Duplicate", "Archive", "Share", "Delete"],
    accent: "#38BDF8",
    count: 4,
    hueSpread: 40,
    shadowStrength: 0.5,
    radius: 8,
  },
);

interface Swatch {
  hue: number;
  sat: number;
  label: string;
}

function hexToHueSat(hex: string): [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];
  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);
  else if (max === g) h = (b - r) / d + 2;
  else h = (r - g) / d + 4;
  return [Math.round(h * 60), Math.round(s * 100)];
}

const swatches = computed<Swatch[]>(() => {
  const [hue0, sat0] = hexToHueSat(props.accent);
  const sat = Math.max(sat0, 58);
  const n = Math.min(Math.max(Math.round(props.count), 2), 6);
  return Array.from({ length: n }, (_, i) => ({
    hue: (hue0 + i * props.hueSpread + 360) % 360,
    sat,
    label: props.labels[i % props.labels.length],
  }));
});
</script>

<template>
  <div class="tsb-row">
    <button
      v-for="(swatch, i) in swatches"
      :key="i"
      type="button"
      class="tsb-btn"
      :style="{
        '--tsb-hue': swatch.hue,
        '--tsb-sat': swatch.sat + '%',
        '--tsb-strength': shadowStrength,
        '--tsb-radius': radius + 'px',
      }"
    >
      {{ swatch.label }}
    </button>
  </div>
</template>

<style scoped>
.tsb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.tsb-btn {
  position: relative;
  display: inline-flex;
  height: 39px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 1.25rem;
  border: none;
  border-radius: var(--tsb-radius, 8px);
  color: #fff;
  font: 500 0.875rem/1.25rem system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  outline-offset: 2px;
  background-image: linear-gradient(100deg, hsl(var(--tsb-hue) var(--tsb-sat) 32%), hsl(var(--tsb-hue) var(--tsb-sat) 43%));
  box-shadow: 0 4px 16px hsl(var(--tsb-hue) var(--tsb-sat) 52% / var(--tsb-strength));
  transform: translateY(0);
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    background-image 180ms ease-out;
}

.tsb-btn:hover,
.tsb-btn:focus-visible {
  transform: translateY(-2px);
  background-image: linear-gradient(135deg, hsl(var(--tsb-hue) var(--tsb-sat) 32%), hsl(var(--tsb-hue) var(--tsb-sat) 43%));
  box-shadow: 0 4px 11px hsl(var(--tsb-hue) var(--tsb-sat) 42% / calc(var(--tsb-strength) * 1.3));
}

.tsb-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 6px hsl(var(--tsb-hue) var(--tsb-sat) 42% / calc(var(--tsb-strength) * 0.08));
}

.tsb-btn:focus-visible {
  outline: 4px solid hsl(var(--tsb-hue) var(--tsb-sat) 62% / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .tsb-btn,
  .tsb-btn:hover,
  .tsb-btn:focus-visible,
  .tsb-btn:active {
    transform: none;
    transition-duration: 60ms;
  }
}
</style>

Nearby