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

Multi-brand React design system with design tokens from Figma

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Divider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Divider.css");
const Divider = ({ orientation = 'horizontal', variant = 'solid', children, align = 'center', className = '', }) => {
    const rootClassName = [
        'ds-divider',
        `ds-divider--${orientation}`,
        `ds-divider--${variant}`,
        children && 'ds-divider--with-content',
        children && `ds-divider--${align}`,
        className,
    ]
        .filter(Boolean)
        .join(' ');
    if (orientation === 'vertical') {
        return (0, jsx_runtime_1.jsx)("div", { className: rootClassName, role: "separator", "aria-orientation": "vertical" });
    }
    if (children) {
        return ((0, jsx_runtime_1.jsx)("div", { className: rootClassName, role: "separator", "aria-orientation": "horizontal", children: (0, jsx_runtime_1.jsx)("span", { className: "ds-divider__content", children: children }) }));
    }
    return (0, jsx_runtime_1.jsx)("hr", { className: rootClassName });
};
exports.Divider = Divider;