"use client";
import { jsx } from 'react/jsx-runtime';
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { createContext, useContext } from 'react';
import styles from './skeleton.module.css.js';

const SkeletonContext = createContext(null);
const SkeletonBase = (props) => {
    const contextProps = useContext(SkeletonContext);
    const { baseColor, highlightColor, width, height = 'var(--rs-space-4)', borderRadius = 'var(--rs-radius-2)', inline = false, duration = 1.5, count = 1, enableAnimation = true, style, className, containerStyle, containerClassName } = { ...contextProps, ...props };
    const skeletonClassName = cx(styles.skeleton, inline && styles.inline, enableAnimation && styles.animate, className);
    const Container = inline ? 'span' : 'div';
    const defaultWidth = inline ? '50px' : '100%';
    return (jsx(Container, { className: containerClassName, style: {
            display: inline ? 'inline-block' : 'flex',
            flexDirection: !inline ? 'column' : undefined,
            gap: !inline && count > 1 ? 'var(--rs-space-3)' : undefined,
            ...containerStyle
        }, children: Array.from({ length: count }).map((_, i) => (jsx("span", { className: skeletonClassName, style: {
                width: width ?? defaultWidth,
                height,
                borderRadius,
                '--skeleton-base-color': baseColor,
                '--skeleton-highlight-color': highlightColor,
                '--skeleton-duration': `${duration}s`,
                ...style
            } }, i))) }));
};
const Provider = ({ children, ...props }) => {
    return (jsx(SkeletonContext.Provider, { value: props, children: children }));
};
const Skeleton = Object.assign(SkeletonBase, { Provider });

export { Skeleton };
//# sourceMappingURL=skeleton.js.map
