loading-dev 0.3.1 → 0.3.4

package/dist/index.js

@@ -1,910 +1,145 @@
-// src/motion.ts
-var DURATION_VAR = "--ld-duration";
-var PLAY_STATE_VAR = "--ld-play-state";
-var SIZE_VAR = "--ld-size";
-var DEFAULT_SIZE = 20;
-var SIZE = `var(${SIZE_VAR}, ${DEFAULT_SIZE}px)`;
-var SPINNER_MOTION = {
-  arc: { duration: 800 },
-  "bouncing-dots": { duration: 500 },
-  "circular-dots": { duration: 800 },
-  classic: { duration: 1200 },
-  "classic-v2": { duration: 800 },
-  clock: { duration: 1200 },
-  comet: { duration: 700 },
-  compass: { duration: 500 },
-  "linear-dots": { duration: 900 },
-  orbit: { duration: 750 },
-  pulse: { duration: 1200 },
-  radar: { duration: 1500 },
-  ring: { duration: 800 },
-  swirl: { duration: 1200 }
-};
-function duration(name) {
-  return `var(${DURATION_VAR}, ${SPINNER_MOTION[name].duration}ms)`;
-}
-var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
-
-// src/easing.ts
-var DEFAULT_EASING = "linear";
-function spinClass(name, easing = DEFAULT_EASING) {
-  const base = `ld-${name}-spin`;
-  return easing === "linear" ? base : `${base} ${base}-${easing}`;
-}
-function rotationCss(name) {
-  return `
-.ld-${name}-spin {
-  transform-origin: center;
-  animation: ld-${name}-rotate ${duration(name)} linear infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-${name}-spin-ease-in-out {
-  animation-timing-function: ease-in-out;
-}
-
-.ld-${name}-spin-stacked {
-  animation-name: ld-${name}-rotate, ld-${name}-rotate;
-  animation-timing-function: linear, ease-in-out;
-  animation-composition: add;
-}
-
-@keyframes ld-${name}-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-${name}-spin {
-    animation: none;
-  }
-}
-`;
-}
-
-// src/frame.tsx
-import { jsx } from "react/jsx-runtime";
-function SpinnerStyle({
-  children,
-  name
-}) {
-  return /* @__PURE__ */ jsx("style", { href: `ld-${name}`, precedence: "loading-dev", children });
-}
-function cssVars(vars) {
-  return vars;
-}
-function spinnerRoot(name, { className, color, duration: duration2, playState, size = DEFAULT_SIZE }) {
-  return {
-    "aria-hidden": true,
-    className: [`ld-${name}`, className].filter(Boolean).join(" "),
-    style: cssVars({
-      [SIZE_VAR]: `${size}px`,
-      ...color === void 0 ? null : { color },
-      ...duration2 === void 0 ? null : { [DURATION_VAR]: `${duration2}ms` },
-      ...playState === void 0 ? null : { [PLAY_STATE_VAR]: playState }
-    })
-  };
-}
-
-// src/arc.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var css = `
-.ld-arc {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("arc")}
-`;
-function Arc({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(SpinnerStyle, { name: "arc", children: css }),
-    /* @__PURE__ */ jsx2(
-      "svg",
-      {
-        ...spinnerRoot("arc", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ jsx2(
-          "circle",
-          {
-            className: spinClass("arc", easing),
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeDasharray: "18 44.8",
-            strokeLinecap: "round",
-            strokeWidth: "2.5"
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/bouncing-dots.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DOTS = Array.from({ length: 3 }, (_, index) => index);
-var dur = duration("bouncing-dots");
-var css2 = `
-.ld-bouncing-dots {
-  display: flex;
-  align-items: center;
-  gap: calc(${SIZE} * 0.2);
-  height: ${SIZE};
-}
-
-.ld-bouncing-dots-dot {
-  width: calc(${SIZE} * 0.22);
-  height: calc(${SIZE} * 0.22);
-  background: currentColor;
-  border-radius: 9999px;
-  animation: ld-bouncing-dots-bounce ${dur} ease-in-out infinite alternate;
-  animation-play-state: ${PLAY_STATE};
-}
-
-.ld-bouncing-dots-dot:nth-child(1) {
-  animation-delay: calc(${dur} * -0.64);
-}
-
-.ld-bouncing-dots-dot:nth-child(2) {
-  animation-delay: calc(${dur} * -0.32);
-}
-
-@keyframes ld-bouncing-dots-bounce {
-  from {
-    transform: translateY(28%);
-  }
-  to {
-    transform: translateY(-72%);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-bouncing-dots-dot {
-    animation: none;
-  }
-}
-`;
-function BouncingDots(props) {
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(SpinnerStyle, { name: "bouncing-dots", children: css2 }),
-    /* @__PURE__ */ jsx3("div", { ...spinnerRoot("bouncing-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx3("div", { className: "ld-bouncing-dots-dot" }, dot)) })
-  ] });
-}
-
-// src/circular-dots.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DOTS2 = [
-  [8, 1.5],
-  [12.5962, 3.4038],
-  [14.5, 8],
-  [12.5962, 12.5962],
-  [8, 14.5],
-  [3.4038, 12.5962],
-  [1.5, 8],
-  [3.4038, 3.4038]
-];
-var dur2 = duration("circular-dots");
-var css3 = `
-.ld-circular-dots {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-circular-dots-dot {
-  animation: ld-circular-dots-fade ${dur2} linear infinite;
-  animation-delay: calc(${dur2} * (var(--ld-circular-dots-step) - ${DOTS2.length}) / ${DOTS2.length});
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-circular-dots-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-circular-dots-dot {
-    opacity: 0.6;
-    animation: none;
-  }
-}
-`;
-function CircularDots(props) {
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(SpinnerStyle, { name: "circular-dots", children: css3 }),
-    /* @__PURE__ */ jsx4(
-      "svg",
-      {
-        ...spinnerRoot("circular-dots", props),
-        fill: "currentColor",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: DOTS2.map(([cx, cy], step) => /* @__PURE__ */ jsx4(
-          "circle",
-          {
-            className: "ld-circular-dots-dot",
-            cx,
-            cy,
-            r: "1.5",
-            style: cssVars({ "--ld-circular-dots-step": step })
-          },
-          `${cx}-${cy}`
-        ))
-      }
-    )
-  ] });
-}
-
-// src/classic.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var BARS = Array.from({ length: 12 }, (_, index) => index);
-var dur3 = duration("classic");
-var BAR_RULES = BARS.map(
-  (bar) => `
-.ld-classic-bar:nth-child(${bar + 1}) {
-  transform: rotate(${bar === 0 ? "0.0001" : bar * 30}deg) translate(146%);
-  animation-delay: calc(${dur3} * ${(bar / 12 - 1).toFixed(4)});
-}`
-).join("\n");
-var css4 = `
-.ld-classic {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-inner {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-bar {
-  position: absolute;
-  top: -3.9%;
-  left: -10%;
-  width: 24%;
-  height: 8%;
-  background: currentColor;
-  border-radius: 6px;
-  animation: ld-classic-spin ${dur3} linear infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-${BAR_RULES}
-
-@keyframes ld-classic-spin {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.15;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-classic-bar {
-    opacity: 0.5;
-    animation: none;
-  }
-}
-`;
-function Classic(props) {
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(SpinnerStyle, { name: "classic", children: css4 }),
-    /* @__PURE__ */ jsx5("div", { ...spinnerRoot("classic", props), children: /* @__PURE__ */ jsx5("div", { className: "ld-classic-inner", children: BARS.map((bar) => /* @__PURE__ */ jsx5("div", { className: "ld-classic-bar" }, bar)) }) })
-  ] });
-}
-
-// src/classic-v2.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var TICKS = 8;
-var dur4 = duration("classic-v2");
-var TICK_RULES = Array.from(
-  { length: TICKS },
-  (_, tick) => `
-.ld-classic-v2-tick:nth-child(${tick + 1}) {
-  animation-delay: calc(${dur4} * ${(tick / TICKS - 1).toFixed(4)});
-}`
-).join("\n");
-var css5 = `
-.ld-classic-v2 {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-classic-v2-tick {
-  animation: ld-classic-v2-fade ${dur4} linear infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-${TICK_RULES}
-
-@keyframes ld-classic-v2-fade {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.4;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-classic-v2-tick {
-    opacity: 0.5;
-    animation: none;
-  }
-}
-`;
-function ClassicV2(props) {
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(SpinnerStyle, { name: "classic-v2", children: css5 }),
-    /* @__PURE__ */ jsx6(
-      "svg",
-      {
-        ...spinnerRoot("classic-v2", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: /* @__PURE__ */ jsxs5("g", { fill: "currentColor", children: [
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M11.7712 5.17154C11.5109 5.43189 11.0888 5.43189 10.8284 5.17154C10.5681 4.91119 10.5681 4.48908 10.8284 4.22873L12.714 2.34311C12.9744 2.08276 13.3965 2.08276 13.6568 2.34311C13.9172 2.60346 13.9172 3.02557 13.6568 3.28592L11.7712 5.17154Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M12.6667 8.66667C12.2985 8.66667 12 8.36819 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.36819 15.7015 8.66667 15.3333 8.66667H12.6667Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M10.8284 11.7713C10.5681 11.5109 10.5681 11.0888 10.8284 10.8284C11.0888 10.5681 11.5109 10.5681 11.7712 10.8284L13.6568 12.7141C13.9172 12.9744 13.9172 13.3965 13.6568 13.6569C13.3965 13.9172 12.9744 13.9172 12.714 13.6569L10.8284 11.7713Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M3.28594 13.6569C3.02559 13.9172 2.60348 13.9172 2.34313 13.6569C2.08278 13.3965 2.08278 12.9744 2.34313 12.714L4.22875 10.8284C4.4891 10.5681 4.91121 10.5681 5.17156 10.8284C5.43191 11.0888 5.43191 11.5109 5.17156 11.7712L3.28594 13.6569Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.36819 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.36819 3.70152 8.66667 3.33333 8.66667H0.666667Z"
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            "path",
-            {
-              className: "ld-classic-v2-tick",
-              d: "M2.34315 3.28594C2.0828 3.02559 2.0828 2.60348 2.34315 2.34314C2.6035 2.08279 3.02561 2.08279 3.28596 2.34313L5.17158 4.22875C5.43193 4.4891 5.43193 4.91121 5.17158 5.17156C4.91123 5.43191 4.48912 5.43191 4.22877 5.17156L2.34315 3.28594Z"
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-
-// src/clock.tsx
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var css6 = `
-.ld-clock {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("clock")}
-`;
-function Clock({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(SpinnerStyle, { name: "clock", children: css6 }),
-    /* @__PURE__ */ jsxs6(
-      "svg",
-      {
-        ...spinnerRoot("clock", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
-          /* @__PURE__ */ jsx7(
-            "path",
-            {
-              className: spinClass("clock", easing),
-              d: "M11.1937 2.92061C10.5206 2.49739 9.77304 2.21397 8.9954 2.08314C8.45076 1.99151 8 2.44772 8 3V7.20324C8 7.49211 8.12492 7.76686 8.34259 7.95677L11.8999 11.0603C12.3287 11.4344 12.9913 11.378 13.2643 10.8787C13.6356 10.1998 13.8736 9.45248 13.9617 8.67713C14.0892 7.55433 13.8971 6.41834 13.4074 5.39993C12.9177 4.38152 12.1503 3.5221 11.1937 2.92061Z",
-              fill: "currentColor"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/comet.tsx
-import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var css7 = `
-.ld-comet {
-  --ld-comet-stroke: calc(${SIZE} * 0.12);
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-comet-spin {
-  position: absolute;
-  inset: 0;
-}
-
-.ld-comet-tail {
-  position: absolute;
-  inset: 0;
-  border-radius: 9999px;
-  background: conic-gradient(from 0deg, transparent, currentColor);
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
-}
-
-.ld-comet-head {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: var(--ld-comet-stroke);
-  height: var(--ld-comet-stroke);
-  background: currentColor;
-  border-radius: 9999px;
-  transform: translateX(-50%);
-}
-
-${rotationCss("comet")}
-`;
-function Comet({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx8(SpinnerStyle, { name: "comet", children: css7 }),
-    /* @__PURE__ */ jsx8("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs7("div", { className: spinClass("comet", easing), children: [
-      /* @__PURE__ */ jsx8("div", { className: "ld-comet-tail" }),
-      /* @__PURE__ */ jsx8("div", { className: "ld-comet-head" })
-    ] }) })
-  ] });
-}
-
-// src/compass.tsx
-import { Fragment as Fragment8, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var css8 = `
-.ld-compass {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-compass-ticks {
-  transform-origin: center;
-  animation: ld-compass-turn ${duration("compass")} ease-in-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-compass-turn {
-  to {
-    transform: rotate(90deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-compass-ticks {
-    animation: none;
-  }
-}
-`;
-function Compass(props) {
-  return /* @__PURE__ */ jsxs8(Fragment8, { children: [
-    /* @__PURE__ */ jsx9(SpinnerStyle, { name: "compass", children: css8 }),
-    /* @__PURE__ */ jsx9(
-      "svg",
-      {
-        ...spinnerRoot("compass", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: /* @__PURE__ */ jsxs8("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
-          /* @__PURE__ */ jsx9("path", { d: "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z" }),
-          /* @__PURE__ */ jsx9("path", { d: "M12.6667 8.66667C12.2985 8.66667 12 8.3682 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.3682 15.7015 8.66667 15.3333 8.66667H12.6667Z" }),
-          /* @__PURE__ */ jsx9("path", { d: "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z" }),
-          /* @__PURE__ */ jsx9("path", { d: "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.3682 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.3682 3.70152 8.66667 3.33333 8.66667H0.666667Z" })
-        ] })
-      }
-    )
-  ] });
-}
-
-// src/linear-dots.tsx
-import { Fragment as Fragment9, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var COUNT = 3;
-var DOTS3 = Array.from({ length: COUNT }, (_, index) => ({
-  step: (COUNT - index) % COUNT
-}));
-var dur5 = duration("linear-dots");
-var css9 = `
-.ld-linear-dots {
-  display: flex;
-  align-items: center;
-  gap: calc(${SIZE} * 0.1875);
-  height: ${SIZE};
-}
-
-.ld-linear-dots-dot {
-  width: calc(${SIZE} * 0.1875);
-  height: calc(${SIZE} * 0.1875);
-  background: currentColor;
-  border-radius: 9999px;
-  animation: ld-linear-dots-fade ${dur5} linear infinite;
-  animation-delay: calc(${dur5} * var(--ld-linear-dots-step) / -${COUNT});
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-linear-dots-fade {
-  0% {
-    opacity: 1;
-  }
-  66.67% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-linear-dots-dot {
-    opacity: 0.75;
-    animation: none;
-  }
-}
-`;
-function LinearDots(props) {
-  return /* @__PURE__ */ jsxs9(Fragment9, { children: [
-    /* @__PURE__ */ jsx10(SpinnerStyle, { name: "linear-dots", children: css9 }),
-    /* @__PURE__ */ jsx10("div", { ...spinnerRoot("linear-dots", props), children: DOTS3.map((dot, index) => /* @__PURE__ */ jsx10(
-      "div",
-      {
-        className: "ld-linear-dots-dot",
-        style: cssVars({ "--ld-linear-dots-step": dot.step })
-      },
-      index
-    )) })
-  ] });
-}
-
-// src/orbit.tsx
-import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var css10 = `
-.ld-orbit {
-  --ld-orbit-stroke: calc(${SIZE} * 0.0625);
-  position: relative;
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-orbit-track {
-  position: absolute;
-  inset: 8%;
-  border-radius: 9999px;
-  background: conic-gradient(from 180deg, transparent 0deg, currentColor 180deg, transparent 180deg);
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0);
-}
-
-.ld-orbit-dot {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 25%;
-  height: 25%;
-  background: currentColor;
-  border-radius: 9999px;
-  transform: translate(-50%, -50%);
-}
-
-${rotationCss("orbit")}
-`;
-function Orbit({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs10(Fragment10, { children: [
-    /* @__PURE__ */ jsx11(SpinnerStyle, { name: "orbit", children: css10 }),
-    /* @__PURE__ */ jsxs10("div", { ...spinnerRoot("orbit", rest), children: [
-      /* @__PURE__ */ jsx11("div", { className: "ld-orbit-dot" }),
-      /* @__PURE__ */ jsx11("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })
-    ] })
-  ] });
-}
-
-// src/pulse.tsx
-import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-var css11 = `
-.ld-pulse {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-.ld-pulse-ring {
-  transform-origin: center;
-  animation: ld-pulse-ripple ${duration("pulse")} ease-out infinite;
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-pulse-ripple {
-  from {
-    opacity: 0.4;
-    transform: scale(0.25);
-  }
-  to {
-    opacity: 0;
-    transform: scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-pulse-ring {
-    opacity: 0.2;
-    animation: none;
-  }
-}
-`;
-function Pulse(props) {
-  return /* @__PURE__ */ jsxs11(Fragment11, { children: [
-    /* @__PURE__ */ jsx12(SpinnerStyle, { name: "pulse", children: css11 }),
-    /* @__PURE__ */ jsxs11(
-      "svg",
-      {
-        ...spinnerRoot("pulse", props),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx12(
-            "circle",
-            {
-              className: "ld-pulse-ring",
-              cx: "8",
-              cy: "8",
-              fill: "currentColor",
-              r: "8"
-            }
-          ),
-          /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/radar.tsx
-import { useId } from "react";
-import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var css12 = `
-.ld-radar {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("radar")}
-`;
-function Radar({ easing, ...rest }) {
-  const beamGradient = useId();
-  return /* @__PURE__ */ jsxs12(Fragment12, { children: [
-    /* @__PURE__ */ jsx13(SpinnerStyle, { name: "radar", children: css12 }),
-    /* @__PURE__ */ jsxs12(
-      "svg",
-      {
-        ...spinnerRoot("radar", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 16 16",
-        children: [
-          /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs12(
-            "radialGradient",
-            {
-              cx: "8",
-              cy: "8",
-              gradientUnits: "userSpaceOnUse",
-              id: beamGradient,
-              r: "8",
-              children: [
-                /* @__PURE__ */ jsx13("stop", { offset: "0.3334", stopColor: "currentColor" }),
-                /* @__PURE__ */ jsx13("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.2", r: "8" }),
-          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", opacity: "0.2", r: "5.5", stroke: "currentColor" }),
-          /* @__PURE__ */ jsx13(
-            "path",
-            {
-              className: spinClass("radar", easing),
-              d: "M8 0C9.50657 0 10.9824 0.425672 12.2578 1.22754C13.5333 2.02953 14.557 3.17533 15.21 4.5332C15.8629 5.89107 16.1193 7.40626 15.9492 8.90332C15.7791 10.4001 15.1896 11.8184 14.249 12.9951L10.4707 9.69922C10.8037 9.21598 11 8.63123 11 8C11 6.34315 9.65685 5 8 5V0Z",
-              fill: `url(#${beamGradient})`
-            }
-          ),
-          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/ring.tsx
-import { Fragment as Fragment13, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var css13 = `
-.ld-ring {
-  width: ${SIZE};
-  height: ${SIZE};
-}
-
-${rotationCss("ring")}
-`;
-function Ring({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs13(Fragment13, { children: [
-    /* @__PURE__ */ jsx14(SpinnerStyle, { name: "ring", children: css13 }),
-    /* @__PURE__ */ jsxs13(
-      "svg",
-      {
-        ...spinnerRoot("ring", rest),
-        fill: "none",
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        children: [
-          /* @__PURE__ */ jsx14(
-            "circle",
-            {
-              cx: "12",
-              cy: "12",
-              opacity: "0.2",
-              r: "10",
-              stroke: "currentColor",
-              strokeWidth: "2.5"
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            "circle",
-            {
-              className: spinClass("ring", easing),
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "currentColor",
-              strokeDasharray: "16 46.8",
-              strokeLinecap: "round",
-              strokeWidth: "2.5"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-// src/swirl.tsx
-import { Fragment as Fragment14, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var RING = [0, 1, 2, 7, null, 3, 6, 5, 4];
-var CELLS = RING.map((place) => ({
-  place,
-  step: place === null ? null : (8 - place) % 8
-}));
-var dur6 = duration("swirl");
-var css14 = `
-.ld-swirl {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: calc(${SIZE} * 0.15625);
-  box-sizing: border-box;
-  width: ${SIZE};
-  height: ${SIZE};
-  padding: calc(${SIZE} * 0.0625);
-}
-
-.ld-swirl-cell {
-  background: currentColor;
-  border-radius: calc(${SIZE} * 0.0625);
-  animation: ld-swirl-fade ${dur6} linear infinite;
-  animation-delay: calc(${dur6} * var(--ld-swirl-step) / -8);
-  animation-play-state: ${PLAY_STATE};
-}
-
-@keyframes ld-swirl-fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.2;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ld-swirl-cell {
-    opacity: 0.6;
-    animation: none;
-  }
-}
-`;
-function Swirl(props) {
-  return /* @__PURE__ */ jsxs14(Fragment14, { children: [
-    /* @__PURE__ */ jsx15(SpinnerStyle, { name: "swirl", children: css14 }),
-    /* @__PURE__ */ jsx15("div", { ...spinnerRoot("swirl", props), children: CELLS.map(
-      (cell, index) => cell.step === null ? /* @__PURE__ */ jsx15("div", {}, index) : /* @__PURE__ */ jsx15(
-        "div",
-        {
-          className: "ld-swirl-cell",
-          style: cssVars({ "--ld-swirl-step": cell.step })
-        },
-        index
-      )
-    ) })
-  ] });
-}
-
-// src/spinners.ts
-var SPINNERS = {
-  arc: Arc,
-  "bouncing-dots": BouncingDots,
-  "circular-dots": CircularDots,
-  classic: Classic,
-  "classic-v2": ClassicV2,
-  clock: Clock,
-  comet: Comet,
-  compass: Compass,
-  "linear-dots": LinearDots,
-  orbit: Orbit,
-  pulse: Pulse,
-  radar: Radar,
-  ring: Ring,
-  swirl: Swirl
-};
+import {
+  SPINNERS
+} from "./chunk-5DS5PSRD.js";
+import {
+  Swirl
+} from "./chunk-BMJ3AGRK.js";
+import {
+  Trace
+} from "./chunk-HDBQBCTN.js";
+import {
+  DEFAULT_WAVE_ORIGIN,
+  Wave
+} from "./chunk-VBI53UGV.js";
+import {
+  Orbit
+} from "./chunk-Y7QGIWTL.js";
+import {
+  Pulse
+} from "./chunk-FKUMWHUL.js";
+import {
+  Radar
+} from "./chunk-5LSP7MQQ.js";
+import {
+  Ring
+} from "./chunk-ZLJYYX76.js";
+import {
+  DEFAULT_RIPPLE_DIRECTION,
+  Ripple
+} from "./chunk-IWVH2GKE.js";
+import {
+  Slide
+} from "./chunk-IRMB7CHZ.js";
+import {
+  Snake
+} from "./chunk-RTKHVDCD.js";
+import {
+  Gather
+} from "./chunk-TFHDE6YZ.js";
+import {
+  Leap
+} from "./chunk-LIPOYJAI.js";
+import {
+  LinearDots
+} from "./chunk-K5XVX5GB.js";
+import {
+  Loading
+} from "./chunk-MVL7SVAH.js";
+import {
+  Morph
+} from "./chunk-AY4VLQBZ.js";
+import {
+  Classic
+} from "./chunk-IZ4TRHOC.js";
+import {
+  Clock
+} from "./chunk-IQ2WQZFY.js";
+import {
+  Comet
+} from "./chunk-5A6DX4J6.js";
+import {
+  Compass
+} from "./chunk-T7OV7MUW.js";
+import {
+  Dual
+} from "./chunk-NHN4FV63.js";
+import {
+  Eclipse
+} from "./chunk-AHW6IXXT.js";
+import {
+  Flip
+} from "./chunk-5R75HMWP.js";
+import {
+  Arc
+} from "./chunk-X7BJQCYL.js";
+import {
+  Atom
+} from "./chunk-5DLURQGF.js";
+import {
+  DEFAULT_EASING
+} from "./chunk-7C6Q6WUN.js";
+import {
+  Blocks,
+  DEFAULT_BLOCKS_SWEEP
+} from "./chunk-PBB2PRPT.js";
+import {
+  BouncingDots
+} from "./chunk-UWSCBISJ.js";
+import {
+  Cascade
+} from "./chunk-I5CFO2M5.js";
+import {
+  DEFAULT_CAP
+} from "./chunk-JNR4T6LZ.js";
+import {
+  CircularDots
+} from "./chunk-A43AJR54.js";
+import {
+  ClassicV2
+} from "./chunk-T5EUYN7R.js";
+import "./chunk-VRX5ZYC6.js";
+import {
+  DURATION_VAR,
+  PLAY_STATE_VAR,
+  SPINNER_MOTION
+} from "./chunk-OMNMMKI7.js";
 export {
   Arc,
+  Atom,
+  Blocks,
   BouncingDots,
+  Cascade,
   CircularDots,
   Classic,
   ClassicV2,
   Clock,
   Comet,
   Compass,
+  DEFAULT_BLOCKS_SWEEP,
+  DEFAULT_CAP,
+  DEFAULT_EASING,
+  DEFAULT_RIPPLE_DIRECTION,
+  DEFAULT_WAVE_ORIGIN,
   DURATION_VAR,
+  Dual,
+  Eclipse,
+  Flip,
+  Gather,
+  Leap,
   LinearDots,
+  Loading,
+  Morph,
   Orbit,
   PLAY_STATE_VAR,
   Pulse,
   Radar,
   Ring,
+  Ripple,
   SPINNERS,
   SPINNER_MOTION,
-  Swirl
+  Slide,
+  Snake,
+  Swirl,
+  Trace,
+  Wave
 };