loading-dev 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,27 +1,52 @@
+// src/cap.ts
+var DEFAULT_CAP = "round";
+function linecap(cap = DEFAULT_CAP) {
+  return cap === "flat" ? "butt" : "round";
+}
+
 // src/motion.ts
 var DURATION_VAR = "--ld-duration";
 var PLAY_STATE_VAR = "--ld-play-state";
 var SIZE_VAR = "--ld-size";
+var STEP_VAR = "--ld-step";
 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 }
+  arc: 800,
+  atom: 1e3,
+  blocks: 1300,
+  "bouncing-dots": 500,
+  cascade: 1500,
+  "circular-dots": 800,
+  classic: 1200,
+  "classic-v2": 800,
+  clock: 1200,
+  comet: 700,
+  compass: 500,
+  dual: 1e3,
+  eclipse: 1200,
+  flip: 1200,
+  gather: 1600,
+  leap: 1800,
+  "linear-dots": 900,
+  loading: 1e3,
+  morph: 1200,
+  orbit: 750,
+  pulse: 1200,
+  radar: 1500,
+  ring: 800,
+  ripple: 1200,
+  slide: 2400,
+  snake: 1400,
+  swirl: 1200,
+  trace: 1200,
+  wave: 900
 };
 function duration(name) {
-  return `var(${DURATION_VAR}, ${SPINNER_MOTION[name].duration}ms)`;
+  return `var(${DURATION_VAR}, ${SPINNER_MOTION[name]}ms)`;
+}
+function stagger(name, count) {
+  return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`;
 }
 var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
 
@@ -31,7 +56,10 @@ function spinClass(name, easing = DEFAULT_EASING) {
   const base = `ld-${name}-spin`;
   return easing === "linear" ? base : `${base} ${base}-${easing}`;
 }
-function rotationCss(name) {
+var ROTATE = `to {
+    transform: rotate(360deg);
+  }`;
+function rotationCss(name, turn = ROTATE) {
   return `
 .ld-${name}-spin {
   transform-origin: center;
@@ -50,9 +78,7 @@ function rotationCss(name) {
 }
 
 @keyframes ld-${name}-rotate {
-  to {
-    transform: rotate(360deg);
-  }
+  ${turn}
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -74,6 +100,9 @@ function SpinnerStyle({
 function cssVars(vars) {
   return vars;
 }
+function step(index) {
+  return cssVars({ [STEP_VAR]: index });
+}
 function spinnerRoot(name, { className, color, duration: duration2, playState, size = DEFAULT_SIZE }) {
   return {
     "aria-hidden": true,
@@ -97,7 +126,7 @@ var css = `
 
 ${rotationCss("arc")}
 `;
-function Arc({ easing, ...rest }) {
+function Arc({ cap, easing, ...rest }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(SpinnerStyle, { name: "arc", children: css }),
     /* @__PURE__ */ jsx2(
@@ -116,7 +145,7 @@ function Arc({ easing, ...rest }) {
             r: "10",
             stroke: "currentColor",
             strokeDasharray: "18 44.8",
-            strokeLinecap: "round",
+            strokeLinecap: linecap(cap),
             strokeWidth: "2.5"
           }
         )
@@ -125,11 +154,150 @@ function Arc({ easing, ...rest }) {
   ] });
 }
 
-// src/bouncing-dots.tsx
+// src/atom.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ORBITS = Array.from({ length: 3 }, (_, index) => index);
+var TILT = 180 / ORBITS.length;
+var STROKE = `calc(${SIZE} * 0.055)`;
+var INNER_STROKE = `calc(${SIZE} * 0.045)`;
+var css2 = `
+.ld-atom {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-atom-shell {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${STROKE} solid currentColor;
+  border-radius: 9999px;
+}
+
+.ld-atom-orbit {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  transform: rotate(var(--ld-atom-tilt)) rotateX(90deg);
+}
+
+.ld-atom-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${INNER_STROKE} solid currentColor;
+  border-radius: 9999px;
+  transform: rotateX(90deg);
+}
+
+${rotationCss("atom")}
+
+.ld-atom-spin {
+  position: absolute;
+  inset: 0;
+  transform-style: preserve-3d;
+  animation-delay: ${stagger("atom", ORBITS.length)};
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-atom-spin {
+    transform: rotate(${TILT}deg);
+  }
+}
+`;
+function Atom({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(SpinnerStyle, { name: "atom", children: css2 }),
+    /* @__PURE__ */ jsxs2("div", { ...spinnerRoot("atom", rest), children: [
+      /* @__PURE__ */ jsx3("div", { className: "ld-atom-shell" }),
+      ORBITS.map((index) => /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "ld-atom-orbit",
+          style: cssVars({ "--ld-atom-tilt": `${index * TILT}deg` }),
+          children: /* @__PURE__ */ jsx3("div", { className: spinClass("atom", easing), style: step(index), children: /* @__PURE__ */ jsx3("div", { className: "ld-atom-ring" }) })
+        },
+        index
+      ))
+    ] })
+  ] });
+}
+
+// src/blocks.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_BLOCKS_SWEEP = "diagonal";
+var SIDE = 3;
+var CELLS = Array.from({ length: SIDE * SIDE }, (_, index) => ({
+  col: index % SIDE,
+  row: Math.floor(index / SIDE)
+}));
+var SWEEPS = {
+  columns: { count: SIDE, place: ({ col }) => col },
+  diagonal: { count: SIDE * 2 - 1, place: ({ col, row }) => row + col },
+  rows: { count: SIDE, place: ({ row }) => row }
+};
+var css3 = `
+.ld-blocks {
+  display: grid;
+  grid-template-columns: repeat(${SIDE}, 1fr);
+  grid-template-rows: repeat(${SIDE}, 1fr);
+  gap: calc(${SIZE} * 0.1);
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-blocks-cell {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.0625);
+  animation: ld-blocks-sweep ${duration("blocks")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+${Object.entries(SWEEPS).map(
+  ([sweep, { count }]) => `
+.ld-blocks-cell-${sweep} {
+  animation-delay: ${stagger("blocks", count)};
+}
+`
+).join("")}
+@keyframes ld-blocks-sweep {
+  0%,
+  70%,
+  100% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-blocks-cell {
+    transform: scale(0.8);
+    animation: none;
+  }
+}
+`;
+function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }) {
+  const { place } = SWEEPS[sweep];
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(SpinnerStyle, { name: "blocks", children: css3 }),
+    /* @__PURE__ */ jsx4("div", { ...spinnerRoot("blocks", rest), children: CELLS.map((cell) => /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `ld-blocks-cell ld-blocks-cell-${sweep}`,
+        style: step(place(cell))
+      },
+      `${cell.col}-${cell.row}`
+    )) })
+  ] });
+}
+
+// src/bouncing-dots.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var DOTS = Array.from({ length: 3 }, (_, index) => index);
 var dur = duration("bouncing-dots");
