"use client";

import * as React from "react";
import { RockingArchiveTintPill } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  tintStrength?: number;
  rockDegrees?: number;
  rockSpeed?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  label = "Archive",
  accent = "#2F6BFF",
  tintStrength = 0.15,
  rockDegrees = 8,
  rockSpeed = 1,
}: DemoProps) {
  const [preview, setPreview] = React.useState(false);

  React.useEffect(() => {
    const id = window.setInterval(() => setPreview((value) => !value), 2600);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <RockingArchiveTintPill accent={accent} tintStrength={tintStrength} rockDegrees={rockDegrees} rockSpeed={rockSpeed} active={preview}>
        {label}
      </RockingArchiveTintPill>
      <RockingArchiveTintPill accent={accent} tintStrength={tintStrength} rockDegrees={rockDegrees} rockSpeed={rockSpeed}>
        Move to vault
      </RockingArchiveTintPill>
    </div>
  );
}

1e:Tf9b, 1f:Td343,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    tintStrength?: number;
    rockDegrees?: number;
    rockSpeed?: number;
    active?: boolean;
  }>(),
  { accent: "#2F6BFF", tintStrength: 0.15, rockDegrees: 8, rockSpeed: 1, active: false },
);

const hovered = ref(false);
const pressed = ref(false);
const focused = ref(false);

function withAlpha(hex: string, alpha: number): string {
  const raw = hex.replace("#", "");
  const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
  const value = Number.parseInt(full, 16);
  const r = (value >> 16) & 255;
  const g = (value >> 8) & 255;
  const b = value & 255;
  return `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(3)})`;
}

const isActive = computed(() => hovered.value || focused.value || props.active);
const rocking = computed(() => isActive.value && !pressed.value);
const wash = computed(() => {
  const base = props.tintStrength;
  const level = pressed.value ? Math.min(1, base * 2 + 0.12) : isActive.value ? Math.min(1, base * 2) : base;
  return withAlpha(props.accent, level);
});

function leave() {
  hovered.value = false;
  pressed.value = false;
}
function focus(event: FocusEvent) {
  focused.value = (event.currentTarget as HTMLElement).matches(":focus-visible");
}
function blur() {
  focused.value = false;
  pressed.value = false;
}
function keyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = true;
}
function keyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}
</script>

<template>
  <button
    type="button"
    class="rock-pill"
    :class="{ 'rock-pill--rocking': rocking, 'rock-pill--pressed': pressed }"
    :style="{
      '--accent': accent,
      '--rock-deg': rockDegrees + 'deg',
      '--rock-duration': 1.6 / rockSpeed + 's',
      backgroundColor: wash,
      color: accent
    }"
    @pointerenter="hovered = true"
    @pointerleave="leave"
    @pointerdown="pressed = true"
    @pointerup="pressed = false"
    @pointercancel="pressed = false"
    @focus="focus"
    @blur="blur"
    @keydown="keyDown"
    @keyup="keyUp"
  >
    <span class="rock-pill__glyph" aria-hidden="true">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <g class="rock-pill__lid"><path d="M4.5 7.25h9.5" /></g>
        <rect x="4.5" y="10.75" width="15" height="8.5" rx="2.25" />
      </svg>
    </span>
    <span class="rock-pill__label"><slot>Archive</slot></span>
  </button>
</template>

<style scoped>
.rock-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px 0 24px;
  border: none;
  border-radius: 999px;
  font: 500 17px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: background-color 180ms ease;
}
.rock-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rock-pill__glyph {
  position: relative;
  display: inline-flex;
  transform-origin: 50% 100%;
}
.rock-pill__lid {
  transition: transform 120ms ease;
}
.rock-pill--rocking .rock-pill__glyph {
  animation: rock-pill-rock var(--rock-duration) ease-in-out infinite;
}
.rock-pill--pressed .rock-pill__glyph {
  animation: none;
  transform: rotate(0deg);
}
.rock-pill--pressed .rock-pill__lid {
  transform: translateY(1px);
}
@keyframes rock-pill-rock {
  0% {
    transform: rotate(calc(-1 * var(--rock-deg)));
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(var(--rock-deg));
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(calc(-1 * var(--rock-deg)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .rock-pill__glyph {
    animation: none !important;
  }
}
</style>

Nearby