@versini/ui-bubble 9.0.1 → 10.0.0

package/README.md

@@ -64,11 +64,11 @@ function App() {
     <Bubble
       kind="right"
       tail
-      footer={{
-        Sent: "12:00 PM",
-        Delivered: "12:01 PM",
-        Read: "12:02 PM"
-      }}
+      footer={[
+        { key: "Sent", value: "12:00 PM" },
+        { key: "Delivered", value: "12:01 PM" },
+        { key: "Read", value: "12:02 PM" }
+      ]}
     >
       Message with delivery status footer.
     </Bubble>
@@ -137,7 +137,7 @@ function ChatExample() {
           key={message.id}
           kind={message.kind}
           tail
-          footer={{ Time: message.time }}
+          footer={[{ key: "Time", value: message.time }]}
           copyToClipboard
         >
           {message.text}
@@ -152,22 +152,23 @@ function ChatExample() {
 
 ```tsx
 import { Bubble } from "@versini/ui-bubble/bubble";
-import { BUBBLE_FOOTER_EMPTY } from "@versini/ui-bubble/constants";
+import { FOOTER_EMPTY } from "@versini/ui-bubble/constants";
 
 function AdvancedFooterExample() {
   return (
     <div className="space-y-4">
-      {/* Structured footer with empty row */}
+      {/* Structured footer with empty row and value-only item */}
       <Bubble
         kind="right"
         tail
-        footer={{
-          "Message ID": "msg-123",
-          Sent: "2:30 PM",
-          Status: BUBBLE_FOOTER_EMPTY, // Empty row that maintains height
-          Delivered: "2:31 PM",
-          Read: "2:35 PM"
-        }}
+        footer={[
+          { key: "Message ID", value: "msg-123" },
+          { key: "Sent", value: "2:30 PM" },
+          FOOTER_EMPTY, // Empty row that maintains height
+          { key: "Delivered", value: "2:31 PM" },
+          { key: "Read", value: "2:35 PM" },
+          { value: "12/22/2025 2:36 PM EDT" } // Value only, no key displayed
+        ]}
       >
         Message with detailed tracking information.
       </Bubble>
@@ -266,20 +267,40 @@ function CopyFunctionalityExample() {
 
 ### Bubble Props
 
-| Prop                     | Type                                                       | Default    | Description                                             |
-| ------------------------ | ---------------------------------------------------------- | ---------- | ------------------------------------------------------- |
-| children                 | `React.ReactNode`                                          | -          | The text to render in the bubble                        |
-| kind                     | `"left" \| "right"`                                        | `"left"`   | The type of Bubble (changes color and chevron location) |
-| tail                     | `boolean`                                                  | `false`    | Whether or not the Bubble should have a tail            |
-| copyToClipboard          | `boolean \| string \| ((text: any) => void)`               | -          | Copy functionality configuration                        |
-| footer                   | `{ [key: string]: string \| number \| undefined \| null }` | -          | Object depicting the extra rows for the Bubble footer   |
-| rawFooter                | `React.ReactNode`                                          | -          | Same as "footer" but accepts raw JSX                    |
-| noMaxWidth               | `boolean`                                                  | `false`    | Whether to disable default responsive max-width         |
-| className                | `string`                                                   | -          | CSS class(es) to add to the main component wrapper      |
-| contentClassName         | `string`                                                   | -          | CSS class(es) to add to the content wrapper             |
-| copyToClipboardMode      | `"dark" \| "light" \| "system" \| "alt-system"`            | `"system"` | The mode of Copy Button                                 |
-| copyToClipboardFocusMode | `"dark" \| "light" \| "system" \| "alt-system"`            | `"system"` | The focus mode for the Copy Button                      |
+| Prop                     | Type                                            | Default    | Description                                             |
+| ------------------------ | ----------------------------------------------- | ---------- | ------------------------------------------------------- |
+| children                 | `React.ReactNode`                               | -          | The text to render in the bubble                        |
+| kind                     | `"left" \| "right"`                             | `"left"`   | The type of Bubble (changes color and chevron location) |
+| tail                     | `boolean`                                       | `false`    | Whether or not the Bubble should have a tail            |
+| copyToClipboard          | `boolean \| string \| ((text: any) => void)`    | -          | Copy functionality configuration                        |
+| footer                   | `BubbleFooter` (see below)                      | -          | Array of footer items for the Bubble                    |
+| rawFooter                | `React.ReactNode`                               | -          | Same as "footer" but accepts raw JSX                    |
+| noMaxWidth               | `boolean`                                       | `false`    | Whether to disable default responsive max-width         |
+| className                | `string`                                        | -          | CSS class(es) to add to the main component wrapper      |
+| contentClassName         | `string`                                        | -          | CSS class(es) to add to the content wrapper             |
+| copyToClipboardMode      | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of Copy Button                                 |
+| copyToClipboardFocusMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode for the Copy Button                      |
+
+### Footer Types
+
+The `footer` prop accepts an array of footer items with the following types:
+
+```typescript
+// Key-value pair: renders as "key: value"
+{
+  key: string;
+  value: string | number;
+}
+
+// Value only: renders just the value without a key prefix
+{
+  value: string | number;
+}
+
+// Empty row: maintains height for layout consistency
+FOOTER_EMPTY;
+```
 
 ### Special Values
 
-- `BUBBLE_FOOTER_EMPTY` - Import from `@versini/ui-bubble/constants` to create an empty footer row that maintains height
+- `FOOTER_EMPTY` - Import from `@versini/ui-bubble/constants` to create an empty footer row that maintains height

package/dist/common/constants.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };

package/dist/components/Bubble/Bubble.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };
@@ -19,7 +19,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ButtonIcon } from "@versini/ui-button/button-icon";
 import { IconCopied, IconCopy } from "@versini/ui-icons";
 import { useEffect, useState } from "react";
-import { BUBBLE_FOOTER_EMPTY } from "../BubbleConstants/BubbleConstants.js";
 import { getBubbleClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
@@ -30,8 +29,6 @@ import { getBubbleClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "../BubbleConstants/BubbleConstants.js"
-
 ;// CONCATENATED MODULE: external "./utilities.js"
 
 ;// CONCATENATED MODULE: ./src/components/Bubble/Bubble.tsx
@@ -40,7 +37,16 @@ import { getBubbleClasses } from "./utilities.js";
 
 
 
-
+/**
+ * Type guard to check if a footer item is the BUBBLE_FOOTER_EMPTY constant.
+ */ const isFooterEmpty = (item)=>{
+    return typeof item === "object" && item !== null && "isEmpty" in item && item.isEmpty === true;
+};
+/**
+ * Type guard to check if a footer item has a key (key-value pair).
+ */ const isFooterKeyValue = (item)=>{
+    return typeof item === "object" && item !== null && "key" in item && "value" in item;
+};
 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({
@@ -86,10 +92,11 @@ const Bubble = ({ children, kind = "left", className, contentClassName, footer,
                         className: bubbleClasses.main,
                         children: children
                     }),
-                    footer && Object.keys(footer).map((key, idx)=>{
-                        const footerValue = footer[key];
-                        // Handle the FOOTER_EMPTY case
-                        if (footerValue === BUBBLE_FOOTER_EMPTY) {
+                    footer && footer.map((item, idx)=>{
+                        /**
+						 * Handle FOOTER_EMPTY - creates an empty row that maintains height.
+						 * This prevents layout shifts when the last bubble is received.
+						 */ if (isFooterEmpty(item)) {
                             return /*#__PURE__*/ jsx("div", {
                                 className: "prose-p:m-0",
                                 children: /*#__PURE__*/ jsx("p", {
@@ -100,20 +107,34 @@ const Bubble = ({ children, kind = "left", className, contentClassName, footer,
                                         children: "\xa0"
                                     })
                                 })
-                            }, `${key}-${idx}`);
+                            }, `footer-empty-${idx}`);
+                        }
+                        /**
+						 * Handle key-value pairs: `{ key: "Sent", value: "12:00 PM" }`
+						 * Renders as "Sent: 12:00 PM"
+						 */ if (isFooterKeyValue(item)) {
+                            return /*#__PURE__*/ jsx("div", {
+                                className: "prose-p:m-0",
+                                children: /*#__PURE__*/ jsxs("p", {
+                                    className: bubbleClasses.footer,
+                                    children: [
+                                        item.key,
+                                        ": ",
+                                        item.value
+                                    ]
+                                })
+                            }, `footer-kv-${idx}`);
                         }
-                        // Handle normal footer values (only if they exist)
-                        return footerValue ? /*#__PURE__*/ jsx("div", {
+                        /**
+						 * Handle value-only items: `{ value: "12:00 PM" }`
+						 * Renders just the value without a key prefix.
+						 */ return /*#__PURE__*/ jsx("div", {
                             className: "prose-p:m-0",
-                            children: /*#__PURE__*/ jsxs("p", {
+                            children: /*#__PURE__*/ jsx("p", {
                                 className: bubbleClasses.footer,
-                                children: [
-                                    key,
-                                    ": ",
-                                    footerValue
-                                ]
+                                children: item.value
                             })
-                        }, `${key}-${idx}`) : null;
+                        }, `footer-val-${idx}`);
                     }),
                     rawFooter && rawFooter
                 ]

package/dist/components/Bubble/BubbleTypes.d.ts

@@ -1,3 +1,28 @@
+import type { BUBBLE_FOOTER_EMPTY } from "../BubbleConstants/BubbleConstants";
+/**
+ * A footer item with both key and value displayed as "key: value".
+ */
+export type BubbleFooterKeyValue = {
+    key: string;
+    value: string | number;
+};
+/**
+ * A footer item with only the value displayed (no key).
+ */
+export type BubbleFooterValueOnly = {
+    value: string | number;
+};
+/**
+ * A single footer item that can be:
+ * - A key-value pair: `{ key: "Sent", value: "12:00 PM" }` → renders as "Sent: 12:00 PM"
+ * - A value-only item: `{ value: "12:00 PM" }` → renders as "12:00 PM"
+ * - An empty placeholder: `FOOTER_EMPTY` → renders an invisible row that maintains height
+ */
+export type BubbleFooterItem = BubbleFooterKeyValue | BubbleFooterValueOnly | typeof BUBBLE_FOOTER_EMPTY;
+/**
+ * Array of footer items for the Bubble component.
+ */
+export type BubbleFooter = BubbleFooterItem[];
 export type BubbleProps = {
     /**
      * The text to render in the bubble.
@@ -33,27 +58,29 @@ export type BubbleProps = {
      */
     copyToClipboardMode?: "dark" | "light" | "system" | "alt-system";
     /**
-     * Object depicting the extra rows for the Bubble.
+     * Array of footer items to display below the bubble content.
      * @example
      * ```tsx
-     * import { BUBBLE_FOOTER_EMPTY } from "@versini/ui-bubble/constants";
+     * import { FOOTER_EMPTY } from "@versini/ui-bubble/constants";
      *
      * <Bubble
-     * 	footer={{
-     * 		"Sent": "12:00 PM",
-     * 		"Delivered": "12:01 PM",
-     *    "Verified": BUBBLE_FOOTER_EMPTY,
-     * 		"Read": "12:02 PM",
-     * 	}}
+     * 	footer={[
+     * 		{ key: "Sent", value: "12:00 PM" },
+     * 		{ key: "Delivered", value: "12:01 PM" },
+     * 		FOOTER_EMPTY,
+     * 		{ key: "Read", value: "12:02 PM" },
+     * 		{ value: "12/22/2025 12:03 PM EDT" },
+     * 	]}
      * >Hello World</Bubble>
      * ```
-     * This will create a footer with 4 rows, with the row before last being
-     * empty but taking the full height of a normal row.
-     *
+     * This will create a footer with 5 rows:
+     * - "Sent: 12:00 PM"
+     * - "Delivered: 12:01 PM"
+     * - An empty row (maintains height for layout consistency)
+     * - "Read: 12:02 PM"
+     * - "12/22/2025 12:03 PM EDT" (value only, no key)
      */
-    footer?: {
-        [key: string]: string | number | undefined | null;
-    };
+    footer?: BubbleFooter;
     /**
      * The gradient intensity applied to the Bubble background.
      * - "light": Subtle gradient with 80% opacity at the top

package/dist/components/Bubble/BubbleTypes.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };

package/dist/components/Bubble/utilities.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };

package/dist/components/BubbleConstants/BubbleConstants.d.ts

@@ -1 +1,20 @@
-export declare const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
+/**
+ * A special footer item that creates an empty row maintaining height.
+ * Useful for layout consistency when a row needs to be reserved but empty.
+ *
+ * @example
+ * ```tsx
+ * import { BUBBLE_FOOTER_EMPTY } from "@versini/ui-bubble/constants";
+ *
+ * <Bubble
+ * 	footer={[
+ * 		{ key: "Sent", value: "12:00 PM" },
+ * 		BUBBLE_FOOTER_EMPTY,
+ * 		{ key: "Read", value: "12:02 PM" },
+ * 	]}
+ * >Hello World</Bubble>
+ * ```
+ */
+export declare const BUBBLE_FOOTER_EMPTY: {
+    readonly isEmpty: true;
+};

package/dist/components/BubbleConstants/BubbleConstants.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };
@@ -18,6 +18,24 @@ try {
 
 ;// CONCATENATED MODULE: ./src/components/BubbleConstants/BubbleConstants.tsx
 // Side-effect free constants for ui-bubble.
-const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
+/**
+ * A special footer item that creates an empty row maintaining height.
+ * Useful for layout consistency when a row needs to be reserved but empty.
+ *
+ * @example
+ * ```tsx
+ * import { BUBBLE_FOOTER_EMPTY } from "@versini/ui-bubble/constants";
+ *
+ * <Bubble
+ * 	footer={[
+ * 		{ key: "Sent", value: "12:00 PM" },
+ * 		BUBBLE_FOOTER_EMPTY,
+ * 		{ key: "Read", value: "12:02 PM" },
+ * 	]}
+ * >Hello World</Bubble>
+ * ```
+ */ const BUBBLE_FOOTER_EMPTY = {
+    isEmpty: true
+};
 
 export { BUBBLE_FOOTER_EMPTY };

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "../common/constants";
 export * from "./Bubble/Bubble";
 export type * from "./Bubble/BubbleTypes";
+export type { BubbleFooter, BubbleFooterItem, BubbleFooterKeyValue, BubbleFooterValueOnly, } from "./Bubble/BubbleTypes";
 export { BUBBLE_FOOTER_EMPTY } from "./BubbleConstants/BubbleConstants";

package/dist/components/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-bubble v9.0.1
+  @versini/ui-bubble v10.0.0
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_BUBBLE__) {
     window.__VERSINI_UI_BUBBLE__ = {
-      version: "9.0.1",
-      buildTime: "12/22/2025 10:34 AM EST",
+      version: "10.0.0",
+      buildTime: "12/22/2025 02:27 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
       license: "MIT",
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "9.0.1",
+	"version": "10.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -58,5 +58,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "934b8175b9c5408b0bb8fb5d15a1b198d36be6b9"
+	"gitHead": "14e58b399a479e202fc1e384ad6e8170665d0244"
 }