"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useId, useRef } from "react";
import { cn } from "@stigmer/theme";
/**
 * Accessible tabbed panel with badge support.
 *
 * Implements the WAI-ARIA Tabs pattern:
 * - `role="tablist"` / `role="tab"` / `role="tabpanel"`
 * - Arrow-key navigation (Left/Right), Home/End to jump
 * - `aria-selected`, `aria-controls`, `aria-labelledby` wiring
 *
 * All visual properties flow through `--stgm-*` design tokens.
 * No external dependencies — safe for platform builder embedding.
 *
 * @internal — not yet part of the public `@stigmer/react` API.
 */
export function Tabs({ tabs, activeTab, onTabChange, children, "aria-label": ariaLabel, className, }) {
    const instanceId = useId();
    const tabRefsMap = useRef(new Map());
    const tabId = (id) => `${instanceId}-tab-${id}`;
    const panelId = (id) => `${instanceId}-panel-${id}`;
    const focusTab = useCallback((id) => {
        tabRefsMap.current.get(id)?.focus();
        onTabChange(id);
    }, [onTabChange]);
    const handleKeyDown = useCallback((e) => {
        const currentIndex = tabs.findIndex((t) => t.id === activeTab);
        if (currentIndex === -1)
            return;
        let nextIndex = null;
        switch (e.key) {
            case "ArrowRight":
                nextIndex = (currentIndex + 1) % tabs.length;
                break;
            case "ArrowLeft":
                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
                break;
            case "Home":
                nextIndex = 0;
                break;
            case "End":
                nextIndex = tabs.length - 1;
                break;
            default:
                return;
        }
        e.preventDefault();
        focusTab(tabs[nextIndex].id);
    }, [tabs, activeTab, focusTab]);
    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsx("div", { role: "tablist", "aria-label": ariaLabel, onKeyDown: handleKeyDown, className: "flex border-b border-border", children: tabs.map((tab) => {
                    const isActive = tab.id === activeTab;
                    return (_jsxs("button", { ref: (el) => {
                            if (el)
                                tabRefsMap.current.set(tab.id, el);
                            else
                                tabRefsMap.current.delete(tab.id);
                        }, id: tabId(tab.id), role: "tab", type: "button", "aria-selected": isActive, "aria-controls": panelId(tab.id), tabIndex: isActive ? 0 : -1, onClick: () => onTabChange(tab.id), "data-cursor-target": `tab-${tab.id}`, className: cn("relative inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", isActive
                            ? "text-foreground"
                            : "text-muted-foreground hover:text-foreground"), children: [tab.label, tab.badge != null && tab.badge > 0 && (_jsx("span", { className: cn("inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none", isActive
                                    ? "bg-primary-subtle text-primary"
                                    : "bg-muted text-muted-foreground"), children: tab.badge })), isActive && (_jsx("span", { className: "absolute inset-x-0 -bottom-px h-0.5 bg-primary", "aria-hidden": "true" }))] }, tab.id));
                }) }), _jsx("div", { id: panelId(activeTab), role: "tabpanel", "aria-labelledby": tabId(activeTab), tabIndex: 0, className: "focus-visible:outline-none", children: children })] }));
}
//# sourceMappingURL=Tabs.js.map