@versini/ui-pill 5.1.1 → 5.2.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Pill: ({ label, className, variant, description, }: PillProps) => JSX.Element;
+export declare const Pill: ({ label, className, variant, description, onClose, }: PillProps) => JSX.Element | null;
 
 export declare const PILL_CLASSNAME = "av-pill";
 
@@ -19,6 +19,13 @@ declare type PillProps = {
      * than 2-3 words.
      */
     description?: string;
+    /**
+     * Callback function triggered when the close icon is clicked.
+     * If provided, a close icon will be displayed on the right of the label.
+     * The pill will be removed from the DOM unless the event's default
+     * action is prevented.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Theme of the Pill.
      * @default "information"

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-pill v5.1.1
+  @versini/ui-pill v5.2.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PILL__) {
     window.__VERSINI_UI_PILL__ = {
-      version: "5.1.1",
-      buildTime: "11/16/2025 05:50 PM EST",
+      version: "5.2.0",
+      buildTime: "11/29/2025 07:22 PM EST",
       homepage: "https://github.com/aversini/ui-components",
       license: "MIT",
     };
@@ -16,6 +16,8 @@ try {
 }
 
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCloseLight } from "@versini/ui-icons";
+import { useState } from "react";
 import clsx from "clsx";
 
 ;// CONCATENATED MODULE: ./src/common/constants.ts
@@ -23,6 +25,10 @@ const PILL_CLASSNAME = "av-pill";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "react"
+
 ;// CONCATENATED MODULE: external "clsx"
 
 ;// CONCATENATED MODULE: ./src/components/Pill/utilities.ts
@@ -54,17 +60,36 @@ const getPillBackgroundClasses = ({ variant })=>{
 };
 const getPillClasses = (props)=>{
     const { className, variant } = props;
-    return clsx(PILL_CLASSNAME, "px-2 py-0.5 text-xs", getPillBorderClasses({
-        variant
-    }), getPillCopyClasses({
-        variant
-    }), getPillBackgroundClasses(props), className);
+    return {
+        main: clsx(PILL_CLASSNAME, "inline-flex items-center gap-1 px-2 py-0.5 text-xs", getPillBorderClasses({
+            variant
+        }), getPillCopyClasses({
+            variant
+        }), getPillBackgroundClasses(props), className),
+        button: clsx("inline-flex items-center justify-center", "ml-1", "focus:outline", "focus:outline-1", "focus:outline-offset-1", "focus:outline-focus-dark", "hover:bg-surface-medium/50", "rounded-full", getPillCopyClasses({
+            variant
+        }))
+    };
 };
 
 ;// CONCATENATED MODULE: ./src/components/Pill/Pill.tsx
 
 
-const Pill = ({ label, className, variant = "information", description })=>{
+
+
+const Pill = ({ label, className, variant = "information", description, onClose })=>{
+    const [isVisible, setIsVisible] = useState(true);
+    const handleClose = (event)=>{
+        if (onClose) {
+            onClose(event);
+            if (!event.defaultPrevented) {
+                setIsVisible(false);
+            }
+        }
+    };
+    if (!isVisible) {
+        return null;
+    }
     const pillClassName = getPillClasses({
         label,
         className,
@@ -72,7 +97,7 @@ const Pill = ({ label, className, variant = "information", description })=>{
     });
     return /*#__PURE__*/ jsxs("div", {
         role: "text",
-        className: pillClassName,
+        className: pillClassName.main,
         children: [
             description && /*#__PURE__*/ jsx("span", {
                 className: "sr-only",
@@ -80,6 +105,15 @@ const Pill = ({ label, className, variant = "information", description })=>{
             }),
             /*#__PURE__*/ jsx("span", {
                 children: label
+            }),
+            onClose && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: handleClose,
+                className: pillClassName.button,
+                "aria-label": "Close",
+                children: /*#__PURE__*/ jsx(IconCloseLight, {
+                    size: "size-3"
+                })
             })
         ]
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-pill",
-	"version": "5.1.1",
+	"version": "5.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,11 +41,12 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
+		"@versini/ui-icons": "4.15.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.17"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1d0bedfa3a84ea7f2f41d347a59de518f92e4cea"
+	"gitHead": "94d6bd3c3d3c0caadd9723233d182a5df4f8b51b"
 }