-var css2 = `
+var css4 = `
 .ld-bouncing-dots {
   display: flex;
   align-items: center;
@@ -170,14 +338,76 @@ var css2 = `
 }
 `;
 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)) })
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(SpinnerStyle, { name: "bouncing-dots", children: css4 }),
+    /* @__PURE__ */ jsx5("div", { ...spinnerRoot("bouncing-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx5("div", { className: "ld-bouncing-dots-dot" }, dot)) })
+  ] });
+}
+
+// src/cascade.tsx
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var RADII = [10.5, 7, 3.5];
+var SLOTS = 24;
+var css5 = `
+.ld-cascade {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-cascade-arc {
+  transform-origin: center;
+  animation: ld-cascade-turn ${duration("cascade")} cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite;
+  animation-delay: ${stagger("cascade", SLOTS)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-cascade-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-cascade-arc {
+    animation: none;
+  }
+}
+`;
+function Cascade({ cap, ...rest }) {
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx6(SpinnerStyle, { name: "cascade", children: css5 }),
+    /* @__PURE__ */ jsx6(
+      "svg",
+      {
+        ...spinnerRoot("cascade", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeLinecap: linecap(cap),
+        strokeWidth: "2",
+        viewBox: "0 0 24 24",
+        children: RADII.map((r, index) => {
+          const circumference = 2 * Math.PI * r;
+          return /* @__PURE__ */ jsx6(
+            "circle",
+            {
+              className: "ld-cascade-arc",
+              cx: "12",
+              cy: "12",
+              r,
+              strokeDasharray: `${circumference / 4} ${circumference * 3 / 4}`,
+              style: step(index)
+            },
+            r
+          );
+        })
+      }
+    )
   ] });
 }
 
 // src/circular-dots.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DOTS2 = [
   [8, 1.5],
   [12.5962, 3.4038],
@@ -188,16 +418,15 @@ var DOTS2 = [
   [1.5, 8],
   [3.4038, 3.4038]
 ];
-var dur2 = duration("circular-dots");
-var css3 = `
+var css6 = `
 .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: ld-circular-dots-fade ${duration("circular-dots")} linear infinite;
+  animation-delay: ${stagger("circular-dots", DOTS2.length)};
   animation-play-state: ${PLAY_STATE};
 }
 
