@penaprieto/design-system/dist/components/Skeleton/Skeleton.js

Multi-brand React design system with design tokens from Figma

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Skeleton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Skeleton.css");
const Skeleton = ({ variant = 'text', animation = 'wave', width, height, className = '', }) => {
    const rootClassName = [
        'ds-skeleton',
        `ds-skeleton--${variant}`,
        animation !== 'none' && `ds-skeleton--${animation}`,
        className,
    ]
        .filter(Boolean)
        .join(' ');
    const style = {};
    if (width !== undefined) {
        style.width = typeof width === 'number' ? `${width}px` : width;
    }
    if (height !== undefined) {
        style.height = typeof height === 'number' ? `${height}px` : height;
    }
    return (0, jsx_runtime_1.jsx)("div", { className: rootClassName, style: style });
};
exports.Skeleton = Skeleton;