"use client";

import { BandedStripeButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  bands?: number;
  angle?: number;
  slideOnHover?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Get started",
  accent = "#F5C542",
  bands = 5,
  angle = 135,
  slideOnHover = true,
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <BandedStripeButton accent={accent} bands={bands} angle={angle} slideOnHover={slideOnHover}>
        {label}
      </BandedStripeButton>
      <BandedStripeButton accent="#38BDF8" bands={4} angle={115} slideOnHover={slideOnHover}>
        Download report
      </BandedStripeButton>
    </div>
  );
}

1d:T1225, 1e:T11778,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    bands?: number;
    angle?: number;
    slideOnHover?: boolean;
  }>(),
  { accent: "#F5C542", bands: 5, angle: 135, slideOnHover: true },
);

/** Convert a #rrggbb color to hue, saturation and lightness. */
function hexToHsl(hex: string): [number, number, number] {
  const body = hex.trim().replace(/^#/, "");
  const parsed = Number.parseInt(body, 16);
  if (body.length !== 6 || Number.isNaN(parsed)) return [40, 90, 60];
  const r = ((parsed >> 16) & 255) / 255;
  const g = ((parsed >> 8) & 255) / 255;
  const b = (parsed & 255) / 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];
}

/** Even lightness steps of one accent, darkest first, so bands never mix hues. */
function bandColors(accent: string, count: number): string[] {
  const [h, s, l] = hexToHsl(accent);
  const lo = Math.max(14, l - 28);
  const hi = Math.min(86, l + 20);
  const colors: string[] = [];
  for (let i = 0; i < count; i++) {
    const t = count === 1 ? 0.5 : i / (count - 1);
    colors.push("hsl(" + h.toFixed(1) + " " + s.toFixed(1) + "% " + (lo + (hi - lo) * t).toFixed(1) + "%)");
  }
  return colors;
}

/** Hard-stop repeating gradient: each band owns one fixed pixel slice, nothing blends. */
function bandGradient(colors: string[], angle: number, bandWidth: number): string {
  const stops: string[] = [];
  colors.forEach((color, i) => {
    stops.push(color + " " + i * bandWidth + "px");
    stops.push(color + " " + (i + 1) * bandWidth + "px");
  });
  return "repeating-linear-gradient(" + angle + "deg, " + stops.join(", ") + ")";
}

const count = computed(() => Math.max(1, Math.round(props.bands)));
const colors = computed(() => bandColors(props.accent, count.value));

const geometry = computed(() => {
  const rad = (props.angle * Math.PI) / 180;
  const axis = Math.abs(200 * Math.sin(rad)) + Math.abs(60 * Math.cos(rad));
  const bandWidth = axis / count.value;
  return { bandWidth, sx: Math.sin(rad) * bandWidth, sy: -Math.cos(rad) * bandWidth };
});

const gradient = computed(() => bandGradient(colors.value, props.angle, geometry.value.bandWidth));

const buttonStyle = computed(() => ({
  backgroundColor: colors.value[0],
  outlineColor: props.accent,
  "--sx": geometry.value.sx + "px",
  "--sy": geometry.value.sy + "px",
}));

const layerStyle = computed(() => ({
  background: gradient.value,
  inset: -geometry.value.bandWidth * 3 + "px",
}));
</script>

<template>
  <button
    type="button"
    class="banded"
    :class="{ 'banded--noslide': !slideOnHover }"
    :style="buttonStyle"
  >
    <span class="bands" aria-hidden="true" :style="layerStyle" />
    <span class="label"><slot /></span>
  </button>
</template>

<style scoped>
.banded {
  position: relative;
  display: inline-flex;
  height: 60px;
  min-width: 200px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 2rem;
  border: none;
  color: #fff;
  font: 700 17px/1.2 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.45);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.banded:hover,
.banded:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.4);
}
.banded:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.5);
}
.banded:focus-visible {
  outline: 2px solid;
  outline-offset: 4px;
}
.bands {
  position: absolute;
  pointer-events: none;
  transition: transform 200ms ease;
  will-change: transform;
}
.banded:hover .bands,
.banded:focus-visible .bands {
  transform: translate3d(var(--sx), var(--sy), 0);
}
.banded:active .bands {
  transform: translate3d(calc(var(--sx) * 0.5), calc(var(--sy) * 0.5), 0);
  transition-duration: 0ms;
}
.banded--noslide:hover .bands,
.banded--noslide:focus-visible .bands,
.banded--noslide:active .bands {
  transform: translate3d(0, 0, 0);
}
.label {
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .banded .bands {
    transition: none;
  }
  .banded:hover .bands,
  .banded:focus-visible .bands,
  .banded:active .bands {
    transform: translate3d(0, 0, 0);
  }
}
</style>

Nearby