@@ -218,23 +447,23 @@ var css3 = `
 }
 `;
 function CircularDots(props) {
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(SpinnerStyle, { name: "circular-dots", children: css3 }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx7(SpinnerStyle, { name: "circular-dots", children: css6 }),
+    /* @__PURE__ */ jsx7(
       "svg",
       {
         ...spinnerRoot("circular-dots", props),
         fill: "currentColor",
         role: "presentation",
         viewBox: "0 0 16 16",
-        children: DOTS2.map(([cx, cy], step) => /* @__PURE__ */ jsx4(
+        children: DOTS2.map(([cx, cy], index) => /* @__PURE__ */ jsx7(
           "circle",
           {
             className: "ld-circular-dots-dot",
             cx,
             cy,
             r: "1.5",
-            style: cssVars({ "--ld-circular-dots-step": step })
+            style: step(index)
           },
           `${cx}-${cy}`
         ))
@@ -244,17 +473,9 @@ function CircularDots(props) {
 }
 
 // src/classic.tsx
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } 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 = `
+var css7 = `
 .ld-classic {
   width: ${SIZE};
   height: ${SIZE};
@@ -276,10 +497,11 @@ var css4 = `
   height: 8%;
   background: currentColor;
   border-radius: 6px;
-  animation: ld-classic-spin ${dur3} linear infinite;
+  transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%);
+  animation: ld-classic-spin ${duration("classic")} linear infinite;
+  animation-delay: ${stagger("classic", BARS.length)};
   animation-play-state: ${PLAY_STATE};
 }
-${BAR_RULES}
 
 @keyframes ld-classic-spin {
   0% {
@@ -298,34 +520,35 @@ ${BAR_RULES}
 }
 `;
 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)) }) })
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(SpinnerStyle, { name: "classic", children: css7 }),
+    /* @__PURE__ */ jsx8("div", { ...spinnerRoot("classic", props), children: /* @__PURE__ */ jsx8("div", { className: "ld-classic-inner", children: BARS.map((bar) => /* @__PURE__ */ jsx8("div", { className: "ld-classic-bar", style: step(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 = `
+import { Fragment as Fragment8, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var TICKS = [
+  "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",
+  "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",
+  "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",
+  "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",
+  "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",
+  "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",
+  "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",
+  "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"
+];
+var css8 = `
 .ld-classic-v2 {
   width: ${SIZE};
   height: ${SIZE};
 }
 
 .ld-classic-v2-tick {
-  animation: ld-classic-v2-fade ${dur4} linear infinite;
+  animation: ld-classic-v2-fade ${duration("classic-v2")} linear infinite;
+  animation-delay: ${stagger("classic-v2", TICKS.length)};
   animation-play-state: ${PLAY_STATE};
 }
-${TICK_RULES}
 
 @keyframes ld-classic-v2-fade {
   0% {
@@ -344,81 +567,32 @@ ${TICK_RULES}
 }
 `;
 function ClassicV2(props) {
-  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx6(SpinnerStyle, { name: "classic-v2", children: css5 }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs8(Fragment8, { children: [
+    /* @__PURE__ */ jsx9(SpinnerStyle, { name: "classic-v2", children: css8 }),
+    /* @__PURE__ */ jsx9(
       "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"
-            }
-          )
-        ] })
+        children: /* @__PURE__ */ jsx9("g", { fill: "currentColor", children: TICKS.map((d, tick) => /* @__PURE__ */ jsx9(
+          "path",
+          {
+            className: "ld-classic-v2-tick",
+            d,
+            style: step(tick)
+          },
+          d
+        )) })
       }
     )
   ] });
 }
 
 // src/clock.tsx
-import { Fragment as Fragment6, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var css6 = `
+import { Fragment as Fragment9, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var css9 = `
 .ld-clock {
   width: ${SIZE};
   height: ${SIZE};
@@ -427,9 +601,9 @@ var css6 = `
 ${rotationCss("clock")}
 `;
 function Clock({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx7(SpinnerStyle, { name: "clock", children: css6 }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs9(Fragment9, { children: [
+    /* @__PURE__ */ jsx10(SpinnerStyle, { name: "clock", children: css9 }),
+    /* @__PURE__ */ jsxs9(
       "svg",
       {
         ...spinnerRoot("clock", rest),
@@ -437,8 +611,8 @@ function Clock({ easing, ...rest }) {
         role: "presentation",
         viewBox: "0 0 16 16",
         children: [
-          /* @__PURE__ */ jsx7("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
+          /* @__PURE__ */ jsx10(
             "path",
             {
               className: spinClass("clock", easing),
@@ -453,8 +627,8 @@ function Clock({ easing, ...rest }) {
 }
 
 // src/comet.tsx
-import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var css7 = `
+import { Fragment as Fragment10, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var css10 = `
 .ld-comet {
   --ld-comet-stroke: calc(${SIZE} * 0.12);
   position: relative;
@@ -490,18 +664,18 @@ var css7 = `
 ${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" })
+  return /* @__PURE__ */ jsxs10(Fragment10, { children: [
+    /* @__PURE__ */ jsx11(SpinnerStyle, { name: "comet", children: css10 }),
+    /* @__PURE__ */ jsx11("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs10("div", { className: spinClass("comet", easing), children: [
+      /* @__PURE__ */ jsx11("div", { className: "ld-comet-tail" }),
+      /* @__PURE__ */ jsx11("div", { className: "ld-comet-head" })
     ] }) })
   ] });
 }
 
 // src/compass.tsx
-import { Fragment as Fragment8, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var css8 = `
+import { Fragment as Fragment11, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var css11 = `
 .ld-compass {
   width: ${SIZE};
   height: ${SIZE};
@@ -526,98 +700,510 @@ var css8 = `
 }
 `;
 function Compass(props) {
-  return /* @__PURE__ */ jsxs8(Fragment8, { children: [
-    /* @__PURE__ */ jsx9(SpinnerStyle, { name: "compass", children: css8 }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs11(Fragment11, { children: [
+    /* @__PURE__ */ jsx12(SpinnerStyle, { name: "compass", children: css11 }),
+    /* @__PURE__ */ jsx12(
       "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" })
+        children: /* @__PURE__ */ jsxs11("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx12("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__ */ jsx12("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__ */ jsx12("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__ */ jsx12("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);
+// src/dual.tsx
+import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var css12 = `
+.ld-dual {
+  width: ${SIZE};
   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};
-}
+${rotationCss("dual")}
 
-@keyframes ld-linear-dots-fade {
-  0% {
-    opacity: 1;
-  }
-  66.67% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
+.ld-dual-inner {
+  animation-direction: reverse;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ld-linear-dots-dot {
-    opacity: 0.75;
-    animation: none;
+  .ld-dual-inner {
+    transform: rotate(180deg);
   }
 }
 `;
-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",
+function Dual({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs12(Fragment12, { children: [
+    /* @__PURE__ */ jsx13(SpinnerStyle, { name: "dual", children: css12 }),
+    /* @__PURE__ */ jsxs12(
+      "svg",
       {
-        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;
+        ...spinnerRoot("dual", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeLinecap: linecap(cap),
+        strokeWidth: "2.5",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx13(
+            "circle",
+            {
+              className: spinClass("dual", easing),
+              cx: "12",
+              cy: "12",
+              r: "10",
+              strokeDasharray: "18 44.8"
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "circle",
+            {
+              className: `ld-dual-inner ${spinClass("dual", easing)}`,
+              cx: "12",
+              cy: "12",
+              r: "5.5",
+              strokeDasharray: "10 24.6"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/eclipse.tsx
+import { Fragment as Fragment13, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var DOTS3 = [0, 1];
+var css13 = `
+.ld-eclipse {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-eclipse-dot {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  width: 40%;
+  height: 40%;
+  background: currentColor;
+  border-radius: 50%;
+  animation:
+    ld-eclipse-slide ${duration("eclipse")} ease-in-out infinite,
+    ld-eclipse-depth ${duration("eclipse")} ease-in-out infinite;
+  animation-delay: ${stagger("eclipse", DOTS3.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-eclipse-slide {
+  0%,
+  100% {
+    translate: 75% 0;
+  }
+  50% {
+    translate: -75% 0;
+  }
+}
+
+@keyframes ld-eclipse-depth {
+  0%,
+  50%,
+  100% {
+    opacity: 0.75;
+    scale: 1;
+  }
+  25% {
+    opacity: 1;
+    scale: 1.3;
+  }
+  75% {
+    opacity: 0.5;
+    scale: 0.7;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-eclipse-dot {
+    translate: calc(var(${STEP_VAR}) * 150% - 75%) 0;
+    animation: none;
+  }
+}
+`;
+function Eclipse(props) {
+  return /* @__PURE__ */ jsxs13(Fragment13, { children: [
+    /* @__PURE__ */ jsx14(SpinnerStyle, { name: "eclipse", children: css13 }),
+    /* @__PURE__ */ jsx14("div", { ...spinnerRoot("eclipse", props), children: DOTS3.map((index) => /* @__PURE__ */ jsx14("div", { className: "ld-eclipse-dot", style: step(index) }, index)) })
+  ] });
+}
+
+// src/flip.tsx
+import { Fragment as Fragment14, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var css14 = `
+.ld-flip {
+  width: ${SIZE};
+  height: ${SIZE};
+  perspective: calc(${SIZE} * 3);
+}
+
+.ld-flip-face {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.06);
+  animation: ld-flip-turn ${duration("flip")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-flip-turn {
+  0% {
+    transform: rotateX(0) rotateY(0);
+  }
+  50% {
+    transform: rotateX(-180deg) rotateY(0);
+  }
+  100% {
+    transform: rotateX(-180deg) rotateY(-180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-flip-face {
+    animation: none;
+  }
+}
+`;
+function Flip(props) {
+  return /* @__PURE__ */ jsxs14(Fragment14, { children: [
+    /* @__PURE__ */ jsx15(SpinnerStyle, { name: "flip", children: css14 }),
+    /* @__PURE__ */ jsx15("div", { ...spinnerRoot("flip", props), children: /* @__PURE__ */ jsx15("div", { className: "ld-flip-face" }) })
+  ] });
+}
+
+// src/gather.tsx
+import { Fragment as Fragment15, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var BLOCKS = [
+  { x: 1, y: 1 },
+  { x: -1, y: 1 },
+  { x: 1, y: -1 },
+  { x: -1, y: -1 }
+];
+var GAP = 24;
+var GAP_IN = 8;
+var BLOCK = (100 - GAP) / 2;
+var PULL = `${((GAP - GAP_IN) / 2 / BLOCK * 100).toFixed(1)}%`;
+var css15 = `
+.ld-gather {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-gather-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${GAP}%;
+  width: 100%;
+  height: 100%;
+  animation: ld-gather-turn ${duration("gather")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-gather-block {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.14);
+  animation: ld-gather-pull ${duration("gather")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-gather-pull {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  30%,
+  60% {
+    transform: translate(
+      calc(var(--ld-gather-x) * ${PULL}),
+      calc(var(--ld-gather-y) * ${PULL})
+    );
+  }
+}
+
+@keyframes ld-gather-turn {
+  0%,
+  30% {
+    transform: rotate(0);
+  }
+  60%,
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-gather-group,
+  .ld-gather-block {
+    animation: none;
+  }
+}
+`;
+function Gather(props) {
+  return /* @__PURE__ */ jsxs15(Fragment15, { children: [
+    /* @__PURE__ */ jsx16(SpinnerStyle, { name: "gather", children: css15 }),
+    /* @__PURE__ */ jsx16("div", { ...spinnerRoot("gather", props), children: /* @__PURE__ */ jsx16("div", { className: "ld-gather-group", children: BLOCKS.map(({ x, y }) => /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: "ld-gather-block",
+        style: cssVars({ "--ld-gather-x": x, "--ld-gather-y": y })
+      },
+      `${x}${y}`
+    )) }) })
+  ] });
+}
+
+// src/leap.tsx
+import { Fragment as Fragment16, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var DOTS4 = Array.from({ length: 3 }, (_, index) => index);
+var css16 = `
+.ld-leap {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-leap-wrapper {
+  position: absolute;
+  inset: 0;
+  animation: ld-leap-hop ${duration("leap")} ease-in-out infinite;
+  animation-delay: ${stagger("leap", DOTS4.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-leap-dot {
+  position: absolute;
+  top: 39%;
+  left: 0;
+  width: 22%;
+  height: 22%;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+@keyframes ld-leap-hop {
+  0% {
+    transform: translateX(0) rotate(0);
+  }
+  33.33% {
+    transform: translateX(0) rotate(180deg);
+  }
+  66.66% {
+    transform: translateX(-39%) rotate(180deg);
+  }
+  99.99% {
+    transform: translateX(-78%) rotate(180deg);
+  }
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-leap-wrapper {
+    transform: translateX(calc(var(${STEP_VAR}) * 39%));
+    animation: none;
+  }
+}
+`;
+function Leap(props) {
+  return /* @__PURE__ */ jsxs16(Fragment16, { children: [
+    /* @__PURE__ */ jsx17(SpinnerStyle, { name: "leap", children: css16 }),
+    /* @__PURE__ */ jsx17("div", { ...spinnerRoot("leap", props), children: DOTS4.map((index) => /* @__PURE__ */ jsx17("div", { className: "ld-leap-wrapper", style: step(index), children: /* @__PURE__ */ jsx17("div", { className: "ld-leap-dot" }) }, index)) })
+  ] });
+}
+
+// src/linear-dots.tsx
+import { Fragment as Fragment17, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var DOTS5 = Array.from({ length: 3 }, (_, index) => index);
+var css17 = `
+.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 ${duration("linear-dots")} linear infinite;
+  animation-delay: ${stagger("linear-dots", DOTS5.length)};
+  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__ */ jsxs17(Fragment17, { children: [
+    /* @__PURE__ */ jsx18(SpinnerStyle, { name: "linear-dots", children: css17 }),
+    /* @__PURE__ */ jsx18("div", { ...spinnerRoot("linear-dots", props), children: DOTS5.map((dot) => /* @__PURE__ */ jsx18("div", { className: "ld-linear-dots-dot", style: step(dot) }, dot)) })
+  ] });
+}
+
+// src/loading.tsx
+import { Fragment as Fragment18, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var BLOCK2 = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z";
+var SEGMENTS = [
+  { x: 12, y: 6 },
+  { x: 10, y: 10 },
+  { x: 6, y: 12 },
+  { x: 2, y: 10 },
+  { x: 0, y: 6 },
+  { x: 2, y: 2 },
+  { x: 6, y: 0 },
+  { x: 10, y: 2 }
+];
+var css18 = `
+.ld-loading {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-loading-segment {
+  animation: ld-loading-fade ${duration("loading")} linear infinite;
+  animation-delay: ${stagger("loading", SEGMENTS.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-loading-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-loading-segment {
+    opacity: 0.6;
+    animation: none;
+  }
+}
+`;
+function Loading(props) {
+  return /* @__PURE__ */ jsxs18(Fragment18, { children: [
+    /* @__PURE__ */ jsx19(SpinnerStyle, { name: "loading", children: css18 }),
+    /* @__PURE__ */ jsx19(
+      "svg",
+      {
+        ...spinnerRoot("loading", props),
+        fill: "currentColor",
+        role: "presentation",
+        viewBox: "0 0 15 15",
+        children: SEGMENTS.map(({ x, y }, segment) => /* @__PURE__ */ jsx19(
+          "path",
+          {
+            className: "ld-loading-segment",
+            d: BLOCK2,
+            style: step(segment),
+            transform: `translate(${x} ${y})`
+          },
+          `${x}-${y}`
+        ))
+      }
+    )
+  ] });
+}
+
+// src/morph.tsx
+import { Fragment as Fragment19, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var css19 = `
+.ld-morph {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-morph-shape {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.08);
+  animation: ld-morph-round ${duration("morph")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-morph-round {
+  0% {
+    border-radius: calc(${SIZE} * 0.08);
+    transform: rotate(0);
+  }
+  50% {
+    border-radius: 50%;
+    transform: rotate(45deg);
+  }
+  100% {
+    border-radius: calc(${SIZE} * 0.08);
+    transform: rotate(90deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-morph-shape {
+    animation: none;
+  }
+}
+`;
+function Morph(props) {
+  return /* @__PURE__ */ jsxs19(Fragment19, { children: [
+    /* @__PURE__ */ jsx20(SpinnerStyle, { name: "morph", children: css19 }),
+    /* @__PURE__ */ jsx20("div", { ...spinnerRoot("morph", props), children: /* @__PURE__ */ jsx20("div", { className: "ld-morph-shape" }) })
+  ] });
+}
+
+// src/orbit.tsx
+import { Fragment as Fragment20, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+var css20 = `
+.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);
@@ -637,18 +1223,18 @@ var css10 = `
 ${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)}` })
+  return /* @__PURE__ */ jsxs20(Fragment20, { children: [
+    /* @__PURE__ */ jsx21(SpinnerStyle, { name: "orbit", children: css20 }),
+    /* @__PURE__ */ jsxs20("div", { ...spinnerRoot("orbit", rest), children: [
+      /* @__PURE__ */ jsx21("div", { className: "ld-orbit-dot" }),
+      /* @__PURE__ */ jsx21("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 = `
+import { Fragment as Fragment21, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+var css21 = `
 .ld-pulse {
   width: ${SIZE};
   height: ${SIZE};
@@ -679,9 +1265,9 @@ var css11 = `
 }
 `;
 function Pulse(props) {
-  return /* @__PURE__ */ jsxs11(Fragment11, { children: [
-    /* @__PURE__ */ jsx12(SpinnerStyle, { name: "pulse", children: css11 }),
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs21(Fragment21, { children: [
+    /* @__PURE__ */ jsx22(SpinnerStyle, { name: "pulse", children: css21 }),
+    /* @__PURE__ */ jsxs21(
       "svg",
       {
         ...spinnerRoot("pulse", props),
@@ -689,7 +1275,7 @@ function Pulse(props) {
         role: "presentation",
         viewBox: "0 0 16 16",
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx22(
             "circle",
             {
               className: "ld-pulse-ring",
@@ -699,7 +1285,7 @@ function Pulse(props) {
               r: "8"
             }
           ),
-          /* @__PURE__ */ jsx12("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+          /* @__PURE__ */ jsx22("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
         ]
       }
     )
@@ -708,8 +1294,8 @@ function Pulse(props) {
 
 // src/radar.tsx
 import { useId } from "react";
-import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-var css12 = `
+import { Fragment as Fragment22, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+var css22 = `
 .ld-radar {
   width: ${SIZE};
   height: ${SIZE};
@@ -719,9 +1305,9 @@ ${rotationCss("radar")}
 `;
 function Radar({ easing, ...rest }) {
   const beamGradient = useId();
-  return /* @__PURE__ */ jsxs12(Fragment12, { children: [
-    /* @__PURE__ */ jsx13(SpinnerStyle, { name: "radar", children: css12 }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs22(Fragment22, { children: [
+    /* @__PURE__ */ jsx23(SpinnerStyle, { name: "radar", children: css22 }),
+    /* @__PURE__ */ jsxs22(
       "svg",
       {
         ...spinnerRoot("radar", rest),
@@ -729,7 +1315,7 @@ function Radar({ easing, ...rest }) {
         role: "presentation",
         viewBox: "0 0 16 16",
         children: [
-          /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsx23("defs", { children: /* @__PURE__ */ jsxs22(
             "radialGradient",
             {
               cx: "8",
@@ -738,14 +1324,14 @@ function Radar({ easing, ...rest }) {
               id: beamGradient,
               r: "8",
               children: [
-                /* @__PURE__ */ jsx13("stop", { offset: "0.3334", stopColor: "currentColor" }),
-                /* @__PURE__ */ jsx13("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+                /* @__PURE__ */ jsx23("stop", { offset: "0.3334", stopColor: "currentColor" }),
+                /* @__PURE__ */ jsx23("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(
+          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.2", r: "8" }),
+          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", opacity: "0.2", r: "5.5", stroke: "currentColor" }),
+          /* @__PURE__ */ jsx23(
             "path",
             {
               className: spinClass("radar", easing),
@@ -753,7 +1339,7 @@ function Radar({ easing, ...rest }) {
               fill: `url(#${beamGradient})`
             }
           ),
-          /* @__PURE__ */ jsx13("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+          /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
         ]
       }
     )
@@ -761,8 +1347,8 @@ function Radar({ easing, ...rest }) {
 }
 
 // src/ring.tsx
-import { Fragment as Fragment13, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var css13 = `
+import { Fragment as Fragment23, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+var css23 = `
 .ld-ring {
   width: ${SIZE};
   height: ${SIZE};
@@ -770,10 +1356,10 @@ var css13 = `
 
 ${rotationCss("ring")}
 `;
-function Ring({ easing, ...rest }) {
-  return /* @__PURE__ */ jsxs13(Fragment13, { children: [
-    /* @__PURE__ */ jsx14(SpinnerStyle, { name: "ring", children: css13 }),
-    /* @__PURE__ */ jsxs13(
+function Ring({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs23(Fragment23, { children: [
+    /* @__PURE__ */ jsx24(SpinnerStyle, { name: "ring", children: css23 }),
+    /* @__PURE__ */ jsxs23(
       "svg",
       {
         ...spinnerRoot("ring", rest),
@@ -781,7 +1367,7 @@ function Ring({ easing, ...rest }) {
         role: "presentation",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx24(
             "circle",
             {
               cx: "12",
@@ -792,7 +1378,7 @@ function Ring({ easing, ...rest }) {
               strokeWidth: "2.5"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx24(
             "circle",
             {
               className: spinClass("ring", easing),
@@ -801,7 +1387,7 @@ function Ring({ easing, ...rest }) {
               r: "10",
               stroke: "currentColor",
               strokeDasharray: "16 46.8",
-              strokeLinecap: "round",
+              strokeLinecap: linecap(cap),
               strokeWidth: "2.5"
             }
           )
@@ -811,15 +1397,211 @@ function Ring({ easing, ...rest }) {
   ] });
 }
 
+// src/ripple.tsx
+import { Fragment as Fragment24, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+var DEFAULT_RIPPLE_DIRECTION = "out";
+var RINGS = Array.from({ length: 3 }, (_, index) => index);
+var css24 = `
+.ld-ripple {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-ripple-ring {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: calc(${SIZE} * 0.08) solid currentColor;
+  border-radius: 9999px;
+  animation: ld-ripple-spread ${duration("ripple")} ease-out infinite;
+  animation-delay: ${stagger("ripple", RINGS.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-ripple-ring-in {
+  animation-direction: reverse;
+}
+
+@keyframes ld-ripple-spread {
+  from {
+    opacity: 1;
+    transform: scale(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-ripple-ring {
+    opacity: 0.4;
+    transform: scale(calc((var(${STEP_VAR}) + 1) / ${RINGS.length}));
+    animation: none;
+  }
+}
+`;
+function Ripple({
+  direction = DEFAULT_RIPPLE_DIRECTION,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs24(Fragment24, { children: [
+    /* @__PURE__ */ jsx25(SpinnerStyle, { name: "ripple", children: css24 }),
+    /* @__PURE__ */ jsx25("div", { ...spinnerRoot("ripple", rest), children: RINGS.map((index) => /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: `ld-ripple-ring ld-ripple-ring-${direction}`,
+        style: step(index)
+      },
+      index
+    )) })
+  ] });
+}
+
+// src/slide.tsx
+import { Fragment as Fragment25, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+var DOT = 34;
+var GAP2 = 20;
+var MARGIN = (100 - 2 * DOT - GAP2) / 2;
+var FAR = `${((DOT + GAP2) / DOT * 100).toFixed(1)}%`;
+var RESTS = [
+  `translate(${FAR}, 0)`,
+  "translate(0, 0)",
+  `translate(0, ${FAR})`
+];
+var css25 = `
+.ld-slide {
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-slide-dot {
+  position: absolute;
+  top: ${MARGIN}%;
+  left: ${MARGIN}%;
+  width: ${DOT}%;
+  height: ${DOT}%;
+  background: currentColor;
+  border-radius: 50%;
+  animation: ld-slide-walk ${duration("slide")} ease-in-out infinite;
+  animation-delay: ${stagger("slide", RESTS.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-slide-walk {
+  0% {
+    transform: translate(${FAR}, 0);
+  }
+  8.33%,
+  25% {
+    transform: translate(${FAR}, ${FAR});
+  }
+  33.33%,
+  50% {
+    transform: translate(0, ${FAR});
+  }
+  58.33%,
+  75% {
+    transform: translate(0, 0);
+  }
+  83.33%,
+  100% {
+    transform: translate(${FAR}, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-slide-dot {
+    transform: var(--ld-slide-rest);
+    animation: none;
+  }
+}
+`;
+function Slide(props) {
+  return /* @__PURE__ */ jsxs25(Fragment25, { children: [
+    /* @__PURE__ */ jsx26(SpinnerStyle, { name: "slide", children: css25 }),
+    /* @__PURE__ */ jsx26("div", { ...spinnerRoot("slide", props), children: RESTS.map((rest, index) => /* @__PURE__ */ jsx26(
+      "div",
+      {
+        className: "ld-slide-dot",
+        style: cssVars({ ...step(index), "--ld-slide-rest": rest })
+      },
+      rest
+    )) })
+  ] });
+}
+
+// src/snake.tsx
+import { Fragment as Fragment26, jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+var css26 = `
+.ld-snake {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("snake")}
+
+.ld-snake-dash {
+  animation: ld-snake-stretch ${duration("snake")} ease-in-out infinite;
+  animation-play-state: ${PLAY_STATE};
+}
+
+@keyframes ld-snake-stretch {
+  0% {
+    stroke-dasharray: 1 100;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -17;
+  }
+  100% {
+    stroke-dasharray: 45 100;
+    stroke-dashoffset: -62;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-snake-dash {
+    stroke-dasharray: 18 100;
+    animation: none;
+  }
+}
+`;
+function Snake({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs26(Fragment26, { children: [
+    /* @__PURE__ */ jsx27(SpinnerStyle, { name: "snake", children: css26 }),
+    /* @__PURE__ */ jsx27(
+      "svg",
+      {
+        ...spinnerRoot("snake", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx27("g", { className: spinClass("snake", easing), children: /* @__PURE__ */ jsx27(
+          "circle",
+          {
+            className: "ld-snake-dash",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeLinecap: linecap(cap),
+            strokeWidth: "2.5"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
 // src/swirl.tsx
-import { Fragment as Fragment14, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx28, jsxs as jsxs27 } 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 = `
+var PLACES = RING.filter((place) => place !== null).length;
+var css27 = `
 .ld-swirl {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -834,8 +1616,8 @@ var css14 = `
 .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: ld-swirl-fade ${duration("swirl")} linear infinite;
+  animation-delay: ${stagger("swirl", PLACES)};
   animation-play-state: ${PLAY_STATE};
 }
 
@@ -856,55 +1638,197 @@ var css14 = `
 }
 `;
 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
-      )
+  return /* @__PURE__ */ jsxs27(Fragment27, { children: [
+    /* @__PURE__ */ jsx28(SpinnerStyle, { name: "swirl", children: css27 }),
+    /* @__PURE__ */ jsx28("div", { ...spinnerRoot("swirl", props), children: RING.map(
+      (place, index) => place === null ? /* @__PURE__ */ jsx28("div", {}, index) : /* @__PURE__ */ jsx28("div", { className: "ld-swirl-cell", style: step(place) }, index)
     ) })
   ] });
 }
 
+// src/trace.tsx
+import { Fragment as Fragment28, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+var VIEW = 20;
+var SIDE2 = 17.5;
+var RADIUS = 4;
+var PERIMETER = 4 * (SIDE2 - 2 * RADIUS) + 2 * Math.PI * RADIUS;
+var DASH = 16;
+var RECT = {
+  height: SIDE2,
+  rx: RADIUS,
+  width: SIDE2,
+  x: (VIEW - SIDE2) / 2,
+  y: (VIEW - SIDE2) / 2
+};
+var css28 = `
+.ld-trace {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss(
+  "trace",
+  `to {
+    stroke-dashoffset: ${-PERIMETER};
+  }`
+)}
+`;
+function Trace({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs28(Fragment28, { children: [
+    /* @__PURE__ */ jsx29(SpinnerStyle, { name: "trace", children: css28 }),
+    /* @__PURE__ */ jsxs28(
+      "svg",
+      {
+        ...spinnerRoot("trace", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        viewBox: `0 0 ${VIEW} ${VIEW}`,
+        children: [
+          /* @__PURE__ */ jsx29("rect", { ...RECT, opacity: "0.2" }),
+          /* @__PURE__ */ jsx29(
+            "rect",
+            {
+              ...RECT,
+              className: spinClass("trace", easing),
+              strokeDasharray: `${DASH} ${PERIMETER - DASH}`,
+              strokeLinecap: linecap(cap)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/wave.tsx
+import { Fragment as Fragment29, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+var DEFAULT_WAVE_ORIGIN = "center";
+var BARS2 = Array.from({ length: 5 }, (_, index) => index);
+var css29 = `
+.ld-wave {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-wave-bar {
+  width: calc(${SIZE} * 0.12);
+  height: 100%;
+  background: currentColor;
+  border-radius: 9999px;
+  animation: ld-wave-rise ${duration("wave")} ease-in-out infinite;
+  animation-delay: ${stagger("wave", BARS2.length)};
+  animation-play-state: ${PLAY_STATE};
+}
+
+.ld-wave-bar-bottom {
+  align-self: flex-end;
+}
+
+@keyframes ld-wave-rise {
+  0%,
+  100% {
+    height: 30%;
+  }
+  50% {
+    height: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-wave-bar {
+    height: calc((0.4 + var(${STEP_VAR}) * 0.15) * 100%);
+    animation: none;
+  }
+}
+`;
+function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
+  return /* @__PURE__ */ jsxs29(Fragment29, { children: [
+    /* @__PURE__ */ jsx30(SpinnerStyle, { name: "wave", children: css29 }),
+    /* @__PURE__ */ jsx30("div", { ...spinnerRoot("wave", rest), children: BARS2.map((index) => /* @__PURE__ */ jsx30(
+      "div",
+      {
+        className: `ld-wave-bar ld-wave-bar-${origin}`,
+        style: step(index)
+      },
+      index
+    )) })
+  ] });
+}
+
 // src/spinners.ts
 var SPINNERS = {
   arc: Arc,
+  atom: Atom,
+  blocks: Blocks,
   "bouncing-dots": BouncingDots,
+  cascade: Cascade,
   "circular-dots": CircularDots,
   classic: Classic,
   "classic-v2": ClassicV2,
   clock: Clock,
   comet: Comet,
   compass: Compass,
+  dual: Dual,
+  eclipse: Eclipse,
+  flip: Flip,
+  gather: Gather,
+  leap: Leap,
   "linear-dots": LinearDots,
+  loading: Loading,
+  morph: Morph,
   orbit: Orbit,
   pulse: Pulse,
   radar: Radar,
   ring: Ring,
-  swirl: Swirl
+  ripple: Ripple,
+  slide: Slide,
+  snake: Snake,
+  swirl: Swirl,
+  trace: Trace,
+  wave: Wave
 };
 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
 };