loading-dev 0.3.3 → 0.3.5

package/dist/chunk-BAVSTTWG.js

@@ -0,0 +1,88 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/atom.tsx
+import { Fragment, jsx, jsxs } 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 css = `
+.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "atom", children: css }),
+    /* @__PURE__ */ jsxs("div", { ...spinnerRoot("atom", rest), children: [
+      /* @__PURE__ */ jsx("div", { className: "ld-atom-shell" }),
+      ORBITS.map((index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ld-atom-orbit",
+          style: cssVars({ "--ld-atom-tilt": `${index * TILT}deg` }),
+          children: /* @__PURE__ */ jsx("div", { className: spinClass("atom", easing), style: step(index), children: /* @__PURE__ */ jsx("div", { className: "ld-atom-ring" }) })
+        },
+        index
+      ))
+    ] })
+  ] });
+}
+
+export {
+  Atom
+};

package/dist/chunk-BCIAMPLU.js

@@ -0,0 +1,87 @@
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.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);
+  }
+}
+`;
+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-DKYEZLIN.js

@@ -0,0 +1,72 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/wave.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_WAVE_ORIGIN = "center";
+var BARS = Array.from({ length: 5 }, (_, index) => index);
+var css = `
+.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("wave", "ld-wave-rise", "ease-in-out")}
+  animation-delay: ${stagger("wave", BARS.length)};
+}
+
+.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%);
+  }
+}
+`;
+function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "wave", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("wave", rest), children: BARS.map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ld-wave-bar ld-wave-bar-${origin}`,
+        style: step(index)
+      },
+      index
+    )) })
+  ] });
+}
+
+export {
+  DEFAULT_WAVE_ORIGIN,
+  Wave
+};

package/dist/chunk-FQ2U2M7F.js

@@ -0,0 +1,76 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.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}));
+  }
+}
+`;
+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-FWH6VWVK.js

@@ -0,0 +1,59 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/linear-dots.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = Array.from({ length: 3 }, (_, index) => index);
+var css = `
+.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("linear-dots", "ld-linear-dots-fade", "linear")}
+  animation-delay: ${stagger("linear-dots", DOTS.length)};
+}
+
+@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;
+  }
+}
+`;
+function LinearDots(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "linear-dots", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("linear-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx("div", { className: "ld-linear-dots-dot", style: step(dot) }, dot)) })
+  ] });
+}
+
+export {
+  LinearDots
+};

package/dist/chunk-HL7TIIDB.js

@@ -0,0 +1,124 @@
+import {
+  Swirl
+} from "./chunk-SUUR5WMA.js";
+import {
+  Trace
+} from "./chunk-KAZ5BTXC.js";
+import {
+  Wave
+} from "./chunk-DKYEZLIN.js";
+import {
+  Orbit
+} from "./chunk-LDXBT62V.js";
+import {
+  Pulse
+} from "./chunk-PM6DU637.js";
+import {
+  Radar
+} from "./chunk-2OX27TAE.js";
+import {
+  Ring
+} from "./chunk-L2DUMHO4.js";
+import {
+  Ripple
+} from "./chunk-FQ2U2M7F.js";
+import {
+  Slide
+} from "./chunk-BCIAMPLU.js";
+import {
+  Snake
+} from "./chunk-UOXB5QOZ.js";
+import {
+  Flip
+} from "./chunk-YIB63EKJ.js";
+import {
+  Gather
+} from "./chunk-JKLL7YYG.js";
+import {
+  Leap
+} from "./chunk-4O4ADYWE.js";
+import {
+  LinearDots
+} from "./chunk-FWH6VWVK.js";
+import {
+  Loading
+} from "./chunk-RAHAQ7XK.js";
+import {
+  Morph
+} from "./chunk-P4BSSDSY.js";
+import {
+  Classic
+} from "./chunk-IJJULNRU.js";
+import {
+  Clock
+} from "./chunk-2TYML5J2.js";
+import {
+  Comet
+} from "./chunk-UXTZTFNZ.js";
+import {
+  Compass
+} from "./chunk-JQNF5GYA.js";
+import {
+  Dual
+} from "./chunk-5UAEBEER.js";
+import {
+  Eclipse
+} from "./chunk-2LMGBBRJ.js";
+import {
+  Arc
+} from "./chunk-MAKBZTL3.js";
+import {
+  Atom
+} from "./chunk-BAVSTTWG.js";
+import {
+  Blocks
+} from "./chunk-VZX7APSS.js";
+import {
+  BouncingDots
+} from "./chunk-ULWRXY3A.js";
+import {
+  Cascade
+} from "./chunk-KOYM24WV.js";
+import {
+  CircularDots
+} from "./chunk-3WMZVDPS.js";
+import {
+  ClassicV2
+} from "./chunk-R5ZDKN3Z.js";
+
+// 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,
+  ripple: Ripple,
+  slide: Slide,
+  snake: Snake,
+  swirl: Swirl,
+  trace: Trace,
+  wave: Wave
+};
+
+export {
+  SPINNERS
+};

package/dist/chunk-IJJULNRU.js

@@ -0,0 +1,53 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  STEP_VAR
+} 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%);
+}
+
+${fadeCss("classic", "bar", BARS.length, { dim: 0.15, rest: 0.5 })}
+`;
+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
+};

package/dist/chunk-JKLL7YYG.js

@@ -0,0 +1,85 @@
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/gather.tsx
+import { Fragment, jsx, jsxs } 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 css = `
+.ld-gather {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-gather-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${GAP}%;
+  width: 100%;
+  height: 100%;
+  ${animation("gather", "ld-gather-turn", "ease-in-out")}
+}
+
+.ld-gather-block {
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.14);
+  ${animation("gather", "ld-gather-pull", "ease-in-out")}
+}
+
+@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);
+  }
+}
+`;
+function Gather(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "gather", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("gather", props), children: /* @__PURE__ */ jsx("div", { className: "ld-gather-group", children: BLOCKS.map(({ x, y }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ld-gather-block",
+        style: cssVars({ "--ld-gather-x": x, "--ld-gather-y": y })
+      },
+      `${x}${y}`
+    )) }) })
+  ] });
+}
+
+export {
+  Gather
+};

package/dist/chunk-JNR4T6LZ.js

@@ -0,0 +1,10 @@
+// src/cap.ts
+var DEFAULT_CAP = "round";
+function linecap(cap = DEFAULT_CAP) {
+  return cap === "flat" ? "butt" : "round";
+}
+
+export {
+  DEFAULT_CAP,
+  linecap
+};

package/dist/chunk-JQNF5GYA.js

@@ -0,0 +1,52 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/compass.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-compass {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-compass-ticks {
+  transform-origin: center;
+  ${animation("compass", "ld-compass-turn", "ease-in-out")}
+}
+
+@keyframes ld-compass-turn {
+  to {
+    transform: rotate(90deg);
+  }
+}
+`;
+function Compass(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "compass", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("compass", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: /* @__PURE__ */ jsxs("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
+          /* @__PURE__ */ jsx("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__ */ jsx("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__ */ jsx("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__ */ jsx("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" })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  Compass
+};