@luscii-healthtech/web-ui 21.2.2 → 21.2.4
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/index.development.js +13 -6
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui-tailwind.css +30 -4
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1890,7 +1890,8 @@ const Tag = (_a) => {
|
|
|
1890
1890
|
};
|
|
1891
1891
|
|
|
1892
1892
|
function ChatBubble(props) {
|
|
1893
|
-
const { as: Component = "div", children, className, readReceipt, color = "blue", tipPosition } = props, rest = __rest(props, ["as", "children", "className", "readReceipt", "color", "tipPosition"]);
|
|
1893
|
+
const { as: Component = "div", children, className, sender: _, timestamp: __, readReceipt, color = "blue", tipPosition } = props, rest = __rest(props, ["as", "children", "className", "sender", "timestamp", "readReceipt", "color", "tipPosition"]);
|
|
1894
|
+
const isInteractive = (Component === "button" || Component === "a") && !rest.disabled;
|
|
1894
1895
|
const tipPositionClasses = classNames__default.default({
|
|
1895
1896
|
"ui-hidden": !tipPosition,
|
|
1896
1897
|
"-ui-left-[11px] -ui-top-[11px] ui-rotate-45": tipPosition === "top-left",
|
|
@@ -1904,18 +1905,24 @@ function ChatBubble(props) {
|
|
|
1904
1905
|
});
|
|
1905
1906
|
const tipColorClasses = classNames__default.default("ui-border-transparent", {
|
|
1906
1907
|
"ui-border-b-blue-100 ui-border-r-blue-100": color === "blue",
|
|
1907
|
-
"ui-border-b-slate-100 ui-border-r-slate-100": color === "grey"
|
|
1908
|
+
"ui-border-b-slate-100 ui-border-r-slate-100": color === "grey",
|
|
1909
|
+
"group-hover/chat-bubble:ui-border-b-blue-50 group-hover/chat-bubble:ui-border-r-blue-50": isInteractive && color === "blue",
|
|
1910
|
+
"group-hover/chat-bubble:ui-border-b-slate-50 group-hover/chat-bubble:ui-border-r-slate-50": isInteractive && color === "grey"
|
|
1908
1911
|
});
|
|
1912
|
+
const transitionClasses = "ui-transition-colors ui-duration-150 ui-ease-out";
|
|
1909
1913
|
return React__namespace.default.createElement(
|
|
1910
1914
|
Component,
|
|
1911
|
-
Object.assign({}, rest, { className: classNames__default.default({
|
|
1915
|
+
Object.assign({}, rest, { className: classNames__default.default("ui-group/chat-bubble ui-text-left", {
|
|
1912
1916
|
"ui-pl-[16px]": tipPosition === "top-left" || tipPosition === "bottom-left",
|
|
1913
1917
|
"ui-pr-[16px]": tipPosition === "top-right" || tipPosition === "bottom-right"
|
|
1914
|
-
}, className) }),
|
|
1918
|
+
}, transitionClasses, className) }),
|
|
1915
1919
|
React__namespace.default.createElement(
|
|
1916
1920
|
"div",
|
|
1917
|
-
{ className: classNames__default.default(backgroundColorClasses, "ui-relative ui-grid ui-gap-xxs ui-p-m ui-radius-m"
|
|
1918
|
-
|
|
1921
|
+
{ className: classNames__default.default("ui-transition-colors ui-duration-150 ui-ease-out", backgroundColorClasses, "ui-relative ui-grid ui-gap-xxs ui-p-m ui-radius-m", {
|
|
1922
|
+
"group-hover/chat-bubble:ui-bg-blue-50": isInteractive && color === "blue",
|
|
1923
|
+
"group-hover/chat-bubble:ui-bg-slate-50": isInteractive && color === "grey"
|
|
1924
|
+
}) },
|
|
1925
|
+
React__namespace.default.createElement("div", { className: classNames__default.default(tipColorClasses, tipPositionClasses, transitionClasses, "ui-absolute ui-h-[11px] ui-w-[11px] ui-transform ui-border-[11px]") }),
|
|
1919
1926
|
React__namespace.default.createElement(Meta, Object.assign({}, props)),
|
|
1920
1927
|
React__namespace.default.createElement(Content, null, children),
|
|
1921
1928
|
React__namespace.default.createElement("div", { className: "ui-absolute ui-radius-m" }),
|