"use client";

import { CardBlurTabs } from "./index";

export interface DemoProps {
  tabOneLabel?: string;
  tabTwoLabel?: string;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ tabOneLabel = "Account", tabTwoLabel = "Password", accent = "#FF6A1F" }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <div className="w-full max-w-sm">
        <CardBlurTabs tabOneLabel={tabOneLabel} tabTwoLabel={tabTwoLabel} accent={accent} />
      </div>
    </div>
  );
}

1d:T216e, 1e:T1b533,

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

const props = withDefaults(
  defineProps<{
    tabOneLabel?: string;
    tabTwoLabel?: string;
    accent?: string;
  }>(),
  { tabOneLabel: "Account", tabTwoLabel: "Password", accent: "#FF6A1F" },
);

const uid = `cbt-${Math.random().toString(36).slice(2, 9)}`;
const active = ref(0);
const panelHeight = ref(0);
const tabsEl = ref<HTMLDivElement | null>(null);
const tabEls: (HTMLButtonElement | null)[] = [null, null];
const panelEl = ref<HTMLDivElement | null>(null);
const pill = reactive({ left: 0, width: 0, ready: false });
let resizeObserver: ResizeObserver | null = null;
let tabsObserver: ResizeObserver | null = null;

const labels = computed(() => [props.tabOneLabel.trim() || "Account", props.tabTwoLabel.trim() || "Password"]);

/** Black or white, whichever reads better on top of the given #rrggbb accent. */
function inkOn(hex: string): string {
  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
  if (!match) return "#07090C";
  const packed = Number.parseInt(match[1], 16);
  const channel = (shift: number) => {
    const s = ((packed >> shift) & 255) / 255;
    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
  };
  const luminance = 0.2126 * channel(16) + 0.7152 * channel(8) + 0.0722 * channel(0);
  return luminance > 0.36 ? "#07090C" : "#FFFFFF";
}

const ink = computed(() => inkOn(props.accent));

function setTabEl(index: number, el: Element | null) {
  tabEls[index] = el as HTMLButtonElement | null;
}

function setPanelEl(el: Element | null) {
  panelEl.value = el as HTMLDivElement | null;
}

function measurePill() {
  const track = tabsEl.value;
  const btn = tabEls[active.value];
  if (!track || !btn) return;
  const trackRect = track.getBoundingClientRect();
  const btnRect = btn.getBoundingClientRect();
  pill.left = btnRect.left - trackRect.left;
  pill.width = btnRect.width;
  pill.ready = true;
}

function measure() {
  if (panelEl.value) panelHeight.value = panelEl.value.offsetHeight;
}

function watchPanel() {
  resizeObserver?.disconnect();
  if (!panelEl.value) return;
  resizeObserver = new ResizeObserver(measure);
  resizeObserver.observe(panelEl.value);
  measure();
}

function select(index: number, moveFocus: boolean) {
  active.value = index;
  nextTick(() => {
    watchPanel();
    measurePill();
    if (moveFocus) tabEls[index]?.focus();
  });
}

function onTabsKeydown(event: KeyboardEvent) {
  if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
  event.preventDefault();
  select(active.value === 0 ? 1 : 0, true);
}

onMounted(() => {
  nextTick(() => {
    watchPanel();
    measurePill();
    if (tabsEl.value) {
      tabsObserver = new ResizeObserver(measurePill);
      tabsObserver.observe(tabsEl.value);
    }
  });
});
onBeforeUnmount(() => {
  resizeObserver?.disconnect();
  tabsObserver?.disconnect();
});
</script>

