import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useRef, useState, useEffect } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';

import './Spinner.css';const spinner = "_spinner_2axc3_1";
const inherit = "_inherit_2axc3_22";
const track = "_track_2axc3_39";
const arc = "_arc_2axc3_43";
const styles = {
	spinner: spinner,
	inherit: inherit,
	"size-small": "_size-small_2axc3_27",
	"size-medium": "_size-medium_2axc3_31",
	"size-large": "_size-large_2axc3_35",
	track: track,
	arc: arc
};

const Spinner = forwardRef(
  (props, ref) => {
    const { className, inherit, size = "medium", ...rest } = props;
    const containerRef = useRef(null);
    const [containerWidth, setContainerWidth] = useState(0);
    const mergedRef = useMergeRefs([containerRef, ref]);
    useEffect(() => {
      let rafId;
      let lastWidth = 0;
      const updateWidth = () => {
        if (containerRef.current) {
          const width = containerRef.current.offsetWidth;
          if (width !== lastWidth) {
            setContainerWidth(width);
            lastWidth = width;
          }
        }
      };
      const continuousUpdate = () => {
        updateWidth();
        rafId = requestAnimationFrame(continuousUpdate);
      };
      updateWidth();
      const resizeObserver = new ResizeObserver(updateWidth);
      if (containerRef.current) {
        resizeObserver.observe(containerRef.current);
      }
      rafId = requestAnimationFrame(continuousUpdate);
      return () => {
        resizeObserver.disconnect();
        cancelAnimationFrame(rafId);
      };
    }, []);
    const classNames = cx(styles["spinner"], className, {
      [styles["inherit"]]: inherit,
      [styles["size-small"]]: size === "small",
      [styles["size-medium"]]: size === "medium",
      [styles["size-large"]]: size === "large"
    });
    const strokeWidth = containerWidth > 0 ? Math.sqrt((containerWidth - 8) / 2) : 2;
    const radius = 10;
    return /* @__PURE__ */ jsx(
      "span",
      {
        "data-anv": "spinner",
        className: classNames,
        ref: mergedRef,
        role: "status",
        ...rest,
        children: /* @__PURE__ */ jsxs(
          "svg",
          {
            width: "100%",
            height: "100%",
            viewBox: "0 0 24 24",
            "aria-hidden": "true",
            focusable: "false",
            children: [
              /* @__PURE__ */ jsx(
                "circle",
                {
                  className: styles["track"],
                  cx: "12",
                  cy: "12",
                  r: radius,
                  fill: "none",
                  strokeWidth,
                  vectorEffect: "non-scaling-stroke",
                  stroke: "currentColor",
                  shapeRendering: "geometricPrecision"
                }
              ),
              /* @__PURE__ */ jsx(
                "path",
                {
                  className: styles["arc"],
                  d: `M${12 + radius} 12a${radius} ${radius} 0 1 0-${radius * 2} 0`,
                  fill: "none",
                  strokeWidth,
                  strokeLinecap: "round",
                  vectorEffect: "non-scaling-stroke",
                  stroke: "currentColor",
                  shapeRendering: "geometricPrecision",
                  children: /* @__PURE__ */ jsx(
                    "animateTransform",
                    {
                      attributeName: "transform",
                      type: "rotate",
                      from: "0 12 12",
                      to: "360 12 12",
                      dur: "1s",
                      repeatCount: "indefinite"
                    }
                  )
                }
              )
            ]
          }
        )
      }
    );
  }
);
Spinner.displayName = "Spinner";

export { Spinner as S };
//# sourceMappingURL=Spinner-B7tTWcP6.js.map
