@versini/ui-pill 4.0.5 → 4.0.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.
- package/README.md +271 -1
- package/dist/index.js +3 -3
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,3 +1,273 @@
|
|
|
1
1
|
# @versini/ui-pill
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-pill)
|
|
4
|
+
|
|
5
|
+
> A versatile and accessible React pill component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
7
|
+
The Pill component provides status indicators, badges, and labels with multiple variants and built-in accessibility features. Perfect for displaying statuses, categories, or other categorical information.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **🎯 Multiple Variants**: Information, warning, error, and success styles
|
|
19
|
+
- **♿ Accessible**: Built-in screen reader support with optional descriptions
|
|
20
|
+
- **🎨 Customizable**: Easy to style and integrate with your design system
|
|
21
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
22
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
23
|
+
- **📱 Responsive**: Works seamlessly across all device sizes
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @versini/ui-pill
|
|
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 Pill
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { Pill } from "@versini/ui-pill";
|
|
39
|
+
|
|
40
|
+
function App() {
|
|
41
|
+
return (
|
|
42
|
+
<Pill label="Active" />
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Different Variants
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Pill } from "@versini/ui-pill";
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<div className="space-x-2">
|
|
55
|
+
<Pill label="Information" variant="information" />
|
|
56
|
+
<Pill label="Success" variant="success" />
|
|
57
|
+
<Pill label="Warning" variant="warning" />
|
|
58
|
+
<Pill label="Error" variant="error" />
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Accessible Pills with Descriptions
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { Pill } from "@versini/ui-pill";
|
|
68
|
+
|
|
69
|
+
function App() {
|
|
70
|
+
return (
|
|
71
|
+
<div className="space-x-2">
|
|
72
|
+
<Pill
|
|
73
|
+
label="Online"
|
|
74
|
+
variant="success"
|
|
75
|
+
description="User status"
|
|
76
|
+
/>
|
|
77
|
+
<Pill
|
|
78
|
+
label="Pending"
|
|
79
|
+
variant="warning"
|
|
80
|
+
description="Order status"
|
|
81
|
+
/>
|
|
82
|
+
<Pill
|
|
83
|
+
label="Failed"
|
|
84
|
+
variant="error"
|
|
85
|
+
description="Deployment status"
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## API
|
|
93
|
+
|
|
94
|
+
### Pill Props
|
|
95
|
+
|
|
96
|
+
| Prop | Type | Default | Description |
|
|
97
|
+
|------|------|---------|-------------|
|
|
98
|
+
| label | `string` | - | Content of the Pill (required) |
|
|
99
|
+
| variant | `"information" \| "warning" \| "error" \| "success"` | `"information"` | Theme of the Pill |
|
|
100
|
+
| description | `string` | - | Hidden label for screen readers (2-3 words recommended) |
|
|
101
|
+
| className | `string` | - | CSS class(es) to add to the main component wrapper |
|
|
102
|
+
|
|
103
|
+
## Examples
|
|
104
|
+
|
|
105
|
+
### Status Indicators
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import { Pill } from "@versini/ui-pill";
|
|
109
|
+
|
|
110
|
+
function StatusIndicators() {
|
|
111
|
+
const users = [
|
|
112
|
+
{ name: "Alice", status: "online" },
|
|
113
|
+
{ name: "Bob", status: "away" },
|
|
114
|
+
{ name: "Charlie", status: "offline" },
|
|
115
|
+
];
|
|
116
|
+
|
|
117
|
+
const getStatusVariant = (status: string) => {
|
|
118
|
+
switch (status) {
|
|
119
|
+
case "online": return "success";
|
|
120
|
+
case "away": return "warning";
|
|
121
|
+
case "offline": return "error";
|
|
122
|
+
default: return "information";
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
return (
|
|
127
|
+
<div className="space-y-2">
|
|
128
|
+
{users.map((user) => (
|
|
129
|
+
<div key={user.name} className="flex items-center space-x-2">
|
|
130
|
+
<span>{user.name}</span>
|
|
131
|
+
<Pill
|
|
132
|
+
label={user.status}
|
|
133
|
+
variant={getStatusVariant(user.status)}
|
|
134
|
+
description="User status"
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
))}
|
|
138
|
+
</div>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Order Status Dashboard
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import { Pill } from "@versini/ui-pill";
|
|
147
|
+
|
|
148
|
+
function OrderDashboard() {
|
|
149
|
+
const orders = [
|
|
150
|
+
{ id: "ORD-001", status: "processing", variant: "information" },
|
|
151
|
+
{ id: "ORD-002", status: "shipped", variant: "success" },
|
|
152
|
+
{ id: "ORD-003", status: "delayed", variant: "warning" },
|
|
153
|
+
{ id: "ORD-004", status: "cancelled", variant: "error" },
|
|
154
|
+
];
|
|
155
|
+
|
|
156
|
+
return (
|
|
157
|
+
<div className="space-y-3">
|
|
158
|
+
<h3>Recent Orders</h3>
|
|
159
|
+
{orders.map((order) => (
|
|
160
|
+
<div key={order.id} className="flex justify-between items-center p-3 border rounded">
|
|
161
|
+
<span className="font-mono">{order.id}</span>
|
|
162
|
+
<Pill
|
|
163
|
+
label={order.status}
|
|
164
|
+
variant={order.variant as any}
|
|
165
|
+
description="Order status"
|
|
166
|
+
/>
|
|
167
|
+
</div>
|
|
168
|
+
))}
|
|
169
|
+
</div>
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Category Tags
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
import { Pill } from "@versini/ui-pill";
|
|
178
|
+
|
|
179
|
+
function CategoryTags() {
|
|
180
|
+
const article = {
|
|
181
|
+
title: "Getting Started with React",
|
|
182
|
+
categories: ["Frontend", "JavaScript", "React", "Tutorial"]
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
return (
|
|
186
|
+
<div className="space-y-3">
|
|
187
|
+
<h2>{article.title}</h2>
|
|
188
|
+
<div className="flex flex-wrap gap-2">
|
|
189
|
+
{article.categories.map((category) => (
|
|
190
|
+
<Pill
|
|
191
|
+
key={category}
|
|
192
|
+
label={category}
|
|
193
|
+
variant="information"
|
|
194
|
+
description="Article category"
|
|
195
|
+
/>
|
|
196
|
+
))}
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Custom Styled Pills
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import { Pill } from "@versini/ui-pill";
|
|
207
|
+
|
|
208
|
+
function CustomStyledPills() {
|
|
209
|
+
return (
|
|
210
|
+
<div className="space-y-4">
|
|
211
|
+
<div className="space-x-2">
|
|
212
|
+
<Pill
|
|
213
|
+
label="Premium"
|
|
214
|
+
variant="success"
|
|
215
|
+
className="font-bold border-2 border-gold-500"
|
|
216
|
+
/>
|
|
217
|
+
<Pill
|
|
218
|
+
label="Beta"
|
|
219
|
+
variant="information"
|
|
220
|
+
className="animate-pulse"
|
|
221
|
+
/>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div className="space-x-2">
|
|
225
|
+
<Pill
|
|
226
|
+
label="Large"
|
|
227
|
+
className="px-4 py-2 text-lg"
|
|
228
|
+
/>
|
|
229
|
+
<Pill
|
|
230
|
+
label="Small"
|
|
231
|
+
className="px-1 py-0.5 text-xs"
|
|
232
|
+
/>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Notification Badges
|
|
240
|
+
|
|
241
|
+
```tsx
|
|
242
|
+
import { Pill } from "@versini/ui-pill";
|
|
243
|
+
|
|
244
|
+
function NotificationBadges() {
|
|
245
|
+
return (
|
|
246
|
+
<div className="space-y-4">
|
|
247
|
+
<div className="relative inline-block">
|
|
248
|
+
<button className="p-2 bg-gray-200 rounded">
|
|
249
|
+
Messages
|
|
250
|
+
</button>
|
|
251
|
+
<Pill
|
|
252
|
+
label="3"
|
|
253
|
+
variant="error"
|
|
254
|
+
description="Unread messages"
|
|
255
|
+
className="absolute -top-2 -right-2 min-w-[20px] h-5 text-xs"
|
|
256
|
+
/>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div className="relative inline-block">
|
|
260
|
+
<button className="p-2 bg-gray-200 rounded">
|
|
261
|
+
Notifications
|
|
262
|
+
</button>
|
|
263
|
+
<Pill
|
|
264
|
+
label="!"
|
|
265
|
+
variant="warning"
|
|
266
|
+
description="New notifications"
|
|
267
|
+
className="absolute -top-1 -right-1 w-4 h-4 text-xs flex items-center justify-center"
|
|
268
|
+
/>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
);
|
|
272
|
+
}
|
|
273
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { PILL_CLASSNAME as o, Pill as I } from "./components/Pill/Pill.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-pill v4.0.
|
|
3
|
+
@versini/ui-pill v4.0.6
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_PILL__ || (window.__VERSINI_UI_PILL__ = {
|
|
8
|
-
version: "4.0.
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "4.0.6",
|
|
9
|
+
buildTime: "08/07/2025 04:12 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-pill",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.6",
|
|
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,7 +40,7 @@
|
|
|
39
40
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@versini/ui-types": "5.0.
|
|
43
|
+
"@versini/ui-types": "5.0.6"
|
|
43
44
|
},
|
|
44
45
|
"dependencies": {
|
|
45
46
|
"@tailwindcss/typography": "0.5.16",
|
|
@@ -49,5 +50,5 @@
|
|
|
49
50
|
"sideEffects": [
|
|
50
51
|
"**/*.css"
|
|
51
52
|
],
|
|
52
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
|
|
53
54
|
}
|