import { useEffect, useState } from "react";
import { useId } from "../utils-external/index.js";
import { useControllableState } from "../utils/hooks/index.js";
export function useTabs({ onChange, value, defaultValue = "", id, }) {
    const [focusedValue, setFocusedValue] = useState(defaultValue);
    const [selectedValue, setSelectedValue] = useControllableState({
        defaultValue,
        value,
        onChange,
    });
    /* Sync focused `value` with controlled `selectedValue` */
    useEffect(() => {
        if (value != null) {
            setFocusedValue(value); // eslint-disable-line react-hooks/set-state-in-effect
        }
    }, [value]);
    /* Scope ids for better tracking */
    const uuid = useId();
    return {
        id: `tabs-${id !== null && id !== void 0 ? id : uuid}`,
        selectedValue,
        setSelectedValue,
        focusedValue,
        setFocusedValue,
        makeTabId,
        makeTabPanelId,
    };
}
function makeTabId(id, value) {
    return `${id}--tab-${value}`;
}
function makeTabPanelId(id, value) {
    return `${id}--tabpanel-${value}`;
}
//# sourceMappingURL=useTabs.js.map