loading-dev 0.3.3 → 0.3.5

package/dist/chunk-KAZ5BTXC.js

@@ -0,0 +1,74 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.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-KOYM24WV.js

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

@@ -0,0 +1,69 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/ring.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-ring {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("ring")}
+`;
+function Ring({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "ring", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("ring", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "12",
+              cy: "12",
+              opacity: "0.2",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "2.5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: spinClass("ring", easing),
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeDasharray: "16 46.8",
+              strokeLinecap: linecap(cap),
+              strokeWidth: "2.5"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Ring
+};

package/dist/chunk-LDXBT62V.js

@@ -0,0 +1,57 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/orbit.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "orbit", children: css }),
+    /* @__PURE__ */ jsxs("div", { ...spinnerRoot("orbit", rest), children: [
+      /* @__PURE__ */ jsx("div", { className: "ld-orbit-dot" }),
+      /* @__PURE__ */ jsx("div", { className: `ld-orbit-track ${spinClass("orbit", easing)}` })
+    ] })
+  ] });
+}
+
+export {
+  Orbit
+};

package/dist/chunk-MAKBZTL3.js

@@ -0,0 +1,56 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/arc.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-arc {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("arc")}
+`;
+function Arc({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "arc", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("arc", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: spinClass("arc", easing),
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeDasharray: "18 44.8",
+            strokeLinecap: linecap(cap),
+            strokeWidth: "2.5"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  Arc
+};

package/dist/chunk-OMNMMKI7.js

@@ -0,0 +1,64 @@
+// 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: 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]}ms)`;
+}
+function stagger(name, count) {
+  return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`;
+}
+var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
+function animation(name, keyframes, timing) {
+  const runs = [keyframes].flat().map((frames) => `${frames} ${duration(name)} ${timing} infinite`);
+  return `animation: ${runs.join(", ")};
+  animation-play-state: ${PLAY_STATE};`;
+}
+
+export {
+  DURATION_VAR,
+  PLAY_STATE_VAR,
+  SIZE_VAR,
+  STEP_VAR,
+  DEFAULT_SIZE,
+  SIZE,
+  SPINNER_MOTION,
+  duration,
+  stagger,
+  PLAY_STATE,
+  animation
+};

package/dist/chunk-P4BSSDSY.js

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

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

@@ -0,0 +1,33 @@
+import {
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/fade.ts
+function fadeCss(name, element, count, { dim, rest }) {
+  return `
+.ld-${name}-${element} {
+  ${animation(name, `ld-${name}-fade`, "linear")}
+  animation-delay: ${stagger(name, count)};
+}
+
+@keyframes ld-${name}-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: ${dim};
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name}-${element} {
+    opacity: ${rest};
+  }
+}
+`;
+}
+
+export {
+  fadeCss
+};

package/dist/chunk-R5ZDKN3Z.js

@@ -0,0 +1,59 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/classic-v2.tsx
+import { Fragment, jsx, jsxs } 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 css = `
+.ld-classic-v2 {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${fadeCss("classic-v2", "tick", TICKS.length, { dim: 0.4, rest: 0.5 })}
+`;
+function ClassicV2(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "classic-v2", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("classic-v2", props),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 16 16",
+        children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: TICKS.map((d, tick) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "ld-classic-v2-tick",
+            d,
+            style: step(tick)
+          },
+          d
+        )) })
+      }
+    )
+  ] });
+}
+
+export {
+  ClassicV2
+};

package/dist/chunk-RAHAQ7XK.js

@@ -0,0 +1,61 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/loading.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BLOCK = "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 css = `
+.ld-loading {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${fadeCss("loading", "segment", SEGMENTS.length, { dim: 0.2, rest: 0.6 })}
+`;
+function Loading(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "loading", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("loading", props),
+        fill: "currentColor",
+        role: "presentation",
+        viewBox: "0 0 15 15",
+        children: SEGMENTS.map(({ x, y }, segment) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "ld-loading-segment",
+            d: BLOCK,
+            style: step(segment),
+            transform: `translate(${x} ${y})`
+          },
+          `${x}-${y}`
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  Loading
+};