loading-dev 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/README.md +7 -9
  2. package/dist/arc.d.ts +7 -11
  3. package/dist/arc.js +31 -10
  4. package/dist/atom.d.ts +6 -10
  5. package/dist/atom.js +70 -9
  6. package/dist/blocks.d.ts +8 -10
  7. package/dist/blocks.js +73 -9
  8. package/dist/bouncing-dots.d.ts +4 -6
  9. package/dist/bouncing-dots.js +45 -8
  10. package/dist/cap-Ba3uZx03.d.ts +9 -0
  11. package/dist/cap.d.ts +2 -8
  12. package/dist/cap.js +7 -8
  13. package/dist/cascade.d.ts +6 -9
  14. package/dist/cascade.js +50 -9
  15. package/dist/circular-dots.d.ts +4 -6
  16. package/dist/circular-dots.js +40 -8
  17. package/dist/classic-v2.d.ts +4 -6
  18. package/dist/classic-v2.js +41 -8
  19. package/dist/classic.d.ts +4 -6
  20. package/dist/classic.js +48 -8
  21. package/dist/clock.d.ts +6 -10
  22. package/dist/clock.js +31 -9
  23. package/dist/comet.d.ts +6 -10
  24. package/dist/comet.js +52 -9
  25. package/dist/compass.d.ts +4 -6
  26. package/dist/compass.js +39 -8
  27. package/dist/dual.d.ts +7 -11
  28. package/dist/dual.js +47 -10
  29. package/dist/easing-DhnLArHS.d.ts +11 -0
  30. package/dist/easing.d.ts +2 -11
  31. package/dist/easing.js +34 -11
  32. package/dist/eclipse.d.ts +4 -6
  33. package/dist/eclipse.js +69 -8
  34. package/dist/fade.d.ts +7 -0
  35. package/dist/fade.js +27 -0
  36. package/dist/flip.d.ts +4 -6
  37. package/dist/flip.js +41 -8
  38. package/dist/frame.d.ts +15 -19
  39. package/dist/frame.js +42 -13
  40. package/dist/gather.d.ts +4 -6
  41. package/dist/gather.js +85 -8
  42. package/dist/index.d.ts +35 -35
  43. package/dist/index.js +34 -145
  44. package/dist/leap.d.ts +4 -6
  45. package/dist/leap.js +67 -8
  46. package/dist/linear-dots.d.ts +4 -6
  47. package/dist/linear-dots.js +54 -8
  48. package/dist/loading.d.ts +4 -6
  49. package/dist/loading.js +64 -8
  50. package/dist/morph.d.ts +4 -6
  51. package/dist/morph.js +40 -8
  52. package/dist/motion-D_zUuA3S.d.ts +45 -0
  53. package/dist/motion.d.ts +2 -44
  54. package/dist/motion.js +50 -25
  55. package/dist/orbit.d.ts +6 -10
  56. package/dist/orbit.js +44 -9
  57. package/dist/pulse.d.ts +4 -6
  58. package/dist/pulse.js +52 -8
  59. package/dist/radar.d.ts +6 -10
  60. package/dist/radar.js +64 -9
  61. package/dist/ring.d.ts +7 -11
  62. package/dist/ring.js +38 -10
  63. package/dist/ripple.d.ts +8 -10
  64. package/dist/ripple.js +57 -10
  65. package/dist/slide.d.ts +4 -6
  66. package/dist/slide.js +74 -8
  67. package/dist/snake.d.ts +7 -11
  68. package/dist/snake.js +59 -10
  69. package/dist/spinners.d.ts +61 -67
  70. package/dist/spinners.js +62 -38
  71. package/dist/swirl.d.ts +4 -6
  72. package/dist/swirl.js +50 -8
  73. package/dist/trace.d.ts +7 -11
  74. package/dist/trace.js +45 -9
  75. package/dist/types-BYaenrWm.d.ts +10 -0
  76. package/dist/types.d.ts +2 -23
  77. package/dist/types.js +1 -0
  78. package/dist/wave.d.ts +8 -10
  79. package/dist/wave.js +56 -10
  80. package/package.json +19 -17
  81. package/dist/chunk-5A6DX4J6.js +0 -62
  82. package/dist/chunk-5DLURQGF.js +0 -88
  83. package/dist/chunk-5DS5PSRD.js +0 -124
  84. package/dist/chunk-5LSP7MQQ.js +0 -69
  85. package/dist/chunk-5R75HMWP.js +0 -55
  86. package/dist/chunk-7C6Q6WUN.js +0 -47
  87. package/dist/chunk-A43AJR54.js +0 -79
  88. package/dist/chunk-AHW6IXXT.js +0 -78
  89. package/dist/chunk-AY4VLQBZ.js +0 -57
  90. package/dist/chunk-BMJ3AGRK.js +0 -62
  91. package/dist/chunk-FKUMWHUL.js +0 -71
  92. package/dist/chunk-HDBQBCTN.js +0 -74
  93. package/dist/chunk-I5CFO2M5.js +0 -78
  94. package/dist/chunk-IQ2WQZFY.js +0 -51
  95. package/dist/chunk-IRMB7CHZ.js +0 -88
  96. package/dist/chunk-IWVH2GKE.js +0 -77
  97. package/dist/chunk-IZ4TRHOC.js +0 -68
  98. package/dist/chunk-JNR4T6LZ.js +0 -10
  99. package/dist/chunk-K5XVX5GB.js +0 -60
  100. package/dist/chunk-LIPOYJAI.js +0 -74
  101. package/dist/chunk-MVL7SVAH.js +0 -79
  102. package/dist/chunk-NHN4FV63.js +0 -78
  103. package/dist/chunk-OMNMMKI7.js +0 -64
  104. package/dist/chunk-PBB2PRPT.js +0 -83
  105. package/dist/chunk-RTKHVDCD.js +0 -82
  106. package/dist/chunk-T5EUYN7R.js +0 -77
  107. package/dist/chunk-T7OV7MUW.js +0 -58
  108. package/dist/chunk-TFHDE6YZ.js +0 -92
  109. package/dist/chunk-UWSCBISJ.js +0 -56
  110. package/dist/chunk-VBI53UGV.js +0 -73
  111. package/dist/chunk-VRX5ZYC6.js +0 -41
  112. package/dist/chunk-X7BJQCYL.js +0 -56
  113. package/dist/chunk-Y7QGIWTL.js +0 -57
  114. package/dist/chunk-ZLJYYX76.js +0 -69
