premium-react-loaders 4.0.0 → 4.1.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.
- package/README.md +21 -6
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/neon/NeonPulse.d.ts +12 -0
- package/dist/components/neon/NeonPulse.d.ts.map +1 -0
- package/dist/components/neon/NeonSpinner.d.ts +12 -0
- package/dist/components/neon/NeonSpinner.d.ts.map +1 -0
- package/dist/components/neon/NeonText.d.ts +12 -0
- package/dist/components/neon/NeonText.d.ts.map +1 -0
- package/dist/components/neon/index.d.ts +4 -0
- package/dist/components/neon/index.d.ts.map +1 -0
- package/dist/components/particle/ParticleField.d.ts +3 -0
- package/dist/components/particle/ParticleField.d.ts.map +1 -0
- package/dist/components/particle/ParticleTrail.d.ts +12 -0
- package/dist/components/particle/ParticleTrail.d.ts.map +1 -0
- package/dist/components/particle/index.d.ts +2 -0
- package/dist/components/particle/index.d.ts.map +1 -1
- package/dist/components/status/InfoIndicator.d.ts +29 -0
- package/dist/components/status/InfoIndicator.d.ts.map +1 -0
- package/dist/components/status/WarningIndicator.d.ts +29 -0
- package/dist/components/status/WarningIndicator.d.ts.map +1 -0
- package/dist/components/status/index.d.ts +2 -0
- package/dist/components/status/index.d.ts.map +1 -1
- package/dist/index.cjs +41 -27
- package/dist/index.js +41 -27
- package/dist/index10.cjs +1 -1
- package/dist/index10.js +1 -1
- package/dist/index11.cjs +1 -1
- package/dist/index11.js +1 -1
- package/dist/index12.cjs +1 -1
- package/dist/index12.js +1 -1
- package/dist/index13.cjs +1 -1
- package/dist/index13.js +1 -1
- package/dist/index14.cjs +1 -1
- package/dist/index14.js +1 -1
- package/dist/index15.cjs +1 -1
- package/dist/index15.js +1 -1
- package/dist/index17.cjs +1 -1
- package/dist/index17.js +1 -1
- package/dist/index18.cjs +1 -1
- package/dist/index18.js +1 -1
- package/dist/index19.cjs +1 -1
- package/dist/index19.js +1 -1
- package/dist/index20.cjs +1 -1
- package/dist/index20.js +1 -1
- package/dist/index21.cjs +1 -1
- package/dist/index21.js +1 -1
- package/dist/index22.cjs +1 -1
- package/dist/index22.js +1 -1
- package/dist/index23.cjs +1 -1
- package/dist/index23.js +1 -1
- package/dist/index24.cjs +1 -1
- package/dist/index24.js +1 -1
- package/dist/index25.cjs +1 -1
- package/dist/index25.js +1 -1
- package/dist/index26.cjs +1 -1
- package/dist/index26.js +1 -1
- package/dist/index27.cjs +1 -1
- package/dist/index27.js +1 -1
- package/dist/index28.cjs +1 -1
- package/dist/index28.js +1 -1
- package/dist/index29.cjs +1 -1
- package/dist/index29.js +1 -1
- package/dist/index30.cjs +1 -1
- package/dist/index30.js +1 -1
- package/dist/index31.cjs +1 -1
- package/dist/index31.js +1 -1
- package/dist/index32.cjs +1 -1
- package/dist/index32.js +1 -1
- package/dist/index33.cjs +1 -1
- package/dist/index33.js +1 -1
- package/dist/index34.cjs +1 -1
- package/dist/index34.js +1 -1
- package/dist/index35.cjs +1 -1
- package/dist/index35.js +1 -1
- package/dist/index36.cjs +1 -1
- package/dist/index36.js +1 -1
- package/dist/index37.cjs +59 -145
- package/dist/index37.js +61 -147
- package/dist/index38.cjs +32 -53
- package/dist/index38.js +33 -54
- package/dist/index39.cjs +138 -84
- package/dist/index39.js +140 -86
- package/dist/index40.cjs +33 -106
- package/dist/index40.js +34 -107
- package/dist/index41.cjs +66 -50
- package/dist/index41.js +66 -50
- package/dist/index42.cjs +123 -44
- package/dist/index42.js +124 -45
- package/dist/index43.cjs +43 -85
- package/dist/index43.js +44 -86
- package/dist/index44.cjs +35 -27
- package/dist/index44.js +35 -27
- package/dist/index45.cjs +87 -58
- package/dist/index45.js +87 -58
- package/dist/index46.cjs +35 -88
- package/dist/index46.js +36 -89
- package/dist/index47.cjs +62 -58
- package/dist/index47.js +63 -59
- package/dist/index48.cjs +87 -110
- package/dist/index48.js +88 -111
- package/dist/index49.cjs +48 -109
- package/dist/index49.js +49 -110
- package/dist/index50.cjs +110 -62
- package/dist/index50.js +111 -63
- package/dist/index51.cjs +104 -49
- package/dist/index51.js +104 -49
- package/dist/index52.cjs +43 -77
- package/dist/index52.js +44 -78
- package/dist/index53.cjs +56 -56
- package/dist/index53.js +56 -56
- package/dist/index54.cjs +104 -149
- package/dist/index54.js +106 -151
- package/dist/index55.cjs +97 -38
- package/dist/index55.js +99 -40
- package/dist/index56.cjs +161 -27
- package/dist/index56.js +162 -28
- package/dist/index57.cjs +36 -102
- package/dist/index57.js +38 -104
- package/dist/index58.cjs +19 -34
- package/dist/index58.js +20 -35
- package/dist/index59.cjs +87 -34
- package/dist/index59.js +89 -36
- package/dist/index60.cjs +25 -23
- package/dist/index60.js +25 -23
- package/dist/index61.cjs +32 -65
- package/dist/index61.js +34 -67
- package/dist/index62.cjs +29 -36
- package/dist/index62.js +30 -37
- package/dist/index63.cjs +66 -59
- package/dist/index63.js +69 -62
- package/dist/index64.cjs +71 -121
- package/dist/index64.js +72 -122
- package/dist/index65.cjs +92 -0
- package/dist/index65.js +92 -0
- package/dist/index66.cjs +76 -0
- package/dist/index66.js +76 -0
- package/dist/index67.cjs +76 -0
- package/dist/index67.js +76 -0
- package/dist/index68.cjs +64 -0
- package/dist/index68.js +64 -0
- package/dist/index69.cjs +60 -0
- package/dist/index69.js +60 -0
- package/dist/index7.cjs +1 -1
- package/dist/index7.js +1 -1
- package/dist/index70.cjs +57 -0
- package/dist/index70.js +57 -0
- package/dist/index71.cjs +125 -0
- package/dist/index71.js +125 -0
- package/dist/index8.cjs +1 -1
- package/dist/index8.js +1 -1
- package/dist/index9.cjs +1 -1
- package/dist/index9.js +1 -1
- package/dist/premium-react-loaders.css +85 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/neon.d.ts +26 -0
- package/dist/types/neon.d.ts.map +1 -0
- package/dist/types/particle.d.ts +18 -0
- package/dist/types/particle.d.ts.map +1 -1
- package/dist/types/status.d.ts +30 -0
- package/dist/types/status.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Premium React Loaders
|
|
2
2
|
|
|
3
|
-
A comprehensive collection of **
|
|
3
|
+
A comprehensive collection of **65+ premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/premium-react-loaders)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
@@ -11,12 +11,15 @@ A comprehensive collection of **58+ premium, production-ready loading components
|
|
|
11
11
|
|
|
12
12
|
📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
|
|
13
13
|
|
|
14
|
-
See all
|
|
14
|
+
See all 65+ components in action with interactive examples and customization options.
|
|
15
15
|
|
|
16
16
|
## Features
|
|
17
17
|
|
|
18
|
-
- **
|
|
18
|
+
- **65+ Premium Components** across 20 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status, Transition, Shimmer, Orbit, Bounce, Infinity, Text, 3D, Smart, Morph, Gradient, Particle, Neon, Accessibility)
|
|
19
19
|
- **6 Powerful Hooks** - useLoader, useEnhancedLoader, useLoadingOrchestrator, useLoadingAnalytics, useSmartLoader, useTheme ✨ *New in v3.1.0*
|
|
20
|
+
- **Neon Loaders** - Glowing neon-style pulse, spinner, and text for dark UIs ✨ *New in v4.1.0*
|
|
21
|
+
- **Extended Status Set** - WarningIndicator and InfoIndicator complete the status family ✨ *New in v4.1.0*
|
|
22
|
+
- **Particle Enhancements** - ParticleTrail and ParticleField ambient effects ✨ *New in v4.1.0*
|
|
20
23
|
- **Morph Loaders** - Fluid organic blob, liquid fill, and wave circle animations ✨ *New in v4.0.0*
|
|
21
24
|
- **Gradient Loaders** - Animated conic gradient spinners and flowing gradient bars ✨ *New in v4.0.0*
|
|
22
25
|
- **Particle Loaders** - CSS particle burst and orbital animations ✨ *New in v4.0.0*
|
|
@@ -179,12 +182,14 @@ Specialized loaders for button loading states:
|
|
|
179
182
|
|
|
180
183
|
- **ButtonSpinner** - Compact spinner optimized for buttons with multiple variants (circle, dots, bars) and positioning options
|
|
181
184
|
|
|
182
|
-
### Status Components (
|
|
185
|
+
### Status Components (4 components) ✨ *New in v2.2.0 / Extended in v4.1.0*
|
|
183
186
|
|
|
184
|
-
Animated indicators for
|
|
187
|
+
Animated indicators for operation outcomes:
|
|
185
188
|
|
|
186
189
|
- **SuccessCheckmark** - Animated checkmark with optional circle background
|
|
187
190
|
- **ErrorIndicator** - Animated X mark with optional shake effect and circle background
|
|
191
|
+
- **WarningIndicator** - Animated warning triangle with `!` mark; optional `shake` effect ✨ *New in v4.1.0*
|
|
192
|
+
- **InfoIndicator** - Animated info badge with `i` mark; optional `pulse` glow ✨ *New in v4.1.0*
|
|
188
193
|
|
|
189
194
|
### Transition Components (1 component) ✨ *New in v2.3.0*
|
|
190
195
|
|
|
@@ -268,12 +273,22 @@ Visually striking spinners and progress indicators using animated CSS gradients:
|
|
|
268
273
|
- **GradientRing** - Ring with a moving gradient that travels around its circumference
|
|
269
274
|
- **GradientBar** - Horizontal progress bar with a flowing gradient shimmer animation
|
|
270
275
|
|
|
271
|
-
### Particle Components (
|
|
276
|
+
### Particle Components (4 components) ✨ *New in v4.0.0 / Extended in v4.1.0*
|
|
272
277
|
|
|
273
278
|
Particle-based loaders using CSS-positioned elements for dynamic visual effects:
|
|
274
279
|
|
|
275
280
|
- **ParticleBurst** - Particles that periodically burst outward from a central point and fade as they travel
|
|
276
281
|
- **ParticleOrbit** - Multiple particles floating in circular orbits around a central dot with staggered delays
|
|
282
|
+
- **ParticleTrail** - Particles trailing along a circular orbit with opacity and size fade; configurable `count` (3–10) ✨ *New in v4.1.0*
|
|
283
|
+
- **ParticleField** - Ambient field of floating, drifting particles rising through a bounded area; configurable `width`, `height`, `count` (5–30) ✨ *New in v4.1.0*
|
|
284
|
+
|
|
285
|
+
### Neon Components (3 components) ✨ *New in v4.1.0*
|
|
286
|
+
|
|
287
|
+
Glowing neon-style loaders using CSS box-shadow and text-shadow for dark UIs and gaming themes:
|
|
288
|
+
|
|
289
|
+
- **NeonPulse** - Pulsing glowing ring with configurable `glowIntensity` (`low` / `medium` / `high`)
|
|
290
|
+
- **NeonSpinner** - Spinning arc with a neon glow trail; customizable `thickness` and `color`
|
|
291
|
+
- **NeonText** - Loading text label that pulses with a neon glow; configurable `text`, `color`, `fontSize`
|
|
277
292
|
|
|
278
293
|
## Hooks
|
|
279
294
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,cAAc,CAAC;AAG7B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,MAAM,CAAC;AAGrB,cAAc,SAAS,CAAC;AAGxB,cAAc,iBAAiB,CAAC;AAGhC,cAAc,SAAS,CAAC;AAGxB,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,cAAc,CAAC;AAG7B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,MAAM,CAAC;AAGrB,cAAc,SAAS,CAAC;AAGxB,cAAc,iBAAiB,CAAC;AAGhC,cAAc,SAAS,CAAC;AAGxB,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NeonPulseProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* NeonPulse - A glowing pulsing ring with neon effect
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <NeonPulse color="#3b82f6" />
|
|
8
|
+
* <NeonPulse size={80} glowIntensity="high" speed="fast" />
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export declare const NeonPulse: import('react').ForwardRefExoticComponent<NeonPulseProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=NeonPulse.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonPulse.d.ts","sourceRoot":"","sources":["../../../src/components/neon/NeonPulse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAS7C;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,2GAqDrB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NeonSpinnerProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* NeonSpinner - A rotating spinner with neon glow effect
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <NeonSpinner color="#a855f7" />
|
|
8
|
+
* <NeonSpinner size={80} thickness={6} speed="fast" />
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export declare const NeonSpinner: import('react').ForwardRefExoticComponent<NeonSpinnerProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=NeonSpinner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/neon/NeonSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,6GAsDvB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { NeonTextProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* NeonText - Glowing neon text with animation
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <NeonText text="LOADING" color="#22d3ee" />
|
|
8
|
+
* <NeonText text="READY" color="#ec4899" fontSize={24} speed="fast" />
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export declare const NeonText: import('react').ForwardRefExoticComponent<NeonTextProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=NeonText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NeonText.d.ts","sourceRoot":"","sources":["../../../src/components/neon/NeonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,0GAmDpB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/neon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleField.d.ts","sourceRoot":"","sources":["../../../src/components/particle/ParticleField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,eAAO,MAAM,aAAa,+GA0EzB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ParticleTrailProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* ParticleTrail - Particles in trailing circular orbit with decreasing opacity and size
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <ParticleTrail color="#3b82f6" />
|
|
8
|
+
* <ParticleTrail count={8} size={80} />
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export declare const ParticleTrail: import('react').ForwardRefExoticComponent<ParticleTrailProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=ParticleTrail.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleTrail.d.ts","sourceRoot":"","sources":["../../../src/components/particle/ParticleTrail.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,+GAwEzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/particle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/particle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { InfoIndicatorProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* InfoIndicator - Animated info indicator with circle and information mark
|
|
4
|
+
*
|
|
5
|
+
* Displays an animated info icon with a circle and "i" mark, perfect for showing
|
|
6
|
+
* information, hints, or notice states.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* // Simple info indicator
|
|
11
|
+
* <InfoIndicator visible={hasInfo} />
|
|
12
|
+
*
|
|
13
|
+
* // With pulse glow effect
|
|
14
|
+
* <InfoIndicator
|
|
15
|
+
* visible={hasInfo}
|
|
16
|
+
* pulse
|
|
17
|
+
* />
|
|
18
|
+
*
|
|
19
|
+
* // Custom size, color and duration
|
|
20
|
+
* <InfoIndicator
|
|
21
|
+
* visible={hasInfo}
|
|
22
|
+
* size={64}
|
|
23
|
+
* color="#3b82f6"
|
|
24
|
+
* duration={600}
|
|
25
|
+
* />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare const InfoIndicator: import('react').ForwardRefExoticComponent<InfoIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
29
|
+
//# sourceMappingURL=InfoIndicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InfoIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/status/InfoIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,aAAa,+GAiEzB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { WarningIndicatorProps } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* WarningIndicator - Animated warning indicator with triangle and exclamation mark
|
|
4
|
+
*
|
|
5
|
+
* Displays an animated warning triangle with an exclamation mark, perfect for showing
|
|
6
|
+
* warnings, alerts, or caution states.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* // Simple warning indicator
|
|
11
|
+
* <WarningIndicator visible={hasWarning} />
|
|
12
|
+
*
|
|
13
|
+
* // With shake animation
|
|
14
|
+
* <WarningIndicator
|
|
15
|
+
* visible={hasWarning}
|
|
16
|
+
* shake
|
|
17
|
+
* />
|
|
18
|
+
*
|
|
19
|
+
* // Custom size, color and duration
|
|
20
|
+
* <WarningIndicator
|
|
21
|
+
* visible={hasWarning}
|
|
22
|
+
* size={64}
|
|
23
|
+
* color="#f97316"
|
|
24
|
+
* duration={600}
|
|
25
|
+
* />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare const WarningIndicator: import('react').ForwardRefExoticComponent<WarningIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
29
|
+
//# sourceMappingURL=WarningIndicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WarningIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/status/WarningIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,gBAAgB,kHAiE5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -35,33 +35,40 @@ const LoaderOverlay = require("./index33.cjs");
|
|
|
35
35
|
const ButtonSpinner = require("./index34.cjs");
|
|
36
36
|
const SuccessCheckmark = require("./index35.cjs");
|
|
37
37
|
const ErrorIndicator = require("./index36.cjs");
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
const
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
const
|
|
63
|
-
const
|
|
64
|
-
const
|
|
38
|
+
const WarningIndicator = require("./index37.cjs");
|
|
39
|
+
const InfoIndicator = require("./index38.cjs");
|
|
40
|
+
const LoaderTransition = require("./index39.cjs");
|
|
41
|
+
const ShimmerBox = require("./index40.cjs");
|
|
42
|
+
const ShimmerText = require("./index41.cjs");
|
|
43
|
+
const ShimmerButton = require("./index42.cjs");
|
|
44
|
+
const OrbitDots = require("./index43.cjs");
|
|
45
|
+
const OrbitRings = require("./index44.cjs");
|
|
46
|
+
const AtomLoader = require("./index45.cjs");
|
|
47
|
+
const BouncingDots = require("./index46.cjs");
|
|
48
|
+
const BouncingBalls = require("./index47.cjs");
|
|
49
|
+
const InfinityLoader = require("./index48.cjs");
|
|
50
|
+
const MobiusLoader = require("./index49.cjs");
|
|
51
|
+
const LoadingText = require("./index50.cjs");
|
|
52
|
+
const CubeSpinner = require("./index51.cjs");
|
|
53
|
+
const FlipCard = require("./index52.cjs");
|
|
54
|
+
const PlaneRotate = require("./index53.cjs");
|
|
55
|
+
const Helix = require("./index54.cjs");
|
|
56
|
+
const PerspectiveRing = require("./index55.cjs");
|
|
57
|
+
const FormFieldLoader = require("./index56.cjs");
|
|
58
|
+
const LiveRegion = require("./index57.cjs");
|
|
59
|
+
const MorphBlob = require("./index58.cjs");
|
|
60
|
+
const LiquidFill = require("./index59.cjs");
|
|
61
|
+
const WaveCircle = require("./index60.cjs");
|
|
62
|
+
const GradientSpinner = require("./index61.cjs");
|
|
63
|
+
const GradientRing = require("./index62.cjs");
|
|
64
|
+
const GradientBar = require("./index63.cjs");
|
|
65
|
+
const ParticleBurst = require("./index64.cjs");
|
|
66
|
+
const ParticleOrbit = require("./index65.cjs");
|
|
67
|
+
const ParticleTrail = require("./index66.cjs");
|
|
68
|
+
const ParticleField = require("./index67.cjs");
|
|
69
|
+
const NeonPulse = require("./index68.cjs");
|
|
70
|
+
const NeonSpinner = require("./index69.cjs");
|
|
71
|
+
const NeonText = require("./index70.cjs");
|
|
65
72
|
const version = "4.0.0";
|
|
66
73
|
exports.cn = classNames.cn;
|
|
67
74
|
exports.getAnimationDuration = colors.getAnimationDuration;
|
|
@@ -99,6 +106,8 @@ exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
|
|
|
99
106
|
exports.ButtonSpinner = ButtonSpinner.ButtonSpinner;
|
|
100
107
|
exports.SuccessCheckmark = SuccessCheckmark.SuccessCheckmark;
|
|
101
108
|
exports.ErrorIndicator = ErrorIndicator.ErrorIndicator;
|
|
109
|
+
exports.WarningIndicator = WarningIndicator.WarningIndicator;
|
|
110
|
+
exports.InfoIndicator = InfoIndicator.InfoIndicator;
|
|
102
111
|
exports.LoaderTransition = LoaderTransition.LoaderTransition;
|
|
103
112
|
exports.ShimmerBox = ShimmerBox.ShimmerBox;
|
|
104
113
|
exports.ShimmerText = ShimmerText.ShimmerText;
|
|
@@ -126,4 +135,9 @@ exports.GradientRing = GradientRing.GradientRing;
|
|
|
126
135
|
exports.GradientBar = GradientBar.GradientBar;
|
|
127
136
|
exports.ParticleBurst = ParticleBurst.ParticleBurst;
|
|
128
137
|
exports.ParticleOrbit = ParticleOrbit.ParticleOrbit;
|
|
138
|
+
exports.ParticleTrail = ParticleTrail.ParticleTrail;
|
|
139
|
+
exports.ParticleField = ParticleField.ParticleField;
|
|
140
|
+
exports.NeonPulse = NeonPulse.NeonPulse;
|
|
141
|
+
exports.NeonSpinner = NeonSpinner.NeonSpinner;
|
|
142
|
+
exports.NeonText = NeonText.NeonText;
|
|
129
143
|
exports.version = version;
|
package/dist/index.js
CHANGED
|
@@ -33,33 +33,40 @@ import { LoaderOverlay } from "./index33.js";
|
|
|
33
33
|
import { ButtonSpinner } from "./index34.js";
|
|
34
34
|
import { SuccessCheckmark } from "./index35.js";
|
|
35
35
|
import { ErrorIndicator } from "./index36.js";
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
36
|
+
import { WarningIndicator } from "./index37.js";
|
|
37
|
+
import { InfoIndicator } from "./index38.js";
|
|
38
|
+
import { LoaderTransition } from "./index39.js";
|
|
39
|
+
import { ShimmerBox } from "./index40.js";
|
|
40
|
+
import { ShimmerText } from "./index41.js";
|
|
41
|
+
import { ShimmerButton } from "./index42.js";
|
|
42
|
+
import { OrbitDots } from "./index43.js";
|
|
43
|
+
import { OrbitRings } from "./index44.js";
|
|
44
|
+
import { AtomLoader } from "./index45.js";
|
|
45
|
+
import { BouncingDots } from "./index46.js";
|
|
46
|
+
import { BouncingBalls } from "./index47.js";
|
|
47
|
+
import { InfinityLoader } from "./index48.js";
|
|
48
|
+
import { MobiusLoader } from "./index49.js";
|
|
49
|
+
import { LoadingText } from "./index50.js";
|
|
50
|
+
import { CubeSpinner } from "./index51.js";
|
|
51
|
+
import { FlipCard } from "./index52.js";
|
|
52
|
+
import { PlaneRotate } from "./index53.js";
|
|
53
|
+
import { Helix } from "./index54.js";
|
|
54
|
+
import { PerspectiveRing } from "./index55.js";
|
|
55
|
+
import { FormFieldLoader } from "./index56.js";
|
|
56
|
+
import { LiveRegion } from "./index57.js";
|
|
57
|
+
import { MorphBlob } from "./index58.js";
|
|
58
|
+
import { LiquidFill } from "./index59.js";
|
|
59
|
+
import { WaveCircle } from "./index60.js";
|
|
60
|
+
import { GradientSpinner } from "./index61.js";
|
|
61
|
+
import { GradientRing } from "./index62.js";
|
|
62
|
+
import { GradientBar } from "./index63.js";
|
|
63
|
+
import { ParticleBurst } from "./index64.js";
|
|
64
|
+
import { ParticleOrbit } from "./index65.js";
|
|
65
|
+
import { ParticleTrail } from "./index66.js";
|
|
66
|
+
import { ParticleField } from "./index67.js";
|
|
67
|
+
import { NeonPulse } from "./index68.js";
|
|
68
|
+
import { NeonSpinner } from "./index69.js";
|
|
69
|
+
import { NeonText } from "./index70.js";
|
|
63
70
|
const version = "4.0.0";
|
|
64
71
|
export {
|
|
65
72
|
AtomLoader,
|
|
@@ -76,6 +83,7 @@ export {
|
|
|
76
83
|
GradientSpinner,
|
|
77
84
|
Helix,
|
|
78
85
|
InfinityLoader,
|
|
86
|
+
InfoIndicator,
|
|
79
87
|
LiquidFill,
|
|
80
88
|
LiveRegion,
|
|
81
89
|
LoaderOverlay,
|
|
@@ -83,10 +91,15 @@ export {
|
|
|
83
91
|
LoadingText,
|
|
84
92
|
MobiusLoader,
|
|
85
93
|
MorphBlob,
|
|
94
|
+
NeonPulse,
|
|
95
|
+
NeonSpinner,
|
|
96
|
+
NeonText,
|
|
86
97
|
OrbitDots,
|
|
87
98
|
OrbitRings,
|
|
88
99
|
ParticleBurst,
|
|
100
|
+
ParticleField,
|
|
89
101
|
ParticleOrbit,
|
|
102
|
+
ParticleTrail,
|
|
90
103
|
PerspectiveRing,
|
|
91
104
|
PlaneRotate,
|
|
92
105
|
ProgressBar,
|
|
@@ -119,6 +132,7 @@ export {
|
|
|
119
132
|
SuccessCheckmark,
|
|
120
133
|
ThemeProvider,
|
|
121
134
|
TypingIndicator,
|
|
135
|
+
WarningIndicator,
|
|
122
136
|
WaveCircle,
|
|
123
137
|
cn,
|
|
124
138
|
getAnimationDuration,
|
package/dist/index10.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
|
-
const hooks = require("./
|
|
6
|
+
const hooks = require("./index71.cjs");
|
|
7
7
|
const SkeletonImage = react.forwardRef(
|
|
8
8
|
({
|
|
9
9
|
width = "100%",
|
package/dist/index10.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
|
-
import { useLoaderVisibility } from "./
|
|
4
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
5
5
|
const SkeletonImage = forwardRef(
|
|
6
6
|
({
|
|
7
7
|
width = "100%",
|
package/dist/index11.cjs
CHANGED
|
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
6
|
const SkeletonAvatar = require("./index9.cjs");
|
|
7
|
-
const hooks = require("./
|
|
7
|
+
const hooks = require("./index71.cjs");
|
|
8
8
|
const classNames = require("./index3.cjs");
|
|
9
9
|
const SkeletonCard = react.forwardRef(
|
|
10
10
|
({
|
package/dist/index11.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
4
|
import { SkeletonAvatar } from "./index9.js";
|
|
5
|
-
import { useLoaderVisibility } from "./
|
|
5
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
6
6
|
import { cn } from "./index3.js";
|
|
7
7
|
const SkeletonCard = forwardRef(
|
|
8
8
|
({
|
package/dist/index12.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
|
-
const hooks = require("./
|
|
6
|
+
const hooks = require("./index71.cjs");
|
|
7
7
|
const colors = require("./index4.cjs");
|
|
8
8
|
const classNames = require("./index3.cjs");
|
|
9
9
|
const SkeletonList = react.forwardRef(
|
package/dist/index12.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
|
-
import { useLoaderVisibility } from "./
|
|
4
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
5
5
|
import { normalizeSize } from "./index4.js";
|
|
6
6
|
import { cn } from "./index3.js";
|
|
7
7
|
const SkeletonList = forwardRef(
|
package/dist/index13.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
|
-
const hooks = require("./
|
|
6
|
+
const hooks = require("./index71.cjs");
|
|
7
7
|
const classNames = require("./index3.cjs");
|
|
8
8
|
const SkeletonTable = react.forwardRef(
|
|
9
9
|
({
|
package/dist/index13.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
|
-
import { useLoaderVisibility } from "./
|
|
4
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
5
5
|
import { cn } from "./index3.js";
|
|
6
6
|
const SkeletonTable = forwardRef(
|
|
7
7
|
({
|
package/dist/index14.cjs
CHANGED
|
@@ -5,7 +5,7 @@ const react = require("react");
|
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
6
|
const SkeletonText = require("./index8.cjs");
|
|
7
7
|
const SkeletonAvatar = require("./index9.cjs");
|
|
8
|
-
const hooks = require("./
|
|
8
|
+
const hooks = require("./index71.cjs");
|
|
9
9
|
const classNames = require("./index3.cjs");
|
|
10
10
|
const SkeletonPage = react.forwardRef(
|
|
11
11
|
({
|
package/dist/index14.js
CHANGED
|
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
4
|
import { SkeletonText } from "./index8.js";
|
|
5
5
|
import { SkeletonAvatar } from "./index9.js";
|
|
6
|
-
import { useLoaderVisibility } from "./
|
|
6
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
7
7
|
import { cn } from "./index3.js";
|
|
8
8
|
const SkeletonPage = forwardRef(
|
|
9
9
|
({
|
package/dist/index15.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
|
-
const hooks = require("./
|
|
6
|
+
const hooks = require("./index71.cjs");
|
|
7
7
|
const colors = require("./index4.cjs");
|
|
8
8
|
const classNames = require("./index3.cjs");
|
|
9
9
|
const SkeletonForm = react.forwardRef(
|
package/dist/index15.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
|
-
import { useLoaderVisibility } from "./
|
|
4
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
5
5
|
import { normalizeSize } from "./index4.js";
|
|
6
6
|
import { cn } from "./index3.js";
|
|
7
7
|
const SkeletonForm = forwardRef(
|
package/dist/index17.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const Skeleton = require("./index7.cjs");
|
|
6
|
-
const hooks = require("./
|
|
6
|
+
const hooks = require("./index71.cjs");
|
|
7
7
|
const classNames = require("./index3.cjs");
|
|
8
8
|
const DataTableSkeleton = react.forwardRef(
|
|
9
9
|
({
|
package/dist/index17.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Skeleton } from "./index7.js";
|
|
4
|
-
import { useLoaderVisibility } from "./
|
|
4
|
+
import { useLoaderVisibility } from "./index71.js";
|
|
5
5
|
import { cn } from "./index3.js";
|
|
6
6
|
const DataTableSkeleton = forwardRef(
|
|
7
7
|
({
|
package/dist/index18.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const hooks = require("./
|
|
5
|
+
const hooks = require("./index71.cjs");
|
|
6
6
|
const classNames = require("./index3.cjs");
|
|
7
7
|
const colors = require("./index4.cjs");
|
|
8
8
|
const SpinnerCircle = react.forwardRef(
|
package/dist/index18.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./
|
|
3
|
+
import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
|
|
4
4
|
import { cn } from "./index3.js";
|
|
5
5
|
import { normalizeSize } from "./index4.js";
|
|
6
6
|
const SpinnerCircle = forwardRef(
|
package/dist/index19.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const hooks = require("./
|
|
5
|
+
const hooks = require("./index71.cjs");
|
|
6
6
|
const classNames = require("./index3.cjs");
|
|
7
7
|
const colors = require("./index4.cjs");
|
|
8
8
|
const SpinnerRing = react.forwardRef(
|