loading-dev 0.3.3 → 0.3.4

package/dist/chunk-TFHDE6YZ.js

@@ -0,0 +1,92 @@
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.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);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-gather-group,
+  .ld-gather-block {
+    animation: none;
+  }
+}
+`;
+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-UWSCBISJ.js

@@ -0,0 +1,56 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import {
+  SIZE,
+  animation,
+  stagger
+} from "./chunk-OMNMMKI7.js";
+
+// src/bouncing-dots.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DOTS = Array.from({ length: 3 }, (_, index) => index);
+var css = `
+.ld-bouncing-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.2);
+  height: ${SIZE};
+}
+
+.ld-bouncing-dots-dot {
+  width: calc(${SIZE} * 0.22);
+  height: calc(${SIZE} * 0.22);
+  background: currentColor;
+  border-radius: 9999px;
+  ${animation("bouncing-dots", "ld-bouncing-dots-bounce", "ease-in-out alternate")}
+  animation-delay: ${stagger("bouncing-dots", DOTS.length)};
+}
+
+@keyframes ld-bouncing-dots-bounce {
+  from {
+    transform: translateY(28%);
+  }
+  to {
+    transform: translateY(-72%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ld-bouncing-dots-dot {
+    animation: none;
+  }
+}
+`;
+function BouncingDots(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "bouncing-dots", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("bouncing-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx("div", { className: "ld-bouncing-dots-dot", style: step(dot) }, dot)) })
+  ] });
+}
+
+export {
+  BouncingDots
+};

package/dist/chunk-VBI53UGV.js

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

@@ -0,0 +1,41 @@
+import {
+  DEFAULT_SIZE,
+  DURATION_VAR,
+  PLAY_STATE_VAR,
+  SIZE_VAR,
+  STEP_VAR
+} from "./chunk-OMNMMKI7.js";
+
+// src/frame.tsx
+import { jsx } from "react/jsx-runtime";
+function SpinnerStyle({
+  children,
+  name
+}) {
+  return /* @__PURE__ */ jsx("style", { href: `ld-${name}`, precedence: "loading-dev", children });
+}
+function cssVars(vars) {
+  return vars;
+}
+function step(index) {
+  return cssVars({ [STEP_VAR]: index });
+}
+function spinnerRoot(name, { className, color, duration, playState, size = DEFAULT_SIZE }) {
+  return {
+    "aria-hidden": true,
+    className: [`ld-${name}`, className].filter(Boolean).join(" "),
+    style: cssVars({
+      [SIZE_VAR]: `${size}px`,
+      ...color === void 0 ? null : { color },
+      ...duration === void 0 ? null : { [DURATION_VAR]: `${duration}ms` },
+      ...playState === void 0 ? null : { [PLAY_STATE_VAR]: playState }
+    })
+  };
+}
+
+export {
+  SpinnerStyle,
+  cssVars,
+  step,
+  spinnerRoot
+};

package/dist/chunk-X7BJQCYL.js

@@ -0,0 +1,56 @@
+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/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-Y7QGIWTL.js

@@ -0,0 +1,57 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-VRX5ZYC6.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-ZLJYYX76.js

@@ -0,0 +1,69 @@
+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/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/circular-dots.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function CircularDots(props: SpinnerProps): react.JSX.Element;
+
+export { CircularDots };

package/dist/circular-dots.js

@@ -0,0 +1,8 @@
+import {
+  CircularDots
+} from "./chunk-A43AJR54.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  CircularDots
+};

package/dist/classic-v2.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function ClassicV2(props: SpinnerProps): react.JSX.Element;
+
+export { ClassicV2 };

package/dist/classic-v2.js

@@ -0,0 +1,8 @@
+import {
+  ClassicV2
+} from "./chunk-T5EUYN7R.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  ClassicV2
+};

package/dist/classic.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function Classic(props: SpinnerProps): react.JSX.Element;
+
+export { Classic };

package/dist/classic.js

@@ -0,0 +1,8 @@
+import {
+  Classic
+} from "./chunk-IZ4TRHOC.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Classic
+};

package/dist/clock.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { EasingProps } from './easing.js';
+import { SpinnerProps } from './types.js';
+import './motion.js';
+
+interface ClockProps extends SpinnerProps, EasingProps {
+}
+declare function Clock({ easing, ...rest }: ClockProps): react.JSX.Element;
+
+export { Clock, type ClockProps };

package/dist/clock.js

@@ -0,0 +1,9 @@
+import {
+  Clock
+} from "./chunk-IQ2WQZFY.js";
+import "./chunk-7C6Q6WUN.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Clock
+};

package/dist/comet.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { EasingProps } from './easing.js';
+import { SpinnerProps } from './types.js';
+import './motion.js';
+
+interface CometProps extends SpinnerProps, EasingProps {
+}
+declare function Comet({ easing, ...rest }: CometProps): react.JSX.Element;
+
+export { Comet, type CometProps };

package/dist/comet.js

@@ -0,0 +1,9 @@
+import {
+  Comet
+} from "./chunk-5A6DX4J6.js";
+import "./chunk-7C6Q6WUN.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Comet
+};

package/dist/compass.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function Compass(props: SpinnerProps): react.JSX.Element;
+
+export { Compass };

package/dist/compass.js

@@ -0,0 +1,8 @@
+import {
+  Compass
+} from "./chunk-T7OV7MUW.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Compass
+};

package/dist/dual.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { CapProps } from './cap.js';
+import { EasingProps } from './easing.js';
+import { SpinnerProps } from './types.js';
+import './motion.js';
+
+interface DualProps extends SpinnerProps, EasingProps, CapProps {
+}
+declare function Dual({ cap, easing, ...rest }: DualProps): react.JSX.Element;
+
+export { Dual, type DualProps };

package/dist/dual.js

@@ -0,0 +1,10 @@
+import {
+  Dual
+} from "./chunk-NHN4FV63.js";
+import "./chunk-7C6Q6WUN.js";
+import "./chunk-JNR4T6LZ.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Dual
+};

package/dist/easing.d.ts

@@ -0,0 +1,11 @@
+import { SpinnerName } from './motion.js';
+
+type Easing = "linear" | "ease-in-out" | "stacked";
+declare const DEFAULT_EASING: Easing;
+interface EasingProps {
+    easing?: Easing;
+}
+declare function spinClass(name: SpinnerName, easing?: Easing): string;
+declare function rotationCss(name: SpinnerName, turn?: string): string;
+
+export { DEFAULT_EASING, type Easing, type EasingProps, rotationCss, spinClass };

package/dist/easing.js

@@ -0,0 +1,11 @@
+import {
+  DEFAULT_EASING,
+  rotationCss,
+  spinClass
+} from "./chunk-7C6Q6WUN.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  DEFAULT_EASING,
+  rotationCss,
+  spinClass
+};

package/dist/eclipse.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function Eclipse(props: SpinnerProps): react.JSX.Element;
+
+export { Eclipse };

package/dist/eclipse.js

@@ -0,0 +1,8 @@
+import {
+  Eclipse
+} from "./chunk-AHW6IXXT.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Eclipse
+};

package/dist/flip.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { SpinnerProps } from './types.js';
+
+declare function Flip(props: SpinnerProps): react.JSX.Element;
+
+export { Flip };

package/dist/flip.js

@@ -0,0 +1,8 @@
+import {
+  Flip
+} from "./chunk-5R75HMWP.js";
+import "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Flip
+};

package/dist/frame.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { SpinnerName } from './motion.js';
+import { SpinnerProps } from './types.js';
+
+declare function SpinnerStyle({ children, name, }: {
+    children: string;
+    name: SpinnerName;
+}): react.JSX.Element;
+declare function cssVars(vars: CSSProperties & {
+    [variable: `--ld-${string}`]: number | string;
+}): CSSProperties;
+declare function step(index: number): CSSProperties;
+declare function spinnerRoot(name: SpinnerName, { className, color, duration, playState, size }: SpinnerProps): {
+    "aria-hidden": boolean;
+    className: string;
+    style: CSSProperties;
+};
+
+export { SpinnerStyle, cssVars, spinnerRoot, step };

package/dist/frame.js

@@ -0,0 +1,13 @@
+import {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+} from "./chunk-VRX5ZYC6.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+};