@furystack/shades-common-components/esm/components/accordion/accordion.js

Common UI components for FuryStack Shades

import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
let nextAccordionId = 0;
/**
 * A container component that groups AccordionItem children with consistent styling.
 *
 * Provides a bordered or elevated surface with rounded corners. Use it to wrap
 * multiple AccordionItem components into a visually cohesive group.
 *
 * @example
 * ```tsx
 * <Accordion>
 *   <AccordionItem title="Section 1">Content 1</AccordionItem>
 *   <AccordionItem title="Section 2">Content 2</AccordionItem>
 * </Accordion>
 * ```
 */
export const Accordion = Shade({
    customElementName: 'shade-accordion',
    css: {
        display: 'flex',
        fontFamily: cssVariableTheme.typography.fontFamily,
        flexDirection: 'column',
        borderRadius: cssVariableTheme.shape.borderRadius.md,
        overflow: 'hidden',
        '&[data-variant="outlined"], &:not([data-variant])': {
            border: `1px solid color-mix(in srgb, ${cssVariableTheme.text.secondary} 20%, transparent)`,
        },
        '&[data-variant="elevation"]': {
            boxShadow: cssVariableTheme.shadows.md,
            background: cssVariableTheme.background.paper,
        },
    },
    render: ({ props, useHostProps, children, useState }) => {
        const [navSectionId] = useState('navSectionId', String(nextAccordionId++));
        useHostProps({
            'data-variant': props.variant || undefined,
            'data-nav-section': props.navSection ?? `accordion-${navSectionId}`,
        });
        return createComponent(createComponent, null, children);
    },
});
//# sourceMappingURL=accordion.js.map