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

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

import React, { createContext, forwardRef, useContext, useState } from 'react';
import { Container, DefaultProperties } from '@react-three/uikit';
import { ChevronDown } from '@react-three/uikit-lucide';
const AccordionContext = createContext(null);
export function Accordion({ children, ...props }) {
    const stateHandler = useState(undefined);
    return (React.createElement(Container, { flexDirection: "column", ...props },
        React.createElement(AccordionContext.Provider, { value: stateHandler }, children)));
}
const AccordionItemContext = createContext('');
export const AccordionItem = forwardRef(({ children, ...props }, ref) => {
    const [value, setValue] = useContext(AccordionContext);
    const isSelected = props.value === value;
    return (React.createElement(Container, { cursor: "pointer", flexDirection: "column", onClick: () => setValue(isSelected ? undefined : props.value), borderBottomWidth: 1, ref: ref, ...props },
        React.createElement(AccordionItemContext.Provider, { value: props.value }, children)));
});
export const AccordionTrigger = forwardRef(({ children, ...props }, ref) => {
    const itemValue = useContext(AccordionItemContext);
    const [value] = useContext(AccordionContext);
    const isSelected = itemValue === value;
    return (React.createElement(Container, { flexDirection: "row", flexGrow: 1, flexShrink: 1, alignItems: "center", justifyContent: "space-between", paddingY: 16, ref: ref, ...props },
        React.createElement(DefaultProperties, { fontWeight: "medium" }, children),
        React.createElement(ChevronDown, { transformRotateZ: isSelected ? 180 : 0, width: 16, height: 16, flexShrink: 0 })));
});
export const AccordionContent = forwardRef(({ children, ...props }, ref) => {
    const itemValue = useContext(AccordionItemContext);
    const [value] = useContext(AccordionContext);
    if (value != itemValue) {
        return null;
    }
    return (React.createElement(Container, { overflow: "hidden", ref: ref, ...props },
        React.createElement(Container, { paddingBottom: 16 },
            React.createElement(DefaultProperties, { fontSize: 14 }, children))));
});