@react-three/uikit-default/dist/tabs.js

Default (shadcn) kit for @react-three/uikit

import { Container, DefaultProperties } from '@react-three/uikit';
import React, { createContext, forwardRef, useContext, useMemo, useState } from 'react';
import { borderRadius, colors } from './theme.js';
const TabsContext = createContext({});
export const Tabs = forwardRef(({ value: providedValue, onValueChange, defaultValue, children, ...props }, ref) => {
    const [uncontrolled, setUncontrolled] = useState(defaultValue);
    const contextValue = useMemo(() => {
        if (providedValue == null) {
            return {
                value: uncontrolled,
                setValue: (value) => {
                    setUncontrolled(value);
                    onValueChange?.(value);
                },
            };
        }
        return {
            value: providedValue,
            setValue: onValueChange,
        };
    }, [uncontrolled, onValueChange, providedValue]);
    return (React.createElement(Container, { flexDirection: "column", ref: ref, ...props },
        React.createElement(TabsContext.Provider, { value: contextValue }, children)));
});
export const TabsList = forwardRef(({ children, ...props }, ref) => {
    return (React.createElement(Container, { height: 40, flexDirection: "row", alignItems: "center", borderRadius: borderRadius.md, backgroundColor: colors.muted, padding: 4, flexShrink: 0, ref: ref, ...props },
        React.createElement(DefaultProperties, { color: colors.mutedForeground }, children)));
});
export const TabsTrigger = forwardRef(({ children, value, disabled = false, ...props }, ref) => {
    const { setValue, value: current } = useContext(TabsContext);
    const active = value === current;
    return (React.createElement(Container, { onClick: disabled ? undefined : (e) => setValue?.(value), cursor: disabled ? undefined : 'pointer', flexDirection: "row", alignItems: "center", borderRadius: borderRadius.sm, paddingX: 12, backgroundOpacity: disabled ? 0.5 : undefined, backgroundColor: active ? colors.background : undefined, paddingY: 6, justifyContent: "center", ref: ref, ...props },
        React.createElement(DefaultProperties, { opacity: disabled ? 0.5 : undefined, color: active ? colors.foreground : undefined, fontSize: 14, fontWeight: "medium", lineHeight: 20, wordBreak: "keep-all" }, children)));
});
export const TabsContent = forwardRef(({ value, ...props }, ref) => {
    const { value: current } = useContext(TabsContext);
    if (value != current) {
        return null;
    }
    return React.createElement(Container, { marginTop: 8, ref: ref, ...props });
});