loading-dev 0.3.5 → 0.3.7

package/README.md

@@ -1,5 +1,13 @@
+<a href="https://interfaces.dev/?utm_source=loading.dev">
+  <img width="320" height="168" alt="interfaces.dev" src="https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png" />
+</a>
+
+Read more in [Interfaces](https://interfaces.dev/?utm_source=loading.dev), the first design engineering magazine.
+
 # loading-dev
 
+[![npm downloads](https://img.shields.io/npm/dt/loading-dev)](https://www.npmjs.com/package/loading-dev)
+
 Beautiful loading indicators for React.
 
 ```sh
@@ -20,7 +28,7 @@ The spinners respect reduced motion out of the box and require React 19 or later
 
 Current list of indicators:
 
-`Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Morph`, `Orbit`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Slide`, `Snake`, `Swirl`, `Trace`, `Wave`.
+`Arc`, `Atom`, `Blocks`, `BouncingDots`, `Cascade`, `Chevrons`, `CircularDots`, `Classic`, `ClassicV2`, `Clock`, `Comet`, `Compass`, `Dual`, `Eclipse`, `Fill`, `Flip`, `Gather`, `Leap`, `LinearDots`, `Loading`, `Loop`, `Morph`, `Orbit`, `Phases`, `Pulse`, `Radar`, `Ring`, `Ripple`, `Scan`, `Slide`, `Snake`, `Split`, `Steps`, `Swirl`, `Trace`, `Wave`.
 
 Docs and live previews are available at [loading.dev](https://loading.dev).
 

package/dist/arc.d.ts

@@ -1,11 +1,5 @@
-import * as react from 'react';
-import { CapProps } from './cap.js';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface ArcProps extends SpinnerProps, EasingProps, CapProps {
-}
-declare function Arc({ cap, easing, ...rest }: ArcProps): react.JSX.Element;
-
-export { Arc, type ArcProps };
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface ArcProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Arc({ cap, easing, ...rest }: ArcProps): import("react").JSX.Element;

package/dist/arc.js

@@ -1,10 +1,30 @@
-import {
-  Arc
-} from "./chunk-MAKBZTL3.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Arc
-};
+import { linecap } from "./cap.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/arc.tsx
+const css = `
+${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/atom.d.ts

@@ -1,10 +1,4 @@
-import * as react from 'react';
-import { EasingProps } from './easing.js';
-import { SpinnerProps } from './types.js';
-import './motion.js';
-
-interface AtomProps extends SpinnerProps, EasingProps {
-}
-declare function Atom({ easing, ...rest }: AtomProps): react.JSX.Element;
-
-export { Atom, type AtomProps };
+import { r as EasingProps } from "./easing-BM_1QWrA.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface AtomProps extends SpinnerProps, EasingProps {}
+export declare function Atom({ easing, ...rest }: AtomProps): import("react").JSX.Element;

package/dist/atom.js

@@ -1,9 +1,69 @@
-import {
-  Atom
-} from "./chunk-BAVSTTWG.js";
-import "./chunk-A2PZBHTA.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Atom
-};
+import { SIZE, stagger } from "./motion.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, cssVars, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/atom.tsx
+const ORBITS = Array.from({ length: 3 }, (_, index) => index);
+const TILT = 180 / ORBITS.length;
+const css = `
+.ld-atom {
+  position: relative;
+}
+
+.ld-atom-shell {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: ${`calc(${SIZE} * 0.055)`} 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: ${`calc(${SIZE} * 0.045)`} 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/blocks.d.ts

@@ -1,11 +1,7 @@
-import * as react from 'react';
-import { SpinnerProps } from './types.js';
-
-type BlocksSweep = "columns" | "diagonal" | "rows";
-declare const DEFAULT_BLOCKS_SWEEP: BlocksSweep;
-interface BlocksProps extends SpinnerProps {
-    sweep?: BlocksSweep;
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export type BlocksSweep = "columns" | "diagonal" | "rows";
+export declare const DEFAULT_BLOCKS_SWEEP: BlocksSweep;
+export interface BlocksProps extends SpinnerProps {
+  sweep?: BlocksSweep;
 }
-declare function Blocks({ sweep, ...rest }: BlocksProps): react.JSX.Element;
-
-export { Blocks, type BlocksProps, type BlocksSweep, DEFAULT_BLOCKS_SWEEP };
+export declare function Blocks({ sweep, ...rest }: BlocksProps): import("react").JSX.Element;

package/dist/blocks.js

@@ -1,10 +1,73 @@
-import {
-  Blocks,
-  DEFAULT_BLOCKS_SWEEP
-} from "./chunk-VZX7APSS.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Blocks,
-  DEFAULT_BLOCKS_SWEEP
+import { SIZE, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/blocks.tsx
+const DEFAULT_BLOCKS_SWEEP = "diagonal";
+const SIDE = 3;
+const CELLS = Array.from({ length: 9 }, (_, index) => ({
+	col: index % SIDE,
+	row: Math.floor(index / SIDE)
+}));
+const SWEEPS = {
+	columns: {
+		count: SIDE,
+		place: ({ col }) => col
+	},
+	diagonal: {
+		count: 5,
+		place: ({ col, row }) => row + col
+	},
+	rows: {
+		count: SIDE,
+		place: ({ row }) => row
+	}
 };
+const css = `
+.ld-blocks {
+  display: grid;
+  grid-template-columns: repeat(${SIDE}, 1fr);
+  grid-template-rows: repeat(${SIDE}, 1fr);
+  gap: calc(${SIZE} * 0.1);
+}
+
+.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 { Blocks, DEFAULT_BLOCKS_SWEEP };

package/dist/bouncing-dots.d.ts

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

package/dist/bouncing-dots.js

@@ -1,8 +1,44 @@
-import {
-  BouncingDots
-} from "./chunk-ULWRXY3A.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  BouncingDots
-};
+import { SIZE, animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/bouncing-dots.tsx
+const DOTS = Array.from({ length: 3 }, (_, index) => index);
+const css = `
+.ld-bouncing-dots {
+  display: flex;
+  align-items: center;
+  gap: calc(${SIZE} * 0.2);
+  width: auto;
+}
+
+.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/cap-B_Mo1a7N.d.ts

@@ -0,0 +1,7 @@
+type Cap = "flat" | "round";
+declare const DEFAULT_CAP: Cap;
+interface CapProps {
+  cap?: Cap;
+}
+declare function linecap(cap?: Cap): "butt" | "round";
+export { linecap as i, CapProps as n, DEFAULT_CAP as r, Cap as t };

package/dist/cap.d.ts

@@ -1,8 +1,2 @@
-type Cap = "flat" | "round";
-declare const DEFAULT_CAP: Cap;
-interface CapProps {
-    cap?: Cap;
-}
-declare function linecap(cap?: Cap): "butt" | "round";
-
-export { type Cap, type CapProps, DEFAULT_CAP, linecap };
+import { i as linecap, n as CapProps, r as DEFAULT_CAP, t as Cap } from "./cap-B_Mo1a7N.js";
+export { Cap, CapProps, DEFAULT_CAP, linecap };

package/dist/cap.js

@@ -1,8 +1,6 @@
-import {
-  DEFAULT_CAP,
-  linecap
-} from "./chunk-JNR4T6LZ.js";
-export {
-  DEFAULT_CAP,
-  linecap
-};
+// src/cap.ts
+const DEFAULT_CAP = "round";
+function linecap(cap = DEFAULT_CAP) {
+	return cap === "flat" ? "butt" : "round";
+}
+export { DEFAULT_CAP, linecap };

package/dist/cascade.d.ts

@@ -1,9 +1,4 @@
-import * as react from 'react';
-import { CapProps } from './cap.js';
-import { SpinnerProps } from './types.js';
-
-interface CascadeProps extends SpinnerProps, CapProps {
-}
-declare function Cascade({ cap, ...rest }: CascadeProps): react.JSX.Element;
-
-export { Cascade, type CascadeProps };
+import { n as CapProps } from "./cap-B_Mo1a7N.js";
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export interface CascadeProps extends SpinnerProps, CapProps {}
+export declare function Cascade({ cap, ...rest }: CascadeProps): import("react").JSX.Element;

package/dist/cascade.js

@@ -1,9 +1,49 @@
-import {
-  Cascade
-} from "./chunk-KOYM24WV.js";
-import "./chunk-JNR4T6LZ.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  Cascade
-};
+import { linecap } from "./cap.js";
+import { animation, stagger } from "./motion.js";
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/cascade.tsx
+const RADII = [
+	10.5,
+	7,
+	3.5
+];
+const css = `
+.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", 24)};
+}
+
+@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/chevrons.d.ts

@@ -0,0 +1,2 @@
+import { t as SpinnerProps } from "./types-D9_cXnjI.js";
+export declare function Chevrons(props: SpinnerProps): import("react").JSX.Element;

package/dist/chevrons.js

@@ -0,0 +1,36 @@
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/chevrons.tsx
+const CHEVRONS = [
+	3.5,
+	9,
+	14.5
+];
+const css = `
+${fadeCss("chevrons", "chevron", CHEVRONS.length, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function Chevrons(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "chevrons",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("chevrons", props),
+		fill: "none",
+		role: "presentation",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2.5",
+		viewBox: "0 0 24 24",
+		children: CHEVRONS.map((x, index) => /* @__PURE__ */ jsx("path", {
+			className: "ld-chevrons-chevron",
+			d: `M${x} 6.5l5.5 5.5-5.5 5.5`,
+			style: step(index)
+		}, x))
+	})] });
+}
+export { Chevrons };

package/dist/circular-dots.d.ts

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

package/dist/circular-dots.js

@@ -1,9 +1,39 @@
-import {
-  CircularDots
-} from "./chunk-3WMZVDPS.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  CircularDots
-};
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/circular-dots.tsx
+const DOTS = [
+	[8, 1.5],
+	[12.5962, 3.4038],
+	[14.5, 8],
+	[12.5962, 12.5962],
+	[8, 14.5],
+	[3.4038, 12.5962],
+	[1.5, 8],
+	[3.4038, 3.4038]
+];
+const css = `
+${fadeCss("circular-dots", "dot", DOTS.length, {
+	dim: .2,
+	rest: .6
+})}
+`;
+function CircularDots(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "circular-dots",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("circular-dots", props),
+		fill: "currentColor",
+		role: "presentation",
+		viewBox: "0 0 16 16",
+		children: DOTS.map(([cx, cy], index) => /* @__PURE__ */ jsx("circle", {
+			className: "ld-circular-dots-dot",
+			cx,
+			cy,
+			r: "1.5",
+			style: step(index)
+		}, `${cx}-${cy}`))
+	})] });
+}
+export { CircularDots };

package/dist/classic-v2.d.ts

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

package/dist/classic-v2.js

@@ -1,9 +1,40 @@
-import {
-  ClassicV2
-} from "./chunk-R5ZDKN3Z.js";
-import "./chunk-PVVWLDIS.js";
-import "./chunk-UAO52LUL.js";
-import "./chunk-OMNMMKI7.js";
-export {
-  ClassicV2
-};
+import { SpinnerStyle, spinnerRoot, step } from "./frame.js";
+import { fadeCss } from "./fade.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/classic-v2.tsx
+const 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"
+];
+const css = `
+${fadeCss("classic-v2", "tick", TICKS.length, {
+	dim: .4,
+	rest: .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/classic.d.ts

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