@nex-ui/react/dist/cjs/theme/recipes/accordion.cjs

🎉 A beautiful, modern, and reliable React component library.

'use strict';

var system = require('@nex-ui/system');
var toSlots = require('../shared/toSlots.cjs');
var variants = require('../shared/variants.cjs');

const accordionRecipe = system.defineRecipe({
    base: {
        w: 'full'
    },
    variants: {
        variant: {
            outlined: {
                border: '1px solid {colors.gray.highlight}',
                borderRadius: 'md'
            },
            underlined: {}
        }
    }
});
const accordionItemRecipe = system.defineSlotRecipe({
    slots: {
        root: {},
        heading: {
            m: 0,
            minHeight: '12'
        },
        trigger: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            position: 'relative',
            boxSizing: 'border-box',
            w: 'full',
            minHeight: 'inherit',
            px: '4',
            fs: 'xl',
            fontWeight: 'normal',
            _focusVisibleRing: {
                outline: 'focusVisibleOutline'
            }
        },
        content: {
            px: '4',
            py: '2',
            fs: 16
        },
        indicator: {
            fs: '1.25rem',
            display: 'flex'
        }
    },
    variants: {
        disabled: toSlots.toSlots(variants.disabledVariant, 'root'),
        variant: {
            underlined: {
                root: {
                    borderBottom: '1px solid {colors.gray.highlight}'
                }
            },
            outlined: {
                root: {
                    ':not(:last-child)': {
                        borderBottom: '1px solid {colors.gray.highlight}'
                    }
                }
            }
        }
    }
});

exports.accordionItemRecipe = accordionItemRecipe;
exports.accordionRecipe = accordionRecipe;