@versini/ui-spinner 4.0.5 → 4.0.7

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 (3) hide show
  1. package/README.md +228 -1
  2. package/dist/index.js +3 -3
  3. package/package.json +5 -4
package/README.md CHANGED
@@ -1,3 +1,230 @@
1
1
  # @versini/ui-spinner
2
2
 
3
- A simple spinner component for React.
3
+ [![npm version](https://img.shields.io/npm/v/@versini/ui-spinner?style=flat-square)](https://www.npmjs.com/package/@versini/ui-spinner)
4
+
5
+ > A lightweight and accessible React spinner component built with TypeScript and TailwindCSS.
6
+
7
+ The Spinner component provides visual loading indicators with multiple styles and theme support. It's designed to be accessible and follows best practices for loading states.
8
+
9
+ ## Table of Contents
10
+
11
+ - [Features](#features)
12
+ - [Installation](#installation)
13
+ - [Usage](#usage)
14
+ - [API](#api)
15
+
16
+ ## Features
17
+
18
+ - **🎯 Multiple Types**: Circle and dots spinner animations
19
+ - **♿ Accessible**: Includes proper ARIA roles for screen readers
20
+ - **🎨 Customizable**: Multiple themes and styling options
21
+ - **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
22
+ - **🔧 TypeScript**: Fully typed with comprehensive prop definitions
23
+ - **🎭 Theme Support**: Built-in support for light, dark, and system themes
24
+
25
+ ## Installation
26
+
27
+ ```bash
28
+ npm install @versini/ui-spinner
29
+ ```
30
+
31
+ > **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
32
+
33
+ ## Usage
34
+
35
+ ### Basic Spinner
36
+
37
+ ```tsx
38
+ import { Spinner } from "@versini/ui-spinner";
39
+
40
+ function App() {
41
+ return (
42
+ <div>
43
+ <p>Loading...</p>
44
+ <Spinner />
45
+ </div>
46
+ );
47
+ }
48
+ ```
49
+
50
+ ### Dots Spinner
51
+
52
+ ```tsx
53
+ import { Spinner } from "@versini/ui-spinner";
54
+
55
+ function App() {
56
+ return (
57
+ <div>
58
+ <p>Processing...</p>
59
+ <Spinner type="dots" />
60
+ </div>
61
+ );
62
+ }
63
+ ```
64
+
65
+ ### Different Themes
66
+
67
+ ```tsx
68
+ import { Spinner } from "@versini/ui-spinner";
69
+
70
+ function App() {
71
+ return (
72
+ <div className="space-x-4">
73
+ <Spinner mode="light" />
74
+ <Spinner mode="dark" />
75
+ <Spinner mode="system" />
76
+ </div>
77
+ );
78
+ }
79
+ ```
80
+
81
+ ### Custom Styling
82
+
83
+ ```tsx
84
+ import { Spinner } from "@versini/ui-spinner";
85
+ import { useRef } from "react";
86
+
87
+ function App() {
88
+ const spinnerRef = useRef<HTMLDivElement>(null);
89
+
90
+ return (
91
+ <Spinner
92
+ ref={spinnerRef}
93
+ className="text-blue-500 w-12 h-12"
94
+ mode="light"
95
+ />
96
+ );
97
+ }
98
+ ```
99
+
100
+ ## API
101
+
102
+ ### Spinner Props
103
+
104
+ | Prop | Type | Default | Description |
105
+ | ---------- | ----------------------------------------------- | ---------- | ------------------------------------------- |
106
+ | type | `"circle" \| "dots"` | `"circle"` | The type of spinner to render |
107
+ | mode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of spinner (controls theme/color) |
108
+ | className | `string` | - | CSS class(es) to add to the spinner element |
109
+ | spinnerRef | `React.RefObject<HTMLDivElement>` | - | A ref to the spinner element |
110
+
111
+ ## Examples
112
+
113
+ ### Loading States
114
+
115
+ ```tsx
116
+ import { Spinner } from "@versini/ui-spinner";
117
+ import { useState, useEffect } from "react";
118
+
119
+ function LoadingExample() {
120
+ const [loading, setLoading] = useState(true);
121
+ const [data, setData] = useState(null);
122
+
123
+ useEffect(() => {
124
+ // Simulate API call
125
+ setTimeout(() => {
126
+ setData("Loaded data");
127
+ setLoading(false);
128
+ }, 2000);
129
+ }, []);
130
+
131
+ if (loading) {
132
+ return (
133
+ <div className="flex items-center space-x-2">
134
+ <Spinner />
135
+ <span>Loading data...</span>
136
+ </div>
137
+ );
138
+ }
139
+
140
+ return <div>Data: {data}</div>;
141
+ }
142
+ ```
143
+
144
+ ### Different Spinner Types
145
+
146
+ ```tsx
147
+ import { Spinner } from "@versini/ui-spinner";
148
+
149
+ function SpinnerTypesExample() {
150
+ return (
151
+ <div className="space-y-4">
152
+ <div className="flex items-center space-x-2">
153
+ <Spinner type="circle" />
154
+ <span>Circle spinner</span>
155
+ </div>
156
+
157
+ <div className="flex items-center space-x-2">
158
+ <Spinner type="dots" />
159
+ <span>Dots spinner</span>
160
+ </div>
161
+ </div>
162
+ );
163
+ }
164
+ ```
165
+
166
+ ### Inline Loading
167
+
168
+ ```tsx
169
+ import { Spinner } from "@versini/ui-spinner";
170
+
171
+ function InlineLoadingExample() {
172
+ return (
173
+ <div className="space-y-2">
174
+ <p>
175
+ Saving changes <Spinner className="inline ml-1 w-4 h-4" />
176
+ </p>
177
+
178
+ <button className="flex items-center space-x-2" disabled>
179
+ <Spinner className="w-4 h-4" />
180
+ <span>Processing...</span>
181
+ </button>
182
+ </div>
183
+ );
184
+ }
185
+ ```
186
+
187
+ ### Custom Sizes and Colors
188
+
189
+ ```tsx
190
+ import { Spinner } from "@versini/ui-spinner";
191
+
192
+ function CustomSpinnerExample() {
193
+ return (
194
+ <div className="space-y-4">
195
+ {/* Small spinner */}
196
+ <Spinner className="w-4 h-4" />
197
+
198
+ {/* Medium spinner (default) */}
199
+ <Spinner />
200
+
201
+ {/* Large spinner */}
202
+ <Spinner className="w-12 h-12" />
203
+
204
+ {/* Custom color */}
205
+ <Spinner className="text-red-500" mode="light" />
206
+
207
+ {/* Thick border */}
208
+ <Spinner className="border-8" />
209
+ </div>
210
+ );
211
+ }
212
+ ```
213
+
214
+ ### Accessible Loading
215
+
216
+ ```tsx
217
+ import { Spinner } from "@versini/ui-spinner";
218
+
219
+ function AccessibleLoadingExample() {
220
+ return (
221
+ <div>
222
+ {/* The spinner automatically includes role="status" for accessibility */}
223
+ <div aria-live="polite" aria-busy="true">
224
+ <Spinner />
225
+ <span className="sr-only">Loading content, please wait...</span>
226
+ </div>
227
+ </div>
228
+ );
229
+ }
230
+ ```
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { SPINNER_CLASSNAME as o, Spinner as I } from "./components/Spinner/Spinner.js";
2
2
  /*!
3
- @versini/ui-spinner v4.0.5
3
+ @versini/ui-spinner v4.0.7
4
4
  © 2025 gizmette.com
5
5
  */
6
6
  try {
7
7
  window.__VERSINI_UI_SPINNER__ || (window.__VERSINI_UI_SPINNER__ = {
8
- version: "4.0.5",
9
- buildTime: "06/28/2025 08:58 PM EDT",
8
+ version: "4.0.7",
9
+ buildTime: "08/14/2025 06:07 PM EDT",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT"
12
12
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-spinner",
3
- "version": "4.0.5",
3
+ "version": "4.0.7",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -27,6 +27,7 @@
27
27
  "dev:types": "tsup --watch src",
28
28
  "dev": "npm-run-all clean --parallel dev:js dev:types",
29
29
  "lint": "biome lint src",
30
+ "lint:fix": "biome check src --write --no-errors-on-unmatched",
30
31
  "prettier": "biome check --write --no-errors-on-unmatched",
31
32
  "start": "static-server dist --port 5173",
32
33
  "test:coverage:ui": "vitest --coverage --ui",
@@ -39,14 +40,14 @@
39
40
  "react-dom": "^18.3.1 || ^19.0.0"
40
41
  },
41
42
  "devDependencies": {
42
- "@versini/ui-types": "5.0.5"
43
+ "@versini/ui-types": "../ui-types"
43
44
  },
44
45
  "dependencies": {
45
46
  "@tailwindcss/typography": "0.5.16",
46
- "tailwindcss": "4.1.11"
47
+ "tailwindcss": "4.1.12"
47
48
  },
48
49
  "sideEffects": [
49
50
  "**/*.css"
50
51
  ],
51
- "gitHead": "1b9a792d10e1f67fc7af7cfdff718ef1e1c78633"
52
+ "gitHead": "a2a11904039a5bc55ff17a954e4a16073abbe0bf"
52
53
  }