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

React component library

import { jsxs as c, jsx as o } from "react/jsx-runtime";
import { P as n } from "./index-S5Cd7WrG.js";
import { n as s } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { k as p } from "./emotion-react.browser.esm-C6iWxXPG.js";
import { c as g, b as i } from "./utils-DtRLzzTZ.js";
import { u as h } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const u = {
  small: "0.6rem",
  medium: "0.7rem",
  large: "0.8rem"
}, b = (e, r) => {
  if (e === "small")
    return `
          width: ${r.sizes.small};
          height: ${r.sizes.small};
        `;
  if (e === "medium")
    return `
            width: ${r.sizes.medium};
            height: ${r.sizes.medium};
        `;
  if (e === "large")
    return `
          width: ${r.sizes.large};
          height: ${r.sizes.large};
        `;
}, f = p`
  to {
    transform: rotate(360deg);
  }
`, y = s.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) => g(e.theme, "Spinner", e.size, "enabled")};
    font-size: ${(e) => u[e.size]};
    color: ${(e) => i(
  e.theme,
  "Spinner",
  e.color,
  "enabled",
  "text"
)};
  }
`, $ = s.div`
  display: inline-block;
  ${(e) => b(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;
`, z = (e) => {
  const {
    label: r,
    className: l = "",
    style: a = {},
    size: m = "small",
    color: d = "primary"
  } = e, t = { theme: h(), size: m, color: d };
  return /* @__PURE__ */ c(
    y,
    {
      ...t,
      className: "lnc-ui-spinner " + l,
      style: a,
      label: r,
      children: [
        /* @__PURE__ */ o($, { ...t }),
        /* @__PURE__ */ o("div", { className: "label-text", children: r })
      ]
    }
  );
};
z.propTypes = {
  label: n.string,
  className: n.string,
  style: n.object,
  size: n.oneOf(["small", "medium", "large"]),
  color: n.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  z as default
};