"use client";

import { CountingFollowChip } from "./index";

export interface DemoProps {
  accent?: string;
  label?: string;
  count?: number;
  compact?: boolean;
  duration?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF4D8D", label = "Follow", count = 1284, compact = true, duration = 450 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5 p-8">
      <CountingFollowChip accent={accent} label={label} count={count} compact={compact} duration={duration} />
      <CountingFollowChip accent={accent} label={label} count={count} compact={!compact} duration={duration} />
    </div>
  );
}

1d:T1af0, 1e:T18855,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    label?: string;
    count?: number;
    compact?: boolean;
    duration?: number;
  }>(),
  { accent: "#FF4D8D", label: "Follow", count: 1284, compact: true, duration: 450 },
);

interface RollPlan {
  id: number;
  from: string;
  to: string;
  dir: "up" | "down";
  major: boolean;
}

const value = ref(props.count);
const on = ref(false);
const roll = ref<RollPlan | null>(null);
let rollId = 0;

function isDigit(ch: string | undefined): boolean {
  return ch !== undefined && ch >= "0" && ch <= "9";
}

function formatCount(n: number, compact: boolean): string {
  if (compact && n >= 1000) return `${(Math.round(n / 100) / 10).toFixed(1)}k`;
  return String(Math.max(0, n));
}

function isDigitRoll(from: string, to: string): boolean {
  if (from.length !== to.length) return false;
  return from.split("").every((c, i) => c === to[i] || (isDigit(c) && isDigit(to[i])));
}

const text = computed(() => formatCount(value.value, props.compact));
const chipStyle = computed(() => `--cfc-accent: ${props.accent}; --cfc-duration: ${props.duration}ms`);

function rollingAt(i: number): boolean {
  return roll.value !== null && !roll.value.major && roll.value.from[i] !== text.value[i] && isDigit(roll.value.from[i]);
}

function toggle(): void {
  const goingOn = !on.value;
  const prev = value.value;
  const step = props.compact && prev >= 1000 ? 100 : 1;
  const next = goingOn ? prev + step : Math.max(0, prev - step);
  const from = formatCount(prev, props.compact);
  const to = formatCount(next, props.compact);
  rollId += 1;
  roll.value = { id: rollId, from, to, dir: goingOn ? "up" : "down", major: !isDigitRoll(from, to) };
  on.value = goingOn;
  value.value = next;
}
</script>

<template>
  <button type="button" class="cfc" :class="{ 'cfc--on': on }" :style="chipStyle" :aria-pressed="on" @click="toggle">
    <span class="cfc-row">
      <span class="cfc-label">{{ label }}</span>
      <span aria-hidden="true" class="cfc-rule"></span>
      <span aria-hidden="true" class="cfc-count">
        <template v-if="roll && roll.major">
          <span :key="roll.id" class="cfc-major">
            <span class="cfc-major__from">{{ roll.from }}</span>
            <span class="cfc-major__to">{{ roll.to }}</span>
          </span>
        </template>
        <template v-else>
          <template v-for="(ch, i) in text" :key="roll ? roll.id + ':' + i : 'init:' + i">
            <span v-if="roll && !roll.major && rollingAt(i)" class="cfc-window">
              <span class="cfc-col" :class="roll.dir === 'up' ? 'cfc-col--up' : 'cfc-col--down'">
                <span class="cfc-d">{{ roll.dir === 'up' ? roll.from[i] : ch }}</span>
                <span class="cfc-d">{{ roll.dir === 'up' ? ch : roll.from[i] }}</span>
              </span>
            </span>
            <span v-else class="cfc-ch" :class="isDigit(ch) ? 'cfc-ch--d' : ''">{{ ch }}</span>
          </template>
        </template>
      </span>
    </span>
    <span aria-hidden="true" class="cfc-glyph">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3.5" y="3.5" width="17" height="17" rx="5" />
        <circle cx="12" cy="12" r="4.25" />
        <circle cx="17.4" cy="6.6" r="1.5" fill="currentColor" stroke="none" />
      </svg>
    </span>
    <span class="cfc-sr" aria-live="polite">{{ text }} followers</span>
  </button>
</template>

<style scoped>
.cfc {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 2em;
  padding: 0 2.1em 0 1.1em;
  border: 1px solid var(--cfc-accent);
  border-radius: 6px;
  background: transparent;
  color: var(--cfc-accent);
  font: 600 0.9375rem/1 system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.cfc:hover,
.cfc:focus-visible,
.cfc--on {
  background: var(--cfc-accent);
  color: #fff;
}
.cfc:focus-visible {
  outline: 2px solid var(--cfc-accent);
  outline-offset: 2px;
}
.cfc-row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  line-height: 1;
}
.cfc-rule {
  width: 1px;
  height: 1.1em;
  background: currentColor;
  opacity: 0.7;
}
.cfc-count {
  display: flex;
  align-items: center;
  height: 1em;
  font-variant-numeric: tabular-nums;
}
.cfc-ch {
  display: inline-block;
  height: 1em;
  line-height: 1;
}
.cfc-ch--d {
  width: 1ch;
  text-align: center;
}
.cfc-window {
  position: relative;
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
}
.cfc-col {
  display: block;
}
.cfc-col--up {
  animation: cfc-roll-up var(--cfc-duration) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.cfc-col--down {
  animation: cfc-roll-down var(--cfc-duration) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes cfc-roll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1em);
  }
}
@keyframes cfc-roll-down {
  from {
    transform: translateY(-1em);
  }
  to {
    transform: translateY(0);
  }
}
.cfc-d {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.cfc-major {
  position: relative;
  display: inline-block;
}
.cfc-major__from {
  position: absolute;
  inset: 0;
  text-align: center;
  animation: cfc-fade-out var(--cfc-duration) ease forwards;
}
.cfc-major__to {
  display: block;
  animation: cfc-fade-in var(--cfc-duration) ease forwards;
}
@keyframes cfc-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes cfc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cfc-glyph {
  position: absolute;
  right: 0.6em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  transform: translateX(1.25em) rotate(90deg) scale(0.5);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
  pointer-events: none;
}
.cfc:hover .cfc-glyph,
.cfc:focus-visible .cfc-glyph,
.cfc--on .cfc-glyph {
  transform: none;
  opacity: 1;
}
.cfc-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cfc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .cfc-col--up,
  .cfc-col--down {
    animation: none;
  }
  .cfc-window {
    overflow: visible;
  }
  .cfc-col {
    position: relative;
    height: 1em;
  }
  .cfc-col--up .cfc-d:first-child,
  .cfc-col--down .cfc-d:last-child {
    position: absolute;
    inset: 0;
    animation: cfc-fade-out var(--cfc-duration) ease forwards;
  }
  .cfc-col--up .cfc-d:last-child,
  .cfc-col--down .cfc-d:first-child {
    position: absolute;
    inset: 0;
    animation: cfc-fade-in var(--cfc-duration) ease forwards;
  }
}
</style>

Nearby