@versini/ui-bubble 11.0.4 → 11.0.5
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.
- package/dist/983.js +7 -0
- package/dist/components/Bubble/Bubble.js +89 -6
- package/dist/components/BubbleConstants/BubbleConstants.js +1 -3
- package/dist/components/BubbleCopy/BubbleCopy.js +2 -8
- package/package.json +3 -3
- package/dist/common/constants.js +0 -10
- package/dist/components/Bubble/BubbleTypes.js +0 -9
- package/dist/components/Bubble/utilities.js +0 -99
- package/dist/components/BubbleCopy/BubbleCopyTypes.js +0 -11
- package/dist/components/index.js +0 -20
package/dist/983.js
ADDED
|
@@ -1,16 +1,99 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-bubble v11.0.
|
|
2
|
+
@versini/ui-bubble v11.0.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
6
|
+
import clsx from "clsx";
|
|
7
|
+
import { jsxs, jsx } from "../../983.js";
|
|
8
8
|
|
|
9
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
const BUBBLE_CLASSNAME = "av-bubble";
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
const getBubbleSizesClasses = ({ kind, noMaxWidth })=>{
|
|
15
|
+
return clsx("px-4 py-2", {
|
|
16
|
+
"max-w-xs sm:max-w-md md:max-w-2xl": !noMaxWidth,
|
|
17
|
+
"lg:max-w-3xl": kind === "left" && !noMaxWidth
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
const getBubbleColorClasses = ({ kind, gradient })=>{
|
|
21
|
+
// No gradient - solid colors
|
|
22
|
+
if (!gradient) {
|
|
23
|
+
return clsx({
|
|
24
|
+
"bg-surface-light dark:bg-surface-dark": kind === "left",
|
|
25
|
+
"bg-surface-accent": kind === "right"
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
// Gradient presets based on intensity
|
|
29
|
+
if (gradient === "light") {
|
|
30
|
+
return clsx({
|
|
31
|
+
"bg-linear-to-b from-surface-light/80 to-surface-light dark:from-surface-dark/80 dark:to-surface-dark": kind === "left",
|
|
32
|
+
"bg-linear-to-b from-surface-accent/80 to-surface-accent": kind === "right"
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
if (gradient === "medium") {
|
|
36
|
+
return clsx({
|
|
37
|
+
"bg-linear-to-b from-surface-light/65 to-surface-light dark:from-surface-dark/65 dark:to-surface-dark": kind === "left",
|
|
38
|
+
"bg-linear-to-b from-surface-accent/65 to-surface-accent": kind === "right"
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
// gradient === "strong"
|
|
42
|
+
return clsx({
|
|
43
|
+
"bg-linear-to-b from-surface-light/50 to-surface-light dark:from-surface-dark/50 dark:to-surface-dark": kind === "left",
|
|
44
|
+
"bg-linear-to-b from-surface-accent/50 to-surface-accent": kind === "right"
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
const getBubbleTypographyClasses = ({ kind })=>{
|
|
48
|
+
return clsx("prose prose-dark dark:prose-lighter", "prose-blockquote:my-1", "prose-ol:my-1 prose-ul:my-1", {
|
|
49
|
+
"text-copy-lighter": kind === "right"
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
const getBubbleBorderClasses = ({ kind, tail })=>{
|
|
53
|
+
if (tail) {
|
|
54
|
+
return clsx(`${BUBBLE_CLASSNAME}-${kind}-tail`, "rounded-3xl", "relative", "before:content-['']", "before:w-3", "before:h-2", "before:absolute", "before:bottom-0", {
|
|
55
|
+
"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",
|
|
56
|
+
"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"
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
/* v8 ignore start - no-tail edge case */ if (!tail) {
|
|
60
|
+
return clsx("rounded-b-xl", {
|
|
61
|
+
"rounded-tr-xl": kind === "left",
|
|
62
|
+
"rounded-tl-xl": kind === "right"
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
/* v8 ignore stop */ };
|
|
66
|
+
const getBubbleClasses = ({ kind, className, contentClassName, footerClassName, noMaxWidth, tail, gradient })=>{
|
|
67
|
+
const wrapper = clsx(BUBBLE_CLASSNAME, `${BUBBLE_CLASSNAME}-${kind}`, "flex items-start", {
|
|
68
|
+
"flex-row-reverse": kind === "right"
|
|
69
|
+
}, className);
|
|
70
|
+
const main = clsx(`${BUBBLE_CLASSNAME}-content`, "flex flex-col empty:hidden", getBubbleSizesClasses({
|
|
71
|
+
kind,
|
|
72
|
+
noMaxWidth
|
|
73
|
+
}), getBubbleTypographyClasses({
|
|
74
|
+
kind
|
|
75
|
+
}), getBubbleColorClasses({
|
|
76
|
+
kind,
|
|
77
|
+
gradient
|
|
78
|
+
}), getBubbleBorderClasses({
|
|
79
|
+
kind,
|
|
80
|
+
tail
|
|
81
|
+
}), contentClassName);
|
|
82
|
+
const footer = clsx("pr-2 pt-1 text-end text-xs text-copy-light", footerClassName);
|
|
83
|
+
const action = clsx("flex flex-col-reverse sm:flex-row", {
|
|
84
|
+
"ml-2": kind === "left" && !tail,
|
|
85
|
+
"mr-2": kind === "right" && !tail,
|
|
86
|
+
"ml-1": kind === "left" && tail,
|
|
87
|
+
"mr-1": kind === "right" && tail
|
|
88
|
+
});
|
|
89
|
+
return {
|
|
90
|
+
wrapper,
|
|
91
|
+
main,
|
|
92
|
+
footer,
|
|
93
|
+
action
|
|
94
|
+
};
|
|
95
|
+
};
|
|
12
96
|
|
|
13
|
-
;// CONCATENATED MODULE: ./src/components/Bubble/Bubble.tsx
|
|
14
97
|
|
|
15
98
|
|
|
16
99
|
/**
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-bubble v11.0.
|
|
2
|
+
@versini/ui-bubble v11.0.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
;// CONCATENATED MODULE: ./src/components/BubbleConstants/BubbleConstants.tsx
|
|
8
6
|
// Side-effect free constants for ui-bubble.
|
|
9
7
|
/**
|
|
10
8
|
* A special footer item that creates an empty row maintaining height.
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-bubble v11.0.
|
|
2
|
+
@versini/ui-bubble v11.0.5
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { ButtonIcon } from "@versini/ui-button/button-icon";
|
|
8
7
|
import { IconCopied, IconCopy } from "@versini/ui-icons";
|
|
9
8
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
9
|
+
import { jsxs, Fragment, jsx } from "../../983.js";
|
|
10
10
|
|
|
11
|
-
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
12
11
|
|
|
13
|
-
;// CONCATENATED MODULE: external "@versini/ui-button/button-icon"
|
|
14
12
|
|
|
15
|
-
;// CONCATENATED MODULE: external "@versini/ui-icons"
|
|
16
13
|
|
|
17
|
-
;// CONCATENATED MODULE: external "react"
|
|
18
|
-
|
|
19
|
-
;// CONCATENATED MODULE: ./src/components/BubbleCopy/BubbleCopy.tsx
|
|
20
14
|
|
|
21
15
|
|
|
22
16
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-bubble",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@tailwindcss/typography": "0.5.19",
|
|
57
|
-
"@versini/ui-button": "11.3.
|
|
57
|
+
"@versini/ui-button": "11.3.5",
|
|
58
58
|
"@versini/ui-icons": "4.16.1",
|
|
59
59
|
"clsx": "2.1.1",
|
|
60
60
|
"tailwindcss": "4.1.18"
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"sideEffects": [
|
|
63
63
|
"**/*.css"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "e1f66fb685ddf40b22301f1fe766a2c56ddc4388"
|
|
66
66
|
}
|
package/dist/common/constants.js
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-bubble v11.0.4
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import clsx from "clsx";
|
|
7
|
-
import { BUBBLE_CLASSNAME } from "../../common/constants.js";
|
|
8
|
-
|
|
9
|
-
;// CONCATENATED MODULE: external "clsx"
|
|
10
|
-
|
|
11
|
-
;// CONCATENATED MODULE: external "../../common/constants.js"
|
|
12
|
-
|
|
13
|
-
;// CONCATENATED MODULE: ./src/components/Bubble/utilities.ts
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const getBubbleSizesClasses = ({ kind, noMaxWidth })=>{
|
|
17
|
-
return clsx("px-4 py-2", {
|
|
18
|
-
"max-w-xs sm:max-w-md md:max-w-2xl": !noMaxWidth,
|
|
19
|
-
"lg:max-w-3xl": kind === "left" && !noMaxWidth
|
|
20
|
-
});
|
|
21
|
-
};
|
|
22
|
-
const getBubbleColorClasses = ({ kind, gradient })=>{
|
|
23
|
-
// No gradient - solid colors
|
|
24
|
-
if (!gradient) {
|
|
25
|
-
return clsx({
|
|
26
|
-
"bg-surface-light dark:bg-surface-dark": kind === "left",
|
|
27
|
-
"bg-surface-accent": kind === "right"
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
// Gradient presets based on intensity
|
|
31
|
-
if (gradient === "light") {
|
|
32
|
-
return clsx({
|
|
33
|
-
"bg-linear-to-b from-surface-light/80 to-surface-light dark:from-surface-dark/80 dark:to-surface-dark": kind === "left",
|
|
34
|
-
"bg-linear-to-b from-surface-accent/80 to-surface-accent": kind === "right"
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
if (gradient === "medium") {
|
|
38
|
-
return clsx({
|
|
39
|
-
"bg-linear-to-b from-surface-light/65 to-surface-light dark:from-surface-dark/65 dark:to-surface-dark": kind === "left",
|
|
40
|
-
"bg-linear-to-b from-surface-accent/65 to-surface-accent": kind === "right"
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
// gradient === "strong"
|
|
44
|
-
return clsx({
|
|
45
|
-
"bg-linear-to-b from-surface-light/50 to-surface-light dark:from-surface-dark/50 dark:to-surface-dark": kind === "left",
|
|
46
|
-
"bg-linear-to-b from-surface-accent/50 to-surface-accent": kind === "right"
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
const getBubbleTypographyClasses = ({ kind })=>{
|
|
50
|
-
return clsx("prose prose-dark dark:prose-lighter", "prose-blockquote:my-1", "prose-ol:my-1 prose-ul:my-1", {
|
|
51
|
-
"text-copy-lighter": kind === "right"
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
const getBubbleBorderClasses = ({ kind, tail })=>{
|
|
55
|
-
if (tail) {
|
|
56
|
-
return clsx(`${BUBBLE_CLASSNAME}-${kind}-tail`, "rounded-3xl", "relative", "before:content-['']", "before:w-3", "before:h-2", "before:absolute", "before:bottom-0", {
|
|
57
|
-
"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",
|
|
58
|
-
"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"
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
/* v8 ignore start - no-tail edge case */ if (!tail) {
|
|
62
|
-
return clsx("rounded-b-xl", {
|
|
63
|
-
"rounded-tr-xl": kind === "left",
|
|
64
|
-
"rounded-tl-xl": kind === "right"
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
/* v8 ignore stop */ };
|
|
68
|
-
const getBubbleClasses = ({ kind, className, contentClassName, footerClassName, noMaxWidth, tail, gradient })=>{
|
|
69
|
-
const wrapper = clsx(BUBBLE_CLASSNAME, `${BUBBLE_CLASSNAME}-${kind}`, "flex items-start", {
|
|
70
|
-
"flex-row-reverse": kind === "right"
|
|
71
|
-
}, className);
|
|
72
|
-
const main = clsx(`${BUBBLE_CLASSNAME}-content`, "flex flex-col empty:hidden", getBubbleSizesClasses({
|
|
73
|
-
kind,
|
|
74
|
-
noMaxWidth
|
|
75
|
-
}), getBubbleTypographyClasses({
|
|
76
|
-
kind
|
|
77
|
-
}), getBubbleColorClasses({
|
|
78
|
-
kind,
|
|
79
|
-
gradient
|
|
80
|
-
}), getBubbleBorderClasses({
|
|
81
|
-
kind,
|
|
82
|
-
tail
|
|
83
|
-
}), contentClassName);
|
|
84
|
-
const footer = clsx("pr-2 pt-1 text-end text-xs text-copy-light", footerClassName);
|
|
85
|
-
const action = clsx("flex flex-col-reverse sm:flex-row", {
|
|
86
|
-
"ml-2": kind === "left" && !tail,
|
|
87
|
-
"mr-2": kind === "right" && !tail,
|
|
88
|
-
"ml-1": kind === "left" && tail,
|
|
89
|
-
"mr-1": kind === "right" && tail
|
|
90
|
-
});
|
|
91
|
-
return {
|
|
92
|
-
wrapper,
|
|
93
|
-
main,
|
|
94
|
-
footer,
|
|
95
|
-
action
|
|
96
|
-
};
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
export { getBubbleClasses };
|
package/dist/components/index.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-bubble v11.0.4
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { BUBBLE_FOOTER_EMPTY } from "./BubbleConstants/BubbleConstants.js";
|
|
7
|
-
export * from "../common/constants.js";
|
|
8
|
-
export * from "./Bubble/Bubble.js";
|
|
9
|
-
export * from "./BubbleCopy/BubbleCopy.js";
|
|
10
|
-
|
|
11
|
-
;// CONCATENATED MODULE: external "./BubbleConstants/BubbleConstants.js"
|
|
12
|
-
|
|
13
|
-
;// CONCATENATED MODULE: ./src/components/index.ts
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
// Export constants through a dedicated module entry for better tree-shaking.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export { BUBBLE_FOOTER_EMPTY };
|