@playbooks/ui
Version:
An interface library for Playbooks.
92 lines (91 loc) • 3.02 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c as computeTailwind } from "./index.es-7ZX4yv7W.js";
import { useUI } from "./context.es.js";
const Oval$1 = ({ className, ...props }) => /* @__PURE__ */ jsx("svg", { width: 38, height: 38, stroke: "#fff", viewBox: "0 0 38 38", className, ...props, children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
/* @__PURE__ */ jsx("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
/* @__PURE__ */ jsx("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "1s",
repeatCount: "indefinite"
}
) })
] }) });
const Puff$1 = ({ className, ...props }) => /* @__PURE__ */ jsx("svg", { width: 44, height: 44, stroke: "#fff", viewBox: "0 0 44 44", className, ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", strokeWidth: 2, children: [
/* @__PURE__ */ jsxs("circle", { cx: 22, cy: 22, r: 1, children: [
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "r",
begin: "0s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-opacity",
begin: "0s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ jsxs("circle", { cx: 22, cy: 22, r: 1, children: [
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "r",
begin: "-0.9s",
dur: "1.8s",
values: "1; 20",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.165, 0.84, 0.44, 1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ jsx(
"animate",
{
attributeName: "stroke-opacity",
begin: "-0.9s",
dur: "1.8s",
values: "1; 0",
calcMode: "spline",
keyTimes: "0; 1",
keySplines: "0.3, 0.61, 0.355, 1",
repeatCount: "indefinite"
}
)
] })
] }) });
const Oval = ({ name = "Oval", tailwind, className, ...props }) => {
const context = useUI();
const base = context?.theme?.spinner();
const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
return /* @__PURE__ */ jsx(Oval$1, { className: classes });
};
const Puff = ({ name = "Puff", tailwind, className, ...props }) => {
const context = useUI();
const base = context?.theme?.spinner();
const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
return /* @__PURE__ */ jsx(Puff$1, { className: classes });
};
export {
Oval,
Puff
};