@@ -1,10 +0,0 @@
1
- // src/cap.ts
2
- var DEFAULT_CAP = "round";
3
- function linecap(cap = DEFAULT_CAP) {
4
- return cap === "flat" ? "butt" : "round";
5
- }
6
-
7
- export {
8
- DEFAULT_CAP,
9
- linecap
10
- };
@@ -1,60 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot,
4
- step
5
- } from "./chunk-VRX5ZYC6.js";
6
- import {
7
- SIZE,
8
- animation,
9
- stagger
10
- } from "./chunk-OMNMMKI7.js";
11
-
12
- // src/linear-dots.tsx
13
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
- var DOTS = Array.from({ length: 3 }, (_, index) => index);
15
- var css = `
16
- .ld-linear-dots {
17
- display: flex;
18
- align-items: center;
19
- gap: calc(${SIZE} * 0.1875);
20
- height: ${SIZE};
21
- }
22
-
23
- .ld-linear-dots-dot {
24
- width: calc(${SIZE} * 0.1875);
25
- height: calc(${SIZE} * 0.1875);
26
- background: currentColor;
27
- border-radius: 9999px;
28
- ${animation("linear-dots", "ld-linear-dots-fade", "linear")}
29
- animation-delay: ${stagger("linear-dots", DOTS.length)};
30
- }
31
-
32
- @keyframes ld-linear-dots-fade {
33
- 0% {
34
- opacity: 1;
35
- }
36
- 66.67% {
37
- opacity: 0.5;
38
- }
39
- 100% {
40
- opacity: 1;
41
- }
42
- }
43
-
44
- @media (prefers-reduced-motion: reduce) {
45
- .ld-linear-dots-dot {
46
- opacity: 0.75;
47
- animation: none;
48
- }
49
- }
50
- `;
51
- function LinearDots(props) {
52
- return /* @__PURE__ */ jsxs(Fragment, { children: [
53
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "linear-dots", children: css }),
54
- /* @__PURE__ */ jsx("div", { ...spinnerRoot("linear-dots", props), children: DOTS.map((dot) => /* @__PURE__ */ jsx("div", { className: "ld-linear-dots-dot", style: step(dot) }, dot)) })
55
- ] });
56
- }
57
-
58
- export {
59
- LinearDots
60
- };
@@ -1,74 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot,
4
- step
5
- } from "./chunk-VRX5ZYC6.js";
6
- import {
7
- SIZE,
8
- STEP_VAR,
9
- animation,
10
- stagger
11
- } from "./chunk-OMNMMKI7.js";
12
-
13
- // src/leap.tsx
14
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
15
- var DOTS = Array.from({ length: 3 }, (_, index) => index);
16
- var css = `
17
- .ld-leap {
18
- --ld-leap-dot: round(calc(${SIZE} * 0.22), 1px);
19
- --ld-leap-gap: round(down, calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
20
- position: relative;
21
- width: ${SIZE};
22
- height: ${SIZE};
23
- }
24
-
25
- .ld-leap-wrapper {
26
- position: absolute;
27
- top: round(calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px);
28
- left: calc(${SIZE} - var(--ld-leap-dot) - var(--ld-leap-gap) * 2);
29
- width: calc(var(--ld-leap-gap) * 2 + var(--ld-leap-dot));
30
- height: var(--ld-leap-dot);
31
- ${animation("leap", "ld-leap-hop", "ease-in-out")}
32
- animation-delay: ${stagger("leap", DOTS.length)};
33
- }
34
-
35
- .ld-leap-dot {
36
- position: absolute;
37
- inset: 0 auto 0 0;
38
- width: var(--ld-leap-dot);
39
- background: currentColor;
40
- border-radius: 50%;
41
- }
42
-
43
- @keyframes ld-leap-hop {
44
- 0% {
45
- transform: translateX(0) rotate(0);
46
- }
47
- 33.33% {
48
- transform: translateX(0) rotate(180deg);
49
- }
50
- 66.66% {
51
- transform: translateX(calc(var(--ld-leap-gap) * -1)) rotate(180deg);
52
- }
53
- 100% {
54
- transform: translateX(calc(var(--ld-leap-gap) * -2)) rotate(180deg);
55
- }
56
- }
57
-
58
- @media (prefers-reduced-motion: reduce) {
59
- .ld-leap-wrapper {
60
- transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap)));
61
- animation: none;
62
- }
63
- }
64
- `;
65
- function Leap(props) {
66
- return /* @__PURE__ */ jsxs(Fragment, { children: [
67
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "leap", children: css }),
68
- /* @__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)) })
69
- ] });
70
- }
71
-
72
- export {
73
- Leap
74
- };
@@ -1,79 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot,
4
- step
5
- } from "./chunk-VRX5ZYC6.js";
6
- import {
7
- SIZE,
8
- animation,
9
- stagger
10
- } from "./chunk-OMNMMKI7.js";
11
-
12
- // src/loading.tsx
13
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
- var BLOCK = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z";
15
- var SEGMENTS = [
16
- { x: 12, y: 6 },
17
- { x: 10, y: 10 },
18
- { x: 6, y: 12 },
19
- { x: 2, y: 10 },
20
- { x: 0, y: 6 },
21
- { x: 2, y: 2 },
22
- { x: 6, y: 0 },
23
- { x: 10, y: 2 }
24
- ];
25
- var css = `
26
- .ld-loading {
27
- width: ${SIZE};
28
- height: ${SIZE};
29
- }
30
-
31
- .ld-loading-segment {
32
- ${animation("loading", "ld-loading-fade", "linear")}
33
- animation-delay: ${stagger("loading", SEGMENTS.length)};
34
- }
35
-
36
- @keyframes ld-loading-fade {
37
- from {
38
- opacity: 1;
39
- }
40
- to {
41
- opacity: 0.2;
42
- }
43
- }
44
-
45
- @media (prefers-reduced-motion: reduce) {
46
- .ld-loading-segment {
47
- opacity: 0.6;
48
- animation: none;
49
- }
50
- }
51
- `;
52
- function Loading(props) {
53
- return /* @__PURE__ */ jsxs(Fragment, { children: [
54
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "loading", children: css }),
55
- /* @__PURE__ */ jsx(
56
- "svg",
57
- {
58
- ...spinnerRoot("loading", props),
59
- fill: "currentColor",
60
- role: "presentation",
61
- viewBox: "0 0 15 15",
62
- children: SEGMENTS.map(({ x, y }, segment) => /* @__PURE__ */ jsx(
63
- "path",
64
- {
65
- className: "ld-loading-segment",
66
- d: BLOCK,
67
- style: step(segment),
68
- transform: `translate(${x} ${y})`
69
- },
70
- `${x}-${y}`
71
- ))
72
- }
73
- )
74
- ] });
75
- }
76
-
77
- export {
78
- Loading
79
- };
@@ -1,78 +0,0 @@
1
- import {
2
- rotationCss,
3
- spinClass
4
- } from "./chunk-7C6Q6WUN.js";
5
- import {
6
- linecap
7
- } from "./chunk-JNR4T6LZ.js";
8
- import {
9
- SpinnerStyle,
10
- spinnerRoot
11
- } from "./chunk-VRX5ZYC6.js";
12
- import {
13
- SIZE
14
- } from "./chunk-OMNMMKI7.js";
15
-
16
- // src/dual.tsx
17
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
18
- var css = `
19
- .ld-dual {
20
- width: ${SIZE};
21
- height: ${SIZE};
22
- }
23
-
24
- ${rotationCss("dual")}
25
-
26
- .ld-dual-inner {
27
- animation-direction: reverse;
28
- }
29
-
30
- @media (prefers-reduced-motion: reduce) {
31
- .ld-dual-inner {
32
- transform: rotate(180deg);
33
- }
34
- }
35
- `;
36
- function Dual({ cap, easing, ...rest }) {
37
- return /* @__PURE__ */ jsxs(Fragment, { children: [
38
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "dual", children: css }),
39
- /* @__PURE__ */ jsxs(
40
- "svg",
41
- {
42
- ...spinnerRoot("dual", rest),
43
- fill: "none",
44
- role: "presentation",
45
- stroke: "currentColor",
46
- strokeLinecap: linecap(cap),
47
- strokeWidth: "2.5",
48
- viewBox: "0 0 24 24",
49
- children: [
50
- /* @__PURE__ */ jsx(
51
- "circle",
52
- {
53
- className: spinClass("dual", easing),
54
- cx: "12",
55
- cy: "12",
56
- r: "10",
57
- strokeDasharray: "18 44.8"
58
- }
59
- ),
60
- /* @__PURE__ */ jsx(
61
- "circle",
62
- {
63
- className: `ld-dual-inner ${spinClass("dual", easing)}`,
64
- cx: "12",
65
- cy: "12",
66
- r: "5.5",
67
- strokeDasharray: "10 24.6"
68
- }
69
- )
70
- ]
71
- }
72
- )
73
- ] });
74
- }
75
-
76
- export {
77
- Dual
78
- };
@@ -1,64 +0,0 @@
1
- // src/motion.ts
2
- var DURATION_VAR = "--ld-duration";
3
- var PLAY_STATE_VAR = "--ld-play-state";
4
- var SIZE_VAR = "--ld-size";
5
- var STEP_VAR = "--ld-step";
6
- var DEFAULT_SIZE = 20;
7
- var SIZE = `var(${SIZE_VAR}, ${DEFAULT_SIZE}px)`;
8
- var SPINNER_MOTION = {
9
- arc: 800,
10
- atom: 1e3,
11
- blocks: 1300,
12
- "bouncing-dots": 500,
13
- cascade: 1500,
14
- "circular-dots": 800,
15
- classic: 1200,
16
- "classic-v2": 800,
17
- clock: 1200,
18
- comet: 700,
19
- compass: 500,
20
- dual: 1e3,
21
- eclipse: 1200,
22
- flip: 1200,
23
- gather: 1600,
24
- leap: 1800,
25
- "linear-dots": 900,
26
- loading: 1e3,
27
- morph: 1200,
28
- orbit: 750,
29
- pulse: 1200,
30
- radar: 1500,
31
- ring: 800,
32
- ripple: 1200,
33
- slide: 2400,
34
- snake: 1400,
35
- swirl: 1200,
36
- trace: 1200,
37
- wave: 900
38
- };
39
- function duration(name) {
40
- return `var(${DURATION_VAR}, ${SPINNER_MOTION[name]}ms)`;
41
- }
42
- function stagger(name, count) {
43
- return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`;
44
- }
45
- var PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`;
46
- function animation(name, keyframes, timing) {
47
- const runs = [keyframes].flat().map((frames) => `${frames} ${duration(name)} ${timing} infinite`);
48
- return `animation: ${runs.join(", ")};
49
- animation-play-state: ${PLAY_STATE};`;
50
- }
51
-
52
- export {
53
- DURATION_VAR,
54
- PLAY_STATE_VAR,
55
- SIZE_VAR,
56
- STEP_VAR,
57
- DEFAULT_SIZE,
58
- SIZE,
59
- SPINNER_MOTION,
60
- duration,
61
- stagger,
62
- PLAY_STATE,
63
- animation
64
- };
@@ -1,83 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot,
4
- step
5
- } from "./chunk-VRX5ZYC6.js";
6
- import {
7
- SIZE,
8
- animation,
9
- stagger
10
- } from "./chunk-OMNMMKI7.js";
11
-
12
- // src/blocks.tsx
13
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
- var DEFAULT_BLOCKS_SWEEP = "diagonal";
15
- var SIDE = 3;
16
- var CELLS = Array.from({ length: SIDE * SIDE }, (_, index) => ({
17
- col: index % SIDE,
18
- row: Math.floor(index / SIDE)
19
- }));
20
- var SWEEPS = {
21
- columns: { count: SIDE, place: ({ col }) => col },
22
- diagonal: { count: SIDE * 2 - 1, place: ({ col, row }) => row + col },
23
- rows: { count: SIDE, place: ({ row }) => row }
24
- };
25
- var css = `
26
- .ld-blocks {
27
- display: grid;
28
- grid-template-columns: repeat(${SIDE}, 1fr);
29
- grid-template-rows: repeat(${SIDE}, 1fr);
30
- gap: calc(${SIZE} * 0.1);
31
- width: ${SIZE};
32
- height: ${SIZE};
33
- }
34
-
35
- .ld-blocks-cell {
36
- background: currentColor;
37
- border-radius: calc(${SIZE} * 0.0625);
38
- ${animation("blocks", "ld-blocks-sweep", "ease-in-out")}
39
- }
40
- ${Object.entries(SWEEPS).map(
41
- ([sweep, { count }]) => `
42
- .ld-blocks-cell-${sweep} {
43
- animation-delay: ${stagger("blocks", count)};
44
- }
45
- `
46
- ).join("")}
47
- @keyframes ld-blocks-sweep {
48
- 0%,
49
- 70%,
50
- 100% {
51
- transform: scale(1);
52
- }
53
- 35% {
54
- transform: scale(0);
55
- }
56
- }
57
-
58
- @media (prefers-reduced-motion: reduce) {
59
- .ld-blocks-cell {
60
- transform: scale(0.8);
61
- animation: none;
62
- }
63
- }
64
- `;
65
- function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }) {
66
- const { place } = SWEEPS[sweep];
67
- return /* @__PURE__ */ jsxs(Fragment, { children: [
68
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "blocks", children: css }),
69
- /* @__PURE__ */ jsx("div", { ...spinnerRoot("blocks", rest), children: CELLS.map((cell) => /* @__PURE__ */ jsx(
70
- "div",
71
- {
72
- className: `ld-blocks-cell ld-blocks-cell-${sweep}`,
73
- style: step(place(cell))
74
- },
75
- `${cell.col}-${cell.row}`
76
- )) })
77
- ] });
78
- }
79
-
80
- export {
81
- DEFAULT_BLOCKS_SWEEP,
82
- Blocks
83
- };
@@ -1,82 +0,0 @@
1
- import {
2
- rotationCss,
3
- spinClass
4
- } from "./chunk-7C6Q6WUN.js";
5
- import {
6
- linecap
7
- } from "./chunk-JNR4T6LZ.js";
8
- import {
9
- SpinnerStyle,
10
- spinnerRoot
11
- } from "./chunk-VRX5ZYC6.js";
12
- import {
13
- SIZE,
14
- animation
15
- } from "./chunk-OMNMMKI7.js";
16
-
17
- // src/snake.tsx
18
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
19
- var css = `
20
- .ld-snake {
21
- width: ${SIZE};
22
- height: ${SIZE};
23
- }
24
-
25
- ${rotationCss("snake")}
26
-
27
- .ld-snake-dash {
28
- ${animation("snake", "ld-snake-stretch", "ease-in-out")}
29
- }
30
-
31
- @keyframes ld-snake-stretch {
32
- 0% {
33
- stroke-dasharray: 1 100;
34
- stroke-dashoffset: 0;
35
- }
36
- 50% {
37
- stroke-dasharray: 45 100;
38
- stroke-dashoffset: -17;
39
- }
40
- 100% {
41
- stroke-dasharray: 45 100;
42
- stroke-dashoffset: -62;
43
- }
44
- }
45
-
46
- @media (prefers-reduced-motion: reduce) {
47
- .ld-snake-dash {
48
- stroke-dasharray: 18 100;
49
- animation: none;
50
- }
51
- }
52
- `;
53
- function Snake({ cap, easing, ...rest }) {
54
- return /* @__PURE__ */ jsxs(Fragment, { children: [
55
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "snake", children: css }),
56
- /* @__PURE__ */ jsx(
57
- "svg",
58
- {
59
- ...spinnerRoot("snake", rest),
60
- fill: "none",
61
- role: "presentation",
62
- viewBox: "0 0 24 24",
63
- children: /* @__PURE__ */ jsx("g", { className: spinClass("snake", easing), children: /* @__PURE__ */ jsx(
64
- "circle",
65
- {
66
- className: "ld-snake-dash",
67
- cx: "12",
68
- cy: "12",
69
- r: "10",
70
- stroke: "currentColor",
71
- strokeLinecap: linecap(cap),
72
- strokeWidth: "2.5"
73
- }
74
- ) })
75
- }
76
- )
77
- ] });
78
- }
79
-
80
- export {
81
- Snake
82
- };
@@ -1,77 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot,
4
- step
5
- } from "./chunk-VRX5ZYC6.js";
6
- import {
7
- SIZE,
8
- animation,
9
- stagger
10
- } from "./chunk-OMNMMKI7.js";
11
-
12
- // src/classic-v2.tsx
13
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
- var TICKS = [
15
- "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",
16
- "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",
17
- "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",
18
- "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",
19
- "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",
20
- "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",
21
- "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",
22
- "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"
23
- ];
24
- var css = `
25
- .ld-classic-v2 {
26
- width: ${SIZE};
27
- height: ${SIZE};
28
- }
29
-
30
- .ld-classic-v2-tick {
31
- ${animation("classic-v2", "ld-classic-v2-fade", "linear")}
32
- animation-delay: ${stagger("classic-v2", TICKS.length)};
33
- }
34
-
35
- @keyframes ld-classic-v2-fade {
36
- 0% {
37
- opacity: 1;
38
- }
39
- 100% {
40
- opacity: 0.4;
41
- }
42
- }
43
-
44
- @media (prefers-reduced-motion: reduce) {
45
- .ld-classic-v2-tick {
46
- opacity: 0.5;
47
- animation: none;
48
- }
49
- }
50
- `;
51
- function ClassicV2(props) {
52
- return /* @__PURE__ */ jsxs(Fragment, { children: [
53
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "classic-v2", children: css }),
54
- /* @__PURE__ */ jsx(
55
- "svg",
56
- {
57
- ...spinnerRoot("classic-v2", props),
58
- fill: "none",
59
- role: "presentation",
60
- viewBox: "0 0 16 16",
61
- children: /* @__PURE__ */ jsx("g", { fill: "currentColor", children: TICKS.map((d, tick) => /* @__PURE__ */ jsx(
62
- "path",
63
- {
64
- className: "ld-classic-v2-tick",
65
- d,
66
- style: step(tick)
67
- },
68
- d
69
- )) })
70
- }
71
- )
72
- ] });
73
- }
74
-
75
- export {
76
- ClassicV2
77
- };
@@ -1,58 +0,0 @@
1
- import {
2
- SpinnerStyle,
3
- spinnerRoot
4
- } from "./chunk-VRX5ZYC6.js";
5
- import {
6
- SIZE,
7
- animation
8
- } from "./chunk-OMNMMKI7.js";
9
-
10
- // src/compass.tsx
11
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
12
- var css = `
13
- .ld-compass {
14
- width: ${SIZE};
15
- height: ${SIZE};
16
- }
17
-
18
- .ld-compass-ticks {
19
- transform-origin: center;
20
- ${animation("compass", "ld-compass-turn", "ease-in-out")}
21
- }
22
-
23
- @keyframes ld-compass-turn {
24
- to {
25
- transform: rotate(90deg);
26
- }
27
- }
28
-
29
- @media (prefers-reduced-motion: reduce) {
30
- .ld-compass-ticks {
31
- animation: none;
32
- }
33
- }
34
- `;
35
- function Compass(props) {
36
- return /* @__PURE__ */ jsxs(Fragment, { children: [
37
- /* @__PURE__ */ jsx(SpinnerStyle, { name: "compass", children: css }),
38
- /* @__PURE__ */ jsx(
39
- "svg",
40
- {
41
- ...spinnerRoot("compass", props),
42
- fill: "none",
43
- role: "presentation",
44
- viewBox: "0 0 16 16",
45
- children: /* @__PURE__ */ jsxs("g", { className: "ld-compass-ticks", fill: "currentColor", children: [
46
- /* @__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" }),
47
- /* @__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" }),
48
- /* @__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" }),
49
- /* @__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" })
50
- ] })
51
- }
52
- )
53
- ] });
54
- }
55
-
56
- export {
57
- Compass
58
- };