<template>
  <div class="cbt" :style="{ '--cbt-accent': accent, '--cbt-ink': ink }">
    <div ref="tabsEl" class="cbt-tabs" role="tablist" aria-label="Panel sections" aria-orientation="horizontal" @keydown="onTabsKeydown">
      <span
        class="cbt-pill"
        aria-hidden="true"
        :style="{ left: pill.left + 'px', width: pill.width + 'px', opacity: pill.ready ? 1 : 0 }"
      ></span>
      <button
        v-for="(label, index) in labels"
        :key="index"
        :ref="(el) => setTabEl(index, el as Element | null)"
        type="button"
        role="tab"
        :id="`${uid}-tab-${index}`"
        :aria-selected="index === active"
        :aria-controls="`${uid}-panel-${index}`"
        :tabindex="index === active ? 0 : -1"
        class="cbt-tab"
        :class="{ 'cbt-tab--active': index === active }"
        @click="select(index, false)"
      >
        <span class="cbt-tab-label">{{ label }}</span>
      </button>
    </div>

    <div class="cbt-frame" :style="{ height: panelHeight ? panelHeight + 'px' : 'auto' }">
      <Transition name="cbt-blur">
        <div :key="active" :ref="(el) => setPanelEl(el as Element | null)" :id="`${uid}-panel-${active}`" role="tabpanel" :aria-labelledby="`${uid}-tab-${active}`" tabindex="0" class="cbt-panel">
          <template v-if="active === 0">
            <label class="cbt-field">
              Full name
              <input type="text" value="Priya Raman" />
            </label>
            <label class="cbt-field">
              Email
              <input type="email" value="priya@northfield.co" />
            </label>
            <button type="button" class="cbt-primary">Save changes</button>
          </template>
          <template v-else>
            <label class="cbt-field">
              Current password
              <input type="password" value="correcthorse82" />
            </label>
            <label class="cbt-field">
              New password
              <input type="password" placeholder="At least 8 characters" />
            </label>
            <button type="button" class="cbt-primary">Update password</button>
          </template>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.cbt {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
  overflow: hidden;
  font: 400 0.875rem/1.4 system-ui, sans-serif;
}
.cbt-tabs {
  position: relative;
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem;
  background: color-mix(in srgb, currentColor 4.5%, transparent);
}
.cbt-tab {
  position: relative;
  flex: 1;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 500;
  color: color-mix(in srgb, currentColor 50%, transparent);
  outline: none;
  transition: color 150ms ease;
  user-select: none;
}
.cbt-tab:hover {
  color: color-mix(in srgb, currentColor 75%, transparent);
}
.cbt-tab--active {
  color: var(--cbt-ink);
}
.cbt-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  outline-offset: 1px;
}
.cbt-pill {
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  z-index: 0;
  border-radius: 0.5rem;
  background: var(--cbt-accent);
  transition:
    left 320ms cubic-bezier(0.22, 1, 0.36, 1),
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease;
}
.cbt-tab-label {
  position: relative;
  z-index: 1;
}
.cbt-frame {
  position: relative;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  transition: height 300ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
.cbt-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  outline: none;
}
.cbt-blur-enter-active,
.cbt-blur-leave-active {
  transition:
    opacity 220ms cubic-bezier(0.22, 0.9, 0.3, 1),
    filter 220ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
.cbt-blur-enter-from,
.cbt-blur-leave-to {
  opacity: 0;
  filter: blur(6px);
}
.cbt-blur-leave-active {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
}
.cbt-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.cbt-field input {
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 400;
  color: currentColor;
  outline: none;
  transition: border-color 150ms ease;
}
.cbt-field input::placeholder {
  color: color-mix(in srgb, currentColor 35%, transparent);
}
.cbt-field input:focus-visible {
  border-color: color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
}
.cbt-primary {
  margin-top: 0.25rem;
  align-self: flex-start;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--cbt-accent);
  color: var(--cbt-ink);
  outline: none;
  transition: filter 150ms ease;
}
.cbt-primary:hover {
  filter: brightness(1.1);
}
.cbt-primary:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cbt-blur-enter-active,
  .cbt-blur-leave-active,
  .cbt-frame,
  .cbt-pill {
    transition-duration: 1ms;
  }
}
</style>

Nearby