loading-dev 0.3.3 → 0.3.5

package/dist/chunk-SUUR5WMA.js

@@ -0,0 +1,46 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} 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);
+}
+${fadeCss("swirl", "cell", PLACES, { dim: 0.2, rest: 0.6 })}
+`;
+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-UAO52LUL.js

@@ -0,0 +1,48 @@
+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: `${children}
+@media (prefers-reduced-motion: reduce) {
+  .ld-${name},
+  .ld-${name} * {
+    animation: none;
+  }
+}
+` });
+}
+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-ULWRXY3A.js

@@ -0,0 +1,50 @@
+import {
+  SpinnerStyle,
+  spinnerRoot,
+  step
+} from "./chunk-UAO52LUL.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.25);
+  height: calc(${SIZE} * 0.25);
+  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%);
+  }
+}
+`;
+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-UOXB5QOZ.js

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

@@ -0,0 +1,62 @@
+import {
+  rotationCss,
+  spinClass
+} from "./chunk-A2PZBHTA.js";
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE
+} from "./chunk-OMNMMKI7.js";
+
+// src/comet.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-comet {
+  --ld-comet-stroke: calc(${SIZE} * 0.12);
+  position: relative;
+  width: ${SIZE};
+  height: ${SIZE};
+}
+
+.ld-comet-spin {
+  position: absolute;
+  inset: 0;
+}
+
+.ld-comet-tail {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0);
+}
+
+.ld-comet-head {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--ld-comet-stroke);
+  height: var(--ld-comet-stroke);
+  background: currentColor;
+  border-radius: 9999px;
+  transform: translateX(-50%);
+}
+
+${rotationCss("comet")}
+`;
+function Comet({ easing, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "comet", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("comet", rest), children: /* @__PURE__ */ jsxs("div", { className: spinClass("comet", easing), children: [
+      /* @__PURE__ */ jsx("div", { className: "ld-comet-tail" }),
+      /* @__PURE__ */ jsx("div", { className: "ld-comet-head" })
+    ] }) })
+  ] });
+}
+
+export {
+  Comet
+};

package/dist/chunk-VZX7APSS.js

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

@@ -0,0 +1,49 @@
+import {
+  SpinnerStyle,
+  spinnerRoot
+} from "./chunk-UAO52LUL.js";
+import {
+  SIZE,
+  animation
+} from "./chunk-OMNMMKI7.js";
+
+// src/flip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var css = `
+.ld-flip {
+  width: ${SIZE};
+  height: ${SIZE};
+  perspective: calc(${SIZE} * 3);
+}
+
+.ld-flip-face {
+  width: 64%;
+  height: 64%;
+  margin: 18%;
+  background: currentColor;
+  border-radius: calc(${SIZE} * 0.06);
+  ${animation("flip", "ld-flip-turn", "ease-in-out")}
+}
+
+@keyframes ld-flip-turn {
+  0% {
+    transform: rotateX(0) rotateY(0);
+  }
+  50% {
+    transform: rotateX(-180deg) rotateY(0);
+  }
+  100% {
+    transform: rotateX(-180deg) rotateY(-180deg);
+  }
+}
+`;
+function Flip(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerStyle, { name: "flip", children: css }),
+    /* @__PURE__ */ jsx("div", { ...spinnerRoot("flip", props), children: /* @__PURE__ */ jsx("div", { className: "ld-flip-face" }) })
+  ] });
+}
+
+export {
+  Flip
+};

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,9 @@
+import {
+  CircularDots
+} from "./chunk-3WMZVDPS.js";
+import "./chunk-PVVWLDIS.js";
+import "./chunk-UAO52LUL.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,9 @@
+import {
+  ClassicV2
+} from "./chunk-R5ZDKN3Z.js";
+import "./chunk-PVVWLDIS.js";
+import "./chunk-UAO52LUL.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,9 @@
+import {
+  Classic
+} from "./chunk-IJJULNRU.js";
+import "./chunk-PVVWLDIS.js";
+import "./chunk-UAO52LUL.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-2TYML5J2.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-UAO52LUL.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-UXTZTFNZ.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-UAO52LUL.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-JQNF5GYA.js";
+import "./chunk-UAO52LUL.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-5UAEBEER.js";
+import "./chunk-A2PZBHTA.js";
+import "./chunk-JNR4T6LZ.js";
+import "./chunk-UAO52LUL.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-A2PZBHTA.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-2LMGBBRJ.js";
+import "./chunk-UAO52LUL.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Eclipse
+};

package/dist/fade.d.ts

@@ -0,0 +1,8 @@
+import { SpinnerName } from './motion.js';
+
+declare function fadeCss(name: SpinnerName, element: string, count: number, { dim, rest }: {
+    dim: number;
+    rest: number;
+}): string;
+
+export { fadeCss };

package/dist/fade.js

@@ -0,0 +1,7 @@
+import {
+  fadeCss
+} from "./chunk-PVVWLDIS.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  fadeCss
+};

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-YIB63EKJ.js";
+import "./chunk-UAO52LUL.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  Flip
+};

package/dist/frame.d.ts

@@ -0,0 +1,18 @@
+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 & Record<`--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-UAO52LUL.js";
+import "./chunk-OMNMMKI7.js";
+export {
+  SpinnerStyle,
+  cssVars,
+  spinnerRoot,
+  step
+};

package/dist/gather.d.ts

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