@lanaco/lnc-react-ui/dist/Spinner.js

React component library

import { jsxs as d, jsx as n } from "react/jsx-runtime";
import { s as o } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { k as c } from "./emotion-react.browser.esm-DUVZ5oEL.js";
import { d as h, c as i } from "./utils-BUdHa0nB.js";
import { u } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const b = {
  small: "0.6rem",
  medium: "0.7rem",
  large: "0.8rem"
}, p = (e, t) => {
  if (e === "small")
    return `
          width: ${t.sizes.small};
          height: ${t.sizes.small};
        `;
  if (e === "medium")
    return `
            width: ${t.sizes.medium};
            height: ${t.sizes.medium};
        `;
  if (e === "large")
    return `
          width: ${t.sizes.large};
          height: ${t.sizes.large};
        `;
}, f = c`
  to {
    transform: rotate(360deg);
  }
`, g = o.div`
  position: relative;
  height: max-content;
  width: max-content;
  display: flex;
  & .label-text {
    display: ${(e) => e.label ? "unset" : "none"};
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    ${(e) => h(e.theme, "Spinner", e.size, "enabled")};
    font-size: ${(e) => b[e.size]};
    color: ${(e) => i(
  e.theme,
  "Spinner",
  e.color,
  "enabled",
  "text"
)};
  }
`, $ = o.div`
  display: inline-block;
  ${(e) => p(e.size, e.theme)}
  border: ${(e) => `0.3125rem solid ${i(
  e.theme,
  "Spinner",
  e.color,
  "enabled",
  "unfilled"
)}`};
  border-radius: 50%;
  border-top-color: ${(e) => i(
  e.theme,
  "Spinner",
  e.color,
  "enabled",
  "background"
)};
  border-right-color: ${(e) => i(
  e.theme,
  "Spinner",
  e.color,
  "enabled",
  "background"
)};

  animation: ${f} 0.8s ease-in-out infinite;
`, w = (e) => {
  const {
    label: t,
    className: s = "",
    style: l = {},
    size: a = "small",
    color: m = "primary"
  } = e, r = { theme: u(), size: a, color: m };
  return /* @__PURE__ */ d(
    g,
    {
      ...r,
      className: "lnc-ui-spinner " + s,
      style: l,
      label: t,
      children: [
        /* @__PURE__ */ n($, { ...r }),
        /* @__PURE__ */ n("div", { className: "label-text", children: t })
      ]
    }
  );
};
export {
  w as default
};