"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef } from "react";
import { cn } from "@stigmer/theme";
const SCOPE_OPTIONS = [
    { value: "org", label: "Org" },
    { value: "all", label: "All" },
];
/**
 * Segmented control for toggling resource scope between "Org"
 * (only the current organization's resources) and "All"
 * (including public and platform resources).
 *
 * Designed for use in Library list headers alongside a search input.
 * The component is controlled — the consumer owns the `value` state
 * and handles persistence (e.g., localStorage).
 *
 * Implements the WAI-ARIA Radio Group pattern with roving tabindex
 * for keyboard navigation: Arrow Left/Right moves focus and selects,
 * Tab enters/exits the group.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * const [scope, setScope] = useState<ResourceListScope>("org");
 *
 * <ScopeToggle value={scope} onChange={setScope} />
 * ```
 *
 * @see {@link ResourceListScope} for the type used by data hooks
 * @see {@link useAgentList}, {@link useSkillList}, {@link useMcpServerList}
 */
export function ScopeToggle({ value, onChange, disabled = false, className, }) {
    const optionRefs = useRef([]);
    const handleKeyDown = useCallback((e, index) => {
        let nextIndex = null;
        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
            e.preventDefault();
            nextIndex = (index + 1) % SCOPE_OPTIONS.length;
        }
        else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
            e.preventDefault();
            nextIndex =
                (index - 1 + SCOPE_OPTIONS.length) % SCOPE_OPTIONS.length;
        }
        if (nextIndex !== null) {
            optionRefs.current[nextIndex]?.focus();
            onChange(SCOPE_OPTIONS[nextIndex].value);
        }
    }, [onChange]);
    return (_jsx("div", { role: "radiogroup", "aria-label": "Resource scope", "aria-disabled": disabled || undefined, className: cn("inline-flex rounded-md bg-muted p-0.5", disabled && "pointer-events-none opacity-50", className), children: SCOPE_OPTIONS.map((option, index) => {
            const isSelected = value === option.value;
            return (_jsx("button", { ref: (el) => {
                    optionRefs.current[index] = el;
                }, type: "button", role: "radio", "aria-checked": isSelected, tabIndex: isSelected ? 0 : -1, disabled: disabled, onClick: () => onChange(option.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn("cursor-pointer rounded-sm px-3 py-1 text-xs font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isSelected
                    ? "bg-background text-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground"), children: option.label }, option.value));
        }) }));
}
//# sourceMappingURL=ScopeToggle.js.map