"use client";

import { PeekInsideFolder } from "./index";

export interface DemoProps {
  accentColor?: string;
  size?: number;
  open?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#7C5CFF", size = 1, open = false }: DemoProps) {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <PeekInsideFolder accentColor={accentColor} size={size} open={open} />
      <p className="text-xs text-current/45">Invoice, sketch, and release notes tucked inside</p>
    </div>
  );
}

1d:T1952, 1e:T1624b,

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

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    size?: number;
    open?: boolean;
  }>(),
  { accentColor: "#7C5CFF", size: 1, open: false },
);

interface Offset {
  x: number;
  y: number;
}

interface PaperSpec {
  bg: string;
  closedX: number;
  closedY: number;
  closedRotate: number;
  openX: number;
  openY: number;
  openRotate: number;
}

const PAPERS: PaperSpec[] = [
  { bg: "#ECEAE2", closedX: 16, closedY: 26, closedRotate: -7, openX: -4, openY: -30, openRotate: -17 },
  { bg: "#FFFFFF", closedX: 24, closedY: 22, closedRotate: 0, openX: 24, openY: -38, openRotate: 0 },
  { bg: "#E8ECF3", closedX: 32, closedY: 26, closedRotate: 7, openX: 52, openY: -30, openRotate: 17 },
];

function hexToRgb(hex: string): [number, number, number] {
  const match = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  const int = match ? Number.parseInt(match[1], 16) : 0x7c5cff;
  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
}

function mix(hex: string, target: [number, number, number], t: number): string {
  const [r, g, b] = hexToRgb(hex);
  const [tr, tg, tb] = target;
  return `rgb(${Math.round(r + (tr - r) * t)}, ${Math.round(g + (tg - g) * t)}, ${Math.round(b + (tb - b) * t)})`;
}

const open = ref(props.open);
const hovered = ref(false);
const nudges = reactive<Offset[]>([
  { x: 0, y: 0 },
  { x: 0, y: 0 },
  { x: 0, y: 0 },
]);

const backColor = computed(() => mix(props.accentColor, [0, 0, 0], 0.42));
const tabColor = computed(() => mix(props.accentColor, [0, 0, 0], 0.32));

watch(open, (value) => {
  if (!value) {
    nudges.forEach((n) => {
      n.x = 0;
      n.y = 0;
    });
  }
});

watch(
  () => props.open,
  (value) => {
    open.value = value;
  },
);

function toggle() {
  open.value = !open.value;
}

function onPaperMove(index: number, event: PointerEvent) {
  if (!open.value) return;
  const el = event.currentTarget as HTMLElement;
  const rect = el.getBoundingClientRect();
  const dx = rect.left + rect.width / 2 - event.clientX;
  const dy = rect.top + rect.height / 2 - event.clientY;
  const dist = Math.hypot(dx, dy) || 1;
  const push = 9;
  nudges[index].x = (dx / dist) * push;
  nudges[index].y = (dy / dist) * push;
}

function resetPaper(index: number) {
  nudges[index].x = 0;
  nudges[index].y = 0;
}

function paperTransform(paper: PaperSpec, index: number): string {
  const x = (open.value ? paper.openX : paper.closedX) + nudges[index].x;
  const y = (open.value ? paper.openY : paper.closedY) + nudges[index].y;
  const rotate = open.value ? paper.openRotate : paper.closedRotate;
  return `translate(${x}px, ${y}px) rotate(${rotate}deg)`;
}

function flapTransform(side: "left" | "right"): string {
  const rotate = open.value ? (side === "left" ? -18 : 18) : 0;
  const y = open.value ? 6 : 0;
  const scaleY = open.value ? 0.92 : 1;
  return `translateY(${y}px) rotate(${rotate}deg) scaleY(${scaleY})`;
}
</script>

<template>
  <div class="peek-folder-wrap" :style="{ width: 108 * props.size + 'px', height: 84 * props.size + 'px' }">
    <button
      type="button"
      class="peek-folder"
      :aria-expanded="open"
      :aria-label="open ? 'Close folder' : 'Open folder'"
      :style="{ transform: `scale(${props.size})`, '--peek-ring': props.accentColor }"
      @click="toggle"
      @pointerenter="hovered = true"
      @pointerleave="hovered = false"
    >
      <div class="peek-folder__group" :class="{ 'peek-folder__group--lift': hovered && !open }">
        <div class="peek-folder__shadow" :style="{ opacity: hovered && !open ? 0.5 : 0.32 }" />
        <div class="peek-folder__tab" :style="{ background: tabColor }" />
        <div class="peek-folder__body" :style="{ background: backColor }" />

        <div
          v-for="(paper, index) in PAPERS"
          :key="index"
          class="peek-folder__paper"
          :style="{ background: paper.bg, zIndex: index === 1 ? 5 : 4, transform: paperTransform(paper, index) }"
          @pointermove="onPaperMove(index, $event)"
          @pointerleave="resetPaper(index)"
        />

        <div class="peek-folder__flap peek-folder__flap--left" :style="{ background: props.accentColor, zIndex: open ? 3 : 6, transform: flapTransform('left') }" />
        <div class="peek-folder__flap peek-folder__flap--right" :style="{ background: props.accentColor, zIndex: open ? 3 : 6, transform: flapTransform('right') }" />
      </div>
    </button>
  </div>
</template>

<style scoped>
.peek-folder-wrap {
  position: relative;
}
.peek-folder {
  position: absolute;
  left: 0;
  top: 0;
  width: 108px;
  height: 84px;
  transform-origin: top left;
  cursor: pointer;
  touch-action: manipulation;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 12px;
  outline: none;
}
.peek-folder:focus-visible {
  box-shadow: 0 0 0 2px var(--peek-ring, #7c5cff);
}
.peek-folder__group {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peek-folder__group--lift {
  transform: translateY(-4px);
}
.peek-folder__shadow {
  position: absolute;
  left: 16px;
  top: 76px;
  width: 76px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.32);
  filter: blur(3px);
  transition: opacity 220ms ease;
}
.peek-folder__tab {
  position: absolute;
  left: 10px;
  top: 6px;
  width: 40px;
  height: 14px;
  border-radius: 6px 6px 0 0;
  z-index: 1;
}
.peek-folder__body {
  position: absolute;
  left: 4px;
  top: 16px;
  width: 100px;
  height: 64px;
  border-radius: 10px;
  z-index: 2;
}
.peek-folder__paper {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 44px;
  border-radius: 6px;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peek-folder__flap {
  position: absolute;
  top: 30px;
  width: 50px;
  height: 50px;
  box-shadow: inset 0 8px 12px -8px rgba(0, 0, 0, 0.35);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.peek-folder__flap--left {
  left: 4px;
  border-radius: 4px 0 0 10px;
  transform-origin: 0% 100%;
}
.peek-folder__flap--right {
  left: 54px;
  border-radius: 0 4px 10px 0;
  transform-origin: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .peek-folder__group,
  .peek-folder__shadow,
  .peek-folder__paper,
  .peek-folder__flap {
    transition-duration: 1ms;
  }
}
</style>

Nearby