@frontify/fondue
Version:
Design system of Frontify
64 lines (63 loc) • 1.83 kB
JavaScript
import { jsxs as w, Fragment as m, jsx as e } from "react/jsx-runtime";
var c = /* @__PURE__ */ ((t) => (t.NoLine = "noline", t.Dashed = "dashed", t.Solid = "solid", t.Dotted = "dotted", t))(c || {}), u = /* @__PURE__ */ ((t) => (t.Small = "36px", t.Medium = "60px", t.Large = "96px", t))(u || {});
const l = {
noline: "tw-border-none",
dashed: "tw-border-dashed",
solid: "tw-border-solid",
dotted: "tw-border-dotted"
}, f = "fondue-divider", p = ({
as: t = "div",
vertical: r = !1,
style: s = "solid",
height: d = "36px",
"data-test-id": a = f,
color: o = "#CCC"
}) => {
const i = `tw-w-px tw-h-full tw-border-r tw-m-0 ${l[s]}`, n = t;
return /* @__PURE__ */ w(m, { children: [
r && /* @__PURE__ */ e(
n,
{
"aria-hidden": "true",
className: "tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center",
"data-test-id": a,
style: {
marginLeft: parseInt(d) / 2,
marginRight: parseInt(d) / 2
},
children: /* @__PURE__ */ e(
"div",
{
className: i,
style: { borderRightColor: o },
"data-test-id": "fondue-divider-line"
}
)
}
),
!r && /* @__PURE__ */ e(
n,
{
"aria-hidden": "true",
className: "tw-flex tw-items-center tw-w-full",
style: { height: d },
"data-test-id": a,
children: /* @__PURE__ */ e(
"hr",
{
className: `tw-border-t tw-m-0 tw-w-full ${l[s]}`,
style: { borderTopColor: o },
"data-test-id": "fondue-divider-line"
}
)
}
)
] });
};
p.displayName = "FondueDivider";
export {
p as Divider,
u as DividerHeight,
c as DividerStyle
};
//# sourceMappingURL=Divider.es.js.map