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

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty/index.js';
import { useCombinedRefs } from '../../utils/react/index.js';
const SuffixElement = tasty({
    element: 'Suffix',
    styles: {
        position: 'absolute',
        display: 'grid',
        placeContent: 'stretch',
        placeItems: 'center',
        flow: 'column',
        gap: 0,
        right: '$suffix-gap',
        top: '$suffix-gap',
        bottom: '$suffix-gap',
        color: '#dark-02',
        height: '(100% - (2 * $suffix-gap))',
    },
});
export const Suffix = forwardRef(function Suffix(allProps, outerRef) {
    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
    const styles = extractStyles(props, CONTAINER_STYLES);
    const ref = useCombinedRefs(outerRef);
    useEffect(() => {
        if (ref && ref.current && onWidthChange) {
            onWidthChange(ref.current.offsetWidth);
        }
    }, [children, ref, onWidthChange]);
    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
            '--suffix-gap': parseStyle(outerGap).output,
        }, children: children }));
});

        