/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.98.7
 * Released under the MIT license.
 */

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useSeparator } from 'react-aria';
import { BASE_STYLES, COLOR_STYLES, filterBaseProps, OUTER_STYLES, tasty, } from '../../tasty';
import { useCombinedRefs, useSlotProps } from '../../utils/react';
const DividerElement = tasty({
    styles: {
        gridArea: 'divider',
        display: {
            '': 'block',
            text: 'grid',
        },
        gridColumns: '1fr auto 1fr',
        placeItems: 'center stretch',
        gap: '1x',
        preset: 'c1',
        height: {
            '': '1bw 1bw',
            text: 'auto',
        },
        fill: {
            '': '#light-border',
            text: 'none',
        },
        border: '0',
        margin: '0',
        Line: {
            height: '1bw 1bw',
            fill: '#light-border',
        },
    },
    styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
});
export const Divider = forwardRef(function Divider(props, ref) {
    const { mods, children, styles, ...otherProps } = useSlotProps(props, 'divider');
    // Determine element type based on whether divider has content.
    const elementType = children ? 'div' : 'hr';
    const internalRef = useRef(null);
    const combinedRef = useCombinedRefs(ref, internalRef);
    const { separatorProps } = useSeparator({ elementType });
    return (_jsx(DividerElement, { ...separatorProps, as: elementType, mods: {
            text: !!children,
            ...mods,
        }, ...filterBaseProps(otherProps, { eventProps: true }), ref: combinedRef, styles: styles, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }), _jsx("div", { children: children }), _jsx("div", { "data-element": "Line" })] })) }));
});

        