@frontify/fondue
Version:
Design system of Frontify
62 lines (61 loc) • 2.44 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { useButton as c } from "@react-aria/button";
import { useFocusRing as w } from "@react-aria/focus";
import { mergeProps as d } from "@react-aria/utils";
import { useRef as g } from "react";
import u from "../../foundation/Icon/Generated/IconPlus.es.js";
import { IconSize as f } from "../../foundation/Icon/IconSize.es.js";
import { FOCUS_STYLE as b } from "../../utilities/focusStyle.es.js";
import { merge as h } from "../../utilities/merge.es.js";
var v = /* @__PURE__ */ ((t) => (t.Horizontal = "Horizontal", t.Vertical = "Vertical", t))(v || {}), x = /* @__PURE__ */ ((t) => (t.Left = "Left", t.Top = "Top", t.Bottom = "Bottom", t.Right = "Right", t))(x || {});
const z = {
Horizontal: "tw-rotate-0",
Vertical: "tw-rotate-90"
}, s = {
Left: "tw-rotate-180",
Top: "tw-rotate-[270deg]",
Bottom: "tw-rotate-90",
Right: "tw-rotate-0"
}, C = ({
onClick: t,
title: n,
direction: e,
orientation: o,
"data-test-id": a = "add-block-button"
}) => {
const { isFocusVisible: i, focusProps: l } = w(), m = g(null), { buttonProps: p } = c({ onPress: () => t() }, m);
return /* @__PURE__ */ r(
"button",
{
...d(p, l),
title: n,
"data-test-id": a,
className: h([
"tw-group tw-leading-none tw-rounded-sm tw-outline-none",
i && b,
o && !e && z[o],
e && s[e],
!e && !o && s.Right
]),
children: /* @__PURE__ */ r(
"span",
{
className: "tw-text-box-selected-strong-inverse tw-bg-box-selected-strong tw-rounded tw-inline-flex tw-items-center tw-w-7 tw-h-6 tw-relative tw-p-1 tw-transition-colors hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover group-active:tw-bg-box-selected-strong-pressed group-active:tw-text-bg-box-selected-strong-inverse-pressed",
style: {
clipPath: `path(
"M27.3333 10.9369L21.7246 2C20.5 0.5 19.5 0 18 0H4C1.79086 0 0 1.79086 0 4V20C0 22.2091 1.79086 24 4 24H18C19.5 24 20.5 23.5 21.7246 22L27.3333 13.0631C27.7412 12.4131 27.7412 11.5869 27.3333 10.9369Z"
)`
},
children: /* @__PURE__ */ r(u, { size: f.Size16 })
}
)
}
);
};
C.displayName = "FondueAddBlockButton";
export {
C as AddBlockButton,
v as AddBlockButtonDirection,
x as ButtonDirection
};
//# sourceMappingURL=AddBlockButton.es.js.map