@versini/ui-bubble 10.2.4 → 11.0.0

package/README.md

@@ -13,11 +13,12 @@ The Bubble component provides chat-style message bubbles with support for footer
 - [Installation](#installation)
 - [Usage](#usage)
 - [API](#api)
+- [Migration from v10](#migration-from-v10)
 
 ## Features
 
 - **🎯 Chat Bubbles**: Left and right-aligned message bubbles with optional tails
-- **📋 Copy Functionality**: Built-in copy-to-clipboard with custom copy handling
+- **📋 Flexible Actions**: Customizable action slot with built-in copy-to-clipboard component
 - **📊 Footer Support**: Structured footer with key-value pairs or raw JSX
 - **♿ Accessible**: Keyboard navigation and screen reader support
 - **🎨 Customizable**: Multiple styling options and theme support
@@ -78,40 +79,122 @@ function App() {
 
 ### Copy to Clipboard
 
+The Bubble component uses an `action` prop that accepts a React node. For copy-to-clipboard functionality, use the `BubbleCopy` component:
+
 ```tsx
 import { Bubble } from "@versini/ui-bubble/bubble";
+import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
 
 function App() {
   return (
     <div className="space-y-4">
-      {/* Simple copy - copies the bubble content */}
-      <Bubble kind="left" copyToClipboard>
+      {/* Simple copy - pass the text to copy as children */}
+      <Bubble
+        kind="left"
+        action={
+          <BubbleCopy>Click the copy icon to copy this message.</BubbleCopy>
+        }
+      >
         Click the copy icon to copy this message.
       </Bubble>
 
-      {/* Custom copy text */}
-      <Bubble kind="left" copyToClipboard="Custom text to copy">
-        This will copy custom text instead of the bubble content.
-      </Bubble>
-
-      {/* Custom copy function */}
+      {/* With custom copy button styling */}
       <Bubble
-        kind="left"
-        copyToClipboard={(text) => {
-          navigator.clipboard.writeText(`Copied: ${text}`);
-        }}
+        kind="right"
+        action={
+          <BubbleCopy mode="dark" focusMode="light">
+            Copy button with custom theme.
+          </BubbleCopy>
+        }
       >
-        This uses a custom copy function.
+        Copy button with custom theme.
       </Bubble>
     </div>
   );
 }
 ```
 
+### Rich Text Copy
+
+When you need to preserve formatting (headings, lists, bold text) when pasting into applications like Microsoft Word or Google Docs, use the `richText` prop:
+
+```tsx
+import { Bubble } from "@versini/ui-bubble/bubble";
+import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
+
+function App() {
+  return (
+    <Bubble
+      kind="left"
+      action={
+        <BubbleCopy richText>
+          <h2>Recipe</h2>
+          <p>
+            A delicious <strong>chocolate cake</strong> with{" "}
+            <em>vanilla frosting</em>.
+          </p>
+          <ul>
+            <li>2 cups flour</li>
+            <li>1 cup sugar</li>
+            <li>3 eggs</li>
+          </ul>
+        </BubbleCopy>
+      }
+    >
+      <h2>Recipe</h2>
+      <p>
+        A delicious <strong>chocolate cake</strong> with{" "}
+        <em>vanilla frosting</em>.
+      </p>
+      <ul>
+        <li>2 cups flour</li>
+        <li>1 cup sugar</li>
+        <li>3 eggs</li>
+      </ul>
+    </Bubble>
+  );
+}
+```
+
+When `richText` is enabled, the clipboard will contain both HTML and plain text formats. Applications that support rich text (Word, Docs, email clients) will paste the formatted version, while plain text editors (Notepad, terminals) will receive the plain text fallback.
+
+### Custom Actions
+
+The `action` prop gives you full control over what appears next to the bubble. You can use it for custom copy behavior, dropdown menus, or any other interactive elements:
+
+```tsx
+import { Bubble } from "@versini/ui-bubble/bubble";
+
+function App() {
+  const text = "This bubble has custom action buttons.";
+  return (
+    <Bubble
+      kind="left"
+      action={
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => navigator.clipboard.writeText(text)}
+          >
+            Copy
+          </button>
+          <button type="button" onClick={() => console.info("Share:", text)}>
+            Share
+          </button>
+        </div>
+      }
+    >
+      {text}
+    </Bubble>
+  );
+}
+```
+
 ### Chat Interface
 
 ```tsx
 import { Bubble } from "@versini/ui-bubble/bubble";
+import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
 
 function ChatExample() {
   const messages = [
@@ -138,7 +221,7 @@ function ChatExample() {
           kind={message.kind}
           tail
           footer={[{ key: "Time", value: message.time }]}
-          copyToClipboard
+          action={<BubbleCopy>{message.text}</BubbleCopy>}
         >
           {message.text}
         </Bubble>
@@ -219,67 +302,30 @@ function CustomWidthExample() {
 }
 ```
 
-### Copy Functionality Variations
-
-```tsx
-import { Bubble } from "@versini/ui-bubble/bubble";
-
-function CopyFunctionalityExample() {
-  const handleCustomCopy = (text: any) => {
-    // Custom copy logic
-    const copyText = `Shared message: "${text}"`;
-    navigator.clipboard.writeText(copyText);
-    console.log("Copied with custom format:", copyText);
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Boolean - copies bubble content */}
-      <Bubble kind="left" copyToClipboard={true}>
-        Basic copy functionality
-      </Bubble>
-
-      {/* String - copies specific text */}
-      <Bubble kind="left" copyToClipboard="contact@example.com">
-        Click to copy: contact@example.com
-      </Bubble>
-
-      {/* Function - custom copy behavior */}
-      <Bubble kind="left" copyToClipboard={handleCustomCopy}>
-        Custom copy behavior with formatting
-      </Bubble>
-
-      {/* With custom copy button styling */}
-      <Bubble
-        kind="right"
-        copyToClipboard
-        copyToClipboardMode="dark"
-        copyToClipboardFocusMode="light"
-      >
-        Copy button with custom theme
-      </Bubble>
-    </div>
-  );
-}
-```
-
 ## API
 
 ### 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                   | `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                      |
+| 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            |
+| action           | `React.ReactNode`          | -        | Action slot content (e.g., BubbleCopy)                  |
+| 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             |
+
+### BubbleCopy Props
+
+| Prop      | Type                                            | Default    | Description                                                                                           |
+| --------- | ----------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- |
+| children  | `React.ReactNode`                               | -          | The content to copy (string or JSX)                                                                   |
+| richText  | `boolean`                                       | `false`    | When true, copies as HTML + plain text. Preserves formatting when pasting into Word, Google Docs, etc |
+| mode      | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of the Copy Button                                                                           |
+| focusMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode for the Button                                                                         |
 
 ### Footer Types
 
@@ -304,3 +350,71 @@ BUBBLE_FOOTER_EMPTY;
 ### Special Values
 
 - `BUBBLE_FOOTER_EMPTY` - Import from `@versini/ui-bubble/constants` to create an empty footer row that maintains height
+
+## Migration from v10
+
+Version 11 introduces a breaking change to the copy-to-clipboard functionality. The `copyToClipboard`, `copyToClipboardMode`, and `copyToClipboardFocusMode` props have been replaced with a more flexible `action` prop and a separate `BubbleCopy` component.
+
+### Before (v10)
+
+```tsx
+import { Bubble } from "@versini/ui-bubble/bubble";
+
+// Simple copy
+<Bubble copyToClipboard>Content</Bubble>
+
+// With styling
+<Bubble
+  copyToClipboard
+  copyToClipboardMode="dark"
+  copyToClipboardFocusMode="light"
+>
+  Content
+</Bubble>
+
+// Custom copy text
+<Bubble copyToClipboard="custom text">Content</Bubble>
+
+// Custom copy function
+<Bubble copyToClipboard={(text) => customCopy(text)}>Content</Bubble>
+```
+
+### After (v11)
+
+```tsx
+import { Bubble } from "@versini/ui-bubble/bubble";
+import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
+
+// Simple copy - pass text to copy as children
+<Bubble action={<BubbleCopy>Content</BubbleCopy>}>
+  Content
+</Bubble>
+
+// With styling
+<Bubble action={<BubbleCopy mode="dark" focusMode="light">Content</BubbleCopy>}>
+  Content
+</Bubble>
+
+// Custom copy text
+<Bubble action={<BubbleCopy>custom text</BubbleCopy>}>
+  Content
+</Bubble>
+
+// Custom copy function - now you have full control!
+<Bubble
+  action={
+    <button type="button" onClick={() => customCopy("Content")}>
+      Copy
+    </button>
+  }
+>
+  Content
+</Bubble>
+```
+
+### Key Changes
+
+1. **New import**: Add `import { BubbleCopy } from "@versini/ui-bubble/bubble-copy"`
+2. **Replace props**: Change `copyToClipboard` to `action={<BubbleCopy>text to copy</BubbleCopy>}`
+3. **Styling props**: Move `copyToClipboardMode` → `mode` and `copyToClipboardFocusMode` → `focusMode` on `BubbleCopy`
+4. **Full flexibility**: The `action` prop now accepts any React node, enabling custom dropdown menus, multiple buttons, or any other UI

package/dist/common/constants.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 

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

@@ -1,3 +1,3 @@
 import type { BubbleProps } from "./BubbleTypes";
 export type { BubbleFooter, BubbleFooterItem, BubbleFooterKeyValue, BubbleFooterValueOnly, BubbleProps, } from "./BubbleTypes";
-export declare const Bubble: ({ children, kind, className, contentClassName, footerClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, gradient, }: BubbleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Bubble: ({ children, kind, className, contentClassName, footerClassName, footer, rawFooter, action, noMaxWidth, tail, gradient, }: BubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Bubble/Bubble.js

@@ -1,30 +1,18 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 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 { getBubbleClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "@versini/ui-button/button-icon"
-
-;// CONCATENATED MODULE: external "@versini/ui-icons"
-
-;// CONCATENATED MODULE: external "react"
-
 ;// CONCATENATED MODULE: external "./utilities.js"
 
 ;// CONCATENATED MODULE: ./src/components/Bubble/Bubble.tsx
 
 
-
-
-
 /**
  * Type guard to check if a footer item is the BUBBLE_FOOTER_EMPTY constant.
  */ const isFooterEmpty = (item)=>{
@@ -35,8 +23,7 @@ import { getBubbleClasses } from "./utilities.js";
  */ const isFooterKeyValue = (item)=>{
     return typeof item === "object" && item !== null && "key" in item && "value" in item;
 };
-const Bubble = ({ children, kind = "left", className, contentClassName, footerClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false, gradient })=>{
-    const [copied, setCopied] = useState(false);
+const Bubble = ({ children, kind = "left", className, contentClassName, footerClassName, footer, rawFooter, action, noMaxWidth = false, tail = false, gradient })=>{
     const bubbleClasses = getBubbleClasses({
         kind,
         className,
@@ -46,32 +33,6 @@ const Bubble = ({ children, kind = "left", className, contentClassName, footerCl
         tail,
         gradient
     });
-    const isCopyToClipboardEnabled = Boolean(copyToClipboard) && (typeof copyToClipboard === "function" || typeof copyToClipboard === "string" || typeof children === "string");
-    // copy to clipboard function
-    /* v8 ignore start - clipboard edge cases */ const handleCopyToClipboard = ()=>{
-        setCopied(true);
-        if (typeof copyToClipboard === "function") {
-            copyToClipboard(children);
-        } else if (typeof copyToClipboard === "string") {
-            navigator.clipboard.writeText(copyToClipboard);
-        } else if (typeof children === "string") {
-            navigator.clipboard.writeText(children);
-        }
-    };
-    /* v8 ignore stop */ // after 3 seconds, reset the copied state
-    useEffect(()=>{
-        let timeoutId;
-        if (copied) {
-            timeoutId = window.setTimeout(()=>{
-                setCopied(false);
-            }, 3000);
-        }
-        return ()=>{
-            clearTimeout(timeoutId);
-        };
-    }, [
-        copied
-    ]);
     return /*#__PURE__*/ jsxs("div", {
         className: bubbleClasses.wrapper,
         children: [
@@ -128,23 +89,9 @@ const Bubble = ({ children, kind = "left", className, contentClassName, footerCl
                     rawFooter && rawFooter
                 ]
             }),
-            isCopyToClipboardEnabled && /*#__PURE__*/ jsx("div", {
-                className: bubbleClasses.copyButton,
-                children: /*#__PURE__*/ jsx(ButtonIcon, {
-                    noBorder: true,
-                    noBackground: true,
-                    size: "small",
-                    mode: copyToClipboardMode,
-                    focusMode: copyToClipboardFocusMode,
-                    label: copied ? "Copied to clipboard" : "Copy to clipboard",
-                    onClick: handleCopyToClipboard,
-                    disabled: copied,
-                    children: copied ? /*#__PURE__*/ jsx(IconCopied, {
-                        size: "size-3"
-                    }) : /*#__PURE__*/ jsx(IconCopy, {
-                        size: "size-3"
-                    })
-                })
+            action && /*#__PURE__*/ jsx("div", {
+                className: bubbleClasses.action,
+                children: action
             })
         ]
     });

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

@@ -47,22 +47,20 @@ export type BubbleProps = {
      */
     footerClassName?: string;
     /**
-     * Whether or not to show a "copy/paste" icon next to the Bubble.
-     * - If a function is passed, it will be called with the text to copy.
-     * - If a string is passed, that string will be copied.
-     * - If a boolean is passed, the children will be copied, but only if they
-     * are of type string.
-     */
-    copyToClipboard?: boolean | string | ((text: any) => void);
-    /**
-     * The type of focus for the Copy Button. This will change the color
-     * of the focus ring around the Button.
-     */
-    copyToClipboardFocusMode?: "dark" | "light" | "system" | "alt-system";
-    /**
-     * The mode of Copy Button. This will change the color of the Button.
+     * A React node to be displayed in the action slot (typically next to the bubble).
+     * Use this for copy buttons, dropdown menus, or any other interactive elements.
+     *
+     * @example
+     * ```tsx
+     * import { Bubble } from "@versini/ui-bubble/bubble";
+     * import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
+     *
+     * <Bubble action={<BubbleCopy>Hello World</BubbleCopy>}>
+     *   Hello World
+     * </Bubble>
+     * ```
      */
-    copyToClipboardMode?: "dark" | "light" | "system" | "alt-system";
+    action?: React.ReactNode;
     /**
      * Array of footer items to display below the bubble content.
      * @example

package/dist/components/Bubble/BubbleTypes.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 

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

@@ -4,6 +4,6 @@ export declare const getBubbleClasses: ({ kind, className, contentClassName, foo
     wrapper: string;
     main: string;
     footer: string;
-    copyButton: string;
+    action: string;
 };
 export {};

package/dist/components/Bubble/utilities.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 import clsx from "clsx";
@@ -82,7 +82,7 @@ const getBubbleClasses = ({ kind, className, contentClassName, footerClassName,
         tail
     }), contentClassName);
     const footer = clsx("pr-2 pt-1 text-end text-xs text-copy-light", footerClassName);
-    const copyButton = clsx("flex flex-col-reverse sm:flex-row", {
+    const action = clsx("flex flex-col-reverse sm:flex-row", {
         "ml-2": kind === "left" && !tail,
         "mr-2": kind === "right" && !tail,
         "ml-1": kind === "left" && tail,
@@ -92,7 +92,7 @@ const getBubbleClasses = ({ kind, className, contentClassName, footerClassName,
         wrapper,
         main,
         footer,
-        copyButton
+        action
     };
 };
 

package/dist/components/BubbleConstants/BubbleConstants.js

@@ -1,6 +1,6 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 

package/dist/components/BubbleCopy/BubbleCopy.d.ts

@@ -0,0 +1,30 @@
+import type { BubbleCopyProps } from "./BubbleCopyTypes";
+export type { BubbleCopyProps } from "./BubbleCopyTypes";
+/**
+ * BubbleCopy provides a copy-to-clipboard button for use with the Bubble component.
+ * It handles the copy state, icon switching, and automatic reset after copying.
+ * Supports both plain text and rich text (HTML) copying.
+ *
+ * @example
+ * ```tsx
+ * import { Bubble } from "@versini/ui-bubble/bubble";
+ * import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
+ *
+ * // Plain text copy
+ * <Bubble action={<BubbleCopy>Hello World</BubbleCopy>}>
+ *   Hello World
+ * </Bubble>
+ *
+ * // Rich text copy (preserves formatting when pasting into Word, Docs, etc.)
+ * <Bubble action={
+ *   <BubbleCopy richText>
+ *     <h2>Title</h2>
+ *     <ul><li>Item 1</li><li>Item 2</li></ul>
+ *   </BubbleCopy>
+ * }>
+ *   <h2>Title</h2>
+ *   <ul><li>Item 1</li><li>Item 2</li></ul>
+ * </Bubble>
+ * ```
+ */
+export declare const BubbleCopy: ({ children, richText, mode, focusMode, }: BubbleCopyProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/BubbleCopy/BubbleCopy.js

@@ -0,0 +1,144 @@
+/*!
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
+*/
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ButtonIcon } from "@versini/ui-button/button-icon";
+import { IconCopied, IconCopy } from "@versini/ui-icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button/button-icon"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/BubbleCopy/BubbleCopy.tsx
+
+
+
+
+/**
+ * BubbleCopy provides a copy-to-clipboard button for use with the Bubble component.
+ * It handles the copy state, icon switching, and automatic reset after copying.
+ * Supports both plain text and rich text (HTML) copying.
+ *
+ * @example
+ * ```tsx
+ * import { Bubble } from "@versini/ui-bubble/bubble";
+ * import { BubbleCopy } from "@versini/ui-bubble/bubble-copy";
+ *
+ * // Plain text copy
+ * <Bubble action={<BubbleCopy>Hello World</BubbleCopy>}>
+ *   Hello World
+ * </Bubble>
+ *
+ * // Rich text copy (preserves formatting when pasting into Word, Docs, etc.)
+ * <Bubble action={
+ *   <BubbleCopy richText>
+ *     <h2>Title</h2>
+ *     <ul><li>Item 1</li><li>Item 2</li></ul>
+ *   </BubbleCopy>
+ * }>
+ *   <h2>Title</h2>
+ *   <ul><li>Item 1</li><li>Item 2</li></ul>
+ * </Bubble>
+ * ```
+ */ const BubbleCopy = ({ children, richText = false, mode = "system", focusMode = "system" })=>{
+    const [copied, setCopied] = useState(false);
+    const contentRef = useRef(null);
+    /* v8 ignore start - clipboard edge cases */ const handleCopyToClipboard = useCallback(async ()=>{
+        // Ensure clipboard API is available before attempting to copy
+        if (!navigator.clipboard) {
+            return;
+        }
+        try {
+            if (richText && contentRef.current && typeof ClipboardItem !== "undefined" && typeof navigator.clipboard.write === "function") {
+                // Rich text copy: write both HTML and plain text to clipboard
+                const htmlContent = contentRef.current.innerHTML;
+                const textContent = contentRef.current.innerText;
+                const clipboardItem = new ClipboardItem({
+                    "text/html": new Blob([
+                        htmlContent
+                    ], {
+                        type: "text/html"
+                    }),
+                    "text/plain": new Blob([
+                        textContent
+                    ], {
+                        type: "text/plain"
+                    })
+                });
+                await navigator.clipboard.write([
+                    clipboardItem
+                ]);
+            } else if (typeof children === "string" && typeof navigator.clipboard.writeText === "function") {
+                // Plain text copy (original behavior)
+                await navigator.clipboard.writeText(children);
+            } else if (contentRef.current && typeof navigator.clipboard.writeText === "function") {
+                // ReactNode but not richText: extract innerText for plain text copy
+                await navigator.clipboard.writeText(contentRef.current.innerText);
+            } else {
+                // Clipboard API capabilities are insufficient for the requested operation
+                return;
+            }
+            // Only set copied state after a successful clipboard write
+            setCopied(true);
+        } catch  {
+        // Swallow clipboard errors to avoid unhandled rejections
+        }
+    }, [
+        children,
+        richText
+    ]);
+    /* v8 ignore stop */ // Reset copied state after 3 seconds
+    useEffect(()=>{
+        let timeoutId;
+        if (copied) {
+            timeoutId = window.setTimeout(()=>{
+                setCopied(false);
+            }, 3000);
+        }
+        return ()=>{
+            clearTimeout(timeoutId);
+        };
+    }, [
+        copied
+    ]);
+    // Don't render if there's nothing to copy
+    if (!children) {
+        return null;
+    }
+    // Check if we need the hidden content span (for richText or non-string children)
+    const needsContentRef = richText || typeof children !== "string";
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            needsContentRef && /*#__PURE__*/ jsx("span", {
+                ref: contentRef,
+                className: "sr-only",
+                "aria-hidden": "true",
+                children: children
+            }),
+            /*#__PURE__*/ jsx(ButtonIcon, {
+                noBorder: true,
+                noBackground: true,
+                size: "small",
+                mode: mode,
+                focusMode: focusMode,
+                label: copied ? "Copied to clipboard" : "Copy to clipboard",
+                onClick: handleCopyToClipboard,
+                disabled: copied,
+                children: copied ? /*#__PURE__*/ jsx(IconCopied, {
+                    size: "size-3"
+                }) : /*#__PURE__*/ jsx(IconCopy, {
+                    size: "size-3"
+                })
+            })
+        ]
+    });
+};
+
+export { BubbleCopy };

package/dist/components/BubbleCopy/BubbleCopyTypes.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Props for the BubbleCopy component.
+ */
+export interface BubbleCopyProps {
+    /**
+     * The content to copy. Can be a string for plain text, or JSX for rich text
+     * (when used with the richText prop).
+     */
+    children: React.ReactNode;
+    /**
+     * When true, copies content as rich text (HTML) in addition to plain text.
+     * This allows pasting into applications like Word or Google Docs with
+     * formatting preserved. When false, only plain text is copied.
+     * @default false
+     */
+    richText?: boolean;
+    /**
+     * The mode of the Copy Button. This will change the color of the Button.
+     * @default "system"
+     */
+    mode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The type of focus for the Copy Button. This will change the color
+     * of the focus ring around the Button.
+     * @default "system"
+     */
+    focusMode?: "dark" | "light" | "system" | "alt-system";
+}

package/dist/components/BubbleCopy/BubbleCopyTypes.js

@@ -0,0 +1,11 @@
+/*!
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
+*/
+
+
+;// CONCATENATED MODULE: ./src/components/BubbleCopy/BubbleCopyTypes.ts
+/**
+ * Props for the BubbleCopy component.
+ */ 
+

package/dist/components/index.d.ts

@@ -3,3 +3,4 @@ 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";
+export * from "./BubbleCopy/BubbleCopy";

package/dist/components/index.js

@@ -1,11 +1,12 @@
 /*!
-  @versini/ui-bubble v10.2.4
-  © 2025 gizmette.com
+  @versini/ui-bubble v11.0.0
+  © 2026 gizmette.com
 */
 
 import { BUBBLE_FOOTER_EMPTY } from "./BubbleConstants/BubbleConstants.js";
 export * from "../common/constants.js";
 export * from "./Bubble/Bubble.js";
+export * from "./BubbleCopy/BubbleCopy.js";
 
 ;// CONCATENATED MODULE: external "./BubbleConstants/BubbleConstants.js"
 
@@ -15,4 +16,5 @@ export * from "./Bubble/Bubble.js";
 // Export constants through a dedicated module entry for better tree-shaking.
 
 
+
 export { BUBBLE_FOOTER_EMPTY };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "10.2.4",
+	"version": "11.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -17,6 +17,10 @@
 			"types": "./dist/components/Bubble/Bubble.d.ts",
 			"import": "./dist/components/Bubble/Bubble.js"
 		},
+		"./bubble-copy": {
+			"types": "./dist/components/BubbleCopy/BubbleCopy.d.ts",
+			"import": "./dist/components/BubbleCopy/BubbleCopy.js"
+		},
 		"./constants": {
 			"types": "./dist/components/BubbleConstants/BubbleConstants.d.ts",
 			"import": "./dist/components/BubbleConstants/BubbleConstants.js"
@@ -58,5 +62,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "fae53f4bd56440f7a72ed63b1a2a02b0c3b5a7e6"
+	"gitHead": "bf646259091d0f1fd23afec7efb62587d06a66a1"
 }