@versini/ui-bubble 10.0.1 → 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 (10) hide show
  1. package/dist/common/constants.js +3 -3
  2. package/dist/components/Bubble/Bubble.d.ts +1 -1
  3. package/dist/components/Bubble/Bubble.js +5 -4
  4. package/dist/components/Bubble/BubbleTypes.d.ts +6 -0
  5. package/dist/components/Bubble/BubbleTypes.js +3 -3
  6. package/dist/components/Bubble/utilities.d.ts +2 -2
  7. package/dist/components/Bubble/utilities.js +13 -13
  8. package/dist/components/BubbleConstants/BubbleConstants.js +3 -3
  9. package/dist/components/index.js +3 -3
  10. package/package.json +2 -2
package/dist/common/constants.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-bubble v10.0.1
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.1",
9
- buildTime: "12/22/2025 03:48 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
2
  export type { BubbleFooter, BubbleFooterItem, BubbleFooterKeyValue, BubbleFooterValueOnly, 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;
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.1
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.1",
9
- buildTime: "12/22/2025 03:48 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.1
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.1",
9
- buildTime: "12/22/2025 03:48 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.1
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.1",
9
- buildTime: "12/22/2025 03:48 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.1
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.1",
9
- buildTime: "12/22/2025 03:48 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.1
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.1",
9
- buildTime: "12/22/2025 03:48 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.1",
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": "c129d519f4afee8d1fe8a2706033073fe4c38902"
61
+ "gitHead": "b6c978f58a022361de91a6202d322c1109163761"
62
62
  }