@aristobyte-ui/spinner 2.4.0 → 2.5.1

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.
@@ -0,0 +1,232 @@
1
+ @use '@aristobyte-ui/utils/styles' as *;
2
+
3
+ @keyframes rotation {
4
+ from {
5
+ transform: rotate(0deg);
6
+ }
7
+ to {
8
+ transform: rotate(360deg);
9
+ }
10
+ }
11
+
12
+ @keyframes pulse {
13
+ 0% {
14
+ opacity: 1;
15
+ transform: scale(0);
16
+ }
17
+ 100% {
18
+ opacity: 0;
19
+ transform: scale(1);
20
+ }
21
+ }
22
+
23
+ @keyframes pulse-duo {
24
+ 0%,
25
+ 100% {
26
+ opacity: 1;
27
+ transform: translate(-50%, -50%) scale(0);
28
+ }
29
+ 50% {
30
+ opacity: 0;
31
+ transform: translate(-50%, -50%) scale(1);
32
+ }
33
+ }
34
+
35
+ .spinner {
36
+ &-size {
37
+ &--xsm {
38
+ width: 1rem; // 16px
39
+ height: 1rem;
40
+ }
41
+
42
+ &--sm {
43
+ width: 1.5rem; // 24px
44
+ height: 1.5rem;
45
+ }
46
+
47
+ &--md {
48
+ width: 2rem; // 32px
49
+ height: 2rem;
50
+ }
51
+
52
+ &--lg {
53
+ width: 2.5rem; // 40px
54
+ height: 2.5rem;
55
+ }
56
+
57
+ &--xlg {
58
+ width: 3rem; // 48px
59
+ height: 3rem;
60
+ }
61
+ }
62
+
63
+ &-type {
64
+ &--default {
65
+ animation: rotation 800ms ease infinite;
66
+ border-radius: 50%;
67
+
68
+ &.spinner-variant {
69
+ &--default {
70
+ border: 3px solid rgba($color-default, 0.25);
71
+ border-top-color: rgba($color-default, 1);
72
+ }
73
+ &--primary {
74
+ border: 3px solid rgba($color-primary, 0.25);
75
+ border-top-color: rgba($color-primary, 1);
76
+ }
77
+ &--secondary {
78
+ border: 3px solid rgba($color-secondary, 0.25);
79
+ border-top-color: rgba($color-secondary, 1);
80
+ }
81
+ &--success {
82
+ border: 3px solid rgba($color-success, 0.25);
83
+ border-top-color: rgba($color-success, 1);
84
+ }
85
+ &--error {
86
+ border: 3px solid rgba($color-error, 0.25);
87
+ border-top-color: rgba($color-error, 1);
88
+ }
89
+ &--warning {
90
+ border: 3px solid rgba($color-warning, 0.25);
91
+ border-top-color: rgba($color-warning, 1);
92
+ }
93
+ }
94
+ }
95
+
96
+ &--duo {
97
+ animation: rotation 800ms ease infinite;
98
+ border: 3px solid transparent;
99
+ border-radius: 50%;
100
+
101
+ &.spinner-variant {
102
+ &--default {
103
+ border-bottom-color: rgba($color-default, 1);
104
+ border-top-color: rgba($color-default, 1);
105
+ }
106
+ &--primary {
107
+ border-bottom-color: rgba($color-primary, 1);
108
+ border-top-color: rgba($color-primary, 1);
109
+ }
110
+ &--secondary {
111
+ border-bottom-color: rgba($color-secondary, 1);
112
+ border-top-color: rgba($color-secondary, 1);
113
+ }
114
+ &--success {
115
+ border-bottom-color: rgba($color-success, 1);
116
+ border-top-color: rgba($color-success, 1);
117
+ }
118
+ &--error {
119
+ border-bottom-color: rgba($color-error, 1);
120
+ border-top-color: rgba($color-error, 1);
121
+ }
122
+ &--warning {
123
+ border-bottom-color: rgba($color-warning, 1);
124
+ border-top-color: rgba($color-warning, 1);
125
+ }
126
+ }
127
+ }
128
+
129
+ &--gradient {
130
+ animation: rotation 800ms linear infinite;
131
+ border-right: 3px solid transparent;
132
+ border-radius: 50%;
133
+
134
+ &.spinner-variant {
135
+ &--default {
136
+ border-top: 3px solid rgba($color-default, 1);
137
+ }
138
+ &--primary {
139
+ border-top: 3px solid rgba($color-primary, 1);
140
+ }
141
+ &--secondary {
142
+ border-top: 3px solid rgba($color-secondary, 1);
143
+ }
144
+ &--success {
145
+ border-top: 3px solid rgba($color-success, 1);
146
+ }
147
+ &--error {
148
+ border-top: 3px solid rgba($color-error, 1);
149
+ }
150
+ &--warning {
151
+ border-top: 3px solid rgba($color-warning, 1);
152
+ }
153
+ }
154
+ }
155
+
156
+ &--pulse {
157
+ animation: pulse 1s ease-in-out infinite;
158
+ border-radius: 50%;
159
+ position: relative;
160
+
161
+ &.spinner-variant {
162
+ &--default {
163
+ background-color: $color-default;
164
+ }
165
+ &--primary {
166
+ background-color: $color-primary;
167
+ }
168
+ &--secondary {
169
+ background-color: $color-secondary;
170
+ }
171
+ &--success {
172
+ background-color: $color-success;
173
+ }
174
+ &--error {
175
+ background-color: $color-error;
176
+ }
177
+ &--warning {
178
+ background-color: $color-warning;
179
+ }
180
+ }
181
+ }
182
+
183
+ &--pulse-duo {
184
+ position: relative;
185
+
186
+ &.spinner-variant {
187
+ &--default::after,
188
+ &--default::before {
189
+ background-color: $color-default;
190
+ }
191
+ &--primary::after,
192
+ &--primary::before {
193
+ background-color: $color-primary;
194
+ }
195
+ &--secondary::after,
196
+ &--secondary::before {
197
+ background-color: $color-secondary;
198
+ }
199
+ &--success::after,
200
+ &--success::before {
201
+ background-color: $color-success;
202
+ }
203
+ &--error::after,
204
+ &--error::before {
205
+ background-color: $color-error;
206
+ }
207
+ &--warning::after,
208
+ &--warning::before {
209
+ background-color: $color-warning;
210
+ }
211
+ }
212
+
213
+ &::before,
214
+ &::after {
215
+ content: '';
216
+ position: absolute;
217
+ top: 50%;
218
+ left: 50%;
219
+ width: 100%;
220
+ height: 100%;
221
+ border-radius: 50%;
222
+ transform: translate(-50%, -50%) scale(0);
223
+ }
224
+ &::before {
225
+ animation: pulse-duo 2s ease-in-out infinite;
226
+ }
227
+ &::after {
228
+ animation: pulse-duo 2s 1s ease-in-out infinite;
229
+ }
230
+ }
231
+ }
232
+ }
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import './Spinner.scss';
3
+ export interface ISpinner {
4
+ type?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
5
+ variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
6
+ size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
7
+ className?: string;
8
+ }
9
+ export declare const Spinner: React.FC<ISpinner>;
10
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/spinner/src/main/components/Spinner/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAItC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './Spinner';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/spinner/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/spinner/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
@@ -0,0 +1,232 @@
1
+ @use '@aristobyte-ui/utils/styles' as *;
2
+
3
+ @keyframes rotation {
4
+ from {
5
+ transform: rotate(0deg);
6
+ }
7
+ to {
8
+ transform: rotate(360deg);
9
+ }
10
+ }
11
+
12
+ @keyframes pulse {
13
+ 0% {
14
+ opacity: 1;
15
+ transform: scale(0);
16
+ }
17
+ 100% {
18
+ opacity: 0;
19
+ transform: scale(1);
20
+ }
21
+ }
22
+
23
+ @keyframes pulse-duo {
24
+ 0%,
25
+ 100% {
26
+ opacity: 1;
27
+ transform: translate(-50%, -50%) scale(0);
28
+ }
29
+ 50% {
30
+ opacity: 0;
31
+ transform: translate(-50%, -50%) scale(1);
32
+ }
33
+ }
34
+
35
+ .spinner {
36
+ &-size {
37
+ &--xsm {
38
+ width: 1rem; // 16px
39
+ height: 1rem;
40
+ }
41
+
42
+ &--sm {
43
+ width: 1.5rem; // 24px
44
+ height: 1.5rem;
45
+ }
46
+
47
+ &--md {
48
+ width: 2rem; // 32px
49
+ height: 2rem;
50
+ }
51
+
52
+ &--lg {
53
+ width: 2.5rem; // 40px
54
+ height: 2.5rem;
55
+ }
56
+
57
+ &--xlg {
58
+ width: 3rem; // 48px
59
+ height: 3rem;
60
+ }
61
+ }
62
+
63
+ &-type {
64
+ &--default {
65
+ animation: rotation 800ms ease infinite;
66
+ border-radius: 50%;
67
+
68
+ &.spinner-variant {
69
+ &--default {
70
+ border: 3px solid rgba($color-default, 0.25);
71
+ border-top-color: rgba($color-default, 1);
72
+ }
73
+ &--primary {
74
+ border: 3px solid rgba($color-primary, 0.25);
75
+ border-top-color: rgba($color-primary, 1);
76
+ }
77
+ &--secondary {
78
+ border: 3px solid rgba($color-secondary, 0.25);
79
+ border-top-color: rgba($color-secondary, 1);
80
+ }
81
+ &--success {
82
+ border: 3px solid rgba($color-success, 0.25);
83
+ border-top-color: rgba($color-success, 1);
84
+ }
85
+ &--error {
86
+ border: 3px solid rgba($color-error, 0.25);
87
+ border-top-color: rgba($color-error, 1);
88
+ }
89
+ &--warning {
90
+ border: 3px solid rgba($color-warning, 0.25);
91
+ border-top-color: rgba($color-warning, 1);
92
+ }
93
+ }
94
+ }
95
+
96
+ &--duo {
97
+ animation: rotation 800ms ease infinite;
98
+ border: 3px solid transparent;
99
+ border-radius: 50%;
100
+
101
+ &.spinner-variant {
102
+ &--default {
103
+ border-bottom-color: rgba($color-default, 1);
104
+ border-top-color: rgba($color-default, 1);
105
+ }
106
+ &--primary {
107
+ border-bottom-color: rgba($color-primary, 1);
108
+ border-top-color: rgba($color-primary, 1);
109
+ }
110
+ &--secondary {
111
+ border-bottom-color: rgba($color-secondary, 1);
112
+ border-top-color: rgba($color-secondary, 1);
113
+ }
114
+ &--success {
115
+ border-bottom-color: rgba($color-success, 1);
116
+ border-top-color: rgba($color-success, 1);
117
+ }
118
+ &--error {
119
+ border-bottom-color: rgba($color-error, 1);
120
+ border-top-color: rgba($color-error, 1);
121
+ }
122
+ &--warning {
123
+ border-bottom-color: rgba($color-warning, 1);
124
+ border-top-color: rgba($color-warning, 1);
125
+ }
126
+ }
127
+ }
128
+
129
+ &--gradient {
130
+ animation: rotation 800ms linear infinite;
131
+ border-right: 3px solid transparent;
132
+ border-radius: 50%;
133
+
134
+ &.spinner-variant {
135
+ &--default {
136
+ border-top: 3px solid rgba($color-default, 1);
137
+ }
138
+ &--primary {
139
+ border-top: 3px solid rgba($color-primary, 1);
140
+ }
141
+ &--secondary {
142
+ border-top: 3px solid rgba($color-secondary, 1);
143
+ }
144
+ &--success {
145
+ border-top: 3px solid rgba($color-success, 1);
146
+ }
147
+ &--error {
148
+ border-top: 3px solid rgba($color-error, 1);
149
+ }
150
+ &--warning {
151
+ border-top: 3px solid rgba($color-warning, 1);
152
+ }
153
+ }
154
+ }
155
+
156
+ &--pulse {
157
+ animation: pulse 1s ease-in-out infinite;
158
+ border-radius: 50%;
159
+ position: relative;
160
+
161
+ &.spinner-variant {
162
+ &--default {
163
+ background-color: $color-default;
164
+ }
165
+ &--primary {
166
+ background-color: $color-primary;
167
+ }
168
+ &--secondary {
169
+ background-color: $color-secondary;
170
+ }
171
+ &--success {
172
+ background-color: $color-success;
173
+ }
174
+ &--error {
175
+ background-color: $color-error;
176
+ }
177
+ &--warning {
178
+ background-color: $color-warning;
179
+ }
180
+ }
181
+ }
182
+
183
+ &--pulse-duo {
184
+ position: relative;
185
+
186
+ &.spinner-variant {
187
+ &--default::after,
188
+ &--default::before {
189
+ background-color: $color-default;
190
+ }
191
+ &--primary::after,
192
+ &--primary::before {
193
+ background-color: $color-primary;
194
+ }
195
+ &--secondary::after,
196
+ &--secondary::before {
197
+ background-color: $color-secondary;
198
+ }
199
+ &--success::after,
200
+ &--success::before {
201
+ background-color: $color-success;
202
+ }
203
+ &--error::after,
204
+ &--error::before {
205
+ background-color: $color-error;
206
+ }
207
+ &--warning::after,
208
+ &--warning::before {
209
+ background-color: $color-warning;
210
+ }
211
+ }
212
+
213
+ &::before,
214
+ &::after {
215
+ content: '';
216
+ position: absolute;
217
+ top: 50%;
218
+ left: 50%;
219
+ width: 100%;
220
+ height: 100%;
221
+ border-radius: 50%;
222
+ transform: translate(-50%, -50%) scale(0);
223
+ }
224
+ &::before {
225
+ animation: pulse-duo 2s ease-in-out infinite;
226
+ }
227
+ &::after {
228
+ animation: pulse-duo 2s 1s ease-in-out infinite;
229
+ }
230
+ }
231
+ }
232
+ }
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import './Spinner.scss';
3
+ export interface ISpinner {
4
+ type?: 'default' | 'duo' | 'gradient' | 'pulse' | 'pulse-duo';
5
+ variant?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning';
6
+ size?: 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
7
+ className?: string;
8
+ }
9
+ export declare const Spinner: React.FC<ISpinner>;
10
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/spinner/src/main/components/Spinner/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC9D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAItC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './Spinner';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/spinner/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/spinner/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aristobyte-ui/spinner",
3
3
  "description": "Flexible, highly customizable React Spinner component for AristoByteUI. Supports multiple variants, sizes, and animation types, designed for seamless integration with modern React projects and monorepos.",
4
- "version": "2.4.0",
4
+ "version": "2.5.1",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -45,8 +45,13 @@
45
45
  },
46
46
  "main": "lib/src/main/index.js",
47
47
  "module": "es/src/main/index.js",
48
+ "types": "es/src/main/index.d.ts",
48
49
  "peerDependencies": {
49
50
  "react": "^19.1.0",
50
- "react-dom": "^19.1.0"
51
+ "react-dom": "^19.1.0",
52
+ "sass": "^1.97.3"
53
+ },
54
+ "dependencies": {
55
+ "@aristobyte-ui/utils": "^2.5.1"
51
56
  }
52
57
  }