loading-dev 0.3.1 → 0.3.4

package/dist/chunk-AHW6IXXT.js

@@ -0,0 +1,78 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/eclipse.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = [0, 1];
+var css = `
+.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("eclipse", ["ld-eclipse-slide", "ld-eclipse-depth"], "ease-in-out")}
+  animation-delay: ${stagger("eclipse", DOTS.length)};
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "eclipse", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("eclipse", props), children: DOTS.map((index) => /* @__PURE__ */ jsx("div", { className: "ld-eclipse-dot", style: step(index) }, index)) })
+  ] });
+}
+
+export {
+  Eclipse
+};

package/dist/chunk-AY4VLQBZ.js

@@ -0,0 +1,57 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/morph.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-morph {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-morph-shape {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.08);
+  ${animation("morph", "ld-morph-round", "ease-in-out")}
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "morph", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("morph", props), children: /* @__PURE__ */ jsx("div", { className: "ld-morph-shape" }) })
+  ] });
+}
+
+export {
+  Morph
+};

package/dist/chunk-BMJ3AGRK.js

@@ -0,0 +1,62 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/swirl.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RING = [0, 1, 2, 7, null, 3, 6, 5, 4];
+var PLACES = RING.filter((place) => place !== null).length;
+var css = `
+.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("swirl", "ld-swirl-fade", "linear")}
+  animation-delay: ${stagger("swirl", PLACES)};
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "swirl", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("swirl", props), children: RING.map(
+      (place, index) => place === null ? /* @__PURE__ */ jsx("div", {}, index) : /* @__PURE__ */ jsx("div", { className: "ld-swirl-cell", style: step(place) }, index)
+    ) })
+  ] });
+}
+
+export {
+  Swirl
+};

package/dist/chunk-FKUMWHUL.js

@@ -0,0 +1,71 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/pulse.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-pulse {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-pulse-ring {
+  transform-origin: center;
+  ${animation("pulse", "ld-pulse-ripple", "ease-out")}
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "pulse", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("pulse", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ld-pulse-ring",
+              cx: "8",
+              cy: "8",
+              fill: "currentColor",
+              r: "8"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", fill: "currentColor", r: "2" })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Pulse
+};

package/dist/chunk-HDBQBCTN.js

@@ -0,0 +1,74 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/trace.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var VIEW = 20;
+var SIDE = 17.5;
+var RADIUS = 4;
+var PERIMETER = 4 * (SIDE - 2 * RADIUS) + 2 * Math.PI * RADIUS;
+var DASH = 16;
+var RECT = {
+  height: SIDE,
+  rx: RADIUS,
+  width: SIDE,
+  x: (VIEW - SIDE) / 2,
+  y: (VIEW - SIDE) / 2
+};
+var css = `
+.ld-trace {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss(
+  "trace",
+  `to {
+    stroke-dashoffset: ${-PERIMETER};
+  }`
+)}
+`;
+function Trace({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "trace", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("trace", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        viewBox: `0 0 ${VIEW} ${VIEW}`,
+        children: [
+          /* @__PURE__ */ jsx("rect", { ...RECT, opacity: "0.2" }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              ...RECT,
+              className: spinClass("trace", easing),
+              strokeDasharray: `${DASH} ${PERIMETER - DASH}`,
+              strokeLinecap: linecap(cap)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Trace
+};

package/dist/chunk-I5CFO2M5.js

@@ -0,0 +1,78 @@
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/cascade.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RADII = [10.5, 7, 3.5];
+var SLOTS = 24;
+var css = `
+.ld-cascade {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-cascade-arc {
+  transform-origin: center;
+  ${animation("cascade", "ld-cascade-turn", "cubic-bezier(0.68, -0.75, 0.265, 1.75)")}
+  animation-delay: ${stagger("cascade", SLOTS)};
+}
+
+@keyframes ld-cascade-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-cascade-arc {
+    animation: none;
+  }
+}
+`;
+function Cascade({ cap, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "cascade", children: css }),
+    /* @__PURE__ */ jsx(
+      "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__ */ jsx(
+            "circle",
+            {
+              className: "ld-cascade-arc",
+              cx: "12",
+              cy: "12",
+              r,
+              strokeDasharray: `${circumference / 4} ${circumference * 3 / 4}`,
+              style: step(index)
+            },
+            r
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export {
+  Cascade
+};

package/dist/chunk-IQ2WQZFY.js

@@ -0,0 +1,51 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/clock.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-clock {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("clock")}
+`;
+function Clock({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "clock", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("clock", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", fill: "currentColor", opacity: "0.1", r: "8" }),
+          /* @__PURE__ */ jsx(
+            "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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Clock
+};

package/dist/chunk-IRMB7CHZ.js

@@ -0,0 +1,88 @@
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/slide.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOT = 34;
+var GAP = 20;
+var MARGIN = (100 - 2 * DOT - GAP) / 2;
+var FAR = `${((DOT + GAP) / DOT * 100).toFixed(1)}%`;
+var RESTS = [
+  `translate(${FAR}, 0)`,
+  "translate(0, 0)",
+  `translate(0, ${FAR})`
+];
+var css = `
+.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("slide", "ld-slide-walk", "ease-in-out")}
+  animation-delay: ${stagger("slide", RESTS.length)};
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "slide", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("slide", props), children: RESTS.map((rest, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ld-slide-dot",
+        style: cssVars({ ...step(index), "--ld-slide-rest": rest })
+      },
+      rest
+    )) })
+  ] });
+}
+
+export {
+  Slide
+};

package/dist/chunk-IWVH2GKE.js

@@ -0,0 +1,77 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/ripple.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_RIPPLE_DIRECTION = "out";
+var RINGS = Array.from({ length: 3 }, (_, index) => index);
+var css = `
+.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("ripple", "ld-ripple-spread", "ease-out")}
+  animation-delay: ${stagger("ripple", RINGS.length)};
+}
+
+.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "ripple", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("ripple", rest), children: RINGS.map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ld-ripple-ring ld-ripple-ring-${direction}`,
+        style: step(index)
+      },
+      index
+    )) })
+  ] });
+}
+
+export {
+  DEFAULT_RIPPLE_DIRECTION,
+  Ripple
+};

package/dist/chunk-IZ4TRHOC.js

@@ -0,0 +1,68 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/classic.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BARS = Array.from({ length: 12 }, (_, index) => index);
+var css = `
+.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;
+  transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%);
+  ${animation("classic", "ld-classic-spin", "linear")}
+  animation-delay: ${stagger("classic", BARS.length)};
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "classic", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("classic", props), children: /* @__PURE__ */ jsx("div", { className: "ld-classic-inner", children: BARS.map((bar) => /* @__PURE__ */ jsx("div", { className: "ld-classic-bar", style: step(bar) }, bar)) }) })
+  ] });
+}
+
+export {
+  Classic
+};