@versini/ui-pill 4.0.8 → 4.0.10

package/README.md

@@ -1,12 +1,12 @@
 # @versini/ui-pill
 
 [![npm version](https://img.shields.io/npm/v/@versini/ui-pill?style=flat-square)](https://www.npmjs.com/package/@versini/ui-pill)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-pill?style=flat-square&label=size%20(gzip)>)
 
 > A versatile and accessible React pill component built with TypeScript and TailwindCSS.
 
 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.
 
-
 ## Table of Contents
 
 - [Features](#features)
@@ -28,7 +28,7 @@ The Pill component provides status indicators, badges, and labels with multiple
 npm install @versini/ui-pill
 ```
 
-> **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.
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
 
 ## Usage
 
@@ -38,9 +38,7 @@ npm install @versini/ui-pill
 import { Pill } from "@versini/ui-pill";
 
 function App() {
-  return (
-    <Pill label="Active" />
-  );
+  return <Pill label="Active" />;
 }
 ```
 
@@ -69,21 +67,9 @@ import { Pill } from "@versini/ui-pill";
 function App() {
   return (
     <div className="space-x-2">
-      <Pill 
-        label="Online" 
-        variant="success" 
-        description="User status"
-      />
-      <Pill 
-        label="Pending" 
-        variant="warning" 
-        description="Order status"
-      />
-      <Pill 
-        label="Failed" 
-        variant="error" 
-        description="Deployment status"
-      />
+      <Pill label="Online" variant="success" description="User status" />
+      <Pill label="Pending" variant="warning" description="Order status" />
+      <Pill label="Failed" variant="error" description="Deployment status" />
     </div>
   );
 }
@@ -93,12 +79,12 @@ function App() {
 
 ### Pill Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| label | `string` | - | Content of the Pill (required) |
-| variant | `"information" \| "warning" \| "error" \| "success"` | `"information"` | Theme of the Pill |
-| description | `string` | - | Hidden label for screen readers (2-3 words recommended) |
-| className | `string` | - | CSS class(es) to add to the main component wrapper |
+| Prop        | Type                                                 | Default         | Description                                             |
+| ----------- | ---------------------------------------------------- | --------------- | ------------------------------------------------------- |
+| label       | `string`                                             | -               | Content of the Pill (required)                          |
+| variant     | `"information" \| "warning" \| "error" \| "success"` | `"information"` | Theme of the Pill                                       |
+| description | `string`                                             | -               | Hidden label for screen readers (2-3 words recommended) |
+| className   | `string`                                             | -               | CSS class(es) to add to the main component wrapper      |
 
 ## Examples
 
@@ -111,15 +97,19 @@ function StatusIndicators() {
   const users = [
     { name: "Alice", status: "online" },
     { name: "Bob", status: "away" },
-    { name: "Charlie", status: "offline" },
+    { name: "Charlie", status: "offline" }
   ];
 
   const getStatusVariant = (status: string) => {
     switch (status) {
-      case "online": return "success";
-      case "away": return "warning";
-      case "offline": return "error";
-      default: return "information";
+      case "online":
+        return "success";
+      case "away":
+        return "warning";
+      case "offline":
+        return "error";
+      default:
+        return "information";
     }
   };
 
@@ -128,8 +118,8 @@ function StatusIndicators() {
       {users.map((user) => (
         <div key={user.name} className="flex items-center space-x-2">
           <span>{user.name}</span>
-          <Pill 
-            label={user.status} 
+          <Pill
+            label={user.status}
             variant={getStatusVariant(user.status)}
             description="User status"
           />
@@ -150,17 +140,20 @@ function OrderDashboard() {
     { id: "ORD-001", status: "processing", variant: "information" },
     { id: "ORD-002", status: "shipped", variant: "success" },
     { id: "ORD-003", status: "delayed", variant: "warning" },
-    { id: "ORD-004", status: "cancelled", variant: "error" },
+    { id: "ORD-004", status: "cancelled", variant: "error" }
   ];
 
   return (
     <div className="space-y-3">
       <h3>Recent Orders</h3>
       {orders.map((order) => (
-        <div key={order.id} className="flex justify-between items-center p-3 border rounded">
+        <div
+          key={order.id}
+          className="flex justify-between items-center p-3 border rounded"
+        >
           <span className="font-mono">{order.id}</span>
-          <Pill 
-            label={order.status} 
+          <Pill
+            label={order.status}
             variant={order.variant as any}
             description="Order status"
           />
@@ -187,9 +180,9 @@ function CategoryTags() {
       <h2>{article.title}</h2>
       <div className="flex flex-wrap gap-2">
         {article.categories.map((category) => (
-          <Pill 
+          <Pill
             key={category}
-            label={category} 
+            label={category}
             variant="information"
             description="Article category"
           />
@@ -209,27 +202,17 @@ function CustomStyledPills() {
   return (
     <div className="space-y-4">
       <div className="space-x-2">
-        <Pill 
-          label="Premium" 
+        <Pill
+          label="Premium"
           variant="success"
           className="font-bold border-2 border-gold-500"
         />
-        <Pill 
-          label="Beta" 
-          variant="information"
-          className="animate-pulse"
-        />
+        <Pill label="Beta" variant="information" className="animate-pulse" />
       </div>
-      
+
       <div className="space-x-2">
-        <Pill 
-          label="Large"
-          className="px-4 py-2 text-lg"
-        />
-        <Pill 
-          label="Small"
-          className="px-1 py-0.5 text-xs"
-        />
+        <Pill label="Large" className="px-4 py-2 text-lg" />
+        <Pill label="Small" className="px-1 py-0.5 text-xs" />
       </div>
     </div>
   );
@@ -245,23 +228,19 @@ function NotificationBadges() {
   return (
     <div className="space-y-4">
       <div className="relative inline-block">
-        <button className="p-2 bg-gray-200 rounded">
-          Messages
-        </button>
-        <Pill 
-          label="3" 
+        <button className="p-2 bg-gray-200 rounded">Messages</button>
+        <Pill
+          label="3"
           variant="error"
           description="Unread messages"
           className="absolute -top-2 -right-2 min-w-[20px] h-5 text-xs"
         />
       </div>
-      
+
       <div className="relative inline-block">
-        <button className="p-2 bg-gray-200 rounded">
-          Notifications
-        </button>
-        <Pill 
-          label="!" 
+        <button className="p-2 bg-gray-200 rounded">Notifications</button>
+        <Pill
+          label="!"
           variant="warning"
           description="New notifications"
           className="absolute -top-1 -right-1 w-4 h-4 text-xs flex items-center justify-center"

package/dist/index.js

@@ -1,12 +1,12 @@
 import { PILL_CLASSNAME as o, Pill as I } from "./components/Pill/Pill.js";
 /*!
-  @versini/ui-pill v4.0.8
+  @versini/ui-pill v4.0.10
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_PILL__ || (window.__VERSINI_UI_PILL__ = {
-    version: "4.0.8",
-    buildTime: "08/23/2025 09:10 AM EDT",
+    version: "4.0.10",
+    buildTime: "08/23/2025 12:23 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-pill",
-	"version": "4.0.8",
+	"version": "4.0.10",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -51,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7bbfa99a4441ef5b0828a37d190f694e199b663d"
+	"gitHead": "d568e20474c6c87f836c4cb6548f2cc0143a353c"
 }