@aristobyte-ui/spinner 2.8.0 β†’ 2.8.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.
Files changed (2) hide show
  1. package/README.md +95 -0
  2. package/package.json +10 -2
package/README.md ADDED
@@ -0,0 +1,95 @@
1
+ # `@aristobyte-ui/spinner`
2
+
3
+ <p align="center">
4
+ <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
5
+ <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
6
+ <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
7
+ <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
8
+ <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
9
+ <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
10
+ <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
11
+ <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
12
+ </p>
13
+
14
+ A modular, highly customizable React spinner component, optimized for AristoByteUI projects. Supports multiple animation types, semantic color variants, and flexible sizing.
15
+
16
+ ## πŸ“¦ Installation
17
+
18
+ ```bash
19
+ # Install via Yarn
20
+ yarn add -D @aristobyte-ui/spinner
21
+
22
+ # Or via npm
23
+ npm install -D @aristobyte-ui/spinner
24
+
25
+ # Or via pnpm
26
+ pnpm add -D @aristobyte-ui/spinner
27
+ ```
28
+
29
+ ## πŸ›  Usage
30
+
31
+ ```tsx
32
+ import { Spinner } from "@aristobyte-ui/spinner";
33
+
34
+ export const Demo = () => (
35
+ <div>
36
+ <Spinner type="default" variant="primary" size="md" />
37
+ <Spinner type="duo" variant="success" size="lg" />
38
+ <Spinner type="pulse-duo" variant="error" size="sm" />
39
+ </div>
40
+ );
41
+ ```
42
+
43
+ | Prop | Type | Default | Description |
44
+ | | - | -- | -- |
45
+ | type | `"default"`, `"duo"`, `"gradient"`, `"pulse"`, `"pulse-duo"` | `"default"` | Defines the spinner animation style |
46
+ | variant | `"default"`, `"primary"`, `"secondary"`, `"success"`, `"error"`, `"warning"` | `"default"` | Semantic color variant |
47
+ | size | `"xsm"`, `"sm"`, `"md"`, `"lg"`, `"xlg"` | `"md"` | Controls spinner dimensions |
48
+ | className | `string` | `""` | Optional additional class names |
49
+
50
+ ## πŸ“‚ Presets Available
51
+
52
+ - Types: `default`, `duo`, `gradient`, `pulse`, `pulse-duo`
53
+ - Variants: `default`, `primary`, `secondary`, `success`, `error`, `warning`
54
+ - Sizes: `xsm`, `sm`, `md`, `lg`, `xlg`
55
+
56
+ ## πŸ”§ Example in a Package
57
+
58
+ ```tsx
59
+ import { Spinner } from "@aristobyte-ui/spinner";
60
+
61
+ export const LoadingState = () => (
62
+ <div className="flex justify-center items-center">
63
+ <Spinner type="gradient" variant="primary" size="lg" />
64
+ </div>
65
+ );
66
+ ```
67
+
68
+ ## πŸ“Š Why This Matters
69
+
70
+ - **Performance-first:** Engineered with lightweight, GPU-accelerated CSS keyframes for smooth, non-blocking animations.
71
+ - **Fully typed:** TypeScript-first API ensures strict type safety and predictable integration across multiple projects.
72
+ - **AristoByteUI ready:** Fully interoperable with AristoByte’s design tokens, semantic color palette, and styling architecture.
73
+ - **Flexible:** Supports multiple animation types, semantic variants, and responsive sizing to fit any UI scenario.
74
+
75
+ ## πŸ† Philosophy
76
+
77
+ - **Modular architecture:** Components are built for maximum reusability and composability.
78
+ - **Declarative styling:** SCSS modules maintain a clean separation of concerns while leveraging design tokens.
79
+ - **Strict typing & runtime flexibility:** Type-safe props with optional runtime overrides.
80
+ - **Developer experience optimized:** Intuitive API with predictable behavior and minimal setup.
81
+
82
+ ## πŸ“œ License
83
+
84
+ [MIT](./LICENSE) Β© AristoByte
85
+
86
+ ## πŸ›‘ Shields Showcase
87
+
88
+ <p align="center">
89
+ <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
90
+ <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
91
+ <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
92
+ <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
93
+ <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
94
+ <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
95
+ </p>
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.8.0",
4
+ "version": "2.8.1",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "author": "AristoByte <info@aristobyte.com>",
@@ -52,6 +52,14 @@
52
52
  "sass": "^1.97.3"
53
53
  },
54
54
  "dependencies": {
55
- "@aristobyte-ui/utils": "^2.8.0"
55
+ "@aristobyte-ui/utils": "^2.8.1"
56
+ },
57
+ "exports": {
58
+ ".": {
59
+ "types": "./es/index.d.ts",
60
+ "import": "./es/index.js",
61
+ "require": "./lib/index.js"
62
+ },
63
+ "./package.json": "./package.json"
56
64
  }
57
65
  }