loading-dev 0.3.1 → 0.3.4

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-K5XVX5GB.js

@@ -0,0 +1,60 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.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;
+    animation: none;
+  }
+}
+`;
+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-LIPOYJAI.js

@@ -0,0 +1,74 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  STEP_VAR,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/leap.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = Array.from({ length: 3 }, (_, index) => index);
+var css = `
+.ld-leap {
+  --ld-leap-dot: round(calc(${SIZE} * 0.22), 1px);
+  --ld-leap-gap: round(down, calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-leap-wrapper {
+  position: absolute;
+  top: round(calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
+  left: calc(${SIZE} - var(--ld-leap-dot) - var(--ld-leap-gap) * 2);
+  width: calc(var(--ld-leap-gap) * 2 + var(--ld-leap-dot));
+  height: var(--ld-leap-dot);
+  ${animation("leap", "ld-leap-hop", "ease-in-out")}
+  animation-delay: ${stagger("leap", DOTS.length)};
+}
+
+.ld-leap-dot {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--ld-leap-dot);
+  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(calc(var(--ld-leap-gap) * -1)) rotate(180deg);
+  }
+  100% {
+    transform: translateX(calc(var(--ld-leap-gap) * -2)) rotate(180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-leap-wrapper {
+    transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap)));
+    animation: none;
+  }
+}
+`;
+function Leap(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "leap", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("leap", props), children: DOTS.map((index) => /* @__PURE__ */ jsx("div", { className: "ld-leap-wrapper", style: step(index), children: /* @__PURE__ */ jsx("div", { className: "ld-leap-dot" }) }, index)) })
+  ] });
+}
+
+export {
+  Leap
+};

package/dist/chunk-MVL7SVAH.js

@@ -0,0 +1,79 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} 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};
+}
+
+.ld-loading-segment {
+  ${animation("loading", "ld-loading-fade", "linear")}
+  animation-delay: ${stagger("loading", SEGMENTS.length)};
+}
+
+@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__ */ 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
+};

package/dist/chunk-NHN4FV63.js

@@ -0,0 +1,78 @@
+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/dual.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-dual {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("dual")}
+
+.ld-dual-inner {
+  animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-dual-inner {
+    transform: rotate(180deg);
+  }
+}
+`;
+function Dual({ cap, easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "dual", children: css }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...spinnerRoot("dual", rest),
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeLinecap: linecap(cap),
+        strokeWidth: "2.5",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: spinClass("dual", easing),
+              cx: "12",
+              cy: "12",
+              r: "10",
+              strokeDasharray: "18 44.8"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: `ld-dual-inner ${spinClass("dual", easing)}`,
+              cx: "12",
+              cy: "12",
+              r: "5.5",
+              strokeDasharray: "10 24.6"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Dual
+};

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-PBB2PRPT.js

@@ -0,0 +1,83 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/blocks.tsx
+import { Fragment, jsx, jsxs } 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 css = `
+.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("blocks", "ld-blocks-sweep", "ease-in-out")}
+}
+${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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "blocks", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("blocks", rest), children: CELLS.map((cell) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ld-blocks-cell ld-blocks-cell-${sweep}`,
+        style: step(place(cell))
+      },
+      `${cell.col}-${cell.row}`
+    )) })
+  ] });
+}
+
+export {
+  DEFAULT_BLOCKS_SWEEP,
+  Blocks
+};

package/dist/chunk-RTKHVDCD.js

@@ -0,0 +1,82 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  linecap
+} from "./chunk-JNR4T6LZ.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/snake.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-snake {
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+${rotationCss("snake")}
+
+.ld-snake-dash {
+  ${animation("snake", "ld-snake-stretch", "ease-in-out")}
+}
+
+@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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "snake", children: css }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ...spinnerRoot("snake", rest),
+        fill: "none",
+        role: "presentation",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsx("g", { className: spinClass("snake", easing), children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ld-snake-dash",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeLinecap: linecap(cap),
+            strokeWidth: "2.5"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+export {
+  Snake
+};

package/dist/chunk-T5EUYN7R.js

@@ -0,0 +1,77 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} 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};
+}
+
+.ld-classic-v2-tick {
+  ${animation("classic-v2", "ld-classic-v2-fade", "linear")}
+  animation-delay: ${stagger("classic-v2", TICKS.length)};
+}
+
+@keyframes ld-classic-v2-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-classic-v2-tick {
+    opacity: 0.5;
+    animation: none;
+  }
+}
+`;
+function ClassicV2(props) {
+  return /* @__PURE__ */ 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-T7OV7MUW.js

@@ -0,0 +1,58 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.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);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-compass-ticks {
+    animation: none;
+  }
+}
+`;
+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
+};