@versini/ui-bubble 10.0.0 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +4 -4
  2. package/dist/common/constants.js +3 -3
  3. package/dist/components/Bubble/Bubble.d.ts +2 -2
  4. package/dist/components/Bubble/Bubble.js +5 -4
  5. package/dist/components/Bubble/BubbleTypes.d.ts +6 -0
  6. package/dist/components/Bubble/BubbleTypes.js +3 -3
  7. package/dist/components/Bubble/utilities.d.ts +2 -2
  8. package/dist/components/Bubble/utilities.js +13 -13
  9. package/dist/components/BubbleConstants/BubbleConstants.js +3 -3
  10. package/dist/components/index.js +3 -3
  11. package/package.json +2 -2
package/README.md CHANGED
@@ -152,7 +152,7 @@ function ChatExample() {
152
152
 
153
153
  ```tsx
154
154
  import { Bubble } from "@versini/ui-bubble/bubble";
155
- import { FOOTER_EMPTY } from "@versini/ui-bubble/constants";
155
+ import { BUBBLE_FOOTER_EMPTY } from "@versini/ui-bubble/constants";
156
156
 
157
157
  function AdvancedFooterExample() {
158
158
  return (
@@ -164,7 +164,7 @@ function AdvancedFooterExample() {
164
164
  footer={[
165
165
  { key: "Message ID", value: "msg-123" },
166
166
  { key: "Sent", value: "2:30 PM" },
167
- FOOTER_EMPTY, // Empty row that maintains height
167
+ BUBBLE_FOOTER_EMPTY, // Empty row that maintains height
168
168
  { key: "Delivered", value: "2:31 PM" },
169
169
  { key: "Read", value: "2:35 PM" },
170
170
  { value: "12/22/2025 2:36 PM EDT" } // Value only, no key displayed
@@ -298,9 +298,9 @@ The `footer` prop accepts an array of footer items with the following types:
298
298
  }
299
299
 
300
300
  // Empty row: maintains height for layout consistency
301
- FOOTER_EMPTY;
301
+ BUBBLE_FOOTER_EMPTY;
302
302
  ```
303
303
 
304
304
  ### Special Values
305
305
 
306
- - `FOOTER_EMPTY` - Import from `@versini/ui-bubble/constants` to create an empty footer row that maintains height
306
+ - `BUBBLE_FOOTER_EMPTY` - Import from `@versini/ui-bubble/constants` to create an empty footer row that maintains height
package/dist/common/constants.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
package/dist/components/Bubble/Bubble.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import type { BubbleProps } from "./BubbleTypes";
2
- export type { BubbleProps } from "./BubbleTypes";
3
- export declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, gradient, }: BubbleProps) => import("react/jsx-runtime").JSX.Element;
2
+ export type { BubbleFooter, BubbleFooterItem, BubbleFooterKeyValue, BubbleFooterValueOnly, BubbleProps, } from "./BubbleTypes";
3
+ export declare const Bubble: ({ children, kind, className, contentClassName, footerClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, gradient, }: BubbleProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Bubble/Bubble.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
@@ -47,12 +47,13 @@ import { getBubbleClasses } from "./utilities.js";
47
47
  */ const isFooterKeyValue = (item)=>{
48
48
  return typeof item === "object" && item !== null && "key" in item && "value" in item;
49
49
  };
50
- const Bubble = ({ children, kind = "left", className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false, gradient })=>{
50
+ const Bubble = ({ children, kind = "left", className, contentClassName, footerClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false, gradient })=>{
51
51
  const [copied, setCopied] = useState(false);
52
52
  const bubbleClasses = getBubbleClasses({
53
53
  kind,
54
54
  className,
55
55
  contentClassName,
56
+ footerClassName,
56
57
  noMaxWidth,
57
58
  tail,
58
59
  gradient
package/dist/components/Bubble/BubbleTypes.d.ts CHANGED
@@ -40,6 +40,12 @@ export type BubbleProps = {
40
40
  * allows you to add classes to the content wrapper.
41
41
  */
42
42
  contentClassName?: string;
43
+ /**
44
+ * CSS class(es) to add to the footer wrapper.
45
+ * Bubble is made of a wrapper, a main content, and a footer. This prop
46
+ * allows you to add classes to the footer wrapper.
47
+ */
48
+ footerClassName?: string;
43
49
  /**
44
50
  * Whether or not to show a "copy/paste" icon next to the Bubble.
45
51
  * - If a function is passed, it will be called with the text to copy.
package/dist/components/Bubble/BubbleTypes.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
package/dist/components/Bubble/utilities.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { BubbleProps } from "./BubbleTypes";
2
- type PickedBubbleProps = Pick<BubbleProps, "kind" | "className" | "contentClassName" | "noMaxWidth" | "tail" | "gradient">;
3
- export declare const getBubbleClasses: ({ kind, className, contentClassName, noMaxWidth, tail, gradient, }: PickedBubbleProps) => {
2
+ type PickedBubbleProps = Pick<BubbleProps, "kind" | "className" | "contentClassName" | "footerClassName" | "noMaxWidth" | "tail" | "gradient">;
3
+ export declare const getBubbleClasses: ({ kind, className, contentClassName, footerClassName, noMaxWidth, tail, gradient, }: PickedBubbleProps) => {
4
4
  wrapper: string;
5
5
  main: string;
6
6
  footer: string;
package/dist/components/Bubble/utilities.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
@@ -42,20 +42,20 @@ const getBubbleColorClasses = ({ kind, gradient })=>{
42
42
  // Gradient presets based on intensity
43
43
  if (gradient === "light") {
44
44
  return clsx({
45
- "bg-gradient-to-b from-surface-light/80 to-surface-light dark:from-surface-dark/80 dark:to-surface-dark": kind === "left",
46
- "bg-gradient-to-b from-surface-accent/80 to-surface-accent": kind === "right"
45
+ "bg-linear-to-b from-surface-light/80 to-surface-light dark:from-surface-dark/80 dark:to-surface-dark": kind === "left",
46
+ "bg-linear-to-b from-surface-accent/80 to-surface-accent": kind === "right"
47
47
  });
48
48
  }
49
49
  if (gradient === "medium") {
50
50
  return clsx({
51
- "bg-gradient-to-b from-surface-light/65 to-surface-light dark:from-surface-dark/65 dark:to-surface-dark": kind === "left",
52
- "bg-gradient-to-b from-surface-accent/65 to-surface-accent": kind === "right"
51
+ "bg-linear-to-b from-surface-light/65 to-surface-light dark:from-surface-dark/65 dark:to-surface-dark": kind === "left",
52
+ "bg-linear-to-b from-surface-accent/65 to-surface-accent": kind === "right"
53
53
  });
54
54
  }
55
55
  // gradient === "strong"
56
56
  return clsx({
57
- "bg-gradient-to-b from-surface-light/50 to-surface-light dark:from-surface-dark/50 dark:to-surface-dark": kind === "left",
58
- "bg-gradient-to-b from-surface-accent/50 to-surface-accent": kind === "right"
57
+ "bg-linear-to-b from-surface-light/50 to-surface-light dark:from-surface-dark/50 dark:to-surface-dark": kind === "left",
58
+ "bg-linear-to-b from-surface-accent/50 to-surface-accent": kind === "right"
59
59
  });
60
60
  };
61
61
  const getBubbleTypographyClasses = ({ kind })=>{
@@ -66,8 +66,8 @@ const getBubbleTypographyClasses = ({ kind })=>{
66
66
  const getBubbleBorderClasses = ({ kind, tail })=>{
67
67
  if (tail) {
68
68
  return clsx(`${BUBBLE_CLASSNAME}-${kind}-tail`, "rounded-3xl", "relative", "before:content-['']", "before:w-3", "before:h-2", "before:absolute", "before:bottom-0", {
69
- "last-bubble-right:before:right-[2px] last-bubble-right:before:border-l-[8px] last-bubble-right:before:border-l-surface-accent last-bubble-right:before:rounded-bl-[100%]": kind === "right",
70
- "last-bubble-left:before:left-[2px] last-bubble-left:before:border-r-[8px] last-bubble-left:before:border-r-surface-light last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": kind === "left"
69
+ "last-bubble-right:before:right-0.5 last-bubble-right:before:border-l-8 last-bubble-right:before:border-l-surface-accent last-bubble-right:before:rounded-bl-[100%]": kind === "right",
70
+ "last-bubble-left:before:left-0.5 last-bubble-left:before:border-r-8 last-bubble-left:before:border-r-surface-light last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": kind === "left"
71
71
  });
72
72
  }
73
73
  if (!tail) {
@@ -77,7 +77,7 @@ const getBubbleBorderClasses = ({ kind, tail })=>{
77
77
  });
78
78
  }
79
79
  };
80
- const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail, gradient })=>{
80
+ const getBubbleClasses = ({ kind, className, contentClassName, footerClassName, noMaxWidth, tail, gradient })=>{
81
81
  const wrapper = clsx(BUBBLE_CLASSNAME, `${BUBBLE_CLASSNAME}-${kind}`, "flex items-start", {
82
82
  "flex-row-reverse": kind === "right"
83
83
  }, className);
@@ -93,7 +93,7 @@ const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail,
93
93
  kind,
94
94
  tail
95
95
  }), contentClassName);
96
- const footer = "pr-2 pt-1 text-end text-xs text-copy-light";
96
+ const footer = clsx("pr-2 pt-1 text-end text-xs text-copy-light", footerClassName);
97
97
  const copyButton = clsx("flex flex-col-reverse sm:flex-row", {
98
98
  "ml-2": kind === "left" && !tail,
99
99
  "mr-2": kind === "right" && !tail,
package/dist/components/BubbleConstants/BubbleConstants.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
package/dist/components/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.0
2
+ @versini/ui-bubble v10.1.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_BUBBLE__) {
7
7
  window.__VERSINI_UI_BUBBLE__ = {
8
- version: "10.0.0",
9
- buildTime: "12/22/2025 02:27 PM EST",
8
+ version: "10.1.0",
9
+ buildTime: "12/22/2025 07:40 PM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-bubble",
11
11
  license: "MIT",
12
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-bubble",
3
- "version": "10.0.0",
3
+ "version": "10.1.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -58,5 +58,5 @@
58
58
  "sideEffects": [
59
59
  "**/*.css"
60
60
  ],
61
- "gitHead": "14e58b399a479e202fc1e384ad6e8170665d0244"
61
+ "gitHead": "b6c978f58a022361de91a6202d322c1109163761"
62
62
  }