@payfit/unity-components
Version:
79 lines (78 loc) • 2.02 kB
JavaScript
import e from "../../hooks/use-id.js";
import { forwardRef as t } from "react";
import { uyTv as n } from "@payfit/unity-themes";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
//#region src/components/spinner/Spinner.tsx
var a = n({
slots: {
base: "uy:flex uy:flex-col uy:items-center uy:gap-200",
indicator: "",
label: "uy:typography-body uy:text-left uy:truncate"
},
variants: {
size: {
small: {
indicator: "uy:w-200 uy:h-200",
label: "uy:hidden"
},
medium: { indicator: "uy:w-300 uy:h-300" }
},
color: {
primary: { indicator: "uy:text-content-primary" },
inverted: {
indicator: "uy:text-content-inverted",
label: "uy:text-content-inverted"
},
inherit: { indicator: "" }
}
},
defaultVariants: {
size: "small",
color: "primary"
}
});
function o({ label: t, color: n, size: o, role: s = "status", ...c }, l) {
let u = `spinner-label-${e()}`, { base: d, indicator: f, label: p } = a({
size: o,
color: n
});
return /* @__PURE__ */ i("div", {
...c,
ref: l,
role: s,
className: d(),
"aria-labelledby": s === "status" ? u : void 0,
"aria-live": "polite",
"data-dd-privacy": "allow",
children: [/* @__PURE__ */ i("svg", {
viewBox: "0 0 100 100",
"aria-hidden": "true",
className: f(),
children: [/* @__PURE__ */ r("title", { children: "Loading" }), /* @__PURE__ */ r("circle", {
cx: "50",
cy: "50",
r: "45",
fill: "none",
stroke: "currentColor",
style: {
"--r": "45px",
"--1deg": "calc(2 * pi * var(--r) / 360)",
strokeWidth: "9.6px",
shapeRendering: "geometricPrecision",
strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
transformOrigin: "50% 50%",
animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
}
})]
}), /* @__PURE__ */ r("span", {
id: u,
className: p(),
"aria-hidden": o !== "small",
children: t
})]
});
}
o.displayName = "Spinner";
var s = t(o);
//#endregion
export { s as Spinner };