@versini/ui-bubble 6.3.2 → 6.4.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => JSX.Element;
+export declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, gradient, }: BubbleProps) => JSX.Element;
 
 export declare const BUBBLE_CLASSNAME = "av-bubble";
 
@@ -60,6 +60,16 @@ export declare type BubbleProps = {
     footer?: {
         [key: string]: string | number | undefined | null;
     };
+    /**
+     * The gradient intensity applied to the Bubble background.
+     * - "light": Subtle gradient with 80% opacity at the top
+     * - "medium": Medium gradient with 65% opacity at the top
+     * - "strong": Strong gradient with 50% opacity at the top
+     * - undefined: No gradient, solid background color
+     *
+     * @default undefined
+     */
+    gradient?: "light" | "medium" | "strong";
     /**
      * The type of Bubble. This will change the color of the Bubble
      * as well as the chevron location.

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v6.3.2
+  @versini/ui-bubble v6.4.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "6.3.2",
-      buildTime: "11/04/2025 03:45 PM EST",
+      version: "6.4.0",
+      buildTime: "11/05/2025 08:07 PM EST",
       homepage: "https://github.com/aversini/ui-components",
       license: "MIT",
     };
@@ -43,10 +43,31 @@ const getBubbleSizesClasses = ({ kind, noMaxWidth })=>{
         "lg:max-w-3xl": kind === "left" && !noMaxWidth
     });
 };
-const getBubbleColorClasses = ({ kind })=>{
+const getBubbleColorClasses = ({ kind, gradient })=>{
+    // No gradient - solid colors
+    if (!gradient) {
+        return clsx({
+            "bg-surface-light dark:bg-surface-dark": kind === "left",
+            "bg-surface-accent": kind === "right"
+        });
+    }
+    // Gradient presets based on intensity
+    if (gradient === "light") {
+        return clsx({
+            "bg-gradient-to-b from-surface-light/80 to-surface-light dark:from-surface-dark/80 dark:to-surface-dark": kind === "left",
+            "bg-gradient-to-b from-surface-accent/80 to-surface-accent": kind === "right"
+        });
+    }
+    if (gradient === "medium") {
+        return clsx({
+            "bg-gradient-to-b from-surface-light/65 to-surface-light dark:from-surface-dark/65 dark:to-surface-dark": kind === "left",
+            "bg-gradient-to-b from-surface-accent/65 to-surface-accent": kind === "right"
+        });
+    }
+    // gradient === "strong"
     return clsx({
-        "bg-surface-light dark:bg-surface-dark": kind === "left",
-        "bg-surface-accent": kind === "right"
+        "bg-gradient-to-b from-surface-light/50 to-surface-light dark:from-surface-dark/50 dark:to-surface-dark": kind === "left",
+        "bg-gradient-to-b from-surface-accent/50 to-surface-accent": kind === "right"
     });
 };
 const getBubbleTypographyClasses = ({ kind })=>{
@@ -68,7 +89,7 @@ const getBubbleBorderClasses = ({ kind, tail })=>{
         });
     }
 };
-const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail })=>{
+const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail, gradient })=>{
     const wrapper = clsx(BUBBLE_CLASSNAME, `${BUBBLE_CLASSNAME}-${kind}`, "flex items-start", {
         "flex-row-reverse": kind === "right"
     }, className);
@@ -78,7 +99,8 @@ const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail
     }), getBubbleTypographyClasses({
         kind
     }), getBubbleColorClasses({
-        kind
+        kind,
+        gradient
     }), getBubbleBorderClasses({
         kind,
         tail
@@ -106,14 +128,15 @@ const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail
 
 // Special symbol to represent an empty footer row that should maintain its height
 const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
-const Bubble = ({ children, kind = "left", className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false })=>{
+const Bubble = ({ children, kind = "left", className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false, gradient })=>{
     const [copied, setCopied] = useState(false);
     const bubbleClasses = getBubbleClasses({
         kind,
         className,
         contentClassName,
         noMaxWidth,
-        tail
+        tail,
+        gradient
     });
     const isCopyToClipboardEnabled = Boolean(copyToClipboard) && (typeof copyToClipboard === "function" || typeof copyToClipboard === "string" || typeof children === "string");
     // copy to clipboard function

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "6.3.2",
+	"version": "6.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -50,5 +50,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
+	"gitHead": "5d1f1fb9e759b875e7829b857494f1397ec14f4e"
 }