"use client";

import { SheenUploadButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  busy?: boolean;
  sheenMs?: number;
  radius?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Upload",
  accent = "#9BE15D",
  busy = false,
  sheenMs = 600,
  radius = 6,
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <SheenUploadButton accent={accent} busy={busy} sheenMs={sheenMs} radius={radius} autoplayDelay={1200}>
        {label}
      </SheenUploadButton>
      <SheenUploadButton
        accent={accent}
        sheenMs={sheenMs}
        radius={radius}
        autoplayDelay={2600}
        className="border-white/20 brightness-95"
      >
        Attach
      </SheenUploadButton>
    </div>
  );
}

1d:T11dc, 1e:T1071f,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    busy?: boolean;
    busyLabel?: string;
    sheenMs?: number;
    radius?: number;
  }>(),
  { label: "Upload", accent: "#9BE15D", busy: false, busyLabel: "Uploading", sheenMs: 600, radius: 6 },
);

interface Sheen {
  id: number;
}

const sheens = ref<Sheen[]>([]);
const hopKey = ref(0);
let nextId = 0;

const faceStyle = computed<Record<string, string>>(() => ({
  "--sfb-accent": props.accent,
  "--sfb-sheen-ms": `${props.sheenMs}ms`,
  "border-radius": `${props.radius}px`,
}));

function press() {
  if (props.busy) return;
  const id = nextId++;
  sheens.value = [...sheens.value, { id }];
  hopKey.value += 1;
  window.setTimeout(() => {
    sheens.value = sheens.value.filter((s) => s.id !== id);
  }, props.sheenMs);
}
</script>

<template>
  <button
    type="button"
    class="sfb"
    :disabled="busy"
    :aria-busy="busy ? 'true' : undefined"
    :style="faceStyle"
    @click="press"
  >
    <span class="sfb__content">
      <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path d="M5 18.5C2.8 18.5 2.6 14.6 5.6 13.2C6.4 9.4 10 7.6 13.2 8.9C16.4 8.4 19 10.6 19 13.4C19 16.2 17 18.5 14.4 18.5Z" />
        <g v-if="hopKey > 0" :key="hopKey" class="sfb__arrow sfb__arrow--hop">
          <path d="M11.5 15.8V10.2" />
          <path d="M9.2 12.1L11.5 9.8L13.8 12.1" />
        </g>
        <g v-else class="sfb__arrow">
          <path d="M11.5 15.8V10.2" />
          <path d="M9.2 12.1L11.5 9.8L13.8 12.1" />
        </g>
      </svg>
      <span v-if="busy" class="sfb__label">
        {{ busyLabel }}
        <span class="sfb__dots" aria-hidden="true"><i>.</i><i>.</i><i>.</i></span>
      </span>
      <span v-else class="sfb__label">{{ label }}</span>
    </span>
    <span v-for="s in sheens" :key="s.id" aria-hidden="true" class="sfb__sheen" />
    <span v-if="busy" aria-hidden="true" class="sfb__sheen sfb__sheen--loop" />
  </button>
</template>

<style scoped>
.sfb {
  --sfb-accent: #9be15d;
  --sfb-sheen-ms: 600ms;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0.4375rem 0.875rem 0.4375rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 55%, rgb(0 0 0 / 0.14) 100%),
    var(--sfb-accent);
  color: #fff;
  font: 600 0.8125rem/1.2 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 0 1px var(--sfb-accent);
  transition:
    box-shadow 100ms ease,
    translate 100ms ease,
    filter 140ms ease;
}
.sfb:hover:not(:disabled) {
  filter: brightness(1.1);
}
.sfb:active:not(:disabled) {
  translate: 0 1px;
  box-shadow: inset 0 0 0 1px var(--sfb-accent);
}
.sfb:focus-visible {
  outline: 2px solid var(--sfb-accent);
  outline-offset: 2px;
}
.sfb:disabled {
  cursor: progress;
  filter: brightness(0.92);
}
.sfb__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.sfb__dots {
  display: inline-flex;
}
.sfb__dots i {
  font-style: normal;
  animation: sfb-dot 1.05s ease-in-out infinite;
}
.sfb__dots i:nth-child(2) {
  animation-delay: 0.18s;
}
.sfb__dots i:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes sfb-dot {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
}
.sfb__sheen {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 42%;
  pointer-events: none;
  transform: translateX(-120%) skewX(-16deg);
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0) 100%);
  animation: sfb-sweep var(--sfb-sheen-ms) cubic-bezier(0.45, 0, 0.35, 1) forwards;
}
.sfb__sheen--loop {
  animation-iteration-count: infinite;
  animation-delay: 0.35s;
}
@keyframes sfb-sweep {
  to {
    transform: translateX(310%) skewX(-16deg);
  }
}
.sfb__arrow--hop {
  animation: sfb-hop 0.45s cubic-bezier(0.3, 0.7, 0.3, 1);
}
@keyframes sfb-hop {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sfb__sheen,
  .sfb__arrow--hop,
  .sfb__dots i {
    animation: none;
  }
}
</style>

Nearby