Glass Tabs

/**
 * VibeBox Motion · Glass Tabs
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useId, useRef, useState, type KeyboardEvent } from "react";
import { cn } from "@/lib/utils";
import { Glass } from "@/lib/vibebox/glass";

export type GlassTab = { id: string; label: string };

export type GlassTabsProps = {
  /** The tabs, left to right. */
  items?: GlassTab[];
  /** The selected id, when you control it. */
  value?: string;
  /** The first selection when uncontrolled. */
  defaultValue?: string;
  onChange?: (id: string) => void;
  /** An accessible name for the tab list. */
  label?: string;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const DEFAULT_ITEMS: GlassTab[] = [
  { id: "day", label: "Day" },
  { id: "week", label: "Week" },
  { id: "month", label: "Month" },
  { id: "year", label: "Year" },
];

/**
 * A segmented control on glass. The selected thumb is a second, brighter glass pane that slides
 * with a small overshoot, by transform only; arrow keys, Home and End move the selection.
 */
export function GlassTabs({ items = DEFAULT_ITEMS, value, defaultValue, onChange, label = "Options", tone, className }: GlassTabsProps) {
  const [own, setOwn] = useState(defaultValue ?? items[0]?.id);
  const current = value ?? own;
  const index = Math.max(0, items.findIndex((item) => item.id === current));
  const base = useId();
  const buttons = useRef<(HTMLButtonElement | null)[]>([]);

  const select = (next: number) => {
    const target = items[(next + items.length) % items.length];
    if (!target) return;
    setOwn(target.id);
    onChange?.(target.id);
    buttons.current[(next + items.length) % items.length]?.focus();
  };
  const onKey = (event: KeyboardEvent) => {
    if (event.key === "ArrowRight" || event.key === "ArrowDown") select(index + 1);
    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") select(index - 1);
    else if (event.key === "Home") select(0);
    else if (event.key === "End") select(items.length - 1);
    else return;
    event.preventDefault();
  };

  return (
    <Glass data-vb="glass-tabs" tone={tone} radius={999} still className={cn("inline-block p-1", className)}>
      <div role="tablist" aria-label={label} onKeyDown={onKey} className="relative grid" style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}>
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-y-0 left-0 rounded-full border border-white/40 bg-gradient-to-b from-white/45 to-white/15 shadow-[inset_0_1px_0_rgb(255_255_255/0.7),0_6px_16px_-6px_rgb(0_0_0/0.45)] transition-transform duration-500 ease-[cubic-bezier(0.34,1.45,0.5,1)] motion-reduce:transition-none"
          style={{ width: `${100 / items.length}%`, transform: `translateX(${index * 100}%)` }}
        />
        {items.map((item, position) => (
          <button
            key={item.id}
            ref={(node) => {
              buttons.current[position] = node;
            }}
            id={`${base}-${item.id}`}
            role="tab"
            type="button"
            aria-selected={position === index}
            tabIndex={position === index ? 0 : -1}
            onClick={() => select(position)}
            className={cn(
              "relative z-10 h-9 rounded-full px-4 text-[0.88rem] font-medium transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
              position === index ? "opacity-100" : "opacity-65 hover:opacity-90",
            )}
          >
            {item.label}
          </button>
        ))}
      </div>
    </Glass>
  );
}

/**
 * VibeBox Motion · Glass Tabs
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-tabs.client";